@memberjunction/ng-base-forms 5.37.0 → 5.38.0

package/dist/lib/toolbar/form-toolbar.component.js

@@ -1,4 +1,5 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { UUIDsEqual } from '@memberjunction/global';
 import { DEFAULT_TOOLBAR_CONFIG } from '../types/toolbar-config';
 import { DiscoverISADescendants, BuildDescendantTree } from '../isa-related-panel/isa-hierarchy-utils';
 import { BeforeSaveEventArgs, BeforeDeleteEventArgs, BeforeCancelEventArgs, BeforeHistoryViewEventArgs, BeforeListManagementEventArgs } from '../types/form-events';
@@ -62,21 +63,21 @@ function MjFormToolbarComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵelementStart(0, "button", 27);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnEdit()); });
     i0.ɵɵelement(1, "i", 13);
     i0.ɵɵelementEnd();
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵelementStart(0, "button", 28);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteClick()); });
-    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelement(1, "i", 29);
     i0.ɵɵelementEnd();
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵelementStart(0, "button", 30);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFavoriteToggle()); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -87,7 +88,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_4_Template(rf, ctx) {
     i0.ɵɵclassMap(ctx_r1.IsFavorite ? "fa-solid fa-star mj-icon--favorite" : "fa-regular fa-star");
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -97,10 +98,10 @@ function MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Templa
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵelementStart(0, "button", 31);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnHistory()); });
-    i0.ɵɵelement(1, "i", 31);
-    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Template, 2, 1, "span", 32);
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Template, 2, 1, "span", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -109,7 +110,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_5_Template(rf, ctx) {
     i0.ɵɵconditional(ctx_r1.VersionCount > 0 ? 2 : -1);
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -119,10 +120,10 @@ function MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Templa
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵelementStart(0, "button", 34);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnListManagement()); });
-    i0.ɵɵelement(1, "i", 34);
-    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template, 2, 1, "span", 35);
+    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template, 2, 1, "span", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -131,7 +132,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_6_Template(rf, ctx) {
     i0.ɵɵconditional(ctx_r1.ListCount > 0 ? 2 : -1);
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -141,10 +142,10 @@ function MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Templa
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵelementStart(0, "button", 30);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTagsPanel()); });
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Template, 2, 1, "span", 35);
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Template, 2, 1, "span", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -154,7 +155,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_7_Template(rf, ctx) {
 } }
 function MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 39);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const button_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCustomButtonClick(button_r10)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -166,7 +167,7 @@ function MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template(rf, c
     i0.ɵɵclassMap(button_r10.Icon);
 } }
 function MjFormToolbarComponent_Conditional_1_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template, 2, 6, "button", 37);
+    i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template, 2, 6, "button", 38);
 } if (rf & 2) {
     const button_r10 = ctx.$implicit;
     i0.ɵɵconditional(button_r10.Visible !== false ? 0 : -1);
@@ -176,13 +177,13 @@ function MjFormToolbarComponent_Conditional_1_Conditional_10_Template(rf, ctx) {
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 41);
+    i0.ɵɵelementStart(0, "a", 42);
     i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template_a_click_0_listener($event) { const parent_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnParentBadgeClick(parent_r12, $event)); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 43);
-    i0.ɵɵelement(4, "i", 44);
+    i0.ɵɵelementStart(3, "span", 44);
+    i0.ɵɵelement(4, "i", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const parent_r12 = ctx.$implicit;
@@ -191,7 +192,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template(rf,
     i0.ɵɵtextInterpolate1(" ", parent_r12.Name, " ");
 } }
 function MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 40);
+    i0.ɵɵelementContainer(0, 41);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     const descendantTreeTpl_r13 = i0.ɵɵreference(5);
@@ -200,10 +201,10 @@ function MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Templ
 function MjFormToolbarComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23);
     i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template, 5, 2, null, null, _forTrack1);
-    i0.ɵɵelementStart(3, "span", 39);
+    i0.ɵɵelementStart(3, "span", 40);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Template, 1, 4, "ng-container", 40);
+    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Template, 1, 4, "ng-container", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -214,19 +215,97 @@ function MjFormToolbarComponent_Conditional_1_Conditional_11_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.DescendantTree.length > 0 ? 5 : -1);
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
+} }
+function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_For_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 58);
+} }
+function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_For_11_Template_div_click_0_listener() { const v_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnVariantClick(v_r17.ID)); });
+    i0.ɵɵelementStart(1, "div", 54)(2, "span", 55);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 57);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(6, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_For_11_Conditional_6_Template, 1, 0, "i", 58);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const v_r17 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("current", v_r17.ID === ctx_r1.CurrentVariantID)("inactive", v_r17.Status !== "Active");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(v_r17.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.VariantSubtitle(v_r17));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(v_r17.ID === ctx_r1.CurrentVariantID ? 6 : -1);
+} }
+function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnClearFilter()); });
-    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("mousedown", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.preventDefault()); })("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 53);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnVariantClick(null)); });
+    i0.ɵɵelementStart(2, "div", 54)(3, "span", 55);
+    i0.ɵɵtext(4, " Default form ");
+    i0.ɵɵelementStart(5, "span", 56);
+    i0.ɵɵtext(6, "(default)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "span", 57);
+    i0.ɵɵtext(8, "CodeGen-generated Angular fallback");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(9, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Conditional_9_Template, 1, 0, "i", 58);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(10, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_For_11_Template, 7, 7, "div", 59, _forTrack1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("current", !ctx_r1.CurrentVariantID);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional(!ctx_r1.CurrentVariantID ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.Variants);
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MjFormToolbarComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45)(1, "input", 49);
-    i0.ɵɵlistener("input", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterInput($event)); });
+    i0.ɵɵelementStart(0, "div", 46)(1, "button", 47);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleVariantMenu()); })("blur", function MjFormToolbarComponent_Conditional_1_Conditional_13_Template_button_blur_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.CloseVariantMenu()); });
+    i0.ɵɵelement(2, "i", 48);
+    i0.ɵɵelementStart(3, "span", 49);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 50);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template, 12, 3, "div", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("open", ctx_r1.VariantMenuOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", "Form variant: " + ctx_r1.CurrentVariantLabel + " \u2014 click to change");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.CurrentVariantLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.VariantMenuOpen ? 6 : -1);
+} }
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 67);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnClearFilter()); });
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template, 2, 0, "button", 50);
+} }
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 61)(1, "input", 65);
+    i0.ɵɵlistener("input", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterInput($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Conditional_2_Template, 2, 0, "button", 66);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -236,15 +315,15 @@ function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Templ
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.SearchFilter ? 2 : -1);
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnExpandAll()); });
-    i0.ɵɵelement(1, "i", 54);
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnExpandAll()); });
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 55);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCollapseAll()); });
-    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementStart(2, "button", 71);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCollapseAll()); });
+    i0.ɵɵelement(3, "i", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -252,24 +331,24 @@ function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_2_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.ExpandedSectionCount === 0);
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 57);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetSectionOrder()); });
-    i0.ɵɵelement(1, "i", 58);
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 73);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetSectionOrder()); });
+    i0.ɵɵelement(1, "i", 74);
     i0.ɵɵelementEnd();
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnManageSections()); });
-    i0.ɵɵelement(1, "i", 60);
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 75);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnManageSections()); });
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementEnd();
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnToggleWidthMode()); });
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnToggleWidthMode()); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -278,13 +357,13 @@ function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_5_Templ
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.WidthMode === "centered" ? "fa-solid fa-arrows-left-right-to-line" : "fa-solid fa-compress");
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template, 3, 4, "div", 45);
-    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_2_Template, 4, 2);
-    i0.ɵɵconditionalCreate(3, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_3_Template, 2, 0, "button", 46);
-    i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_4_Template, 2, 0, "button", 47);
-    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_5_Template, 2, 3, "button", 48);
+function MjFormToolbarComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_1_Template, 3, 4, "div", 61);
+    i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_2_Template, 4, 2);
+    i0.ɵɵconditionalCreate(3, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_3_Template, 2, 0, "button", 62);
+    i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_4_Template, 2, 0, "button", 63);
+    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_14_Conditional_5_Template, 2, 3, "button", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -299,8 +378,8 @@ function MjFormToolbarComponent_Conditional_1_Conditional_13_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Config.ShowWidthToggle ? 5 : -1);
 } }
-function MjFormToolbarComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 25);
+function MjFormToolbarComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 26);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.AdditionalActionsTemplate);
@@ -318,9 +397,10 @@ function MjFormToolbarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(10, MjFormToolbarComponent_Conditional_1_Conditional_10_Template, 1, 0, "div", 22);
     i0.ɵɵconditionalCreate(11, MjFormToolbarComponent_Conditional_1_Conditional_11_Template, 6, 2, "div", 23);
     i0.ɵɵelement(12, "div", 4);
-    i0.ɵɵconditionalCreate(13, MjFormToolbarComponent_Conditional_1_Conditional_13_Template, 6, 5, "div", 24);
-    i0.ɵɵconditionalCreate(14, MjFormToolbarComponent_Conditional_1_Conditional_14_Template, 1, 1, "ng-container", 25);
-    i0.ɵɵprojection(15);
+    i0.ɵɵconditionalCreate(13, MjFormToolbarComponent_Conditional_1_Conditional_13_Template, 7, 5, "div", 24);
+    i0.ɵɵconditionalCreate(14, MjFormToolbarComponent_Conditional_1_Conditional_14_Template, 6, 5, "div", 25);
+    i0.ɵɵconditionalCreate(15, MjFormToolbarComponent_Conditional_1_Conditional_15_Template, 1, 1, "ng-container", 26);
+    i0.ɵɵprojection(16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -344,37 +424,39 @@ function MjFormToolbarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Config.ShowEntityHierarchy && ctx_r1.IsInHierarchy ? 11 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.Config.ShowSectionControls ? 13 : -1);
+    i0.ɵɵconditional(ctx_r1.ShowVariantPickerButton ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.AdditionalActionsTemplate ? 14 : -1);
+    i0.ɵɵconditional(ctx_r1.Config.ShowSectionControls ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.AdditionalActionsTemplate ? 15 : -1);
 } }
 function MjFormToolbarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
-    i0.ɵɵelementStart(1, "div", 63);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 64)(3, "h3");
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
+    i0.ɵɵelementStart(1, "div", 79);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r24); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 80)(3, "h3");
     i0.ɵɵtext(4, "Discard Changes?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 65);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
-    i0.ɵɵelement(6, "i", 52);
+    i0.ɵɵelementStart(5, "button", 81);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
+    i0.ɵɵelement(6, "i", 68);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 66)(8, "p");
+    i0.ɵɵelementStart(7, "div", 82)(8, "p");
     i0.ɵɵtext(9, "You have ");
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 67)(14, "button", 68);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardConfirm()); });
+    i0.ɵɵelementStart(13, "div", 83)(14, "button", 84);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardConfirm()); });
     i0.ɵɵelement(15, "i", 10);
     i0.ɵɵtext(16, " Discard Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 69);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
+    i0.ɵɵelementStart(17, "button", 85);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
     i0.ɵɵtext(18, " Keep Editing ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -385,99 +467,99 @@ function MjFormToolbarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate2(" unsaved change", ctx_r1.DirtyFieldDisplayNames.length === 1 ? "" : "s", ". Are you sure you want to discard ", ctx_r1.DirtyFieldDisplayNames.length === 1 ? "it" : "them", "?");
 } }
 function MjFormToolbarComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
-    i0.ɵɵelementStart(1, "div", 63);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 64)(3, "h3");
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
+    i0.ɵɵelementStart(1, "div", 79);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 80)(3, "h3");
     i0.ɵɵtext(4, "Confirm Deletion");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 65);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
-    i0.ɵɵelement(6, "i", 52);
+    i0.ɵɵelementStart(5, "button", 81);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
+    i0.ɵɵelement(6, "i", 68);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 66)(8, "p");
+    i0.ɵɵelementStart(7, "div", 82)(8, "p");
     i0.ɵɵtext(9, "Are you sure you want to delete this record? This action cannot be undone.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 67)(11, "button", 68);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteConfirm()); });
-    i0.ɵɵelement(12, "i", 70);
+    i0.ɵɵelementStart(10, "div", 83)(11, "button", 84);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteConfirm()); });
+    i0.ɵɵelement(12, "i", 86);
     i0.ɵɵtext(13, " Delete ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 69);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
+    i0.ɵɵelementStart(14, "button", 85);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
     i0.ɵɵtext(15, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } }
 function MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 40);
+    i0.ɵɵelementContainer(0, 41);
 } if (rf & 2) {
-    const items_r23 = i0.ɵɵnextContext(2).items;
+    const items_r27 = i0.ɵɵnextContext(2).items;
     i0.ɵɵnextContext();
     const descendantTreeTpl_r13 = i0.ɵɵreference(5);
-    i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, items_r23[0].Children));
+    i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, items_r27[0].Children));
 } }
 function MjFormToolbarComponent_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 43);
-    i0.ɵɵelement(1, "i", 44);
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "a", 72);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_0_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r22); const items_r23 = i0.ɵɵnextContext().items; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(items_r23[0].EntityName, $event)); });
-    i0.ɵɵelement(3, "i", 73);
+    i0.ɵɵelementStart(2, "a", 88);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_0_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r26); const items_r27 = i0.ɵɵnextContext().items; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(items_r27[0].EntityName, $event)); });
+    i0.ɵɵelement(3, "i", 89);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template, 1, 4, "ng-container", 40);
+    i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template, 1, 4, "ng-container", 41);
 } if (rf & 2) {
-    const items_r23 = i0.ɵɵnextContext().items;
+    const items_r27 = i0.ɵɵnextContext().items;
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", "Navigate to: " + items_r23[0].EntityName);
+    i0.ɵɵproperty("title", "Navigate to: " + items_r27[0].EntityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", items_r23[0].EntityName, " ");
+    i0.ɵɵtextInterpolate1(" ", items_r27[0].EntityName, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(items_r23[0].Children.length > 0 ? 5 : -1);
+    i0.ɵɵconditional(items_r27[0].Children.length > 0 ? 5 : -1);
 } }
 function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 40);
+    i0.ɵɵelementContainer(0, 41);
 } if (rf & 2) {
-    const item_r25 = i0.ɵɵnextContext().$implicit;
+    const item_r29 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(3);
     const descendantTreeTpl_r13 = i0.ɵɵreference(5);
-    i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, item_r25.Children));
+    i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, item_r29.Children));
 } }
 function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 74)(1, "a", 72);
-    i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template_a_click_1_listener($event) { const item_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(item_r25.EntityName, $event)); });
-    i0.ɵɵelement(2, "i", 73);
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 90)(1, "a", 88);
+    i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template_a_click_1_listener($event) { const item_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(item_r29.EntityName, $event)); });
+    i0.ɵɵelement(2, "i", 89);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template, 1, 4, "ng-container", 40);
+    i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template, 1, 4, "ng-container", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r25 = ctx.$implicit;
+    const item_r29 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", "Navigate to: " + item_r25.EntityName);
+    i0.ɵɵproperty("title", "Navigate to: " + item_r29.EntityName);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", item_r25.EntityName, " ");
+    i0.ɵɵtextInterpolate1(" ", item_r29.EntityName, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r25.Children.length > 0 ? 4 : -1);
+    i0.ɵɵconditional(item_r29.Children.length > 0 ? 4 : -1);
 } }
 function MjFormToolbarComponent_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template, 5, 3, "div", 74, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template, 5, 3, "div", 90, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const items_r23 = i0.ɵɵnextContext().items;
+    const items_r27 = i0.ɵɵnextContext().items;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(items_r23);
+    i0.ɵɵrepeater(items_r27);
 } }
 function MjFormToolbarComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_ng_template_4_Conditional_0_Template, 6, 3)(1, MjFormToolbarComponent_ng_template_4_Conditional_1_Template, 3, 0, "div", 71);
+    i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_ng_template_4_Conditional_0_Template, 6, 3)(1, MjFormToolbarComponent_ng_template_4_Conditional_1_Template, 3, 0, "div", 87);
 } if (rf & 2) {
-    const items_r23 = ctx.items;
-    i0.ɵɵconditional(items_r23.length === 1 ? 0 : items_r23.length > 1 ? 1 : -1);
+    const items_r27 = ctx.items;
+    i0.ɵɵconditional(items_r27.length === 1 ? 0 : items_r27.length > 1 ? 1 : -1);
 } }
 /**
  * Configurable form toolbar component.
@@ -555,6 +637,20 @@ export class MjFormToolbarComponent {
     HasCustomSectionOrder = false;
     /** Optional template for additional toolbar actions */
     AdditionalActionsTemplate = null;
+    /**
+     * Available form variants for this entity. When the array has >1 entry
+     * and `Config.ShowFormVariantPicker` is true, the toolbar renders a
+     * right-side "form picker" button (icon) that opens a dropdown with
+     * the Default form + each variant. Picking emits {@link VariantPicked}
+     * with the override ID, or null for the CodeGen Angular default.
+     *
+     * Shape is intentionally minimal — Generic doesn't depend on the
+     * resolver row type. Hosts shape their data into this. See
+     * {@link VariantPickerItem} on the container for the canonical shape.
+     */
+    Variants = [];
+    /** The currently-applied variant ID, or null when the Default form is active. */
+    CurrentVariantID = null;
     // ---- Outputs ----
     /** Emitted for all navigation actions (record links, hierarchy clicks, etc.) */
     Navigate = new EventEmitter();
@@ -586,6 +682,12 @@ export class MjFormToolbarComponent {
     TagsPanelToggled = new EventEmitter();
     /** Request to show dirty field changes */
     ShowChangesRequested = new EventEmitter();
+    /**
+     * Emitted when the user picks an item from the form-variant dropdown.
+     * Payload is the override ID for a specific variant, or `null` when the
+     * user picks the "Default form" row (CodeGen / Angular fallback).
+     */
+    VariantPicked = new EventEmitter();
     /** Emitted when a custom toolbar button is clicked */
     CustomButtonClick = new EventEmitter();
     // Section control outputs
@@ -916,6 +1018,56 @@ export class MjFormToolbarComponent {
             return;
         this.ShowChangesRequested.emit();
     }
+    // ── Form-variant picker ─────────────────────────────────────────
+    /** Whether the variant-picker dropdown is currently open. */
+    VariantMenuOpen = false;
+    /**
+     * True iff the toolbar should render the variant-picker button.
+     *
+     * Note the threshold is `>= 1`, NOT `> 1`. The picker menu always
+     * includes the "Default form" row (CodeGen / Angular fallback) — that
+     * row isn't in {@link Variants}; it's rendered unconditionally as the
+     * first row inside the menu. So any single variant still yields a real
+     * choice (Default vs that variant) and the picker should appear. The
+     * inline-strip implementation that this replaces used `> 1` and
+     * therefore hid the picker for entities with exactly one override,
+     * which made that override unreachable from the UI.
+     */
+    get ShowVariantPickerButton() {
+        return !!this.Config.ShowFormVariantPicker && (this.Variants?.length ?? 0) >= 1;
+    }
+    /** Label for the currently-active variant, or "Default form" when none. */
+    get CurrentVariantLabel() {
+        const v = this.Variants?.find(x => UUIDsEqual(x.ID, this.CurrentVariantID));
+        return v?.Label ?? 'Default form';
+    }
+    /** Compact subtitle for a variant menu row: "Scope · Status". */
+    VariantSubtitle(v) {
+        return `${v.Scope} · ${v.Status}`;
+    }
+    ToggleVariantMenu() {
+        this.VariantMenuOpen = !this.VariantMenuOpen;
+        this.cdr.markForCheck();
+    }
+    CloseVariantMenu() {
+        if (this.VariantMenuOpen) {
+            this.VariantMenuOpen = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * User picked a row in the variant menu. Closes the menu and emits
+     * `VariantPicked` (null → "Default form" / CodeGen Angular; UUID →
+     * specific override). No-op when the picked value matches the current.
+     */
+    OnVariantClick(variantID) {
+        this.VariantMenuOpen = false;
+        if (variantID === this.CurrentVariantID) {
+            this.cdr.markForCheck();
+            return;
+        }
+        this.VariantPicked.emit(variantID);
+    }
     /**
      * Try to call a method on the legacy form reference.
      * Returns true if the method was found and called, false otherwise.
@@ -1014,10 +1166,10 @@ export class MjFormToolbarComponent {
         this.ManageSectionsRequested.emit();
     }
     static ɵfac = function MjFormToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjFormToolbarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { Form: "Form", _deprecatedForm: [0, "form", "_deprecatedForm"], Record: "Record", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", TagCount: "TagCount", IsTagsPanelOpen: "IsTagsPanelOpen", VersionCount: "VersionCount", EntityInfo: "EntityInfo", Config: "Config", IsSaving: "IsSaving", VisibleSectionCount: "VisibleSectionCount", TotalSectionCount: "TotalSectionCount", ExpandedSectionCount: "ExpandedSectionCount", SearchFilter: "SearchFilter", ShowEmptyFields: "ShowEmptyFields", WidthMode: "WidthMode", HasCustomSectionOrder: "HasCustomSectionOrder", AdditionalActionsTemplate: "AdditionalActionsTemplate" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", TagsPanelToggled: "TagsPanelToggled", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick", FilterChange: "FilterChange", ExpandAllRequested: "ExpandAllRequested", CollapseAllRequested: "CollapseAllRequested", ShowEmptyFieldsChange: "ShowEmptyFieldsChange", WidthModeChange: "WidthModeChange", ResetSectionOrderRequested: "ResetSectionOrderRequested", ManageSectionsRequested: "ManageSectionsRequested" }, standalone: false, ngContentSelectors: _c1, decls: 6, vars: 4, consts: [["descendantTreeTpl", ""], [1, "mj-forms-edit-banner"], [1, "mj-forms-toolbar", 3, "mj-forms-toolbar--sticky"], [1, "mj-dialog-overlay"], [1, "mj-forms-toolbar-spacer"], [1, "mj-forms-edit-banner-actions"], ["title", "Save Changes", 1, "mj-forms-btn", "mj-forms-btn--primary", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-forms-btn-text"], ["title", "Discard Changes", 1, "mj-forms-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], [1, "fa-solid", "fa-circle-exclamation", "mj-forms-edit-banner-icon--dirty"], [1, "mj-forms-edit-banner-dirty"], [1, "fa-solid", "fa-pen-to-square"], [1, "mj-forms-edit-banner-text"], [1, "mj-forms-toolbar"], [1, "mj-forms-toolbar-group"], ["title", "Edit this Record", 1, "mj-forms-btn"], ["title", "Delete this Record", 1, "mj-forms-btn"], [1, "mj-forms-btn", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "title"], [1, "mj-forms-toolbar-separator"], [1, "mj-entity-hierarchy"], [1, "mj-forms-toolbar-group", "mj-section-controls"], [3, "ngTemplateOutlet"], ["title", "Edit this Record", 1, "mj-forms-btn", 3, "click"], ["title", "Delete this Record", 1, "mj-forms-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "mj-forms-btn", 3, "click", "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "click", "title"], [1, "fa-regular", "fa-clock"], [1, "mj-version-count-badge"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "click", "title"], [1, "fa-regular", "fa-bookmark"], [1, "mj-list-count-badge"], [1, "fa-solid", "fa-tags"], [1, "mj-forms-btn", 3, "class", "disabled", "title"], [1, "mj-forms-btn", 3, "click", "disabled", "title"], [1, "mj-entity-badge", "mj-entity-badge--current"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-entity-badge", "mj-entity-badge--parent", 3, "click", "title"], [1, "fa-solid", "fa-arrow-up"], [1, "mj-hierarchy-arrow"], [1, "fa-solid", "fa-chevron-right"], [1, "mj-forms-search-wrapper"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], [1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "title"], ["type", "text", "placeholder", "Search sections...", 1, "mj-section-search", 3, "input", "value"], ["title", "Clear search", 1, "mj-clear-search"], ["title", "Clear search", 1, "mj-clear-search", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Expand all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-bars-staggered"], [1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "title"], [1, "mj-dialog-overlay", 3, "click"], [1, "mj-dialog", 3, "click"], [1, "mj-dialog-header"], [1, "mj-dialog-close", 3, "click"], [1, "mj-dialog-body"], [1, "mj-dialog-footer"], [1, "mj-forms-btn", "mj-forms-btn--danger", 3, "click"], [1, "mj-forms-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "mj-descendant-chains"], [1, "mj-entity-badge", "mj-entity-badge--child", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "mj-descendant-chain"]], template: function MjFormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { Form: "Form", _deprecatedForm: [0, "form", "_deprecatedForm"], Record: "Record", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", TagCount: "TagCount", IsTagsPanelOpen: "IsTagsPanelOpen", VersionCount: "VersionCount", EntityInfo: "EntityInfo", Config: "Config", IsSaving: "IsSaving", VisibleSectionCount: "VisibleSectionCount", TotalSectionCount: "TotalSectionCount", ExpandedSectionCount: "ExpandedSectionCount", SearchFilter: "SearchFilter", ShowEmptyFields: "ShowEmptyFields", WidthMode: "WidthMode", HasCustomSectionOrder: "HasCustomSectionOrder", AdditionalActionsTemplate: "AdditionalActionsTemplate", Variants: "Variants", CurrentVariantID: "CurrentVariantID" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", TagsPanelToggled: "TagsPanelToggled", ShowChangesRequested: "ShowChangesRequested", VariantPicked: "VariantPicked", CustomButtonClick: "CustomButtonClick", FilterChange: "FilterChange", ExpandAllRequested: "ExpandAllRequested", CollapseAllRequested: "CollapseAllRequested", ShowEmptyFieldsChange: "ShowEmptyFieldsChange", WidthModeChange: "WidthModeChange", ResetSectionOrderRequested: "ResetSectionOrderRequested", ManageSectionsRequested: "ManageSectionsRequested" }, standalone: false, ngContentSelectors: _c1, decls: 6, vars: 4, consts: [["descendantTreeTpl", ""], [1, "mj-forms-edit-banner"], [1, "mj-forms-toolbar", 3, "mj-forms-toolbar--sticky"], [1, "mj-dialog-overlay"], [1, "mj-forms-toolbar-spacer"], [1, "mj-forms-edit-banner-actions"], ["title", "Save Changes", 1, "mj-forms-btn", "mj-forms-btn--primary", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-forms-btn-text"], ["title", "Discard Changes", 1, "mj-forms-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], [1, "fa-solid", "fa-circle-exclamation", "mj-forms-edit-banner-icon--dirty"], [1, "mj-forms-edit-banner-dirty"], [1, "fa-solid", "fa-pen-to-square"], [1, "mj-forms-edit-banner-text"], [1, "mj-forms-toolbar"], [1, "mj-forms-toolbar-group"], ["title", "Edit this Record", 1, "mj-forms-btn"], ["title", "Delete this Record", 1, "mj-forms-btn"], [1, "mj-forms-btn", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "title"], [1, "mj-forms-toolbar-separator"], [1, "mj-entity-hierarchy"], [1, "mj-form-variant-picker-host", 3, "open"], [1, "mj-forms-toolbar-group", "mj-section-controls"], [3, "ngTemplateOutlet"], ["title", "Edit this Record", 1, "mj-forms-btn", 3, "click"], ["title", "Delete this Record", 1, "mj-forms-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "mj-forms-btn", 3, "click", "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "click", "title"], [1, "fa-regular", "fa-clock"], [1, "mj-version-count-badge"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "click", "title"], [1, "fa-regular", "fa-bookmark"], [1, "mj-list-count-badge"], [1, "fa-solid", "fa-tags"], [1, "mj-forms-btn", 3, "class", "disabled", "title"], [1, "mj-forms-btn", 3, "click", "disabled", "title"], [1, "mj-entity-badge", "mj-entity-badge--current"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-entity-badge", "mj-entity-badge--parent", 3, "click", "title"], [1, "fa-solid", "fa-arrow-up"], [1, "mj-hierarchy-arrow"], [1, "fa-solid", "fa-chevron-right"], [1, "mj-form-variant-picker-host"], ["type", "button", 1, "mj-forms-btn", "mj-form-variant-picker-trigger", 3, "click", "blur", "title"], [1, "fa-solid", "fa-pen-ruler"], [1, "mj-form-variant-picker-current-label"], [1, "fa-solid", "fa-chevron-down", "chev"], [1, "mj-form-variant-picker-menu"], [1, "mj-form-variant-picker-menu", 3, "mousedown", "click"], [1, "mj-form-variant-picker-row", "mj-form-variant-picker-default", 3, "click"], [1, "mj-form-variant-picker-row-main"], [1, "mj-form-variant-picker-row-title"], [1, "mj-form-variant-picker-default-tag"], [1, "mj-form-variant-picker-row-sub"], [1, "fa-solid", "fa-check", "mj-form-variant-picker-check"], [1, "mj-form-variant-picker-row", 3, "current", "inactive"], [1, "mj-form-variant-picker-row", 3, "click"], [1, "mj-forms-search-wrapper"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], [1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "title"], ["type", "text", "placeholder", "Search sections...", 1, "mj-section-search", 3, "input", "value"], ["title", "Clear search", 1, "mj-clear-search"], ["title", "Clear search", 1, "mj-clear-search", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Expand all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-bars-staggered"], [1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "title"], [1, "mj-dialog-overlay", 3, "click"], [1, "mj-dialog", 3, "click"], [1, "mj-dialog-header"], [1, "mj-dialog-close", 3, "click"], [1, "mj-dialog-body"], [1, "mj-dialog-footer"], [1, "mj-forms-btn", "mj-forms-btn--danger", 3, "click"], [1, "mj-forms-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "mj-descendant-chains"], [1, "mj-entity-badge", "mj-entity-badge--child", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "mj-descendant-chain"]], template: function MjFormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_Conditional_0_Template, 13, 3, "div", 1);
-            i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Template, 16, 12, "div", 2);
+            i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Template, 17, 13, "div", 2);
             i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_2_Template, 19, 3, "div", 3);
             i0.ɵɵconditionalCreate(3, MjFormToolbarComponent_Conditional_3_Template, 16, 0, "div", 3);
             i0.ɵɵtemplate(4, MjFormToolbarComponent_ng_template_4_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
@@ -1029,11 +1181,11 @@ export class MjFormToolbarComponent {
             i0.ɵɵconditional(ctx.ShowDiscardDialog ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowDeleteDialog ? 3 : -1);
-        } }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-bottom: 2px solid var(--mj-brand-primary);\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 22px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  flex-wrap: wrap;\n  z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 24px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  white-space: nowrap;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n  box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n  border-color: transparent;\n  background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n  padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n  padding: 5px 12px;\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n  margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n\n\n.mj-forms-btn--history[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.mj-version-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  padding: 0 5px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 16px;\n  border: 2px solid var(--mj-bg-surface-card);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n  border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n  color: var(--mj-color-indigo-500);\n  border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-color-indigo-500);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-hover);\n  border-radius: var(--mj-radius-sm);\n  cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-info);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: var(--mj-radius-full);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n  border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n  border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  position: relative;\n  padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: -4px;\n  top: 50%;\n  width: 4px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n  padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 50%;\n  width: 18px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n  top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n  bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n  gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n  max-width: 180px;\n  font-size: 13px;\n  padding: 6px 28px 6px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  outline: none;\n  font-family: inherit;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n  font-weight: var(--mj-font-semibold);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 4px;\n  padding: 4px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-dialog-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 400px;\n  max-width: 550px;\n  animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px;\n  font-size: var(--mj-text-base);\n  transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n  from { transform: translateY(8px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-bottom: 2px solid var(--mj-brand-primary);\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 22px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  flex-wrap: wrap;\n  z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n  width: 1px;\n  height: 24px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  white-space: nowrap;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n  box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 15px;\n  line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n  border-color: transparent;\n  background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n  padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n  padding: 5px 12px;\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n  margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n\n\n.mj-forms-btn--history[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.mj-version-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  padding: 0 5px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 16px;\n  border: 2px solid var(--mj-bg-surface-card);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n  border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n  color: var(--mj-color-indigo-500);\n  border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-color-indigo-500);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-hover);\n  border-radius: var(--mj-radius-sm);\n  cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-info);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: var(--mj-radius-full);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n  border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n  border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  position: relative;\n  padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: -4px;\n  top: 50%;\n  width: 4px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n  padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 50%;\n  width: 18px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n  top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n  bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n  gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n  max-width: 180px;\n  font-size: 13px;\n  padding: 6px 28px 6px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  outline: none;\n  font-family: inherit;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n  font-weight: var(--mj-font-semibold);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 4px;\n  padding: 4px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-dialog-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 400px;\n  max-width: 550px;\n  animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px;\n  font-size: var(--mj-text-base);\n  transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n  from { transform: translateY(8px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n\n\n\n\n\n\n\n.mj-form-variant-picker-host[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n}\n\n.mj-form-variant-picker-trigger[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 240px;\n}\n\n.mj-form-variant-picker-trigger[_ngcontent-%COMP%]   .chev[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.mj-form-variant-picker-current-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 160px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.mj-form-variant-picker-host.open[_ngcontent-%COMP%]   .mj-form-variant-picker-trigger[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-focus);\n}\n\n.mj-form-variant-picker-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 50;\n  min-width: 280px;\n  max-height: 360px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  padding: 4px 0;\n}\n\n.mj-form-variant-picker-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n  font-size: 13px;\n  transition: background 120ms;\n}\n\n.mj-form-variant-picker-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-form-variant-picker-row.current[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-form-variant-picker-row.inactive[_ngcontent-%COMP%] {\n  opacity: 0.6;\n}\n\n.mj-form-variant-picker-row-main[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.mj-form-variant-picker-row-title[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.mj-form-variant-picker-row-sub[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-form-variant-picker-default-tag[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  margin-left: 4px;\n}\n\n.mj-form-variant-picker-default[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.mj-form-variant-picker-check[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  margin-top: 2px;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormToolbarComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n     EDIT MODE BANNER (shows above toolbar when editing)\n     ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n  <div class=\"mj-forms-edit-banner\">\n    @if (DirtyFieldDisplayNames.length > 0) {\n      <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n      <span class=\"mj-forms-edit-banner-dirty\">\n        <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n        field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n        &mdash; {{ DirtyFieldDisplayNames.join(', ') }}\n      </span>\n    } @else {\n      <i class=\"fa-solid fa-pen-to-square\"></i>\n      <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n    }\n    <div class=\"mj-forms-toolbar-spacer\"></div>\n    <div class=\"mj-forms-edit-banner-actions\">\n      <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n        <i class=\"fa-solid fa-floppy-disk\"></i>\n        <span class=\"mj-forms-btn-text\">Save Changes</span>\n      </button>\n      <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n        <i class=\"fa-solid fa-rotate-left\"></i>\n        <span class=\"mj-forms-btn-text\">Discard</span>\n      </button>\n    </div>\n  </div>\n}\n\n<!-- ============================================\n     MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n     ============================================ -->\n@if (!EditMode) {\n  <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n    <!-- Action buttons -->\n    <div class=\"mj-forms-toolbar-group\">\n      @if (Config.ShowEditButton && UserCanEdit) {\n        <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n          <i class=\"fa-solid fa-pen-to-square\"></i>\n        </button>\n      }\n      @if (Config.ShowDeleteButton && UserCanDelete) {\n        <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n          <i class=\"fa-regular fa-trash-can\"></i>\n        </button>\n      }\n      @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n        <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n          <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n        </button>\n      }\n      @if (Config.ShowHistoryButton && TracksChanges) {\n        <button class=\"mj-forms-btn mj-forms-btn--history\" (click)=\"OnHistory()\"\n          [title]=\"VersionCount > 0 ? VersionCount + ' version(s) tracked' : 'Record Changes'\">\n          <i class=\"fa-regular fa-clock\"></i>\n          @if (VersionCount > 0) {\n            <span class=\"mj-version-count-badge\">v{{ VersionCount }}</span>\n          }\n        </button>\n      }\n      @if (Config.ShowListButton) {\n        <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n          [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n          <i class=\"fa-regular fa-bookmark\"></i>\n          @if (ListCount > 0) {\n            <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n          }\n        </button>\n      }\n      @if (Config.ShowTagsButton) {\n        <button class=\"mj-forms-btn\" (click)=\"OnTagsPanel()\"\n          [title]=\"TagCount > 0 ? TagCount + ' tag(s)' : 'View tags'\">\n          <i class=\"fa-solid fa-tags\"></i>\n          @if (TagCount > 0) {\n            <span class=\"mj-list-count-badge\">{{ TagCount }}</span>\n          }\n        </button>\n      }\n\n      <!-- Custom toolbar buttons -->\n      @for (button of Config.CustomButtons; track button.Key) {\n        @if (button.Visible !== false) {\n          <button class=\"mj-forms-btn\"\n            [class]=\"button.CssClass || ''\"\n            [disabled]=\"button.Disabled || false\"\n            [title]=\"button.Description\"\n            (click)=\"OnCustomButtonClick(button)\">\n            <i [class]=\"button.Icon\"></i>\n          </button>\n        }\n      }\n    </div>\n\n    <!-- Separator before hierarchy -->\n    @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n      <div class=\"mj-forms-toolbar-separator\"></div>\n    }\n\n    <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n    @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n      <div class=\"mj-entity-hierarchy\">\n        <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n        @for (parent of ParentChain; track parent.ID) {\n          <a class=\"mj-entity-badge mj-entity-badge--parent\"\n             [title]=\"'Navigate to parent: ' + parent.Name\"\n             (click)=\"OnParentBadgeClick(parent, $event)\">\n            <i class=\"fa-solid fa-arrow-up\"></i>\n            {{ parent.Name }}\n          </a>\n          <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n        }\n\n        <!-- Current entity (always shown) -->\n        <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n        <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n        @if (DescendantTree.length > 0) {\n          <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n            [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- Spacer pushes section controls to the right -->\n    <div class=\"mj-forms-toolbar-spacer\"></div>\n\n    <!-- Section Controls -->\n    @if (Config.ShowSectionControls) {\n      <div class=\"mj-forms-toolbar-group mj-section-controls\">\n        @if (Config.ShowSectionFilter) {\n          <div class=\"mj-forms-search-wrapper\">\n            <input type=\"text\"\n              class=\"mj-section-search\"\n              [class.mj-section-search--active]=\"SearchFilter\"\n              [value]=\"SearchFilter\"\n              (input)=\"OnFilterInput($event)\"\n              placeholder=\"Search sections...\">\n            @if (SearchFilter) {\n              <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            }\n          </div>\n        }\n        @if (Config.ShowExpandCollapseAllButtons) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n            (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n            <i class=\"fa-solid fa-angles-down\"></i>\n          </button>\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            [disabled]=\"ExpandedSectionCount === 0\"\n            (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n            <i class=\"fa-solid fa-angles-up\"></i>\n          </button>\n        }\n        @if (HasCustomSectionOrder) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n            <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          </button>\n        }\n        @if (Config.ShowSectionManager) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            (click)=\"OnManageSections()\" title=\"Manage section order\">\n            <i class=\"fa-solid fa-bars-staggered\"></i>\n          </button>\n        }\n        @if (Config.ShowWidthToggle) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            (click)=\"OnToggleWidthMode()\"\n            [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n            <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Additional actions slot -->\n    @if (AdditionalActionsTemplate) {\n      <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n    }\n    <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n  </div>\n}\n\n<!-- ============================================\n     DISCARD CHANGES CONFIRMATION DIALOG\n     ============================================ -->\n@if (ShowDiscardDialog) {\n  <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n    <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-dialog-header\">\n        <h3>Discard Changes?</h3>\n        <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-dialog-body\">\n        <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n      </div>\n      <div class=\"mj-dialog-footer\">\n        <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n          <i class=\"fa-solid fa-rotate-left\"></i>\n          Discard Changes\n        </button>\n        <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n          Keep Editing\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- ============================================\n     DELETE CONFIRMATION DIALOG\n     ============================================ -->\n@if (ShowDeleteDialog) {\n  <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n    <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-dialog-header\">\n        <h3>Confirm Deletion</h3>\n        <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-dialog-body\">\n        <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n      </div>\n      <div class=\"mj-dialog-footer\">\n        <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n          <i class=\"fa-solid fa-trash-can\"></i>\n          Delete\n        </button>\n        <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n     Single child at a level \u2192 inline with chevron.\n     Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n  @if (items.length === 1) {\n    <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n    <a class=\"mj-entity-badge mj-entity-badge--child\"\n       [title]=\"'Navigate to: ' + items[0].EntityName\"\n       (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n      <i class=\"fa-solid fa-arrow-down\"></i>\n      {{ items[0].EntityName }}\n    </a>\n    @if (items[0].Children.length > 0) {\n      <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n        [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n    }\n  } @else if (items.length > 1) {\n    <div class=\"mj-descendant-chains\">\n      @for (item of items; track item.EntityName) {\n        <div class=\"mj-descendant-chain\">\n          <a class=\"mj-entity-badge mj-entity-badge--child\"\n             [title]=\"'Navigate to: ' + item.EntityName\"\n             (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n            <i class=\"fa-solid fa-arrow-down\"></i>\n            {{ item.EntityName }}\n          </a>\n          @if (item.Children.length > 0) {\n            <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n              [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n", styles: ["/* ============================================\n   FORM TOOLBAR \u2014 uses global --mj-* design tokens\n   ============================================ */\n:host {\n  display: block;\n}\n\n/* ============================================\n   EDIT BANNER\n   ============================================ */\n.mj-forms-edit-banner {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-bottom: 2px solid var(--mj-brand-primary);\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner > i {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty {\n  color: var(--mj-status-warning);\n  font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty strong {\n  color: var(--mj-status-warning);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* ============================================\n   MAIN TOOLBAR\n   ============================================ */\n.mj-forms-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 22px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  flex-wrap: wrap;\n  z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n  position: sticky;\n  top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n  width: 1px;\n  height: 24px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n  flex: 1;\n}\n\n/* ============================================\n   BUTTONS\n   ============================================ */\n.mj-forms-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  white-space: nowrap;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.mj-forms-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn:active {\n  transform: translateY(0);\n  box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n  font-size: 15px;\n  line-height: 1;\n}\n\n.mj-forms-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost {\n  border-color: transparent;\n  background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n  padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n  padding: 5px 12px;\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm i {\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text {\n  margin-left: 2px;\n}\n\n.mj-icon--favorite {\n  color: var(--mj-status-warning);\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n  position: relative;\n}\n\n/* History button with version badge */\n.mj-forms-btn--history {\n  position: relative;\n}\n\n.mj-version-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  padding: 0 5px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 16px;\n  border: 2px solid var(--mj-bg-surface-card);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.mj-list-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* ============================================\n   IS-A ENTITY HIERARCHY\n   ============================================ */\n.mj-entity-hierarchy {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n  border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n  font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n  color: var(--mj-color-indigo-500);\n  border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent:hover {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-color-indigo-500);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current {\n  font-weight: var(--mj-font-semibold);\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-hover);\n  border-radius: var(--mj-radius-sm);\n  cursor: default;\n}\n\n.mj-entity-badge--child {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-info);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.mj-child-count {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: var(--mj-radius-full);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf {\n  border-style: dashed;\n}\n\n.mj-entity-badge--root {\n  border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  position: relative;\n  padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n  content: '';\n  position: absolute;\n  left: -4px;\n  top: 50%;\n  width: 4px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n  padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 50%;\n  width: 18px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n  top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n  bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n   SECTION CONTROLS\n   ============================================ */\n.mj-section-controls {\n  gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.mj-section-search {\n  max-width: 180px;\n  font-size: 13px;\n  padding: 6px 28px 6px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  outline: none;\n  font-family: inherit;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-section-search:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n  font-weight: var(--mj-font-semibold);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-clear-search {\n  position: absolute;\n  right: 4px;\n  padding: 4px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  line-height: 1;\n}\n\n.mj-clear-search:hover {\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   DIALOG (lightweight inline)\n   ============================================ */\n.mj-dialog-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 400px;\n  max-width: 550px;\n  animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px;\n  font-size: var(--mj-text-base);\n  transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n  padding: 20px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n}\n\n.mj-dialog-body p {\n  margin: 0;\n}\n\n.mj-dialog-footer {\n  display: flex;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes mj-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n  from { transform: translateY(8px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n     EDIT MODE BANNER (shows above toolbar when editing)\n     ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n  <div class=\"mj-forms-edit-banner\">\n    @if (DirtyFieldDisplayNames.length > 0) {\n      <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n      <span class=\"mj-forms-edit-banner-dirty\">\n        <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n        field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n        &mdash; {{ DirtyFieldDisplayNames.join(', ') }}\n      </span>\n    } @else {\n      <i class=\"fa-solid fa-pen-to-square\"></i>\n      <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n    }\n    <div class=\"mj-forms-toolbar-spacer\"></div>\n    <div class=\"mj-forms-edit-banner-actions\">\n      <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n        <i class=\"fa-solid fa-floppy-disk\"></i>\n        <span class=\"mj-forms-btn-text\">Save Changes</span>\n      </button>\n      <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n        <i class=\"fa-solid fa-rotate-left\"></i>\n        <span class=\"mj-forms-btn-text\">Discard</span>\n      </button>\n    </div>\n  </div>\n}\n\n<!-- ============================================\n     MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n     ============================================ -->\n@if (!EditMode) {\n  <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n    <!-- Action buttons -->\n    <div class=\"mj-forms-toolbar-group\">\n      @if (Config.ShowEditButton && UserCanEdit) {\n        <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n          <i class=\"fa-solid fa-pen-to-square\"></i>\n        </button>\n      }\n      @if (Config.ShowDeleteButton && UserCanDelete) {\n        <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n          <i class=\"fa-regular fa-trash-can\"></i>\n        </button>\n      }\n      @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n        <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n          <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n        </button>\n      }\n      @if (Config.ShowHistoryButton && TracksChanges) {\n        <button class=\"mj-forms-btn mj-forms-btn--history\" (click)=\"OnHistory()\"\n          [title]=\"VersionCount > 0 ? VersionCount + ' version(s) tracked' : 'Record Changes'\">\n          <i class=\"fa-regular fa-clock\"></i>\n          @if (VersionCount > 0) {\n            <span class=\"mj-version-count-badge\">v{{ VersionCount }}</span>\n          }\n        </button>\n      }\n      @if (Config.ShowListButton) {\n        <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n          [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n          <i class=\"fa-regular fa-bookmark\"></i>\n          @if (ListCount > 0) {\n            <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n          }\n        </button>\n      }\n      @if (Config.ShowTagsButton) {\n        <button class=\"mj-forms-btn\" (click)=\"OnTagsPanel()\"\n          [title]=\"TagCount > 0 ? TagCount + ' tag(s)' : 'View tags'\">\n          <i class=\"fa-solid fa-tags\"></i>\n          @if (TagCount > 0) {\n            <span class=\"mj-list-count-badge\">{{ TagCount }}</span>\n          }\n        </button>\n      }\n\n      <!-- Custom toolbar buttons -->\n      @for (button of Config.CustomButtons; track button.Key) {\n        @if (button.Visible !== false) {\n          <button class=\"mj-forms-btn\"\n            [class]=\"button.CssClass || ''\"\n            [disabled]=\"button.Disabled || false\"\n            [title]=\"button.Description\"\n            (click)=\"OnCustomButtonClick(button)\">\n            <i [class]=\"button.Icon\"></i>\n          </button>\n        }\n      }\n    </div>\n\n    <!-- Separator before hierarchy -->\n    @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n      <div class=\"mj-forms-toolbar-separator\"></div>\n    }\n\n    <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n    @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n      <div class=\"mj-entity-hierarchy\">\n        <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n        @for (parent of ParentChain; track parent.ID) {\n          <a class=\"mj-entity-badge mj-entity-badge--parent\"\n             [title]=\"'Navigate to parent: ' + parent.Name\"\n             (click)=\"OnParentBadgeClick(parent, $event)\">\n            <i class=\"fa-solid fa-arrow-up\"></i>\n            {{ parent.Name }}\n          </a>\n          <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n        }\n\n        <!-- Current entity (always shown) -->\n        <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n        <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n        @if (DescendantTree.length > 0) {\n          <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n            [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n        }\n      </div>\n    }\n\n    <!-- Spacer pushes section controls to the right -->\n    <div class=\"mj-forms-toolbar-spacer\"></div>\n\n    <!-- Form-variant picker: right-side toolbar button. Opens a dropdown\n         with the Default (CodeGen Angular) form + every variant the host\n         supplied. Persists the user's pick via the host's resolver (which\n         goes through UserInfoEngine settings, not localStorage). Hidden\n         entirely when the host disables ShowFormVariantPicker or supplied\n         fewer than 2 variants. -->\n    @if (ShowVariantPickerButton) {\n      <div class=\"mj-form-variant-picker-host\"\n           [class.open]=\"VariantMenuOpen\">\n        <button class=\"mj-forms-btn mj-form-variant-picker-trigger\"\n                type=\"button\"\n                (click)=\"ToggleVariantMenu()\"\n                (blur)=\"CloseVariantMenu()\"\n                [title]=\"'Form variant: ' + CurrentVariantLabel + ' \u2014 click to change'\">\n          <i class=\"fa-solid fa-pen-ruler\"></i>\n          <span class=\"mj-form-variant-picker-current-label\">{{ CurrentVariantLabel }}</span>\n          <i class=\"fa-solid fa-chevron-down chev\"></i>\n        </button>\n        @if (VariantMenuOpen) {\n          <div class=\"mj-form-variant-picker-menu\"\n               (mousedown)=\"$event.preventDefault()\"\n               (click)=\"$event.stopPropagation()\">\n            <div class=\"mj-form-variant-picker-row mj-form-variant-picker-default\"\n                 [class.current]=\"!CurrentVariantID\"\n                 (click)=\"OnVariantClick(null)\">\n              <div class=\"mj-form-variant-picker-row-main\">\n                <span class=\"mj-form-variant-picker-row-title\">\n                  Default form <span class=\"mj-form-variant-picker-default-tag\">(default)</span>\n                </span>\n                <span class=\"mj-form-variant-picker-row-sub\">CodeGen-generated Angular fallback</span>\n              </div>\n              @if (!CurrentVariantID) {\n                <i class=\"fa-solid fa-check mj-form-variant-picker-check\"></i>\n              }\n            </div>\n            @for (v of Variants; track v.ID) {\n              <div class=\"mj-form-variant-picker-row\"\n                   [class.current]=\"v.ID === CurrentVariantID\"\n                   [class.inactive]=\"v.Status !== 'Active'\"\n                   (click)=\"OnVariantClick(v.ID)\">\n                <div class=\"mj-form-variant-picker-row-main\">\n                  <span class=\"mj-form-variant-picker-row-title\">{{ v.Label }}</span>\n                  <span class=\"mj-form-variant-picker-row-sub\">{{ VariantSubtitle(v) }}</span>\n                </div>\n                @if (v.ID === CurrentVariantID) {\n                  <i class=\"fa-solid fa-check mj-form-variant-picker-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Section Controls -->\n    @if (Config.ShowSectionControls) {\n      <div class=\"mj-forms-toolbar-group mj-section-controls\">\n        @if (Config.ShowSectionFilter) {\n          <div class=\"mj-forms-search-wrapper\">\n            <input type=\"text\"\n              class=\"mj-section-search\"\n              [class.mj-section-search--active]=\"SearchFilter\"\n              [value]=\"SearchFilter\"\n              (input)=\"OnFilterInput($event)\"\n              placeholder=\"Search sections...\">\n            @if (SearchFilter) {\n              <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n                <i class=\"fa-solid fa-xmark\"></i>\n              </button>\n            }\n          </div>\n        }\n        @if (Config.ShowExpandCollapseAllButtons) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n            (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n            <i class=\"fa-solid fa-angles-down\"></i>\n          </button>\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            [disabled]=\"ExpandedSectionCount === 0\"\n            (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n            <i class=\"fa-solid fa-angles-up\"></i>\n          </button>\n        }\n        @if (HasCustomSectionOrder) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n            <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          </button>\n        }\n        @if (Config.ShowSectionManager) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            (click)=\"OnManageSections()\" title=\"Manage section order\">\n            <i class=\"fa-solid fa-bars-staggered\"></i>\n          </button>\n        }\n        @if (Config.ShowWidthToggle) {\n          <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n            (click)=\"OnToggleWidthMode()\"\n            [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n            <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Additional actions slot -->\n    @if (AdditionalActionsTemplate) {\n      <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n    }\n    <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n  </div>\n}\n\n<!-- ============================================\n     DISCARD CHANGES CONFIRMATION DIALOG\n     ============================================ -->\n@if (ShowDiscardDialog) {\n  <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n    <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-dialog-header\">\n        <h3>Discard Changes?</h3>\n        <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-dialog-body\">\n        <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n      </div>\n      <div class=\"mj-dialog-footer\">\n        <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n          <i class=\"fa-solid fa-rotate-left\"></i>\n          Discard Changes\n        </button>\n        <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n          Keep Editing\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- ============================================\n     DELETE CONFIRMATION DIALOG\n     ============================================ -->\n@if (ShowDeleteDialog) {\n  <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n    <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-dialog-header\">\n        <h3>Confirm Deletion</h3>\n        <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-dialog-body\">\n        <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n      </div>\n      <div class=\"mj-dialog-footer\">\n        <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n          <i class=\"fa-solid fa-trash-can\"></i>\n          Delete\n        </button>\n        <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n     Single child at a level \u2192 inline with chevron.\n     Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n  @if (items.length === 1) {\n    <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n    <a class=\"mj-entity-badge mj-entity-badge--child\"\n       [title]=\"'Navigate to: ' + items[0].EntityName\"\n       (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n      <i class=\"fa-solid fa-arrow-down\"></i>\n      {{ items[0].EntityName }}\n    </a>\n    @if (items[0].Children.length > 0) {\n      <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n        [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n    }\n  } @else if (items.length > 1) {\n    <div class=\"mj-descendant-chains\">\n      @for (item of items; track item.EntityName) {\n        <div class=\"mj-descendant-chain\">\n          <a class=\"mj-entity-badge mj-entity-badge--child\"\n             [title]=\"'Navigate to: ' + item.EntityName\"\n             (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n            <i class=\"fa-solid fa-arrow-down\"></i>\n            {{ item.EntityName }}\n          </a>\n          @if (item.Children.length > 0) {\n            <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n              [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n", styles: ["/* ============================================\n   FORM TOOLBAR \u2014 uses global --mj-* design tokens\n   ============================================ */\n:host {\n  display: block;\n}\n\n/* ============================================\n   EDIT BANNER\n   ============================================ */\n.mj-forms-edit-banner {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-bottom: 2px solid var(--mj-brand-primary);\n  font-size: 13px;\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner > i {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty {\n  color: var(--mj-status-warning);\n  font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text {\n  font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty strong {\n  color: var(--mj-status-warning);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* ============================================\n   MAIN TOOLBAR\n   ============================================ */\n.mj-forms-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 22px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  flex-wrap: wrap;\n  z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n  position: sticky;\n  top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n  pointer-events: none;\n  opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n  width: 1px;\n  height: 24px;\n  background: var(--mj-border-default);\n  margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n  flex: 1;\n}\n\n/* ============================================\n   BUTTONS\n   ============================================ */\n.mj-forms-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  white-space: nowrap;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.mj-forms-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn:active {\n  transform: translateY(0);\n  box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n  font-size: 15px;\n  line-height: 1;\n}\n\n.mj-forms-btn--primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost {\n  border-color: transparent;\n  background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n  padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n  padding: 5px 12px;\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm i {\n  font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text {\n  margin-left: 2px;\n}\n\n.mj-icon--favorite {\n  color: var(--mj-status-warning);\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n  position: relative;\n}\n\n/* History button with version badge */\n.mj-forms-btn--history {\n  position: relative;\n}\n\n.mj-version-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -10px;\n  padding: 0 5px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 16px;\n  border: 2px solid var(--mj-bg-surface-card);\n  white-space: nowrap;\n  line-height: 1;\n}\n\n.mj-list-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  font-size: 10px;\n  font-weight: var(--mj-font-bold);\n  color: var(--mj-text-inverse);\n  background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n  border-radius: var(--mj-radius-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* ============================================\n   IS-A ENTITY HIERARCHY\n   ============================================ */\n.mj-entity-hierarchy {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-entity-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n  border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n  font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n  color: var(--mj-color-indigo-500);\n  border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent:hover {\n  background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-color-indigo-500);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current {\n  font-weight: var(--mj-font-semibold);\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  padding: 4px 8px;\n  background: var(--mj-bg-surface-hover);\n  border-radius: var(--mj-radius-sm);\n  cursor: default;\n}\n\n.mj-entity-badge--child {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child:hover {\n  background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-info);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  flex-wrap: wrap;\n}\n\n.mj-child-count {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: var(--mj-radius-full);\n  font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf {\n  border-style: dashed;\n}\n\n.mj-entity-badge--root {\n  border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  position: relative;\n  padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n  content: '';\n  position: absolute;\n  left: -4px;\n  top: 50%;\n  width: 4px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n  padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 50%;\n  width: 18px;\n  border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n  top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n  bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n   SECTION CONTROLS\n   ============================================ */\n.mj-section-controls {\n  gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.mj-section-search {\n  max-width: 180px;\n  font-size: 13px;\n  padding: 6px 28px 6px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  background: var(--mj-bg-surface);\n  outline: none;\n  font-family: inherit;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-section-search:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n  color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n  font-weight: var(--mj-font-semibold);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.mj-clear-search {\n  position: absolute;\n  right: 4px;\n  padding: 4px;\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  line-height: 1;\n}\n\n.mj-clear-search:hover {\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================\n   DIALOG (lightweight inline)\n   ============================================ */\n.mj-dialog-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-lg);\n  box-shadow: var(--mj-shadow-lg);\n  min-width: 400px;\n  max-width: 550px;\n  animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 4px;\n  font-size: var(--mj-text-base);\n  transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n  padding: 20px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n}\n\n.mj-dialog-body p {\n  margin: 0;\n}\n\n.mj-dialog-footer {\n  display: flex;\n  gap: 8px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes mj-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n  from { transform: translateY(8px); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n/* ============================================================ */\n/* FORM-VARIANT PICKER (toolbar-embedded; right-side)            */\n/* ============================================================ */\n\n.mj-form-variant-picker-host {\n  position: relative;\n  display: inline-flex;\n}\n\n.mj-form-variant-picker-trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 240px;\n}\n\n.mj-form-variant-picker-trigger .chev {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.mj-form-variant-picker-current-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 160px;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.mj-form-variant-picker-host.open .mj-form-variant-picker-trigger {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-focus);\n}\n\n.mj-form-variant-picker-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 50;\n  min-width: 280px;\n  max-height: 360px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  padding: 4px 0;\n}\n\n.mj-form-variant-picker-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  cursor: pointer;\n  color: var(--mj-text-primary);\n  font-size: 13px;\n  transition: background 120ms;\n}\n\n.mj-form-variant-picker-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-form-variant-picker-row.current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-form-variant-picker-row.inactive {\n  opacity: 0.6;\n}\n\n.mj-form-variant-picker-row-main {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.mj-form-variant-picker-row-title {\n  font-weight: 600;\n}\n\n.mj-form-variant-picker-row-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-form-variant-picker-default-tag {\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  margin-left: 4px;\n}\n\n.mj-form-variant-picker-default {\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.mj-form-variant-picker-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  margin-top: 2px;\n}\n"] }]
     }], null, { Form: [{
             type: Input
         }], _deprecatedForm: [{
@@ -1085,6 +1237,10 @@ export class MjFormToolbarComponent {
             type: Input
         }], AdditionalActionsTemplate: [{
             type: Input
+        }], Variants: [{
+            type: Input
+        }], CurrentVariantID: [{
+            type: Input
         }], Navigate: [{
             type: Output
         }], EditModeChange: [{
@@ -1115,6 +1271,8 @@ export class MjFormToolbarComponent {
             type: Output
         }], ShowChangesRequested: [{
             type: Output
+        }], VariantPicked: [{
+            type: Output
         }], CustomButtonClick: [{
             type: Output
         }], FilterChange: [{
@@ -1132,5 +1290,5 @@ export class MjFormToolbarComponent {
         }], ManageSectionsRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjFormToolbarComponent, { className: "MjFormToolbarComponent", filePath: "src/lib/toolbar/form-toolbar.component.ts", lineNumber: 46 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjFormToolbarComponent, { className: "MjFormToolbarComponent", filePath: "src/lib/toolbar/form-toolbar.component.ts", lineNumber: 47 }); })();
 //# sourceMappingURL=form-toolbar.component.js.map