@memberjunction/ng-base-forms 6.1.0-edge.4 → 6.1.0-edge.6

package/dist/lib/container/record-form-container.component.js

@@ -15,13 +15,15 @@ import { FormSlotCoordinator } from '../panel-slot/form-slot-coordinator.service
 import { FormChromeCoordinator } from '../chrome/form-chrome-coordinator.service';
 import { ResolveFormChrome, OrderChromeGroups, OrderMoreSectionKeys, MoveChromeGroupInSectionOrder, OverlayChromeSectionOrder } from '../chrome/resolve-form-chrome';
 import { LoadFormChromeRules } from '../chrome/load-form-chrome-rules';
-import { MORE_SECTION_KEY, HumanizeEntityTitle, IsAlwaysMoreSection } from '../chrome/form-chrome';
-import { ClampRailWidth, FORM_CHROME_RAIL_PINNED_DEFAULT, FORM_CHROME_RAIL_WIDTH_DEFAULT, FORM_CHROME_RAIL_WIDTH_MAX, FORM_CHROME_RAIL_WIDTH_MIN, ParseRailPinnedSetting, ParseRailWidthSetting, SerializeRailPinnedSetting, SerializeRailWidthSetting, ShouldPersistChromeActiveGroup, } from '../chrome/form-chrome-rail-pref';
+import { MORE_SECTION_KEY, HumanizeEntityTitle, IsAlwaysMoreSection, IsDetailsSectionKey, DetailsCardEdges } from '../chrome/form-chrome';
+import { ClampRailWidth, FORM_CHROME_RAIL_PINNED_DEFAULT, FORM_CHROME_RAIL_WIDTH_DEFAULT, FORM_CHROME_RAIL_WIDTH_MAX, FORM_CHROME_RAIL_WIDTH_MIN, ParseRailPinnedSetting, ParseRailWidthSetting, SerializeRailPinnedSetting, SerializeRailWidthSetting, ShouldPersistChromeActiveGroup, UnsavedLeadGroupKey, } from '../chrome/form-chrome-rail-pref';
 import { ApplyClippedTitle } from '../chrome/clipped-title';
 import { CollectFormPanelRegistrations } from '../panel-slot/collect-form-panel-registrations';
 import { ContributionHiddenSectionKeys, ResolveFormContributions } from '../panel-slot/form-contribution';
 import { IsFormSectionHidden } from '../types/entity-form-config';
 import { FormRecordRefreshCoordinator } from '../form-record-refresh.coordinator';
+import { FormSectionIndicatorCoordinator } from '../section-indicators/form-section-indicator-coordinator.service';
+import { DescribeSectionDirty, DescribeSectionErrors, DescribeSectionWarnings, SumSectionIndicators, TallyValidationErrors, } from '../section-indicators/form-section-indicators';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-ui-components";
 import * as i2 from "@memberjunction/ng-record-changes";
@@ -40,22 +42,61 @@ const _c3 = (a0, a1, a2) => ({ mode: "manage", entityId: a0, entityName: a1, rec
 const _forTrack0 = ($index, $item) => $item.Key;
 function MjRecordFormContainerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-form-toolbar", 16);
+    i0.ɵɵelementStart(0, "mj-form-toolbar", 17);
     i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_Navigate_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnNavigate($event)); })("EditModeChange", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_EditModeChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnEditModeChange($event)); })("BeforeSave", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeSave_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeSave.emit($event)); })("SaveRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_SaveRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSaveRequested()); })("BeforeCancel", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeCancel_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeCancel.emit($event)); })("CancelRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_CancelRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancelRequested()); })("BeforeDelete", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeDelete_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeDelete.emit($event)); })("DeleteRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_DeleteRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteRequested()); })("BeforeRefresh", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeRefresh_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeRefresh.emit($event)); })("RefreshRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_RefreshRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRefreshRequested()); })("FavoriteToggled", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_FavoriteToggled_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFavoriteToggled()); })("BeforeHistoryView", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeHistoryView_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeHistoryView.emit($event)); })("HistoryRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_HistoryRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnHistoryRequested()); })("BeforeListManagement", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_BeforeListManagement_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.BeforeListManagement.emit($event)); })("ListManagementRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ListManagementRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementRequested()); })("ShowChangesRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ShowChangesRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnShowChangesRequested()); })("CustomButtonClick", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_CustomButtonClick_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CustomButtonClick.emit($event)); })("ToolbarItemClick", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ToolbarItemClick_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToolbarItemClick.emit($event)); })("FilterChange", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_FilterChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFilterChange($event)); })("ExpandAllRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ExpandAllRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnExpandAll()); })("CollapseAllRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_CollapseAllRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCollapseAll()); })("ShowEmptyFieldsChange", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ShowEmptyFieldsChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnShowEmptyFieldsChange($event)); })("WidthModeChange", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_WidthModeChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnWidthModeChange($event)); })("ResetSectionOrderRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ResetSectionOrderRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnResetSectionOrder()); })("ManageSectionsRequested", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_ManageSectionsRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnManageSections()); })("TagsPanelToggled", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_TagsPanelToggled_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelToggled()); })("AttachmentsPanelToggled", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_AttachmentsPanelToggled_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAttachmentsPanelToggled()); })("VariantPicked", function MjRecordFormContainerComponent_Conditional_1_Template_mj_form_toolbar_VariantPicked_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnVariantPicked($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.EffectiveRecord)("EditMode", ctx_r1.EffectiveEditMode)("UserCanEdit", ctx_r1.EffectiveUserCanEdit)("UserCanDelete", ctx_r1.EffectiveUserCanDelete)("IsFavorite", ctx_r1.EffectiveIsFavorite)("FavoriteInitDone", ctx_r1.EffectiveFavoriteInitDone)("IsDirty", ctx_r1.EffectiveIsDirty)("DirtyFieldNames", ctx_r1.EffectiveDirtyFieldNames)("ListCount", ctx_r1.ListCount)("TagCount", ctx_r1.TagCount)("AttachmentCount", ctx_r1.AttachmentCount)("AttachmentsAvailable", ctx_r1.AttachmentsAvailable)("IsAttachmentsPanelOpen", ctx_r1.ShowAttachmentsPanel)("VersionCount", ctx_r1.VersionCount)("EntityInfo", ctx_r1.EffectiveEntityInfo)("Config", ctx_r1.EffectiveToolbarConfig)("IsSaving", ctx_r1.EffectiveIsSaving)("IsRefreshing", ctx_r1.EffectiveIsRefreshing)("VisibleSectionCount", ctx_r1.VisibleSectionCount)("TotalSectionCount", ctx_r1.TotalSectionCount)("ExpandedSectionCount", ctx_r1.ExpandedSectionCount)("SearchFilter", ctx_r1.EffectiveSearchFilter)("ShowEmptyFields", ctx_r1.EffectiveShowEmptyFields)("WidthMode", ctx_r1.EffectiveWidthMode)("HasCustomSectionOrder", ctx_r1.EffectiveHasCustomSectionOrder)("ChromeLayout", ctx_r1.ChromeLayout)("Variants", ctx_r1.EffectiveVariants)("CurrentVariantID", ctx_r1.EffectiveCurrentVariantID)("RegisteredItems", ctx_r1.EffectiveRegisteredToolbarItems)("ItemOverrides", ctx_r1.EffectiveToolbarItemOverrides)("FormComponent", ctx_r1.fc);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const formIndicators_r4 = i0.ɵɵreadContextLet(4);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r1.RailErrorTitle(formIndicators_r4.ErrorCount, "this record"));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailErrorTitle(formIndicators_r4.ErrorCount, "this record"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(formIndicators_r4.ErrorCount);
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const formIndicators_r4 = i0.ɵɵreadContextLet(4);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r1.RailWarningTitle(formIndicators_r4.WarningCount, "this record"));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailWarningTitle(formIndicators_r4.WarningCount, "this record"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(formIndicators_r4.WarningCount);
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 24);
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const formIndicators_r4 = i0.ɵɵreadContextLet(4);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r1.RailDirtyTitle(formIndicators_r4.DirtyCount, "this record"));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailDirtyTitle(formIndicators_r4.DirtyCount, "this record"));
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailExpand()); });
+    i0.ɵɵelementStart(0, "button", 20);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailExpand()); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 20);
-    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_5_Conditional_1_Template_span_mouseenter_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, ctx_r1.ChromeActiveTitle)); });
+    i0.ɵɵelementStart(2, "span", 21);
+    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_7_Conditional_1_Template_span_mouseenter_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, ctx_r1.ChromeActiveTitle)); });
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵdeclareLet(4);
+    i0.ɵɵconditionalCreate(5, MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_5_Template, 2, 3, "span", 22)(6, MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_6_Template, 2, 3, "span", 23);
+    i0.ɵɵconditionalCreate(7, MjRecordFormContainerComponent_Conditional_7_Conditional_1_Conditional_7_Template, 1, 2, "span", 24);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("title", "Show sections \u2014 " + ctx_r1.ChromeActiveTitle);
@@ -64,149 +105,294 @@ function MjRecordFormContainerComponent_Conditional_5_Conditional_1_Template(rf,
     i0.ɵɵclassMap(ctx_r1.ChromeActiveIcon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.ChromeActiveTitle);
+    i0.ɵɵadvance();
+    const formIndicators_r5 = i0.ɵɵstoreLet(ctx_r1.FormIndicators);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(formIndicators_r5.ErrorCount > 0 ? 5 : formIndicators_r5.WarningCount > 0 ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(formIndicators_r5.DirtyCount > 0 ? 7 : -1);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵlistener("dragstart", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_1_Template_span_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r7); const group_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragStart($event, group_r6.Key)); })("dragend", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_1_Template_span_dragend_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnRailDragEnd()); })("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_1_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 33);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵlistener("dragstart", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_1_Template_span_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r9); const group_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragStart($event, group_r8.Key)); })("dragend", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_1_Template_span_dragend_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnRailDragEnd()); })("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_1_Template_span_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵelementEnd();
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 36);
+} if (rf & 2) {
+    const group_r8 = i0.ɵɵnextContext().$implicit;
+    const groupIndicators_r10 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailDirtyTitle(groupIndicators_r10.DirtyCount, group_r8.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailDirtyTitle(groupIndicators_r10.DirtyCount, group_r8.Title));
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r8 = i0.ɵɵnextContext().$implicit;
+    const groupIndicators_r10 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailErrorTitle(groupIndicators_r10.ErrorCount, group_r8.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailErrorTitle(groupIndicators_r10.ErrorCount, group_r8.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", groupIndicators_r10.ErrorCount, " ");
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r8 = i0.ɵɵnextContext().$implicit;
+    const groupIndicators_r10 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailWarningTitle(groupIndicators_r10.WarningCount, group_r8.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailWarningTitle(groupIndicators_r10.WarningCount, group_r8.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", groupIndicators_r10.WarningCount, " ");
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const rowCount_r8 = i0.ɵɵreadContextLet(5);
-    i0.ɵɵclassProp("is-zero", rowCount_r8 === 0);
+    const rowCount_r11 = i0.ɵɵreadContextLet(9);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(rowCount_r8);
+    i0.ɵɵtextInterpolate(rowCount_r11);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_click_0_listener() { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r6.Key)); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_keydown_enter_0_listener() { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r6.Key)); })("keydown.space", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_keydown_space_0_listener($event) { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r6.Key)); })("dragover", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_dragover_0_listener($event) { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragOver($event, group_r6.Key)); })("dragleave", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_dragleave_0_listener($event) { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragLeave($event, group_r6.Key)); })("drop", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_div_drop_0_listener($event) { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDrop($event, group_r6.Key)); });
-    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_1_Template, 2, 0, "span", 29);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_click_0_listener() { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r8.Key)); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_keydown_enter_0_listener() { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r8.Key)); })("keydown.space", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_keydown_space_0_listener($event) { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(group_r8.Key)); })("dragover", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_dragover_0_listener($event) { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragOver($event, group_r8.Key)); })("dragleave", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_dragleave_0_listener($event) { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDragLeave($event, group_r8.Key)); })("drop", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_div_drop_0_listener($event) { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailDrop($event, group_r8.Key)); });
+    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_1_Template, 2, 0, "span", 34);
     i0.ɵɵelement(2, "i");
-    i0.ɵɵelementStart(3, "span", 30);
-    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template_span_mouseenter_3_listener($event) { const group_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, group_r6.Title)); });
+    i0.ɵɵelementStart(3, "span", 35);
+    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template_span_mouseenter_3_listener($event) { const group_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, group_r8.Title)); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵdeclareLet(5);
-    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Conditional_6_Template, 2, 3, "span", 31);
+    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_6_Template, 1, 2, "span", 36);
+    i0.ɵɵconditionalCreate(7, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_7_Template, 3, 3, "span", 37)(8, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_8_Template, 3, 3, "span", 38);
+    i0.ɵɵdeclareLet(9);
+    i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Conditional_10_Template, 2, 1, "span", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const group_r6 = ctx.$implicit;
+    const group_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("is-active", ctx_r1.ChromeActiveGroupKey === group_r6.Key)("is-drag-over", ctx_r1.RailDragOverKey === group_r6.Key);
-    i0.ɵɵattribute("aria-current", ctx_r1.ChromeActiveGroupKey === group_r6.Key ? "page" : null);
+    i0.ɵɵclassProp("is-active", ctx_r1.ChromeActiveGroupKey === group_r8.Key)("is-drag-over", ctx_r1.RailDragOverKey === group_r8.Key)("has-errors", ctx_r1.ChromeGroupIndicators(group_r8).ErrorCount > 0)("is-dirty", ctx_r1.ChromeGroupIndicators(group_r8).DirtyCount > 0);
+    i0.ɵɵattribute("aria-current", ctx_r1.ChromeActiveGroupKey === group_r8.Key ? "page" : null);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ChromeReorderAllowed ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(group_r6.Icon);
+    i0.ɵɵclassMap(group_r8.Icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r6.Title);
+    i0.ɵɵtextInterpolate(group_r8.Title);
+    i0.ɵɵadvance();
+    const groupIndicators_r12 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupIndicators(group_r8));
     i0.ɵɵadvance();
-    const rowCount_r9 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupRowCount(group_r6));
+    i0.ɵɵconditional(groupIndicators_r12.DirtyCount > 0 ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(rowCount_r9 != null ? 6 : -1);
+    i0.ɵɵconditional(groupIndicators_r12.ErrorCount > 0 ? 7 : groupIndicators_r12.WarningCount > 0 ? 8 : -1);
+    i0.ɵɵadvance(2);
+    const rowCount_r13 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupRowCount(group_r8));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(rowCount_r13 != null && rowCount_r13 > 0 ? 10 : -1);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵlistener("dragstart", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_1_Template_span_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r14); const child_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragStart($event, child_r13.Key)); })("dragend", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_1_Template_span_dragend_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.OnRailDragEnd()); })("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_1_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 33);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 36);
+} if (rf & 2) {
+    const more_r15 = i0.ɵɵnextContext();
+    const moreIndicators_r16 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailDirtyTitle(moreIndicators_r16.DirtyCount, more_r15.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailDirtyTitle(moreIndicators_r16.DirtyCount, more_r15.Title));
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const more_r15 = i0.ɵɵnextContext();
+    const moreIndicators_r16 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailErrorTitle(moreIndicators_r16.ErrorCount, more_r15.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailErrorTitle(moreIndicators_r16.ErrorCount, more_r15.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", moreIndicators_r16.ErrorCount, " ");
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const more_r15 = i0.ɵɵnextContext();
+    const moreIndicators_r16 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", ctx_r1.RailWarningTitle(moreIndicators_r16.WarningCount, more_r15.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailWarningTitle(moreIndicators_r16.WarningCount, more_r15.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", moreIndicators_r16.WarningCount, " ");
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵlistener("dragstart", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_1_Template_span_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r19); const child_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragStart($event, child_r18.Key)); })("dragend", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_1_Template_span_dragend_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.OnRailDragEnd()); })("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_1_Template_span_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵelementEnd();
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 36);
+} if (rf & 2) {
+    const child_r18 = i0.ɵɵnextContext().$implicit;
+    const childIndicators_r20 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", ctx_r1.RailDirtyTitle(childIndicators_r20.DirtyCount, child_r18.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailDirtyTitle(childIndicators_r20.DirtyCount, child_r18.Title));
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r18 = i0.ɵɵnextContext().$implicit;
+    const childIndicators_r20 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", ctx_r1.RailErrorTitle(childIndicators_r20.ErrorCount, child_r18.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailErrorTitle(childIndicators_r20.ErrorCount, child_r18.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", childIndicators_r20.ErrorCount, " ");
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r18 = i0.ɵɵnextContext().$implicit;
+    const childIndicators_r20 = i0.ɵɵreadContextLet(5);
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", ctx_r1.RailWarningTitle(childIndicators_r20.WarningCount, child_r18.Title));
+    i0.ɵɵattribute("aria-label", ctx_r1.RailWarningTitle(childIndicators_r20.WarningCount, child_r18.Title));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", childIndicators_r20.WarningCount, " ");
+} }
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const childCount_r15 = i0.ɵɵreadContextLet(5);
-    i0.ɵɵclassProp("is-zero", childCount_r15 === 0);
+    const childCount_r21 = i0.ɵɵreadContextLet(9);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(childCount_r15);
+    i0.ɵɵtextInterpolate(childCount_r21);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_click_0_listener() { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r13.Key)); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_keydown_enter_0_listener() { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r13.Key)); })("keydown.space", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_keydown_space_0_listener($event) { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r13.Key)); })("dragover", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_dragover_0_listener($event) { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragOver($event, child_r13.Key)); })("dragleave", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_dragleave_0_listener($event) { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragLeave($event, child_r13.Key)); })("drop", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_div_drop_0_listener($event) { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDrop($event, child_r13.Key)); });
-    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_1_Template, 2, 0, "span", 29);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_click_0_listener() { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r18.Key)); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_keydown_enter_0_listener() { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r18.Key)); })("keydown.space", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_keydown_space_0_listener($event) { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnChromeGroupActivate(child_r18.Key)); })("dragover", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_dragover_0_listener($event) { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragOver($event, child_r18.Key)); })("dragleave", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_dragleave_0_listener($event) { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDragLeave($event, child_r18.Key)); })("drop", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_div_drop_0_listener($event) { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailDrop($event, child_r18.Key)); });
+    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_1_Template, 2, 0, "span", 34);
     i0.ɵɵelement(2, "i");
-    i0.ɵɵelementStart(3, "span", 30);
-    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template_span_mouseenter_3_listener($event) { const child_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, child_r13.Title)); });
+    i0.ɵɵelementStart(3, "span", 35);
+    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template_span_mouseenter_3_listener($event) { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, child_r18.Title)); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵdeclareLet(5);
-    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Conditional_6_Template, 2, 3, "span", 31);
+    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_6_Template, 1, 2, "span", 36);
+    i0.ɵɵconditionalCreate(7, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_7_Template, 3, 3, "span", 37)(8, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_8_Template, 3, 3, "span", 38);
+    i0.ɵɵdeclareLet(9);
+    i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Conditional_10_Template, 2, 1, "span", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const child_r13 = ctx.$implicit;
+    const child_r18 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("is-active", ctx_r1.ChromeActiveGroupKey === child_r13.Key)("is-drag-over", ctx_r1.RailDragOverKey === child_r13.Key);
-    i0.ɵɵattribute("aria-current", ctx_r1.ChromeActiveGroupKey === child_r13.Key ? "page" : null);
+    i0.ɵɵclassProp("is-active", ctx_r1.ChromeActiveGroupKey === child_r18.Key)("is-drag-over", ctx_r1.RailDragOverKey === child_r18.Key)("has-errors", ctx_r1.ChromeGroupIndicators(child_r18).ErrorCount > 0)("is-dirty", ctx_r1.ChromeGroupIndicators(child_r18).DirtyCount > 0);
+    i0.ɵɵattribute("aria-current", ctx_r1.ChromeActiveGroupKey === child_r18.Key ? "page" : null);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ChromeReorderAllowed ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(child_r13.Icon);
+    i0.ɵɵclassMap(child_r18.Icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(child_r13.Title);
+    i0.ɵɵtextInterpolate(child_r18.Title);
+    i0.ɵɵadvance();
+    const childIndicators_r22 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupIndicators(child_r18));
     i0.ɵɵadvance();
-    const childCount_r16 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupRowCount(child_r13));
+    i0.ɵɵconditional(childIndicators_r22.DirtyCount > 0 ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(childCount_r16 != null ? 6 : -1);
+    i0.ɵɵconditional(childIndicators_r22.ErrorCount > 0 ? 7 : childIndicators_r22.WarningCount > 0 ? 8 : -1);
+    i0.ɵɵadvance(2);
+    const childCount_r23 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupRowCount(child_r18));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(childCount_r23 != null && childCount_r23 > 0 ? 10 : -1);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵrepeaterCreate(1, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_For_2_Template, 7, 11, "div", 39, _forTrack0);
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵrepeaterCreate(1, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_For_2_Template, 11, 18, "div", 48, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.ChromeMoreItems);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); })("keydown.space", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template_div_keydown_space_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); });
-    i0.ɵɵelement(1, "span", 36)(2, "i");
-    i0.ɵɵelementStart(3, "span", 30);
-    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template_span_mouseenter_3_listener($event) { const more_r11 = i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, more_r11.Title)); });
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); })("keydown.enter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); })("keydown.space", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template_div_keydown_space_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.OnMoreFolderToggle()); });
+    i0.ɵɵelement(1, "span", 45)(2, "i");
+    i0.ɵɵelementStart(3, "span", 35);
+    i0.ɵɵlistener("mouseenter", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template_span_mouseenter_3_listener($event) { const more_r15 = i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnRailLabelHover($event, more_r15.Title)); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵdeclareLet(5);
+    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_6_Template, 1, 2, "span", 36);
+    i0.ɵɵconditionalCreate(7, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_7_Template, 3, 3, "span", 37)(8, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_8_Template, 3, 3, "span", 38);
+    i0.ɵɵelement(9, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Conditional_6_Template, 3, 0, "div", 38);
+    i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Conditional_10_Template, 3, 0, "div", 47);
 } if (rf & 2) {
+    const more_r15 = ctx;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("is-expanded", ctx_r1.MoreExpanded);
+    i0.ɵɵclassProp("is-expanded", ctx_r1.MoreExpanded)("has-errors", ctx_r1.ChromeGroupIndicators(more_r15).ErrorCount > 0);
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(ctx_r1.MoreExpanded ? "fa-solid fa-folder-open" : "fa-solid fa-folder");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx.Title);
+    i0.ɵɵtextInterpolate(more_r15.Title);
+    i0.ɵɵadvance();
+    const moreIndicators_r24 = i0.ɵɵstoreLet(ctx_r1.ChromeGroupIndicators(more_r15));
     i0.ɵɵadvance();
+    i0.ɵɵconditional(moreIndicators_r24.DirtyCount > 0 ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(moreIndicators_r24.ErrorCount > 0 ? 7 : moreIndicators_r24.WarningCount > 0 ? 8 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵclassProp("fa-minus", ctx_r1.MoreExpanded)("fa-plus", !ctx_r1.MoreExpanded);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.MoreExpanded ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.MoreExpanded ? 10 : -1);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵlistener("pointerdown", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeStart($event)); })("pointermove", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_div_pointermove_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeMove($event)); })("pointerup", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_div_pointerup_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeEnd()); })("pointercancel", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_div_pointercancel_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeEnd()); });
+function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵlistener("pointerdown", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeStart($event)); })("pointermove", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_div_pointermove_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeMove($event)); })("pointerup", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_div_pointerup_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeEnd()); })("pointercancel", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_div_pointercancel_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRailResizeEnd()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 22)(2, "button", 23);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailPinToggle()); });
-    i0.ɵɵelement(3, "i", 24);
+    i0.ɵɵelementStart(1, "div", 26)(2, "button", 27);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailPinToggle()); });
+    i0.ɵɵelement(3, "i", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 25);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailCollapse()); });
-    i0.ɵɵelement(5, "i", 26);
+    i0.ɵɵelementStart(4, "button", 29);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnChromeRailCollapse()); });
+    i0.ɵɵelement(5, "i", 30);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(6, MjRecordFormContainerComponent_Conditional_5_Conditional_2_For_7_Template, 7, 11, "div", 27, _forTrack0);
-    i0.ɵɵconditionalCreate(8, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Conditional_8_Template, 7, 10);
+    i0.ɵɵelementStart(6, "div", 31);
+    i0.ɵɵrepeaterCreate(7, MjRecordFormContainerComponent_Conditional_7_Conditional_2_For_8_Template, 11, 18, "div", 32, _forTrack0);
+    i0.ɵɵconditionalCreate(9, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Conditional_9_Template, 11, 15);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_9_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -215,14 +401,14 @@ function MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template(rf,
     i0.ɵɵclassProp("is-pinned", ctx_r1.ChromeRailPinned);
     i0.ɵɵproperty("title", ctx_r1.ChromeRailPinned ? "Unpin sections \u2014 they hide after you switch" : "Pin sections open");
     i0.ɵɵattribute("aria-pressed", ctx_r1.ChromeRailPinned);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.ChromeFirstClassGroups);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_9_0 = ctx_r1.ChromeMoreFolder) ? 8 : -1, tmp_9_0);
+    i0.ɵɵconditional((tmp_9_0 = ctx_r1.ChromeMoreFolder) ? 9 : -1, tmp_9_0);
 } }
-function MjRecordFormContainerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "nav", 17);
-    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_5_Conditional_1_Template, 4, 5, "button", 18)(2, MjRecordFormContainerComponent_Conditional_5_Conditional_2_Template, 9, 8);
+function MjRecordFormContainerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "nav", 18);
+    i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_7_Conditional_1_Template, 8, 8, "button", 19)(2, MjRecordFormContainerComponent_Conditional_7_Conditional_2_Template, 10, 8);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -232,14 +418,14 @@ function MjRecordFormContainerComponent_Conditional_5_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ChromeRailCollapsed ? 1 : 2);
 } }
-function MjRecordFormContainerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-form-contributions", 6);
+function MjRecordFormContainerComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-form-contributions", 7);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.Record)("FormComponent", ctx_r1.FormComponent)("FormContext", ctx_r1.FormComponent.formContext)("BakedSectionKeys", ctx_r1.BakedRelatedSectionKeys)("ShowRelatedEntities", ctx_r1.EffectiveShowRelatedEntities);
 } }
-function MjRecordFormContainerComponent_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 44);
+function MjRecordFormContainerComponent_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -247,16 +433,16 @@ function MjRecordFormContainerComponent_Conditional_9_Conditional_5_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.MorePreview);
 } }
-function MjRecordFormContainerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
-    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnMoreToggle()); });
+function MjRecordFormContainerComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 50)(1, "button", 51);
+    i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnMoreToggle()); });
     i0.ɵɵelement(2, "i");
-    i0.ɵɵelementStart(3, "span", 43);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MjRecordFormContainerComponent_Conditional_9_Conditional_5_Template, 2, 1, "span", 44);
-    i0.ɵɵelement(6, "i", 45);
+    i0.ɵɵconditionalCreate(5, MjRecordFormContainerComponent_Conditional_11_Conditional_5_Template, 2, 1, "span", 53);
+    i0.ɵɵelement(6, "i", 54);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -270,52 +456,52 @@ function MjRecordFormContainerComponent_Conditional_9_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-down", ctx_r1.MoreExpanded)("fa-chevron-right", !ctx_r1.MoreExpanded);
 } }
-function MjRecordFormContainerComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-form-panel-slot", 8);
+function MjRecordFormContainerComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-form-panel-slot", 9);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Entity", ctx_r1.Record.EntityInfo.Name)("Record", ctx_r1.Record)("FormComponent", ctx_r1.FormComponent);
 } }
-function MjRecordFormContainerComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 46);
-    i0.ɵɵlistener("Action", function MjRecordFormContainerComponent_Conditional_11_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFilterChange("")); });
+function MjRecordFormContainerComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 55);
+    i0.ɵɵlistener("Action", function MjRecordFormContainerComponent_Conditional_13_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFilterChange("")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Message", "No sections match \"" + ctx_r1.EffectiveSearchFilter + "\". Try a different search term.");
 } }
-function MjRecordFormContainerComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-record-changes", 47);
-    i0.ɵɵlistener("RestoreRequested", function MjRecordFormContainerComponent_Conditional_13_Template_mj_record_changes_RestoreRequested_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRestoreRequested($event)); })("dialogClosed", function MjRecordFormContainerComponent_Conditional_13_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRecordChangesClosed()); });
+function MjRecordFormContainerComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-record-changes", 56);
+    i0.ɵɵlistener("RestoreRequested", function MjRecordFormContainerComponent_Conditional_15_Template_mj_record_changes_RestoreRequested_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRestoreRequested($event)); })("dialogClosed", function MjRecordFormContainerComponent_Conditional_15_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRecordChangesClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("record", ctx_r1.EffectiveRecord)("AllowRestore", ctx_r1.EffectiveUserCanEdit);
 } }
-function MjRecordFormContainerComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-record-tags", 48);
-    i0.ɵɵlistener("PanelClosed", function MjRecordFormContainerComponent_Conditional_14_Template_mj_record_tags_PanelClosed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelClosed()); })("TagCountChanged", function MjRecordFormContainerComponent_Conditional_14_Template_mj_record_tags_TagCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagCountChanged($event)); })("RecordNavigate", function MjRecordFormContainerComponent_Conditional_14_Template_mj_record_tags_RecordNavigate_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsRecordNavigate($event)); })("WidthChanged", function MjRecordFormContainerComponent_Conditional_14_Template_mj_record_tags_WidthChanged_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelWidthChanged($event)); });
+function MjRecordFormContainerComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-record-tags", 57);
+    i0.ɵɵlistener("PanelClosed", function MjRecordFormContainerComponent_Conditional_16_Template_mj_record_tags_PanelClosed_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelClosed()); })("TagCountChanged", function MjRecordFormContainerComponent_Conditional_16_Template_mj_record_tags_TagCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagCountChanged($event)); })("RecordNavigate", function MjRecordFormContainerComponent_Conditional_16_Template_mj_record_tags_RecordNavigate_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsRecordNavigate($event)); })("WidthChanged", function MjRecordFormContainerComponent_Conditional_16_Template_mj_record_tags_WidthChanged_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelWidthChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.EffectiveRecord)("WidthPx", ctx_r1.TagsPanelWidth);
 } }
-function MjRecordFormContainerComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-record-attachments", 49);
-    i0.ɵɵlistener("PanelClosed", function MjRecordFormContainerComponent_Conditional_15_Template_mj_record_attachments_PanelClosed_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAttachmentsPanelClosed()); })("AttachmentCountChanged", function MjRecordFormContainerComponent_Conditional_15_Template_mj_record_attachments_AttachmentCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAttachmentCountChanged($event)); });
+function MjRecordFormContainerComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-record-attachments", 58);
+    i0.ɵɵlistener("PanelClosed", function MjRecordFormContainerComponent_Conditional_17_Template_mj_record_attachments_PanelClosed_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAttachmentsPanelClosed()); })("AttachmentCountChanged", function MjRecordFormContainerComponent_Conditional_17_Template_mj_record_attachments_AttachmentCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAttachmentCountChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Record", ctx_r1.EffectiveRecord)("Visible", true);
 } }
-function MjRecordFormContainerComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-management-dialog", 50);
-    i0.ɵɵlistener("complete", function MjRecordFormContainerComponent_Conditional_16_Template_mj_list_management_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementComplete($event)); })("cancel", function MjRecordFormContainerComponent_Conditional_16_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); });
+function MjRecordFormContainerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-list-management-dialog", 59);
+    i0.ɵɵlistener("complete", function MjRecordFormContainerComponent_Conditional_18_Template_mj_list_management_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementComplete($event)); })("cancel", function MjRecordFormContainerComponent_Conditional_18_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -356,12 +542,17 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
     ngZone = inject(NgZone);
     notificationService = inject(MJNotificationService);
     chrome = inject(FormChromeCoordinator);
+    sectionIndicators = inject(FormSectionIndicatorCoordinator);
     slots = inject(FormSlotCoordinator);
     recordRefresh = inject(FormRecordRefreshCoordinator);
     host = inject((ElementRef));
     destroy$ = new Subject();
     panelNavReset$ = new Subject();
     chromeResolveTimer = null;
+    /** Last values `ngDoCheck` resolved the rail for — see that method. */
+    lastRailEditMode = false;
+    lastRailShowEmptyFields = false;
+    lastRailSearchFilter = '';
     chromeRules = [];
     chromeRulesForEntityId = null;
     // ---- Internal State ----
@@ -800,11 +991,45 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
         this.slots.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.scheduleChromeResolve();
         });
+        // A section registering / leaving, or reporting an edit, changes what the rail
+        // shows; the container is OnPush, so re-read on the next pass rather than on the
+        // 200ms dirty poll below.
+        this.sectionIndicators.Changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.cdr.markForCheck();
+        });
         this.RestoreChromePrefs();
         this.scheduleChromeResolve();
         // Watch for changes to record dirty state
         this.watchRecordChanges();
     }
+    /**
+     * Edit mode and Show Empty Fields both flip `mj-panel-empty` on a panel whose
+     * fields are all blank (see `MjFormFieldComponent.ShouldHideField`), and
+     * `domPanelSnapshots()` drops those panels from the rail. The panel itself
+     * recomputes live, but the rail is only resolved on structural changes — so
+     * without this the nav entry never comes back on switching to edit.
+     *
+     * Watched here rather than in `OnEditModeChange` because the toolbar is not
+     * the only writer: `SaveRecord()` and `CancelEdit()` call `EndEditMode()` on
+     * the form component directly, bypassing that handler entirely.
+     */
+    ngDoCheck() {
+        const editMode = this.EffectiveEditMode;
+        const showEmptyFields = this.EffectiveShowEmptyFields;
+        // The section filter hides panels through their own host class, which is
+        // applied during change detection — after OnFilterChange's synchronous
+        // re-apply. Watching it here re-runs the chrome pass (setTimeout 0) once
+        // those classes are current, so the Details card edges skip hidden panels.
+        const searchFilter = this.EffectiveSearchFilter;
+        if (editMode === this.lastRailEditMode
+            && showEmptyFields === this.lastRailShowEmptyFields
+            && searchFilter === this.lastRailSearchFilter)
+            return;
+        this.lastRailEditMode = editMode;
+        this.lastRailShowEmptyFields = showEmptyFields;
+        this.lastRailSearchFilter = searchFilter;
+        this.scheduleChromeResolve();
+    }
     ngOnDestroy() {
         if (this.chromeResolveTimer) {
             clearTimeout(this.chromeResolveTimer);
@@ -820,6 +1045,68 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
         this.PersistChromePrefs();
         this.cdr.detectChanges();
     }
+    // ---- Section indicators on the rail ----
+    /**
+     * Unsaved-edit / invalid-field / warning counts for a rail group — summed over the
+     * section keys it fronts, since one group (notably `Details`) fronts many panels.
+     * Read live from each panel through {@link FormSectionIndicatorCoordinator}, so the
+     * rail can never disagree with the fields' own dot and underline.
+     */
+    ChromeGroupIndicators(group) {
+        return this.sectionIndicators.IndicatorsForKeys(group.SectionKeys);
+    }
+    /**
+     * Whole-form totals — what the COLLAPSED rail spine shows, since no individual
+     * rail item is visible there. Summed over the RAIL GROUPS (first-class + More), not
+     * over every registered panel: a panel the chrome dropped from the rail (System
+     * Metadata in left-nav, a claimed baked grid) is not something the user can reach
+     * from the rail, so the spine must add up to exactly what the expanded rail shows.
+     * Includes form-level validation failures no section claims, so a rejected save
+     * never leaves the user with a clean-looking rail.
+     */
+    get FormIndicators() {
+        return SumSectionIndicators(...this.ChromeGroups.map((group) => this.ChromeGroupIndicators(group)), TallyValidationErrors(this.unroutedValidationErrors()));
+    }
+    /** Failures no registered section claims — kept visible on the spine total. */
+    get UnroutedValidationErrorCount() {
+        return TallyValidationErrors(this.unroutedValidationErrors()).ErrorCount;
+    }
+    unroutedValidationErrors() {
+        const ctx = this.fc?.formContext;
+        if (!ctx?.showValidation || !ctx.validationErrors?.length)
+            return [];
+        // Only a section with a rail item may claim: a registered section the chrome dropped
+        // (hidden by config, in no group) has no badge anywhere, so its failures must stay
+        // in the whole-form total rather than disappear.
+        const reachable = new Set(this.ChromeGroups.flatMap((group) => group.SectionKeys));
+        return this.sectionIndicators.UnroutedValidationErrors(ctx.validationErrors, reachable);
+    }
+    /**
+     * One sentence for the persistent polite live region. The badges themselves are
+     * plain indicators (`role="img"`): they are inserted together with their text, which
+     * screen readers announce unreliably, and one edit can add three at once. A single
+     * region that exists from the start and changes its text announces once, reliably.
+     */
+    get FormIndicatorsAnnouncement() {
+        const totals = this.FormIndicators;
+        const parts = [];
+        if (totals.ErrorCount > 0)
+            parts.push(DescribeSectionErrors(totals.ErrorCount, 'this record'));
+        else if (totals.WarningCount > 0)
+            parts.push(DescribeSectionWarnings(totals.WarningCount, 'this record'));
+        if (totals.DirtyCount > 0)
+            parts.push(DescribeSectionDirty(totals.DirtyCount, 'this record'));
+        return parts.join('. ');
+    }
+    RailDirtyTitle(count, where) {
+        return DescribeSectionDirty(count, where);
+    }
+    RailErrorTitle(count, where) {
+        return DescribeSectionErrors(count, where);
+    }
+    RailWarningTitle(count, where) {
+        return DescribeSectionWarnings(count, where);
+    }
     ChromeGroupRowCount(group) {
         if (!this.fc?.GetSectionRowCount)
             return undefined;
@@ -1142,6 +1429,7 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
         if (!host)
             return;
         const layout = this.chrome.Spec.Layout;
+        const detailsKeys = [];
         host.querySelectorAll('mj-collapsible-panel').forEach((node) => {
             const key = node.getAttribute('data-section-key') ?? '';
             const variant = node.getAttribute('data-variant') ?? 'default';
@@ -1150,6 +1438,32 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
             node.classList.toggle('mj-chrome-show', layout === 'left-nav' && visible);
             node.classList.toggle('mj-chrome-hidden', !visible);
             node.classList.toggle('mj-form-role-more', inMore);
+            // Details shows several panels under one rail item; its FIELD panels
+            // render as ONE card (see the left-nav rules in the component CSS). A
+            // related grid pinned into Details (`ChromeGroup: 'details'`) keeps the
+            // chrome-less grid treatment and sits outside the card — the segment
+            // padding is sized for field rows, not for AG Grid.
+            const isDetails = layout === 'left-nav' && visible
+                && variant !== 'related-entity'
+                && IsDetailsSectionKey(this.chrome.Spec, key);
+            node.classList.toggle('mj-chrome-details', isDetails);
+            // A panel that hid ITSELF (`mj-search-hidden`: the section filter
+            // excludes it, or it has no renderable content while empty fields are
+            // hidden) is display: none — it must not hold a card edge, or the
+            // visible card loses that border, radius and edge padding.
+            if (isDetails && !node.classList.contains('mj-search-hidden'))
+                detailsKeys.push(key);
+        });
+        // The card's top and bottom edges follow the VISUAL order (CSS `order`
+        // = the form's section display order), not DOM order.
+        const edges = DetailsCardEdges(detailsKeys, (k) => this.FormComponent?.getSectionDisplayOrder(k) ?? 0);
+        host.querySelectorAll('mj-collapsible-panel.mj-chrome-details').forEach((node) => {
+            const key = node.getAttribute('data-section-key') ?? '';
+            node.classList.toggle('mj-chrome-details-first', key === edges.First);
+            node.classList.toggle('mj-chrome-details-last', key === edges.Last);
+        });
+        host.querySelectorAll('mj-collapsible-panel:not(.mj-chrome-details)').forEach((node) => {
+            node.classList.remove('mj-chrome-details-first', 'mj-chrome-details-last');
         });
     }
     isChromeKeyVisible(sectionKey, variant) {
@@ -1319,12 +1633,24 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
         const name = (this.EffectiveEntityInfo?.Name ?? 'entity').trim().toLowerCase();
         return `mj.formChrome.${name}.${suffix}`;
     }
+    /** Delegates to the pure decision in `form-chrome-rail-pref`, supplying this form's registrations. */
+    UnsavedLeadGroupKey() {
+        return UnsavedLeadGroupKey(this.EffectiveEntityInfo?.Name, CollectFormPanelRegistrations(), contributionRailKey);
+    }
     RestoreChromePrefs() {
         if (ShouldPersistChromeActiveGroup(this.EffectiveRecord?.IsSaved)) {
             const group = UserInfoEngine.Instance.GetSetting(this.chromePrefKey('activeGroup'));
             if (group)
                 this.chrome.ActiveGroupKey = group;
         }
+        else {
+            // A new record has no stored position to restore, so without this it opens on the lead
+            // group -- which is usually a summary, and a summary of a record with no data is a page of
+            // blanks. A contribution can opt out of that by declaring `leadsWhenUnsaved`.
+            const lead = this.UnsavedLeadGroupKey();
+            if (lead)
+                this.chrome.ActiveGroupKey = lead;
+        }
         const more = UserInfoEngine.Instance.GetSetting(this.chromePrefKey('moreExpanded'));
         if (more === '1')
             this.chrome.MoreExpanded = true;
@@ -1676,14 +2002,7 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
     }
     OnTagsRecordNavigate(event) {
         const md = this.ProviderToUse;
-        const entityInfo = md.Entities.find(e => e.Name === event.EntityName);
-        const pkey = new CompositeKey();
-        if (entityInfo) {
-            pkey.LoadFromURLSegment(entityInfo, event.RecordID);
-        }
-        else {
-            pkey.KeyValuePairs = [{ FieldName: 'ID', Value: event.RecordID }];
-        }
+        const pkey = CompositeKey.FromURLSegment(md.EntityByName(event.EntityName), event.RecordID);
         this.Navigate.emit({ Kind: 'record', EntityName: event.EntityName, PrimaryKey: pkey });
     }
     OnRecordChangesClosed() {
@@ -1907,63 +2226,68 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.recordChangesDrawer = _t.first);
-        } }, inputs: { Record: "Record", FormComponent: "FormComponent", EntityInfo: "EntityInfo", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", IsSaving: "IsSaving", IsRefreshing: "IsRefreshing", ToolbarConfig: "ToolbarConfig", RegisteredToolbarItems: "RegisteredToolbarItems", ToolbarItemOverrides: "ToolbarItemOverrides", WidthMode: "WidthMode", Variants: "Variants", CurrentVariantID: "CurrentVariantID" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", BeforeRefresh: "BeforeRefresh", RefreshRequested: "RefreshRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick", ToolbarItemClick: "ToolbarItemClick", VariantChange: "VariantChange", BeforeLayoutResolve: "BeforeLayoutResolve", AfterLayoutResolved: "AfterLayoutResolved", BeforeSectionActivate: "BeforeSectionActivate", AfterSectionActivated: "AfterSectionActivated" }, standalone: false, features: [i0.ɵɵProvidersFeature([FormSlotCoordinator, FormChromeCoordinator, FormRecordRefreshCoordinator]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 18, vars: 30, consts: [[3, "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "TagCount", "AttachmentCount", "AttachmentsAvailable", "IsAttachmentsPanelOpen", "VersionCount", "EntityInfo", "Config", "IsSaving", "IsRefreshing", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder", "ChromeLayout", "Variants", "CurrentVariantID", "RegisteredItems", "ItemOverrides", "FormComponent"], [1, "mj-forms-scroll-area"], [1, "mj-forms-panels-container"], [1, "mj-forms-layout-row"], ["aria-label", "Form sections", 1, "mj-forms-chrome-rail", 3, "is-collapsed", "is-resizing", "width"], [1, "mj-forms-all-panels"], [3, "Record", "FormComponent", "FormContext", "BakedSectionKeys", "ShowRelatedEntities"], [1, "mj-forms-more-overflow", 3, "is-expanded"], ["Slot", "after-everything", 3, "Entity", "Record", "FormComponent"], ["Variant", "no-results", "Title", "No sections found", "ActionText", "Clear search", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 1, "mj-forms-empty-search-state", 3, "Message"], [3, "Navigate", "Record", "EditMode", "Collapsed"], [3, "record", "AllowRestore"], [3, "Record", "WidthPx"], [3, "Record", "Visible"], [3, "visible", "config"], [3, "SectionOrderChange", "MembershipChange", "ResetRequested", "Closed", "Sections", "SectionOrder", "MoreSectionKeys", "LockedMoreKeys", "Visible"], [3, "Navigate", "EditModeChange", "BeforeSave", "SaveRequested", "BeforeCancel", "CancelRequested", "BeforeDelete", "DeleteRequested", "BeforeRefresh", "RefreshRequested", "FavoriteToggled", "BeforeHistoryView", "HistoryRequested", "BeforeListManagement", "ListManagementRequested", "ShowChangesRequested", "CustomButtonClick", "ToolbarItemClick", "FilterChange", "ExpandAllRequested", "CollapseAllRequested", "ShowEmptyFieldsChange", "WidthModeChange", "ResetSectionOrderRequested", "ManageSectionsRequested", "TagsPanelToggled", "AttachmentsPanelToggled", "VariantPicked", "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "TagCount", "AttachmentCount", "AttachmentsAvailable", "IsAttachmentsPanelOpen", "VersionCount", "EntityInfo", "Config", "IsSaving", "IsRefreshing", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder", "ChromeLayout", "Variants", "CurrentVariantID", "RegisteredItems", "ItemOverrides", "FormComponent"], ["aria-label", "Form sections", 1, "mj-forms-chrome-rail"], ["type", "button", 1, "mj-forms-chrome-rail-spine", 3, "title"], ["type", "button", 1, "mj-forms-chrome-rail-spine", 3, "click", "title"], [1, "mj-forms-chrome-rail-spine-label", 3, "mouseenter"], ["role", "separator", "aria-orientation", "vertical", "title", "Drag to resize sections", 1, "mj-forms-chrome-rail-resizer", 3, "pointerdown", "pointermove", "pointerup", "pointercancel"], [1, "mj-forms-chrome-rail-toolbar"], ["type", "button", 1, "mj-forms-chrome-rail-pin", 3, "click", "title"], [1, "fa-solid", "fa-thumbtack"], ["type", "button", "title", "Hide sections", "aria-label", "Hide form sections", 1, "mj-forms-chrome-rail-collapse", 3, "click"], [1, "fa-solid", "fa-angles-left"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", 3, "is-active", "is-drag-over"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", 3, "click", "keydown.enter", "keydown.space", "dragover", "dragleave", "drop"], ["title", "Drag to reorder", "draggable", "true", 1, "mj-forms-chrome-rail-handle"], [1, "mj-forms-chrome-rail-label", 3, "mouseenter"], [1, "mj-forms-chrome-rail-count", 3, "is-zero"], ["title", "Drag to reorder", "draggable", "true", 1, "mj-forms-chrome-rail-handle", 3, "dragstart", "dragend", "click"], [1, "fa-solid", "fa-grip-vertical"], [1, "mj-forms-chrome-rail-count"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-folder", 3, "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", 1, "mj-forms-chrome-rail-handle", "is-spacer"], ["aria-hidden", "true", 1, "fa-solid", "mj-forms-chrome-rail-more-toggle"], [1, "mj-forms-chrome-rail-more-tree"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-child", 3, "is-active", "is-drag-over"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-child", 3, "click", "keydown.enter", "keydown.space", "dragover", "dragleave", "drop"], [1, "mj-forms-more-overflow"], ["type", "button", 1, "mj-forms-more-overflow-toggle", 3, "click"], [1, "mj-forms-more-overflow-label"], [1, "mj-forms-more-overflow-preview"], [1, "fa-solid"], ["Variant", "no-results", "Title", "No sections found", "ActionText", "Clear search", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 1, "mj-forms-empty-search-state", 3, "Action", "Message"], [3, "RestoreRequested", "dialogClosed", "record", "AllowRestore"], [3, "PanelClosed", "TagCountChanged", "RecordNavigate", "WidthChanged", "Record", "WidthPx"], [3, "PanelClosed", "AttachmentCountChanged", "Record", "Visible"], [3, "complete", "cancel", "visible", "config"]], template: function MjRecordFormContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Record: "Record", FormComponent: "FormComponent", EntityInfo: "EntityInfo", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", IsSaving: "IsSaving", IsRefreshing: "IsRefreshing", ToolbarConfig: "ToolbarConfig", RegisteredToolbarItems: "RegisteredToolbarItems", ToolbarItemOverrides: "ToolbarItemOverrides", WidthMode: "WidthMode", Variants: "Variants", CurrentVariantID: "CurrentVariantID" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", BeforeRefresh: "BeforeRefresh", RefreshRequested: "RefreshRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick", ToolbarItemClick: "ToolbarItemClick", VariantChange: "VariantChange", BeforeLayoutResolve: "BeforeLayoutResolve", AfterLayoutResolved: "AfterLayoutResolved", BeforeSectionActivate: "BeforeSectionActivate", AfterSectionActivated: "AfterSectionActivated" }, standalone: false, features: [i0.ɵɵProvidersFeature([FormSlotCoordinator, FormChromeCoordinator, FormRecordRefreshCoordinator, FormSectionIndicatorCoordinator]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 20, vars: 31, consts: [[3, "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "TagCount", "AttachmentCount", "AttachmentsAvailable", "IsAttachmentsPanelOpen", "VersionCount", "EntityInfo", "Config", "IsSaving", "IsRefreshing", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder", "ChromeLayout", "Variants", "CurrentVariantID", "RegisteredItems", "ItemOverrides", "FormComponent"], ["aria-live", "polite", "aria-atomic", "true", 1, "mj-forms-visually-hidden"], [1, "mj-forms-scroll-area"], [1, "mj-forms-panels-container"], [1, "mj-forms-layout-row"], ["aria-label", "Form sections", 1, "mj-forms-chrome-rail", 3, "is-collapsed", "is-resizing", "width"], [1, "mj-forms-all-panels"], [3, "Record", "FormComponent", "FormContext", "BakedSectionKeys", "ShowRelatedEntities"], [1, "mj-forms-more-overflow", 3, "is-expanded"], ["Slot", "after-everything", 3, "Entity", "Record", "FormComponent"], ["Variant", "no-results", "Title", "No sections found", "ActionText", "Clear search", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 1, "mj-forms-empty-search-state", 3, "Message"], [3, "Navigate", "Record", "EditMode", "Collapsed"], [3, "record", "AllowRestore"], [3, "Record", "WidthPx"], [3, "Record", "Visible"], [3, "visible", "config"], [3, "SectionOrderChange", "MembershipChange", "ResetRequested", "Closed", "Sections", "SectionOrder", "MoreSectionKeys", "LockedMoreKeys", "Visible"], [3, "Navigate", "EditModeChange", "BeforeSave", "SaveRequested", "BeforeCancel", "CancelRequested", "BeforeDelete", "DeleteRequested", "BeforeRefresh", "RefreshRequested", "FavoriteToggled", "BeforeHistoryView", "HistoryRequested", "BeforeListManagement", "ListManagementRequested", "ShowChangesRequested", "CustomButtonClick", "ToolbarItemClick", "FilterChange", "ExpandAllRequested", "CollapseAllRequested", "ShowEmptyFieldsChange", "WidthModeChange", "ResetSectionOrderRequested", "ManageSectionsRequested", "TagsPanelToggled", "AttachmentsPanelToggled", "VariantPicked", "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "TagCount", "AttachmentCount", "AttachmentsAvailable", "IsAttachmentsPanelOpen", "VersionCount", "EntityInfo", "Config", "IsSaving", "IsRefreshing", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder", "ChromeLayout", "Variants", "CurrentVariantID", "RegisteredItems", "ItemOverrides", "FormComponent"], ["aria-label", "Form sections", 1, "mj-forms-chrome-rail"], ["type", "button", 1, "mj-forms-chrome-rail-spine", 3, "title"], ["type", "button", 1, "mj-forms-chrome-rail-spine", 3, "click", "title"], [1, "mj-forms-chrome-rail-spine-label", 3, "mouseenter"], ["role", "img", 1, "mj-forms-chrome-rail-error", "is-spine", 3, "title"], ["role", "img", 1, "mj-forms-chrome-rail-warning", "is-spine", 3, "title"], ["role", "img", 1, "mj-forms-chrome-rail-dirty", "is-spine", 3, "title"], ["role", "separator", "aria-orientation", "vertical", "title", "Drag to resize sections", 1, "mj-forms-chrome-rail-resizer", 3, "pointerdown", "pointermove", "pointerup", "pointercancel"], [1, "mj-forms-chrome-rail-toolbar"], ["type", "button", 1, "mj-forms-chrome-rail-pin", 3, "click", "title"], [1, "fa-solid", "fa-thumbtack"], ["type", "button", "title", "Hide sections", "aria-label", "Hide form sections", 1, "mj-forms-chrome-rail-collapse", 3, "click"], [1, "fa-solid", "fa-angles-left"], [1, "mj-forms-chrome-rail-items"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", 3, "is-active", "is-drag-over", "has-errors", "is-dirty"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", 3, "click", "keydown.enter", "keydown.space", "dragover", "dragleave", "drop"], ["title", "Drag to reorder", "draggable", "true", 1, "mj-forms-chrome-rail-handle"], [1, "mj-forms-chrome-rail-label", 3, "mouseenter"], ["role", "img", 1, "mj-forms-chrome-rail-dirty", 3, "title"], ["role", "img", 1, "mj-forms-chrome-rail-error", 3, "title"], ["role", "img", 1, "mj-forms-chrome-rail-warning", 3, "title"], [1, "mj-forms-chrome-rail-count"], ["title", "Drag to reorder", "draggable", "true", 1, "mj-forms-chrome-rail-handle", 3, "dragstart", "dragend", "click"], [1, "fa-solid", "fa-grip-vertical"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-exclamation"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-folder", 3, "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", 1, "mj-forms-chrome-rail-handle", "is-spacer"], ["aria-hidden", "true", 1, "fa-solid", "mj-forms-chrome-rail-more-toggle"], [1, "mj-forms-chrome-rail-more-tree"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-child", 3, "is-active", "is-drag-over", "has-errors", "is-dirty"], ["role", "button", "tabindex", "0", 1, "mj-forms-chrome-rail-item", "is-more-child", 3, "click", "keydown.enter", "keydown.space", "dragover", "dragleave", "drop"], [1, "mj-forms-more-overflow"], ["type", "button", 1, "mj-forms-more-overflow-toggle", 3, "click"], [1, "mj-forms-more-overflow-label"], [1, "mj-forms-more-overflow-preview"], [1, "fa-solid"], ["Variant", "no-results", "Title", "No sections found", "ActionText", "Clear search", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 1, "mj-forms-empty-search-state", 3, "Action", "Message"], [3, "RestoreRequested", "dialogClosed", "record", "AllowRestore"], [3, "PanelClosed", "TagCountChanged", "RecordNavigate", "WidthChanged", "Record", "WidthPx"], [3, "PanelClosed", "AttachmentCountChanged", "Record", "Visible"], [3, "complete", "cancel", "visible", "config"]], template: function MjRecordFormContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵprojection(0);
             i0.ɵɵconditionalCreate(1, MjRecordFormContainerComponent_Conditional_1_Template, 1, 31, "mj-form-toolbar", 0);
-            i0.ɵɵelementStart(2, "div", 1)(3, "div", 2)(4, "div", 3);
-            i0.ɵɵconditionalCreate(5, MjRecordFormContainerComponent_Conditional_5_Template, 3, 8, "nav", 4);
-            i0.ɵɵelementStart(6, "div", 5);
-            i0.ɵɵprojection(7, 1);
-            i0.ɵɵconditionalCreate(8, MjRecordFormContainerComponent_Conditional_8_Template, 1, 5, "mj-form-contributions", 6);
-            i0.ɵɵconditionalCreate(9, MjRecordFormContainerComponent_Conditional_9_Template, 7, 10, "div", 7);
-            i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_10_Template, 1, 3, "mj-form-panel-slot", 8);
-            i0.ɵɵconditionalCreate(11, MjRecordFormContainerComponent_Conditional_11_Template, 1, 1, "mj-empty-state", 9);
+            i0.ɵɵelementStart(2, "span", 1);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 2)(5, "div", 3)(6, "div", 4);
+            i0.ɵɵconditionalCreate(7, MjRecordFormContainerComponent_Conditional_7_Template, 3, 8, "nav", 5);
+            i0.ɵɵelementStart(8, "div", 6);
+            i0.ɵɵprojection(9, 1);
+            i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_10_Template, 1, 5, "mj-form-contributions", 7);
+            i0.ɵɵconditionalCreate(11, MjRecordFormContainerComponent_Conditional_11_Template, 7, 10, "div", 8);
+            i0.ɵɵconditionalCreate(12, MjRecordFormContainerComponent_Conditional_12_Template, 1, 3, "mj-form-panel-slot", 9);
+            i0.ɵɵconditionalCreate(13, MjRecordFormContainerComponent_Conditional_13_Template, 1, 1, "mj-empty-state", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "mj-isa-related-panel", 10);
-            i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Template_mj_isa_related_panel_Navigate_12_listener($event) { return ctx.OnNavigate($event); });
+            i0.ɵɵelementStart(14, "mj-isa-related-panel", 11);
+            i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Template_mj_isa_related_panel_Navigate_14_listener($event) { return ctx.OnNavigate($event); });
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(13, MjRecordFormContainerComponent_Conditional_13_Template, 1, 2, "mj-record-changes", 11);
-            i0.ɵɵconditionalCreate(14, MjRecordFormContainerComponent_Conditional_14_Template, 1, 2, "mj-record-tags", 12);
-            i0.ɵɵconditionalCreate(15, MjRecordFormContainerComponent_Conditional_15_Template, 1, 2, "mj-record-attachments", 13);
-            i0.ɵɵconditionalCreate(16, MjRecordFormContainerComponent_Conditional_16_Template, 1, 8, "mj-list-management-dialog", 14);
-            i0.ɵɵelementStart(17, "mj-section-manager", 15);
-            i0.ɵɵlistener("SectionOrderChange", function MjRecordFormContainerComponent_Template_mj_section_manager_SectionOrderChange_17_listener($event) { return ctx.OnSectionOrderChange($event); })("MembershipChange", function MjRecordFormContainerComponent_Template_mj_section_manager_MembershipChange_17_listener($event) { return ctx.OnChromeMembershipChange($event); })("ResetRequested", function MjRecordFormContainerComponent_Template_mj_section_manager_ResetRequested_17_listener() { return ctx.OnSectionManagerReset(); })("Closed", function MjRecordFormContainerComponent_Template_mj_section_manager_Closed_17_listener() { return ctx.OnSectionManagerClosed(); });
+            i0.ɵɵconditionalCreate(15, MjRecordFormContainerComponent_Conditional_15_Template, 1, 2, "mj-record-changes", 12);
+            i0.ɵɵconditionalCreate(16, MjRecordFormContainerComponent_Conditional_16_Template, 1, 2, "mj-record-tags", 13);
+            i0.ɵɵconditionalCreate(17, MjRecordFormContainerComponent_Conditional_17_Template, 1, 2, "mj-record-attachments", 14);
+            i0.ɵɵconditionalCreate(18, MjRecordFormContainerComponent_Conditional_18_Template, 1, 8, "mj-list-management-dialog", 15);
+            i0.ɵɵelementStart(19, "mj-section-manager", 16);
+            i0.ɵɵlistener("SectionOrderChange", function MjRecordFormContainerComponent_Template_mj_section_manager_SectionOrderChange_19_listener($event) { return ctx.OnSectionOrderChange($event); })("MembershipChange", function MjRecordFormContainerComponent_Template_mj_section_manager_MembershipChange_19_listener($event) { return ctx.OnChromeMembershipChange($event); })("ResetRequested", function MjRecordFormContainerComponent_Template_mj_section_manager_ResetRequested_19_listener() { return ctx.OnSectionManagerReset(); })("Closed", function MjRecordFormContainerComponent_Template_mj_section_manager_Closed_19_listener() { return ctx.OnSectionManagerClosed(); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.EffectiveShowToolbar ? 1 : -1);
             i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.FormIndicatorsAnnouncement);
+            i0.ɵɵadvance(2);
             i0.ɵɵclassProp("mj-forms-panels--full-width", ctx.EffectiveWidthMode === "full-width")("mj-forms-panels--edit-mode", ctx.EffectiveEditMode)("mj-forms-panels--has-isa-panel", ctx.HasIsaRelatedItems);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("mj-forms-layout--left-nav", ctx.ChromeLayout === "left-nav")("mj-forms-layout--accordion", ctx.ChromeLayout === "accordion")("mj-forms-layout--more", ctx.IsChromeMoreActive);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowChromeRail ? 5 : -1);
+            i0.ɵɵconditional(ctx.ShowChromeRail ? 7 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.Record && ctx.FormComponent ? 8 : -1);
+            i0.ɵɵconditional(ctx.Record && ctx.FormComponent ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowMoreToggle ? 9 : -1);
+            i0.ɵɵconditional(ctx.ShowMoreToggle ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Record && ctx.FormComponent ? 10 : -1);
+            i0.ɵɵconditional(ctx.Record && ctx.FormComponent ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.EffectiveSearchFilter && ctx.SearchHasNoMatches ? 11 : -1);
+            i0.ɵɵconditional(ctx.EffectiveSearchFilter && ctx.SearchHasNoMatches ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Record", ctx.EffectiveRecord)("EditMode", ctx.EffectiveEditMode)("Collapsed", ctx.EffectiveWidthMode === "full-width");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowRecordChanges && ctx.EffectiveRecord ? 13 : -1);
+            i0.ɵɵconditional(ctx.ShowRecordChanges && ctx.EffectiveRecord ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowTagsPanel && ctx.EffectiveRecord ? 14 : -1);
+            i0.ɵɵconditional(ctx.ShowTagsPanel && ctx.EffectiveRecord ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowAttachmentsPanel && ctx.AttachmentsAvailable && ctx.EffectiveRecord ? 15 : -1);
+            i0.ɵɵconditional(ctx.ShowAttachmentsPanel && ctx.AttachmentsAvailable && ctx.EffectiveRecord ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowListManagement && ctx.EffectiveRecord ? 16 : -1);
+            i0.ɵɵconditional(ctx.ShowListManagement && ctx.EffectiveRecord ? 18 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Sections", ctx.SectionManagerItems)("SectionOrder", ctx.SectionManagerOrder)("MoreSectionKeys", ctx.SectionManagerMoreKeys)("LockedMoreKeys", ctx.SectionManagerLockedMoreKeys)("Visible", ctx.ShowSectionManager);
-        } }, dependencies: [i1.MJEmptyStateComponent, i2.RecordChangesComponent, i3.ListManagementDialogComponent, i4.RecordTagsComponent, i5.RecordAttachmentsComponent, i6.MjFormToolbarComponent, i7.MjSectionManagerComponent, i8.MjIsaRelatedPanelComponent, i9.FormPanelSlotComponent, i10.FormContributionsComponent], styles: ["/* ============================================\n   RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n   Top-level wrapper: toolbar + scrollable content\n   ============================================ */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ============================================\n   SCROLL AREA (full-width so mouse wheel works anywhere)\n   ============================================ */\n.mj-forms-scroll-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   PANELS CONTAINER (centered content within scroll area)\n   ============================================ */\n.mj-forms-panels-container {\n  padding: 24px 32px 48px;\n  max-width: 920px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n  max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n  max-width: none;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav) {\n  padding: 16px 20px 24px;\n  display: flex;\n  flex-direction: column;\n  /* Definite height = the scroll-area's client box. min-height: 100% alone\n     lets the column grow with content and never gives related grids a\n     containing-block height, so Height:auto (100%) on the grid collapses. */\n  height: 100%;\n  max-height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Centered left-nav keeps the form column at the same 920px as accordion,\n   plus the rail. Full-width still uses .mj-forms-panels--full-width. */\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav):not(.mj-forms-panels--full-width) {\n  max-width: 1160px;\n}\n\n.mj-forms-layout-row.mj-forms-layout--left-nav {\n  flex: 1;\n  min-height: 0;\n  /* Wins over .mj-forms-layout-row { align-items: flex-start } so the\n     body column stretches to the rail / viewport instead of hugging content. */\n  align-items: stretch;\n  gap: 16px;\n}\n\n/* Left-nav: only the active rail item is in the body. Slot-mounted\n   panels never inject the container coordinator, so host classes set\n   from the container are the hide/show channel that always reaches them. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-hidden,\n.mj-forms-layout--accordion mj-collapsible-panel.mj-chrome-hidden {\n  display: none;\n}\n\n/* Selected item: no accordion chrome \u2014 the rail is the header. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-header {\n  display: none;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel {\n  box-shadow: none;\n  border: 0;\n  background: transparent;\n  border-radius: 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-body--collapsed {\n  max-height: none;\n  padding: 0;\n  opacity: 1;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-content {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show {\n  /* Content-sized (see RelatedGridHeightPx). Do not flex-fill leftover\n     column space \u2014 a form header above the grid can collapse that to 0. */\n  flex: 0 0 auto;\n  min-height: 0;\n}\n\n/* Accordion related panels use a 400px resizable box. Left-nav grids\n   set their own pixel height from row count (RelatedGridHeightPx). */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show .mj-forms-panel-content {\n  height: auto;\n  max-height: none;\n  overflow: hidden;\n  resize: none;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels {\n  gap: 0;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Details (field panels) can be taller than the viewport \u2014 scroll inside the\n   column. Related grids scroll inside AG Grid instead. */\n.mj-forms-layout--left-nav .mj-forms-all-panels:has(mj-collapsible-panel.mj-chrome-show:not(.mj-panel--related-entity)) {\n  overflow-y: auto;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels > *:not(mj-collapsible-panel.mj-panel--related-entity) {\n  flex-shrink: 0;\n}\n\n.mj-forms-layout--left-nav .biz-hero {\n  margin-bottom: 4px;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity,\n.mj-forms-panels--edit-mode .mj-forms-more-overflow {\n  display: none;\n}\n\n/* Detail / More panels sort after the overflow footer */\nmj-collapsible-panel.mj-form-role-detail,\nmj-collapsible-panel.mj-form-role-more {\n  order: 8500;\n}\n\n.mj-forms-more-overflow {\n  order: 8400;\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.mj-forms-more-overflow-toggle {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.mj-forms-more-overflow-toggle:hover {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-more-overflow-label {\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-more-overflow-preview {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--mj-text-disabled);\n  font-weight: var(--mj-font-normal);\n}\n\n.mj-forms-more-overflow-toggle .fa-chevron-right,\n.mj-forms-more-overflow-toggle .fa-chevron-down {\n  margin-left: auto;\n}\n\n.mj-forms-chrome-rail {\n  flex: 0 0 auto;\n  width: 200px;\n  max-width: 360px;\n  min-width: 160px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: sticky;\n  top: 0;\n  align-self: stretch;\n  min-height: 0;\n  padding: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n}\n\n.mj-forms-chrome-rail.is-resizing {\n  user-select: none;\n}\n\n.mj-forms-chrome-rail.is-collapsed {\n  flex: 0 0 36px;\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  padding: 8px 0;\n  overflow: hidden;\n}\n\n.mj-forms-chrome-rail-resizer {\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 8px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 3;\n  touch-action: none;\n}\n\n.mj-forms-chrome-rail-resizer::after {\n  content: '';\n  position: absolute;\n  top: 12px;\n  bottom: 12px;\n  left: 3px;\n  width: 2px;\n  border-radius: 1px;\n  background: transparent;\n}\n\n.mj-forms-chrome-rail:hover .mj-forms-chrome-rail-resizer::after,\n.mj-forms-chrome-rail.is-resizing .mj-forms-chrome-rail-resizer::after {\n  background: var(--mj-border-strong);\n}\n\n.mj-forms-layout--right-nav .mj-forms-chrome-rail-resizer {\n  right: auto;\n  left: -4px;\n}\n\n.mj-forms-chrome-rail-spine {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  padding: 8px 0;\n  border: 0;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-spine:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-forms-chrome-rail-spine > i {\n  flex-shrink: 0;\n}\n\n.mj-forms-chrome-rail-spine-label {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.04em;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 100%;\n}\n\n.mj-forms-chrome-rail-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 2px;\n  padding: 2px 4px 6px;\n}\n\n.mj-forms-chrome-rail-pin,\n.mj-forms-chrome-rail-collapse {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-pin:hover,\n.mj-forms-chrome-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-pin:not(.is-pinned) i {\n  transform: rotate(45deg);\n}\n\n.mj-forms-chrome-rail-pin.is-pinned {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-item > i {\n  width: 1.15em;\n  flex-shrink: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.mj-forms-chrome-rail-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-chrome-rail-item.is-active::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 6px;\n  bottom: 6px;\n  width: 3px;\n  border-radius: 0 3px 3px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-label {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-drag-over {\n  outline: 1px dashed var(--mj-border-focus);\n  outline-offset: -1px;\n}\n\n.mj-forms-chrome-rail-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  margin-left: -4px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: opacity var(--mj-transition-base, 0.15s) ease;\n}\n\n.mj-forms-chrome-rail-item:hover .mj-forms-chrome-rail-handle,\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-handle {\n  opacity: 1;\n}\n\n.mj-forms-chrome-rail-handle.is-spacer {\n  opacity: 0;\n  pointer-events: none;\n  cursor: default;\n}\n\n.mj-forms-chrome-rail-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-handle:active {\n  cursor: grabbing;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder {\n  position: relative;\n  margin-top: 14px;\n  padding-top: 14px;\n  color: var(--mj-text-muted);\n  border-radius: 0;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 8px;\n  right: 8px;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--mj-border-strong) 18%,\n    var(--mj-border-strong) 82%,\n    transparent 100%\n  );\n}\n\n.mj-forms-chrome-rail-item.is-more-folder:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-item.is-more-folder.is-expanded {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-more-toggle {\n  margin-left: auto;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-chrome-rail-more-tree {\n  margin-left: 22px;\n  padding-left: 6px;\n  border-left: 1px solid var(--mj-border-subtle);\n}\n\n.mj-forms-chrome-rail-item.is-more-child {\n  padding-left: 8px;\n}\n\n.mj-forms-chrome-rail-count.is-zero {\n  opacity: 0.55;\n}\n\n.mj-forms-chrome-rail-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-forms-chrome-rail-count {\n  min-width: 1.25rem;\n  padding: 0 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  text-align: center;\n}\n\n@media (max-width: 720px) {\n  .mj-forms-layout--left-nav {\n    flex-direction: column;\n  }\n\n  .mj-forms-chrome-rail {\n    flex: 1 1 auto;\n    width: 100%;\n    position: static;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mj-forms-chrome-rail-resizer {\n    display: none;\n  }\n\n  .mj-forms-chrome-rail.is-collapsed {\n    flex: 0 0 auto;\n    width: 100%;\n    min-width: 0;\n    max-width: none;\n    height: 36px;\n    padding: 0;\n  }\n\n  .mj-forms-chrome-rail-spine {\n    flex-direction: row;\n    padding: 0 12px;\n  }\n\n  .mj-forms-chrome-rail-spine-label {\n    writing-mode: horizontal-tb;\n    transform: none;\n    max-height: none;\n  }\n\n  .mj-forms-chrome-rail-toolbar {\n    width: 100%;\n  }\n\n  .mj-forms-chrome-rail-item {\n    width: auto;\n  }\n}\n\n/* ============================================\n   EMPTY SEARCH STATE\n   ============================================ */\n.mj-forms-empty-search-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 24px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n  font-size: 32px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n  text-decoration: underline;\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 768px) {\n  .mj-forms-panels-container {\n    padding: 16px 12px 32px;\n  }\n}\n\n/* ====================================================================\n   VARIANT PICKER \u2014 between toolbar and form body\n   Compact \"Form: <name> \u25BE\" row that appears when more than one variant\n   is applicable for the current entity record.\n   ==================================================================== */\n\n.mj-form-variant-picker {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.mj-form-variant-picker-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  min-width: 160px;\n}\n.mj-form-variant-picker-control:hover,\n.mj-form-variant-picker-control:focus,\n.mj-form-variant-picker-control.open {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.mj-form-variant-picker-current {\n  font-weight: 600;\n  flex: 1;\n}\n.mj-form-variant-picker-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 50;\n  min-width: 280px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));\n  padding: 4px;\n  max-height: 320px;\n  overflow: auto;\n}\n.mj-form-variant-picker-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.mj-form-variant-picker-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mj-form-variant-picker-row.current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n.mj-form-variant-picker-row.inactive {\n  opacity: 0.7;\n}\n.mj-form-variant-picker-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n.mj-form-variant-picker-row-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mj-form-variant-picker-row-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.mj-form-variant-picker-check {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n/* Retrospective fix #8 \u2014 visually distinguish the Default row from variants. */\n.mj-form-variant-picker-row.mj-form-variant-picker-default {\n  border-bottom: 1px dashed var(--mj-border-default);\n  margin-bottom: 4px;\n  padding-bottom: 10px;\n}\n.mj-form-variant-picker-default-tag {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 11px;\n  margin-left: 4px;\n}\n"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.MJEmptyStateComponent, i2.RecordChangesComponent, i3.ListManagementDialogComponent, i4.RecordTagsComponent, i5.RecordAttachmentsComponent, i6.MjFormToolbarComponent, i7.MjSectionManagerComponent, i8.MjIsaRelatedPanelComponent, i9.FormPanelSlotComponent, i10.FormContributionsComponent], styles: ["/* ============================================\n   RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n   Top-level wrapper: toolbar + scrollable content\n   ============================================ */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ============================================\n   SCROLL AREA (full-width so mouse wheel works anywhere)\n   ============================================ */\n.mj-forms-scroll-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   PANELS CONTAINER (centered content within scroll area)\n   ============================================ */\n.mj-forms-panels-container {\n  padding: 24px 32px 48px;\n  max-width: 920px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n  max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n  max-width: none;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav) {\n  padding: 16px 20px 24px;\n  display: flex;\n  flex-direction: column;\n  /* Definite height = the scroll-area's client box. min-height: 100% alone\n     lets the column grow with content and never gives related grids a\n     containing-block height, so Height:auto (100%) on the grid collapses. */\n  height: 100%;\n  max-height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Centered left-nav keeps the form column at the same 920px as accordion,\n   plus the rail. Full-width still uses .mj-forms-panels--full-width. */\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav):not(.mj-forms-panels--full-width) {\n  max-width: 1160px;\n}\n\n.mj-forms-layout-row.mj-forms-layout--left-nav {\n  flex: 1;\n  min-height: 0;\n  /* Wins over .mj-forms-layout-row { align-items: flex-start } so the\n     body column stretches to the rail / viewport instead of hugging content. */\n  align-items: stretch;\n  gap: 16px;\n}\n\n/* Left-nav: only the active rail item is in the body. Slot-mounted\n   panels never inject the container coordinator, so host classes set\n   from the container are the hide/show channel that always reaches them. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-hidden,\n.mj-forms-layout--accordion mj-collapsible-panel.mj-chrome-hidden {\n  display: none;\n}\n\n/* Selected item: no accordion chrome \u2014 the rail is the header. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-header {\n  display: none;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel {\n  box-shadow: none;\n  border: 0;\n  background: transparent;\n  border-radius: 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-body--collapsed {\n  max-height: none;\n  padding: 0;\n  opacity: 1;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-content {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n\n/* Details: every field panel shows under ONE rail item, and the rail label\n   cannot head several loose field lists \u2014 without a surface the rows float\n   on the page background. So the Details panels render as ONE card: each\n   panel is a segment (surface + side borders, no radius), and the container\n   marks the visual first / last (CSS order, not DOM order) to close the top\n   and bottom edges. No per-section headers \u2014 the sections are plain groups. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details .mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first {\n  margin-top: 8px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first .mj-forms-panel {\n  border-top: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-last .mj-forms-panel {\n  border-bottom: 1px solid var(--mj-border-default);\n  border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* One panel = whole card: both edges on the same element. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first.mj-chrome-details-last .mj-forms-panel {\n  border-radius: var(--mj-radius-md);\n}\n\n/* Segment padding: sides always; top / bottom only at the card's edges, and a\n   half-step between segments so the groups still read as groups. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details .mj-forms-panel-content {\n  padding: 8px 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first .mj-forms-panel-content {\n  padding-top: 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-last .mj-forms-panel-content {\n  padding-bottom: 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show {\n  /* Content-sized (see RelatedGridHeightPx). Do not flex-fill leftover\n     column space \u2014 a form header above the grid can collapse that to 0. */\n  flex: 0 0 auto;\n  min-height: 0;\n}\n\n/* Accordion related panels use a 400px resizable box. Left-nav grids\n   set their own pixel height from row count (RelatedGridHeightPx). */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show .mj-forms-panel-content {\n  height: auto;\n  max-height: none;\n  overflow: hidden;\n  resize: none;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels {\n  gap: 0;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Details (field panels) can be taller than the viewport \u2014 scroll inside the\n   column. Related grids scroll inside AG Grid instead. */\n.mj-forms-layout--left-nav .mj-forms-all-panels:has(mj-collapsible-panel.mj-chrome-show:not(.mj-panel--related-entity)) {\n  overflow-y: auto;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels > *:not(mj-collapsible-panel.mj-panel--related-entity) {\n  flex-shrink: 0;\n}\n\n.mj-forms-layout--left-nav .biz-hero {\n  margin-bottom: 4px;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity,\n.mj-forms-panels--edit-mode .mj-forms-more-overflow {\n  display: none;\n}\n\n/* Detail / More panels sort after the overflow footer */\nmj-collapsible-panel.mj-form-role-detail,\nmj-collapsible-panel.mj-form-role-more {\n  order: 8500;\n}\n\n.mj-forms-more-overflow {\n  order: 8400;\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.mj-forms-more-overflow-toggle {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.mj-forms-more-overflow-toggle:hover {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-more-overflow-label {\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-more-overflow-preview {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--mj-text-disabled);\n  font-weight: var(--mj-font-normal);\n}\n\n.mj-forms-more-overflow-toggle .fa-chevron-right,\n.mj-forms-more-overflow-toggle .fa-chevron-down {\n  margin-left: auto;\n}\n\n.mj-forms-chrome-rail {\n  flex: 0 0 auto;\n  width: 200px;\n  max-width: 360px;\n  min-width: 160px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: sticky;\n  top: 0;\n  align-self: stretch;\n  min-height: 0;\n  padding: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n}\n\n/* The rail is as tall as the body column; when it has more items than fit,\n   the ITEMS scroll (the pin / collapse toolbar above stays fixed). Without\n   this the overflow was clipped by the panels container. */\n.mj-forms-chrome-rail-items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin;\n}\n\n.mj-forms-chrome-rail.is-resizing {\n  user-select: none;\n}\n\n.mj-forms-chrome-rail.is-collapsed {\n  flex: 0 0 36px;\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  padding: 8px 0;\n  overflow: hidden;\n}\n\n.mj-forms-chrome-rail-resizer {\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 8px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 3;\n  touch-action: none;\n}\n\n.mj-forms-chrome-rail-resizer::after {\n  content: '';\n  position: absolute;\n  top: 12px;\n  bottom: 12px;\n  left: 3px;\n  width: 2px;\n  border-radius: 1px;\n  background: transparent;\n}\n\n.mj-forms-chrome-rail:hover .mj-forms-chrome-rail-resizer::after,\n.mj-forms-chrome-rail.is-resizing .mj-forms-chrome-rail-resizer::after {\n  background: var(--mj-border-strong);\n}\n\n.mj-forms-layout--right-nav .mj-forms-chrome-rail-resizer {\n  right: auto;\n  left: -4px;\n}\n\n.mj-forms-chrome-rail-spine {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  padding: 8px 0;\n  border: 0;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-spine:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-forms-chrome-rail-spine > i {\n  flex-shrink: 0;\n}\n\n.mj-forms-chrome-rail-spine-label {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.04em;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 100%;\n}\n\n.mj-forms-chrome-rail-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 2px;\n  padding: 2px 4px 6px;\n}\n\n.mj-forms-chrome-rail-pin,\n.mj-forms-chrome-rail-collapse {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-pin:hover,\n.mj-forms-chrome-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-pin:not(.is-pinned) i {\n  transform: rotate(45deg);\n}\n\n.mj-forms-chrome-rail-pin.is-pinned {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-item > i {\n  width: 1.15em;\n  flex-shrink: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.mj-forms-chrome-rail-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-chrome-rail-item.is-active::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 6px;\n  bottom: 6px;\n  width: 3px;\n  border-radius: 0 3px 3px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-label {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-drag-over {\n  outline: 1px dashed var(--mj-border-focus);\n  outline-offset: -1px;\n}\n\n.mj-forms-chrome-rail-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  margin-left: -4px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: opacity var(--mj-transition-base, 0.15s) ease;\n}\n\n.mj-forms-chrome-rail-item:hover .mj-forms-chrome-rail-handle,\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-handle {\n  opacity: 1;\n}\n\n.mj-forms-chrome-rail-handle.is-spacer {\n  opacity: 0;\n  pointer-events: none;\n  cursor: default;\n}\n\n.mj-forms-chrome-rail-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-handle:active {\n  cursor: grabbing;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder {\n  position: relative;\n  margin-top: 14px;\n  padding-top: 14px;\n  color: var(--mj-text-muted);\n  border-radius: 0;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 8px;\n  right: 8px;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--mj-border-strong) 18%,\n    var(--mj-border-strong) 82%,\n    transparent 100%\n  );\n}\n\n.mj-forms-chrome-rail-item.is-more-folder:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-item.is-more-folder.is-expanded {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-more-toggle {\n  margin-left: auto;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-chrome-rail-more-tree {\n  margin-left: 22px;\n  padding-left: 6px;\n  border-left: 1px solid var(--mj-border-subtle);\n}\n\n.mj-forms-chrome-rail-item.is-more-child {\n  padding-left: 8px;\n}\n\n.mj-forms-chrome-rail-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related-grid row count. Not rendered at 0 \u2014 an empty grid is not a signal, and a\n   grey \"0\" beside the red invalid count reads as one more thing to attend to. */\n.mj-forms-chrome-rail-count {\n  min-width: 1.25rem;\n  padding: 0 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  text-align: center;\n}\n\n/* Screen-reader-only text (the indicators' live region). */\n.mj-forms-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ============================================\n   RAIL SECTION INDICATORS\n   A rail item says WHICH section holds unsaved edits or an invalid field, read\n   live from the panels it fronts (FormSectionIndicatorCoordinator). Same idioms\n   as the fields themselves: the 6px amber dot an edited field shows after its\n   label, and the error colour a failing field paints its underline in.\n   ============================================ */\n.mj-forms-chrome-rail-dirty {\n  flex: 0 0 auto;\n  width: var(--mj-space-1-5);\n  height: var(--mj-space-1-5);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n}\n\n.mj-forms-chrome-rail-error,\n.mj-forms-chrome-rail-warning {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: var(--mj-space-5);\n  padding: var(--mj-space-px) var(--mj-space-1-5);\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  line-height: 1.2;\n  text-align: center;\n}\n\n.mj-forms-chrome-rail-error {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.mj-forms-chrome-rail-warning {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n  border: 1px solid var(--mj-status-warning-border);\n}\n\n.mj-forms-chrome-rail-error i,\n.mj-forms-chrome-rail-warning i {\n  font-size: var(--mj-space-2-5);\n}\n\n/* The section's icon takes the error colour too, so the item reads as failing\n   even before the badge is noticed \u2014 but never the active item's brand tint. */\n.mj-forms-chrome-rail-item.has-errors:not(.is-active) > i {\n  color: var(--mj-status-error);\n}\n\n/* Collapsed spine: a column of icon \u2192 badge / dot \u2192 rotated label. */\n.mj-forms-chrome-rail-error.is-spine,\n.mj-forms-chrome-rail-warning.is-spine {\n  order: 1;\n  padding: 0 var(--mj-space-1);\n  min-width: var(--mj-space-5);\n}\n\n.mj-forms-chrome-rail-dirty.is-spine {\n  order: 1;\n}\n\n.mj-forms-chrome-rail-spine > .mj-forms-chrome-rail-spine-label {\n  order: 2;\n}\n\n@media (max-width: 720px) {\n  .mj-forms-layout--left-nav {\n    flex-direction: column;\n  }\n\n  .mj-forms-chrome-rail {\n    flex: 1 1 auto;\n    width: 100%;\n    position: static;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mj-forms-chrome-rail-resizer {\n    display: none;\n  }\n\n  .mj-forms-chrome-rail.is-collapsed {\n    flex: 0 0 auto;\n    width: 100%;\n    min-width: 0;\n    max-width: none;\n    height: 36px;\n    padding: 0;\n  }\n\n  .mj-forms-chrome-rail-spine {\n    flex-direction: row;\n    padding: 0 12px;\n  }\n\n  .mj-forms-chrome-rail-spine-label {\n    writing-mode: horizontal-tb;\n    transform: none;\n    max-height: none;\n  }\n\n  .mj-forms-chrome-rail-toolbar {\n    width: 100%;\n  }\n\n  .mj-forms-chrome-rail-item {\n    width: auto;\n  }\n\n  /* Phones: the rail is a wrapping row of chips, so the items wrapper must\n     wrap too \u2014 a column here stacks one chip per row and grows past the\n     rail (no scroll, body pushed out). */\n  .mj-forms-chrome-rail-items {\n    flex-direction: row;\n    flex-wrap: wrap;\n    overflow: visible;\n    min-height: auto;\n  }\n}\n\n/* ============================================\n   EMPTY SEARCH STATE\n   ============================================ */\n.mj-forms-empty-search-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 24px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n  font-size: 32px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n  text-decoration: underline;\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 768px) {\n  .mj-forms-panels-container {\n    padding: 16px 12px 32px;\n  }\n}\n\n/* ====================================================================\n   VARIANT PICKER \u2014 between toolbar and form body\n   Compact \"Form: <name> \u25BE\" row that appears when more than one variant\n   is applicable for the current entity record.\n   ==================================================================== */\n\n.mj-form-variant-picker {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.mj-form-variant-picker-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  min-width: 160px;\n}\n.mj-form-variant-picker-control:hover,\n.mj-form-variant-picker-control:focus,\n.mj-form-variant-picker-control.open {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.mj-form-variant-picker-current {\n  font-weight: 600;\n  flex: 1;\n}\n.mj-form-variant-picker-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 50;\n  min-width: 280px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));\n  padding: 4px;\n  max-height: 320px;\n  overflow: auto;\n}\n.mj-form-variant-picker-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.mj-form-variant-picker-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mj-form-variant-picker-row.current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n.mj-form-variant-picker-row.inactive {\n  opacity: 0.7;\n}\n.mj-form-variant-picker-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n.mj-form-variant-picker-row-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mj-form-variant-picker-row-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.mj-form-variant-picker-check {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n/* Retrospective fix #8 \u2014 visually distinguish the Default row from variants. */\n.mj-form-variant-picker-row.mj-form-variant-picker-default {\n  border-bottom: 1px dashed var(--mj-border-default);\n  margin-bottom: 4px;\n  padding-bottom: 10px;\n}\n.mj-form-variant-picker-default-tag {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 11px;\n  margin-left: 4px;\n}\n"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjRecordFormContainerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-record-form-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [FormSlotCoordinator, FormChromeCoordinator, FormRecordRefreshCoordinator], template: "<!-- ============================================\n     BEFORE-TOOLBAR SLOT\n     ============================================ -->\n<ng-content select=\"[before-toolbar]\"></ng-content>\n\n<!-- ============================================\n     TOOLBAR (bridges FormComponent state \u2192 toolbar inputs)\n     Hidden entirely when Config.Toolbar === null (dialog/slide-in surfaces).\n     ============================================ -->\n@if (EffectiveShowToolbar) {\n<mj-form-toolbar\n  [Record]=\"EffectiveRecord\"\n  [EditMode]=\"EffectiveEditMode\"\n  [UserCanEdit]=\"EffectiveUserCanEdit\"\n  [UserCanDelete]=\"EffectiveUserCanDelete\"\n  [IsFavorite]=\"EffectiveIsFavorite\"\n  [FavoriteInitDone]=\"EffectiveFavoriteInitDone\"\n  [IsDirty]=\"EffectiveIsDirty\"\n  [DirtyFieldNames]=\"EffectiveDirtyFieldNames\"\n  [ListCount]=\"ListCount\"\n  [TagCount]=\"TagCount\"\n  [AttachmentCount]=\"AttachmentCount\"\n  [AttachmentsAvailable]=\"AttachmentsAvailable\"\n  [IsAttachmentsPanelOpen]=\"ShowAttachmentsPanel\"\n  [VersionCount]=\"VersionCount\"\n  [EntityInfo]=\"EffectiveEntityInfo\"\n  [Config]=\"EffectiveToolbarConfig\"\n  [IsSaving]=\"EffectiveIsSaving\"\n  [IsRefreshing]=\"EffectiveIsRefreshing\"\n  [VisibleSectionCount]=\"VisibleSectionCount\"\n  [TotalSectionCount]=\"TotalSectionCount\"\n  [ExpandedSectionCount]=\"ExpandedSectionCount\"\n  [SearchFilter]=\"EffectiveSearchFilter\"\n  [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n  [WidthMode]=\"EffectiveWidthMode\"\n  [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\n  [ChromeLayout]=\"ChromeLayout\"\n  [Variants]=\"EffectiveVariants\"\n  [CurrentVariantID]=\"EffectiveCurrentVariantID\"\n  [RegisteredItems]=\"EffectiveRegisteredToolbarItems\"\n  [ItemOverrides]=\"EffectiveToolbarItemOverrides\"\n  [FormComponent]=\"fc\"\n  (Navigate)=\"OnNavigate($event)\"\n  (EditModeChange)=\"OnEditModeChange($event)\"\n  (BeforeSave)=\"BeforeSave.emit($event)\"\n  (SaveRequested)=\"OnSaveRequested()\"\n  (BeforeCancel)=\"BeforeCancel.emit($event)\"\n  (CancelRequested)=\"OnCancelRequested()\"\n  (BeforeDelete)=\"BeforeDelete.emit($event)\"\n  (DeleteRequested)=\"OnDeleteRequested()\"\n  (BeforeRefresh)=\"BeforeRefresh.emit($event)\"\n  (RefreshRequested)=\"OnRefreshRequested()\"\n  (FavoriteToggled)=\"OnFavoriteToggled()\"\n  (BeforeHistoryView)=\"BeforeHistoryView.emit($event)\"\n  (HistoryRequested)=\"OnHistoryRequested()\"\n  (BeforeListManagement)=\"BeforeListManagement.emit($event)\"\n  (ListManagementRequested)=\"OnListManagementRequested()\"\n  (ShowChangesRequested)=\"OnShowChangesRequested()\"\n  (CustomButtonClick)=\"CustomButtonClick.emit($event)\"\n  (ToolbarItemClick)=\"ToolbarItemClick.emit($event)\"\n  (FilterChange)=\"OnFilterChange($event)\"\n  (ExpandAllRequested)=\"OnExpandAll()\"\n  (CollapseAllRequested)=\"OnCollapseAll()\"\n  (ShowEmptyFieldsChange)=\"OnShowEmptyFieldsChange($event)\"\n  (WidthModeChange)=\"OnWidthModeChange($event)\"\n  (ResetSectionOrderRequested)=\"OnResetSectionOrder()\"\n  (ManageSectionsRequested)=\"OnManageSections()\"\n  (TagsPanelToggled)=\"OnTagsPanelToggled()\"\n  (AttachmentsPanelToggled)=\"OnAttachmentsPanelToggled()\"\n  (VariantPicked)=\"OnVariantPicked($event)\">\n</mj-form-toolbar>\n}\n\n<!-- ============================================\n     SCROLL AREA (full-width so mouse wheel works anywhere)\n     Variant picker is now embedded in <mj-form-toolbar> as a right-side\n     button \u2014 see the [Variants]/[CurrentVariantID] inputs + (VariantPicked)\n     output on the toolbar above. Inline strip was removed.\n     ============================================ -->\n<div class=\"mj-forms-scroll-area\">\n  <div class=\"mj-forms-panels-container\"\n       [class.mj-forms-panels--full-width]=\"EffectiveWidthMode === 'full-width'\"\n       [class.mj-forms-panels--edit-mode]=\"EffectiveEditMode\"\n       [class.mj-forms-panels--has-isa-panel]=\"HasIsaRelatedItems\">\n    <!-- Flex row: optional left-nav + form panels + ISA side panel -->\n    <div class=\"mj-forms-layout-row\"\n         [class.mj-forms-layout--left-nav]=\"ChromeLayout === 'left-nav'\"\n         [class.mj-forms-layout--accordion]=\"ChromeLayout === 'accordion'\"\n         [class.mj-forms-layout--more]=\"IsChromeMoreActive\">\n      @if (ShowChromeRail) {\n        <nav class=\"mj-forms-chrome-rail\"\n             [class.is-collapsed]=\"ChromeRailCollapsed\"\n             [class.is-resizing]=\"RailResizing\"\n             [style.width.px]=\"ChromeRailCollapsed ? null : ChromeRailWidthPx\"\n             [attr.aria-expanded]=\"!ChromeRailCollapsed\"\n             aria-label=\"Form sections\">\n          @if (ChromeRailCollapsed) {\n            <button type=\"button\"\n                    class=\"mj-forms-chrome-rail-spine\"\n                    (click)=\"OnChromeRailExpand()\"\n                    [attr.aria-label]=\"'Show form sections \u2014 ' + ChromeActiveTitle\"\n                    [title]=\"'Show sections \u2014 ' + ChromeActiveTitle\">\n              <i [class]=\"ChromeActiveIcon\"></i>\n              <span class=\"mj-forms-chrome-rail-spine-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, ChromeActiveTitle)\">{{ ChromeActiveTitle }}</span>\n            </button>\n          } @else {\n            <div class=\"mj-forms-chrome-rail-resizer\"\n                 role=\"separator\"\n                 aria-orientation=\"vertical\"\n                 [attr.aria-valuenow]=\"ChromeRailWidthPx\"\n                 [attr.aria-valuemin]=\"RailWidthMin\"\n                 [attr.aria-valuemax]=\"RailWidthMax\"\n                 title=\"Drag to resize sections\"\n                 (pointerdown)=\"OnRailResizeStart($event)\"\n                 (pointermove)=\"OnRailResizeMove($event)\"\n                 (pointerup)=\"OnRailResizeEnd()\"\n                 (pointercancel)=\"OnRailResizeEnd()\"></div>\n            <div class=\"mj-forms-chrome-rail-toolbar\">\n              <button type=\"button\"\n                      class=\"mj-forms-chrome-rail-pin\"\n                      [class.is-pinned]=\"ChromeRailPinned\"\n                      [attr.aria-pressed]=\"ChromeRailPinned\"\n                      [title]=\"ChromeRailPinned ? 'Unpin sections \u2014 they hide after you switch' : 'Pin sections open'\"\n                      (click)=\"OnChromeRailPinToggle()\">\n                <i class=\"fa-solid fa-thumbtack\"></i>\n              </button>\n              <button type=\"button\"\n                      class=\"mj-forms-chrome-rail-collapse\"\n                      title=\"Hide sections\"\n                      aria-label=\"Hide form sections\"\n                      (click)=\"OnChromeRailCollapse()\">\n                <i class=\"fa-solid fa-angles-left\"></i>\n              </button>\n            </div>\n          @for (group of ChromeFirstClassGroups; track group.Key) {\n            <div class=\"mj-forms-chrome-rail-item\"\n                 role=\"button\"\n                 tabindex=\"0\"\n                 [class.is-active]=\"ChromeActiveGroupKey === group.Key\"\n                 [attr.aria-current]=\"ChromeActiveGroupKey === group.Key ? 'page' : null\"\n                 [class.is-drag-over]=\"RailDragOverKey === group.Key\"\n                 (click)=\"OnChromeGroupActivate(group.Key)\"\n                 (keydown.enter)=\"OnChromeGroupActivate(group.Key)\"\n                 (keydown.space)=\"$event.preventDefault(); OnChromeGroupActivate(group.Key)\"\n                 (dragover)=\"OnRailDragOver($event, group.Key)\"\n                 (dragleave)=\"OnRailDragLeave($event, group.Key)\"\n                 (drop)=\"OnRailDrop($event, group.Key)\">\n              @if (ChromeReorderAllowed) {\n                <span class=\"mj-forms-chrome-rail-handle\"\n                      title=\"Drag to reorder\"\n                      draggable=\"true\"\n                      (dragstart)=\"OnRailDragStart($event, group.Key)\"\n                      (dragend)=\"OnRailDragEnd()\"\n                      (click)=\"$event.stopPropagation()\">\n                  <i class=\"fa-solid fa-grip-vertical\"></i>\n                </span>\n              }\n              <i [class]=\"group.Icon\"></i>\n              <span class=\"mj-forms-chrome-rail-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, group.Title)\">{{ group.Title }}</span>\n              @let rowCount = ChromeGroupRowCount(group);\n              @if (rowCount != null) {\n                <span class=\"mj-forms-chrome-rail-count\"\n                      [class.is-zero]=\"rowCount === 0\">{{ rowCount }}</span>\n              }\n            </div>\n          }\n          @if (ChromeMoreFolder; as more) {\n            <div class=\"mj-forms-chrome-rail-item is-more-folder\"\n                 role=\"button\"\n                 tabindex=\"0\"\n                 [class.is-expanded]=\"MoreExpanded\"\n                 (click)=\"OnMoreFolderToggle()\"\n                 (keydown.enter)=\"OnMoreFolderToggle()\"\n                 (keydown.space)=\"$event.preventDefault(); OnMoreFolderToggle()\">\n              <span class=\"mj-forms-chrome-rail-handle is-spacer\" aria-hidden=\"true\"></span>\n              <i [class]=\"MoreExpanded ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              <span class=\"mj-forms-chrome-rail-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, more.Title)\">{{ more.Title }}</span>\n              <i class=\"fa-solid mj-forms-chrome-rail-more-toggle\"\n                 [class.fa-minus]=\"MoreExpanded\"\n                 [class.fa-plus]=\"!MoreExpanded\"\n                 aria-hidden=\"true\"></i>\n            </div>\n            @if (MoreExpanded) {\n              <div class=\"mj-forms-chrome-rail-more-tree\">\n              @for (child of ChromeMoreItems; track child.Key) {\n                <div class=\"mj-forms-chrome-rail-item is-more-child\"\n                     role=\"button\"\n                     tabindex=\"0\"\n                     [class.is-active]=\"ChromeActiveGroupKey === child.Key\"\n                     [attr.aria-current]=\"ChromeActiveGroupKey === child.Key ? 'page' : null\"\n                     [class.is-drag-over]=\"RailDragOverKey === child.Key\"\n                     (click)=\"OnChromeGroupActivate(child.Key)\"\n                     (keydown.enter)=\"OnChromeGroupActivate(child.Key)\"\n                     (keydown.space)=\"$event.preventDefault(); OnChromeGroupActivate(child.Key)\"\n                     (dragover)=\"OnRailDragOver($event, child.Key)\"\n                     (dragleave)=\"OnRailDragLeave($event, child.Key)\"\n                     (drop)=\"OnRailDrop($event, child.Key)\">\n                  @if (ChromeReorderAllowed) {\n                    <span class=\"mj-forms-chrome-rail-handle\"\n                          title=\"Drag to reorder\"\n                          draggable=\"true\"\n                          (dragstart)=\"OnRailDragStart($event, child.Key)\"\n                          (dragend)=\"OnRailDragEnd()\"\n                          (click)=\"$event.stopPropagation()\">\n                      <i class=\"fa-solid fa-grip-vertical\"></i>\n                    </span>\n                  }\n                  <i [class]=\"child.Icon\"></i>\n                  <span class=\"mj-forms-chrome-rail-label\"\n                        (mouseenter)=\"OnRailLabelHover($event, child.Title)\">{{ child.Title }}</span>\n                  @let childCount = ChromeGroupRowCount(child);\n                  @if (childCount != null) {\n                    <span class=\"mj-forms-chrome-rail-count\"\n                          [class.is-zero]=\"childCount === 0\">{{ childCount }}</span>\n                  }\n                </div>\n              }\n              </div>\n            }\n          }\n          }\n        </nav>\n      }\n      <!-- All panels in a single flex container \u2014 CSS order drives sequencing -->\n      <div class=\"mj-forms-all-panels\">\n        <ng-content></ng-content>\n\n        <!--\n          Fill-in related grids for DisplayInForm relationships the template\n          did not bake and no registered panel claimed. Claimed / extra panels\n          still mount via mj-form-panel-slot. See plans/form-contributions.md.\n        -->\n        @if (Record && FormComponent) {\n          <mj-form-contributions\n            [Record]=\"Record\"\n            [FormComponent]=\"FormComponent\"\n            [FormContext]=\"FormComponent.formContext\"\n            [BakedSectionKeys]=\"BakedRelatedSectionKeys\"\n            [ShowRelatedEntities]=\"EffectiveShowRelatedEntities\">\n          </mj-form-contributions>\n        }\n\n        <!--\n          Container-provided fallback slot. ALWAYS present \u2014 last in document\n          order \u2014 so any panel whose registered slot isn't found in the current\n          form falls through here via FormSlotCoordinator's chain. Downstream\n          consumers that haven't rerun CodeGen against the slot-emitting\n          template still see every panel; they just render at the bottom\n          instead of at their preferred position.\n        -->\n        @if (ShowMoreToggle) {\n          <div class=\"mj-forms-more-overflow\" [class.is-expanded]=\"MoreExpanded\">\n            <button type=\"button\"\n                    class=\"mj-forms-more-overflow-toggle\"\n                    (click)=\"OnMoreToggle()\">\n              <i [class]=\"MoreExpanded ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              <span class=\"mj-forms-more-overflow-label\">{{ MoreExpanded ? 'Hide more' : 'More' }}</span>\n              @if (!MoreExpanded && MorePreview) {\n                <span class=\"mj-forms-more-overflow-preview\">{{ MorePreview }}</span>\n              }\n              <i class=\"fa-solid\"\n                 [class.fa-chevron-down]=\"MoreExpanded\"\n                 [class.fa-chevron-right]=\"!MoreExpanded\"></i>\n            </button>\n          </div>\n        }\n\n        @if (Record && FormComponent) {\n          <mj-form-panel-slot\n            [Entity]=\"Record.EntityInfo.Name\"\n            Slot=\"after-everything\"\n            [Record]=\"Record\"\n            [FormComponent]=\"FormComponent\">\n          </mj-form-panel-slot>\n        }\n\n        <!-- Empty state when no sections match search -->\n        @if (EffectiveSearchFilter && SearchHasNoMatches) {\n          <mj-empty-state class=\"mj-forms-empty-search-state\"\n            Variant=\"no-results\"\n            Title=\"No sections found\"\n            [Message]=\"'No sections match &quot;' + EffectiveSearchFilter + '&quot;. Try a different search term.'\"\n            ActionText=\"Clear search\"\n            ActionIcon=\"fa-solid fa-rotate-left\"\n            ActionVariant=\"flat\"\n            (Action)=\"OnFilterChange('')\" />\n        }\n      </div>\n\n      <!-- IS-A Related Records Side Panel -->\n      <mj-isa-related-panel\n        [Record]=\"EffectiveRecord\"\n        [EditMode]=\"EffectiveEditMode\"\n        [Collapsed]=\"EffectiveWidthMode === 'full-width'\"\n        (Navigate)=\"OnNavigate($event)\">\n      </mj-isa-related-panel>\n    </div>\n  </div>\n</div>\n\n<!-- ============================================\n     RECORD CHANGES DRAWER (shown when history button clicked)\n     ============================================ -->\n@if (ShowRecordChanges && EffectiveRecord) {\n  <mj-record-changes\n    [record]=\"EffectiveRecord\"\n    [AllowRestore]=\"EffectiveUserCanEdit\"\n    (RestoreRequested)=\"OnRestoreRequested($event)\"\n    (dialogClosed)=\"OnRecordChangesClosed()\">\n  </mj-record-changes>\n}\n\n<!-- ============================================\n     TAGS PANEL (shown when tags button clicked)\n     ============================================ -->\n@if (ShowTagsPanel && EffectiveRecord) {\n  <mj-record-tags\n    [Record]=\"EffectiveRecord\"\n    [WidthPx]=\"TagsPanelWidth\"\n    (PanelClosed)=\"OnTagsPanelClosed()\"\n    (TagCountChanged)=\"OnTagCountChanged($event)\"\n    (RecordNavigate)=\"OnTagsRecordNavigate($event)\"\n    (WidthChanged)=\"OnTagsPanelWidthChanged($event)\">\n  </mj-record-tags>\n}\n\n<!-- ============================================\n     ATTACHMENTS PANEL (shown when attachments button clicked)\n     ============================================ -->\n@if (ShowAttachmentsPanel && AttachmentsAvailable && EffectiveRecord) {\n  <mj-record-attachments\n    [Record]=\"EffectiveRecord\"\n    [Visible]=\"true\"\n    (PanelClosed)=\"OnAttachmentsPanelClosed()\"\n    (AttachmentCountChanged)=\"OnAttachmentCountChanged($event)\">\n  </mj-record-attachments>\n}\n\n<!-- ============================================\n     LIST MANAGEMENT DIALOG (shown when lists button clicked)\n     ============================================ -->\n@if (ShowListManagement && EffectiveRecord) {\n  <mj-list-management-dialog\n    [visible]=\"ShowListManagement\"\n    [config]=\"{\n      mode: 'manage',\n      entityId: EffectiveRecord.EntityInfo.ID,\n      entityName: EffectiveRecord.EntityInfo.Name,\n      recordIds: [EffectiveRecord.PrimaryKey.Values()[0]],\n      allowCreate: true\n    }\"\n    (complete)=\"OnListManagementComplete($event)\"\n    (cancel)=\"OnListManagementClosed()\">\n  </mj-list-management-dialog>\n}\n\n<!-- ============================================\n     SECTION MANAGER DRAWER (shown when manage-sections button clicked)\n     ============================================ -->\n<mj-section-manager\n  [Sections]=\"SectionManagerItems\"\n  [SectionOrder]=\"SectionManagerOrder\"\n  [MoreSectionKeys]=\"SectionManagerMoreKeys\"\n  [LockedMoreKeys]=\"SectionManagerLockedMoreKeys\"\n  [Visible]=\"ShowSectionManager\"\n  (SectionOrderChange)=\"OnSectionOrderChange($event)\"\n  (MembershipChange)=\"OnChromeMembershipChange($event)\"\n  (ResetRequested)=\"OnSectionManagerReset()\"\n  (Closed)=\"OnSectionManagerClosed()\">\n</mj-section-manager>\n", styles: ["/* ============================================\n   RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n   Top-level wrapper: toolbar + scrollable content\n   ============================================ */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ============================================\n   SCROLL AREA (full-width so mouse wheel works anywhere)\n   ============================================ */\n.mj-forms-scroll-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   PANELS CONTAINER (centered content within scroll area)\n   ============================================ */\n.mj-forms-panels-container {\n  padding: 24px 32px 48px;\n  max-width: 920px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n  max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n  max-width: none;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav) {\n  padding: 16px 20px 24px;\n  display: flex;\n  flex-direction: column;\n  /* Definite height = the scroll-area's client box. min-height: 100% alone\n     lets the column grow with content and never gives related grids a\n     containing-block height, so Height:auto (100%) on the grid collapses. */\n  height: 100%;\n  max-height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Centered left-nav keeps the form column at the same 920px as accordion,\n   plus the rail. Full-width still uses .mj-forms-panels--full-width. */\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav):not(.mj-forms-panels--full-width) {\n  max-width: 1160px;\n}\n\n.mj-forms-layout-row.mj-forms-layout--left-nav {\n  flex: 1;\n  min-height: 0;\n  /* Wins over .mj-forms-layout-row { align-items: flex-start } so the\n     body column stretches to the rail / viewport instead of hugging content. */\n  align-items: stretch;\n  gap: 16px;\n}\n\n/* Left-nav: only the active rail item is in the body. Slot-mounted\n   panels never inject the container coordinator, so host classes set\n   from the container are the hide/show channel that always reaches them. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-hidden,\n.mj-forms-layout--accordion mj-collapsible-panel.mj-chrome-hidden {\n  display: none;\n}\n\n/* Selected item: no accordion chrome \u2014 the rail is the header. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-header {\n  display: none;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel {\n  box-shadow: none;\n  border: 0;\n  background: transparent;\n  border-radius: 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-body--collapsed {\n  max-height: none;\n  padding: 0;\n  opacity: 1;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-content {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show {\n  /* Content-sized (see RelatedGridHeightPx). Do not flex-fill leftover\n     column space \u2014 a form header above the grid can collapse that to 0. */\n  flex: 0 0 auto;\n  min-height: 0;\n}\n\n/* Accordion related panels use a 400px resizable box. Left-nav grids\n   set their own pixel height from row count (RelatedGridHeightPx). */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show .mj-forms-panel-content {\n  height: auto;\n  max-height: none;\n  overflow: hidden;\n  resize: none;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels {\n  gap: 0;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Details (field panels) can be taller than the viewport \u2014 scroll inside the\n   column. Related grids scroll inside AG Grid instead. */\n.mj-forms-layout--left-nav .mj-forms-all-panels:has(mj-collapsible-panel.mj-chrome-show:not(.mj-panel--related-entity)) {\n  overflow-y: auto;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels > *:not(mj-collapsible-panel.mj-panel--related-entity) {\n  flex-shrink: 0;\n}\n\n.mj-forms-layout--left-nav .biz-hero {\n  margin-bottom: 4px;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity,\n.mj-forms-panels--edit-mode .mj-forms-more-overflow {\n  display: none;\n}\n\n/* Detail / More panels sort after the overflow footer */\nmj-collapsible-panel.mj-form-role-detail,\nmj-collapsible-panel.mj-form-role-more {\n  order: 8500;\n}\n\n.mj-forms-more-overflow {\n  order: 8400;\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.mj-forms-more-overflow-toggle {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.mj-forms-more-overflow-toggle:hover {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-more-overflow-label {\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-more-overflow-preview {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--mj-text-disabled);\n  font-weight: var(--mj-font-normal);\n}\n\n.mj-forms-more-overflow-toggle .fa-chevron-right,\n.mj-forms-more-overflow-toggle .fa-chevron-down {\n  margin-left: auto;\n}\n\n.mj-forms-chrome-rail {\n  flex: 0 0 auto;\n  width: 200px;\n  max-width: 360px;\n  min-width: 160px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: sticky;\n  top: 0;\n  align-self: stretch;\n  min-height: 0;\n  padding: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n}\n\n.mj-forms-chrome-rail.is-resizing {\n  user-select: none;\n}\n\n.mj-forms-chrome-rail.is-collapsed {\n  flex: 0 0 36px;\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  padding: 8px 0;\n  overflow: hidden;\n}\n\n.mj-forms-chrome-rail-resizer {\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 8px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 3;\n  touch-action: none;\n}\n\n.mj-forms-chrome-rail-resizer::after {\n  content: '';\n  position: absolute;\n  top: 12px;\n  bottom: 12px;\n  left: 3px;\n  width: 2px;\n  border-radius: 1px;\n  background: transparent;\n}\n\n.mj-forms-chrome-rail:hover .mj-forms-chrome-rail-resizer::after,\n.mj-forms-chrome-rail.is-resizing .mj-forms-chrome-rail-resizer::after {\n  background: var(--mj-border-strong);\n}\n\n.mj-forms-layout--right-nav .mj-forms-chrome-rail-resizer {\n  right: auto;\n  left: -4px;\n}\n\n.mj-forms-chrome-rail-spine {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  padding: 8px 0;\n  border: 0;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-spine:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-forms-chrome-rail-spine > i {\n  flex-shrink: 0;\n}\n\n.mj-forms-chrome-rail-spine-label {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.04em;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 100%;\n}\n\n.mj-forms-chrome-rail-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 2px;\n  padding: 2px 4px 6px;\n}\n\n.mj-forms-chrome-rail-pin,\n.mj-forms-chrome-rail-collapse {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-pin:hover,\n.mj-forms-chrome-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-pin:not(.is-pinned) i {\n  transform: rotate(45deg);\n}\n\n.mj-forms-chrome-rail-pin.is-pinned {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-item > i {\n  width: 1.15em;\n  flex-shrink: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.mj-forms-chrome-rail-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-chrome-rail-item.is-active::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 6px;\n  bottom: 6px;\n  width: 3px;\n  border-radius: 0 3px 3px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-label {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-drag-over {\n  outline: 1px dashed var(--mj-border-focus);\n  outline-offset: -1px;\n}\n\n.mj-forms-chrome-rail-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  margin-left: -4px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: opacity var(--mj-transition-base, 0.15s) ease;\n}\n\n.mj-forms-chrome-rail-item:hover .mj-forms-chrome-rail-handle,\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-handle {\n  opacity: 1;\n}\n\n.mj-forms-chrome-rail-handle.is-spacer {\n  opacity: 0;\n  pointer-events: none;\n  cursor: default;\n}\n\n.mj-forms-chrome-rail-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-handle:active {\n  cursor: grabbing;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder {\n  position: relative;\n  margin-top: 14px;\n  padding-top: 14px;\n  color: var(--mj-text-muted);\n  border-radius: 0;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 8px;\n  right: 8px;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--mj-border-strong) 18%,\n    var(--mj-border-strong) 82%,\n    transparent 100%\n  );\n}\n\n.mj-forms-chrome-rail-item.is-more-folder:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-item.is-more-folder.is-expanded {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-more-toggle {\n  margin-left: auto;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-chrome-rail-more-tree {\n  margin-left: 22px;\n  padding-left: 6px;\n  border-left: 1px solid var(--mj-border-subtle);\n}\n\n.mj-forms-chrome-rail-item.is-more-child {\n  padding-left: 8px;\n}\n\n.mj-forms-chrome-rail-count.is-zero {\n  opacity: 0.55;\n}\n\n.mj-forms-chrome-rail-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-forms-chrome-rail-count {\n  min-width: 1.25rem;\n  padding: 0 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  text-align: center;\n}\n\n@media (max-width: 720px) {\n  .mj-forms-layout--left-nav {\n    flex-direction: column;\n  }\n\n  .mj-forms-chrome-rail {\n    flex: 1 1 auto;\n    width: 100%;\n    position: static;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mj-forms-chrome-rail-resizer {\n    display: none;\n  }\n\n  .mj-forms-chrome-rail.is-collapsed {\n    flex: 0 0 auto;\n    width: 100%;\n    min-width: 0;\n    max-width: none;\n    height: 36px;\n    padding: 0;\n  }\n\n  .mj-forms-chrome-rail-spine {\n    flex-direction: row;\n    padding: 0 12px;\n  }\n\n  .mj-forms-chrome-rail-spine-label {\n    writing-mode: horizontal-tb;\n    transform: none;\n    max-height: none;\n  }\n\n  .mj-forms-chrome-rail-toolbar {\n    width: 100%;\n  }\n\n  .mj-forms-chrome-rail-item {\n    width: auto;\n  }\n}\n\n/* ============================================\n   EMPTY SEARCH STATE\n   ============================================ */\n.mj-forms-empty-search-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 24px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n  font-size: 32px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n  text-decoration: underline;\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 768px) {\n  .mj-forms-panels-container {\n    padding: 16px 12px 32px;\n  }\n}\n\n/* ====================================================================\n   VARIANT PICKER \u2014 between toolbar and form body\n   Compact \"Form: <name> \u25BE\" row that appears when more than one variant\n   is applicable for the current entity record.\n   ==================================================================== */\n\n.mj-form-variant-picker {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.mj-form-variant-picker-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  min-width: 160px;\n}\n.mj-form-variant-picker-control:hover,\n.mj-form-variant-picker-control:focus,\n.mj-form-variant-picker-control.open {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.mj-form-variant-picker-current {\n  font-weight: 600;\n  flex: 1;\n}\n.mj-form-variant-picker-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 50;\n  min-width: 280px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));\n  padding: 4px;\n  max-height: 320px;\n  overflow: auto;\n}\n.mj-form-variant-picker-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.mj-form-variant-picker-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mj-form-variant-picker-row.current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n.mj-form-variant-picker-row.inactive {\n  opacity: 0.7;\n}\n.mj-form-variant-picker-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n.mj-form-variant-picker-row-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mj-form-variant-picker-row-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.mj-form-variant-picker-check {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n/* Retrospective fix #8 \u2014 visually distinguish the Default row from variants. */\n.mj-form-variant-picker-row.mj-form-variant-picker-default {\n  border-bottom: 1px dashed var(--mj-border-default);\n  margin-bottom: 4px;\n  padding-bottom: 10px;\n}\n.mj-form-variant-picker-default-tag {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 11px;\n  margin-left: 4px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-record-form-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [FormSlotCoordinator, FormChromeCoordinator, FormRecordRefreshCoordinator, FormSectionIndicatorCoordinator], template: "<!-- ============================================\n     BEFORE-TOOLBAR SLOT\n     ============================================ -->\n<ng-content select=\"[before-toolbar]\"></ng-content>\n\n<!-- ============================================\n     TOOLBAR (bridges FormComponent state \u2192 toolbar inputs)\n     Hidden entirely when Config.Toolbar === null (dialog/slide-in surfaces).\n     ============================================ -->\n@if (EffectiveShowToolbar) {\n<mj-form-toolbar\n  [Record]=\"EffectiveRecord\"\n  [EditMode]=\"EffectiveEditMode\"\n  [UserCanEdit]=\"EffectiveUserCanEdit\"\n  [UserCanDelete]=\"EffectiveUserCanDelete\"\n  [IsFavorite]=\"EffectiveIsFavorite\"\n  [FavoriteInitDone]=\"EffectiveFavoriteInitDone\"\n  [IsDirty]=\"EffectiveIsDirty\"\n  [DirtyFieldNames]=\"EffectiveDirtyFieldNames\"\n  [ListCount]=\"ListCount\"\n  [TagCount]=\"TagCount\"\n  [AttachmentCount]=\"AttachmentCount\"\n  [AttachmentsAvailable]=\"AttachmentsAvailable\"\n  [IsAttachmentsPanelOpen]=\"ShowAttachmentsPanel\"\n  [VersionCount]=\"VersionCount\"\n  [EntityInfo]=\"EffectiveEntityInfo\"\n  [Config]=\"EffectiveToolbarConfig\"\n  [IsSaving]=\"EffectiveIsSaving\"\n  [IsRefreshing]=\"EffectiveIsRefreshing\"\n  [VisibleSectionCount]=\"VisibleSectionCount\"\n  [TotalSectionCount]=\"TotalSectionCount\"\n  [ExpandedSectionCount]=\"ExpandedSectionCount\"\n  [SearchFilter]=\"EffectiveSearchFilter\"\n  [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n  [WidthMode]=\"EffectiveWidthMode\"\n  [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\n  [ChromeLayout]=\"ChromeLayout\"\n  [Variants]=\"EffectiveVariants\"\n  [CurrentVariantID]=\"EffectiveCurrentVariantID\"\n  [RegisteredItems]=\"EffectiveRegisteredToolbarItems\"\n  [ItemOverrides]=\"EffectiveToolbarItemOverrides\"\n  [FormComponent]=\"fc\"\n  (Navigate)=\"OnNavigate($event)\"\n  (EditModeChange)=\"OnEditModeChange($event)\"\n  (BeforeSave)=\"BeforeSave.emit($event)\"\n  (SaveRequested)=\"OnSaveRequested()\"\n  (BeforeCancel)=\"BeforeCancel.emit($event)\"\n  (CancelRequested)=\"OnCancelRequested()\"\n  (BeforeDelete)=\"BeforeDelete.emit($event)\"\n  (DeleteRequested)=\"OnDeleteRequested()\"\n  (BeforeRefresh)=\"BeforeRefresh.emit($event)\"\n  (RefreshRequested)=\"OnRefreshRequested()\"\n  (FavoriteToggled)=\"OnFavoriteToggled()\"\n  (BeforeHistoryView)=\"BeforeHistoryView.emit($event)\"\n  (HistoryRequested)=\"OnHistoryRequested()\"\n  (BeforeListManagement)=\"BeforeListManagement.emit($event)\"\n  (ListManagementRequested)=\"OnListManagementRequested()\"\n  (ShowChangesRequested)=\"OnShowChangesRequested()\"\n  (CustomButtonClick)=\"CustomButtonClick.emit($event)\"\n  (ToolbarItemClick)=\"ToolbarItemClick.emit($event)\"\n  (FilterChange)=\"OnFilterChange($event)\"\n  (ExpandAllRequested)=\"OnExpandAll()\"\n  (CollapseAllRequested)=\"OnCollapseAll()\"\n  (ShowEmptyFieldsChange)=\"OnShowEmptyFieldsChange($event)\"\n  (WidthModeChange)=\"OnWidthModeChange($event)\"\n  (ResetSectionOrderRequested)=\"OnResetSectionOrder()\"\n  (ManageSectionsRequested)=\"OnManageSections()\"\n  (TagsPanelToggled)=\"OnTagsPanelToggled()\"\n  (AttachmentsPanelToggled)=\"OnAttachmentsPanelToggled()\"\n  (VariantPicked)=\"OnVariantPicked($event)\">\n</mj-form-toolbar>\n}\n\n<!-- ============================================\n     SCROLL AREA (full-width so mouse wheel works anywhere)\n     Variant picker is now embedded in <mj-form-toolbar> as a right-side\n     button \u2014 see the [Variants]/[CurrentVariantID] inputs + (VariantPicked)\n     output on the toolbar above. Inline strip was removed.\n     ============================================ -->\n<!-- Persistent polite live region for the section indicators (see FormIndicatorsAnnouncement) -->\n<span class=\"mj-forms-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">{{ FormIndicatorsAnnouncement }}</span>\n\n<div class=\"mj-forms-scroll-area\">\n  <div class=\"mj-forms-panels-container\"\n       [class.mj-forms-panels--full-width]=\"EffectiveWidthMode === 'full-width'\"\n       [class.mj-forms-panels--edit-mode]=\"EffectiveEditMode\"\n       [class.mj-forms-panels--has-isa-panel]=\"HasIsaRelatedItems\">\n    <!-- Flex row: optional left-nav + form panels + ISA side panel -->\n    <div class=\"mj-forms-layout-row\"\n         [class.mj-forms-layout--left-nav]=\"ChromeLayout === 'left-nav'\"\n         [class.mj-forms-layout--accordion]=\"ChromeLayout === 'accordion'\"\n         [class.mj-forms-layout--more]=\"IsChromeMoreActive\">\n      @if (ShowChromeRail) {\n        <nav class=\"mj-forms-chrome-rail\"\n             [class.is-collapsed]=\"ChromeRailCollapsed\"\n             [class.is-resizing]=\"RailResizing\"\n             [style.width.px]=\"ChromeRailCollapsed ? null : ChromeRailWidthPx\"\n             [attr.aria-expanded]=\"!ChromeRailCollapsed\"\n             aria-label=\"Form sections\">\n          @if (ChromeRailCollapsed) {\n            <button type=\"button\"\n                    class=\"mj-forms-chrome-rail-spine\"\n                    (click)=\"OnChromeRailExpand()\"\n                    [attr.aria-label]=\"'Show form sections \u2014 ' + ChromeActiveTitle\"\n                    [title]=\"'Show sections \u2014 ' + ChromeActiveTitle\">\n              <i [class]=\"ChromeActiveIcon\"></i>\n              <span class=\"mj-forms-chrome-rail-spine-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, ChromeActiveTitle)\">{{ ChromeActiveTitle }}</span>\n              <!-- Whole-form section indicators: no rail item is visible while collapsed -->\n              @let formIndicators = FormIndicators;\n              @if (formIndicators.ErrorCount > 0) {\n                <span class=\"mj-forms-chrome-rail-error is-spine\"\n                      role=\"img\"\n                      [title]=\"RailErrorTitle(formIndicators.ErrorCount, 'this record')\"\n                      [attr.aria-label]=\"RailErrorTitle(formIndicators.ErrorCount, 'this record')\">{{ formIndicators.ErrorCount }}</span>\n              } @else if (formIndicators.WarningCount > 0) {\n                <span class=\"mj-forms-chrome-rail-warning is-spine\"\n                      role=\"img\"\n                      [title]=\"RailWarningTitle(formIndicators.WarningCount, 'this record')\"\n                      [attr.aria-label]=\"RailWarningTitle(formIndicators.WarningCount, 'this record')\">{{ formIndicators.WarningCount }}</span>\n              }\n              @if (formIndicators.DirtyCount > 0) {\n                <span class=\"mj-forms-chrome-rail-dirty is-spine\"\n                      role=\"img\"\n                      [title]=\"RailDirtyTitle(formIndicators.DirtyCount, 'this record')\"\n                      [attr.aria-label]=\"RailDirtyTitle(formIndicators.DirtyCount, 'this record')\"></span>\n              }\n            </button>\n          } @else {\n            <div class=\"mj-forms-chrome-rail-resizer\"\n                 role=\"separator\"\n                 aria-orientation=\"vertical\"\n                 [attr.aria-valuenow]=\"ChromeRailWidthPx\"\n                 [attr.aria-valuemin]=\"RailWidthMin\"\n                 [attr.aria-valuemax]=\"RailWidthMax\"\n                 title=\"Drag to resize sections\"\n                 (pointerdown)=\"OnRailResizeStart($event)\"\n                 (pointermove)=\"OnRailResizeMove($event)\"\n                 (pointerup)=\"OnRailResizeEnd()\"\n                 (pointercancel)=\"OnRailResizeEnd()\"></div>\n            <div class=\"mj-forms-chrome-rail-toolbar\">\n              <button type=\"button\"\n                      class=\"mj-forms-chrome-rail-pin\"\n                      [class.is-pinned]=\"ChromeRailPinned\"\n                      [attr.aria-pressed]=\"ChromeRailPinned\"\n                      [title]=\"ChromeRailPinned ? 'Unpin sections \u2014 they hide after you switch' : 'Pin sections open'\"\n                      (click)=\"OnChromeRailPinToggle()\">\n                <i class=\"fa-solid fa-thumbtack\"></i>\n              </button>\n              <button type=\"button\"\n                      class=\"mj-forms-chrome-rail-collapse\"\n                      title=\"Hide sections\"\n                      aria-label=\"Hide form sections\"\n                      (click)=\"OnChromeRailCollapse()\">\n                <i class=\"fa-solid fa-angles-left\"></i>\n              </button>\n            </div>\n          <!-- Rail items scroll on their own when they outgrow the viewport;\n               the pin / collapse toolbar above stays put. -->\n          <div class=\"mj-forms-chrome-rail-items\">\n          @for (group of ChromeFirstClassGroups; track group.Key) {\n            <div class=\"mj-forms-chrome-rail-item\"\n                 role=\"button\"\n                 tabindex=\"0\"\n                 [class.is-active]=\"ChromeActiveGroupKey === group.Key\"\n                 [attr.aria-current]=\"ChromeActiveGroupKey === group.Key ? 'page' : null\"\n                 [class.is-drag-over]=\"RailDragOverKey === group.Key\"\n                 [class.has-errors]=\"ChromeGroupIndicators(group).ErrorCount > 0\"\n                 [class.is-dirty]=\"ChromeGroupIndicators(group).DirtyCount > 0\"\n                 (click)=\"OnChromeGroupActivate(group.Key)\"\n                 (keydown.enter)=\"OnChromeGroupActivate(group.Key)\"\n                 (keydown.space)=\"$event.preventDefault(); OnChromeGroupActivate(group.Key)\"\n                 (dragover)=\"OnRailDragOver($event, group.Key)\"\n                 (dragleave)=\"OnRailDragLeave($event, group.Key)\"\n                 (drop)=\"OnRailDrop($event, group.Key)\">\n              @if (ChromeReorderAllowed) {\n                <span class=\"mj-forms-chrome-rail-handle\"\n                      title=\"Drag to reorder\"\n                      draggable=\"true\"\n                      (dragstart)=\"OnRailDragStart($event, group.Key)\"\n                      (dragend)=\"OnRailDragEnd()\"\n                      (click)=\"$event.stopPropagation()\">\n                  <i class=\"fa-solid fa-grip-vertical\"></i>\n                </span>\n              }\n              <i [class]=\"group.Icon\"></i>\n              <span class=\"mj-forms-chrome-rail-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, group.Title)\">{{ group.Title }}</span>\n              @let groupIndicators = ChromeGroupIndicators(group);\n              @if (groupIndicators.DirtyCount > 0) {\n                <span class=\"mj-forms-chrome-rail-dirty\"\n                      role=\"img\"\n                      [title]=\"RailDirtyTitle(groupIndicators.DirtyCount, group.Title)\"\n                      [attr.aria-label]=\"RailDirtyTitle(groupIndicators.DirtyCount, group.Title)\"></span>\n              }\n              @if (groupIndicators.ErrorCount > 0) {\n                <span class=\"mj-forms-chrome-rail-error\"\n                      role=\"img\"\n                      [title]=\"RailErrorTitle(groupIndicators.ErrorCount, group.Title)\"\n                      [attr.aria-label]=\"RailErrorTitle(groupIndicators.ErrorCount, group.Title)\">\n                  <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>{{ groupIndicators.ErrorCount }}\n                </span>\n              } @else if (groupIndicators.WarningCount > 0) {\n                <span class=\"mj-forms-chrome-rail-warning\"\n                      role=\"img\"\n                      [title]=\"RailWarningTitle(groupIndicators.WarningCount, group.Title)\"\n                      [attr.aria-label]=\"RailWarningTitle(groupIndicators.WarningCount, group.Title)\">\n                  <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>{{ groupIndicators.WarningCount }}\n                </span>\n              }\n              @let rowCount = ChromeGroupRowCount(group);\n              @if (rowCount != null && rowCount > 0) {\n                <span class=\"mj-forms-chrome-rail-count\">{{ rowCount }}</span>\n              }\n            </div>\n          }\n          @if (ChromeMoreFolder; as more) {\n            <div class=\"mj-forms-chrome-rail-item is-more-folder\"\n                 role=\"button\"\n                 tabindex=\"0\"\n                 [class.is-expanded]=\"MoreExpanded\"\n                 [class.has-errors]=\"ChromeGroupIndicators(more).ErrorCount > 0\"\n                 (click)=\"OnMoreFolderToggle()\"\n                 (keydown.enter)=\"OnMoreFolderToggle()\"\n                 (keydown.space)=\"$event.preventDefault(); OnMoreFolderToggle()\">\n              <span class=\"mj-forms-chrome-rail-handle is-spacer\" aria-hidden=\"true\"></span>\n              <i [class]=\"MoreExpanded ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              <span class=\"mj-forms-chrome-rail-label\"\n                    (mouseenter)=\"OnRailLabelHover($event, more.Title)\">{{ more.Title }}</span>\n              @let moreIndicators = ChromeGroupIndicators(more);\n              @if (moreIndicators.DirtyCount > 0) {\n                <span class=\"mj-forms-chrome-rail-dirty\"\n                      role=\"img\"\n                      [title]=\"RailDirtyTitle(moreIndicators.DirtyCount, more.Title)\"\n                      [attr.aria-label]=\"RailDirtyTitle(moreIndicators.DirtyCount, more.Title)\"></span>\n              }\n              @if (moreIndicators.ErrorCount > 0) {\n                <span class=\"mj-forms-chrome-rail-error\"\n                      role=\"img\"\n                      [title]=\"RailErrorTitle(moreIndicators.ErrorCount, more.Title)\"\n                      [attr.aria-label]=\"RailErrorTitle(moreIndicators.ErrorCount, more.Title)\">\n                  <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>{{ moreIndicators.ErrorCount }}\n                </span>\n              } @else if (moreIndicators.WarningCount > 0) {\n                <span class=\"mj-forms-chrome-rail-warning\"\n                      role=\"img\"\n                      [title]=\"RailWarningTitle(moreIndicators.WarningCount, more.Title)\"\n                      [attr.aria-label]=\"RailWarningTitle(moreIndicators.WarningCount, more.Title)\">\n                  <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>{{ moreIndicators.WarningCount }}\n                </span>\n              }\n              <i class=\"fa-solid mj-forms-chrome-rail-more-toggle\"\n                 [class.fa-minus]=\"MoreExpanded\"\n                 [class.fa-plus]=\"!MoreExpanded\"\n                 aria-hidden=\"true\"></i>\n            </div>\n            @if (MoreExpanded) {\n              <div class=\"mj-forms-chrome-rail-more-tree\">\n              @for (child of ChromeMoreItems; track child.Key) {\n                <div class=\"mj-forms-chrome-rail-item is-more-child\"\n                     role=\"button\"\n                     tabindex=\"0\"\n                     [class.is-active]=\"ChromeActiveGroupKey === child.Key\"\n                     [attr.aria-current]=\"ChromeActiveGroupKey === child.Key ? 'page' : null\"\n                     [class.is-drag-over]=\"RailDragOverKey === child.Key\"\n                     [class.has-errors]=\"ChromeGroupIndicators(child).ErrorCount > 0\"\n                     [class.is-dirty]=\"ChromeGroupIndicators(child).DirtyCount > 0\"\n                     (click)=\"OnChromeGroupActivate(child.Key)\"\n                     (keydown.enter)=\"OnChromeGroupActivate(child.Key)\"\n                     (keydown.space)=\"$event.preventDefault(); OnChromeGroupActivate(child.Key)\"\n                     (dragover)=\"OnRailDragOver($event, child.Key)\"\n                     (dragleave)=\"OnRailDragLeave($event, child.Key)\"\n                     (drop)=\"OnRailDrop($event, child.Key)\">\n                  @if (ChromeReorderAllowed) {\n                    <span class=\"mj-forms-chrome-rail-handle\"\n                          title=\"Drag to reorder\"\n                          draggable=\"true\"\n                          (dragstart)=\"OnRailDragStart($event, child.Key)\"\n                          (dragend)=\"OnRailDragEnd()\"\n                          (click)=\"$event.stopPropagation()\">\n                      <i class=\"fa-solid fa-grip-vertical\"></i>\n                    </span>\n                  }\n                  <i [class]=\"child.Icon\"></i>\n                  <span class=\"mj-forms-chrome-rail-label\"\n                        (mouseenter)=\"OnRailLabelHover($event, child.Title)\">{{ child.Title }}</span>\n                  @let childIndicators = ChromeGroupIndicators(child);\n                  @if (childIndicators.DirtyCount > 0) {\n                    <span class=\"mj-forms-chrome-rail-dirty\"\n                          role=\"img\"\n                          [title]=\"RailDirtyTitle(childIndicators.DirtyCount, child.Title)\"\n                          [attr.aria-label]=\"RailDirtyTitle(childIndicators.DirtyCount, child.Title)\"></span>\n                  }\n                  @if (childIndicators.ErrorCount > 0) {\n                    <span class=\"mj-forms-chrome-rail-error\"\n                          role=\"img\"\n                          [title]=\"RailErrorTitle(childIndicators.ErrorCount, child.Title)\"\n                          [attr.aria-label]=\"RailErrorTitle(childIndicators.ErrorCount, child.Title)\">\n                      <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>{{ childIndicators.ErrorCount }}\n                    </span>\n                  } @else if (childIndicators.WarningCount > 0) {\n                    <span class=\"mj-forms-chrome-rail-warning\"\n                          role=\"img\"\n                          [title]=\"RailWarningTitle(childIndicators.WarningCount, child.Title)\"\n                          [attr.aria-label]=\"RailWarningTitle(childIndicators.WarningCount, child.Title)\">\n                      <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>{{ childIndicators.WarningCount }}\n                    </span>\n                  }\n                  @let childCount = ChromeGroupRowCount(child);\n                  @if (childCount != null && childCount > 0) {\n                    <span class=\"mj-forms-chrome-rail-count\">{{ childCount }}</span>\n                  }\n                </div>\n              }\n              </div>\n            }\n          }\n          </div>\n          }\n        </nav>\n      }\n      <!-- All panels in a single flex container \u2014 CSS order drives sequencing -->\n      <div class=\"mj-forms-all-panels\">\n        <ng-content></ng-content>\n\n        <!--\n          Fill-in related grids for DisplayInForm relationships the template\n          did not bake and no registered panel claimed. Claimed / extra panels\n          still mount via mj-form-panel-slot. See plans/form-contributions.md.\n        -->\n        @if (Record && FormComponent) {\n          <mj-form-contributions\n            [Record]=\"Record\"\n            [FormComponent]=\"FormComponent\"\n            [FormContext]=\"FormComponent.formContext\"\n            [BakedSectionKeys]=\"BakedRelatedSectionKeys\"\n            [ShowRelatedEntities]=\"EffectiveShowRelatedEntities\">\n          </mj-form-contributions>\n        }\n\n        <!--\n          Container-provided fallback slot. ALWAYS present \u2014 last in document\n          order \u2014 so any panel whose registered slot isn't found in the current\n          form falls through here via FormSlotCoordinator's chain. Downstream\n          consumers that haven't rerun CodeGen against the slot-emitting\n          template still see every panel; they just render at the bottom\n          instead of at their preferred position.\n        -->\n        @if (ShowMoreToggle) {\n          <div class=\"mj-forms-more-overflow\" [class.is-expanded]=\"MoreExpanded\">\n            <button type=\"button\"\n                    class=\"mj-forms-more-overflow-toggle\"\n                    (click)=\"OnMoreToggle()\">\n              <i [class]=\"MoreExpanded ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              <span class=\"mj-forms-more-overflow-label\">{{ MoreExpanded ? 'Hide more' : 'More' }}</span>\n              @if (!MoreExpanded && MorePreview) {\n                <span class=\"mj-forms-more-overflow-preview\">{{ MorePreview }}</span>\n              }\n              <i class=\"fa-solid\"\n                 [class.fa-chevron-down]=\"MoreExpanded\"\n                 [class.fa-chevron-right]=\"!MoreExpanded\"></i>\n            </button>\n          </div>\n        }\n\n        @if (Record && FormComponent) {\n          <mj-form-panel-slot\n            [Entity]=\"Record.EntityInfo.Name\"\n            Slot=\"after-everything\"\n            [Record]=\"Record\"\n            [FormComponent]=\"FormComponent\">\n          </mj-form-panel-slot>\n        }\n\n        <!-- Empty state when no sections match search -->\n        @if (EffectiveSearchFilter && SearchHasNoMatches) {\n          <mj-empty-state class=\"mj-forms-empty-search-state\"\n            Variant=\"no-results\"\n            Title=\"No sections found\"\n            [Message]=\"'No sections match &quot;' + EffectiveSearchFilter + '&quot;. Try a different search term.'\"\n            ActionText=\"Clear search\"\n            ActionIcon=\"fa-solid fa-rotate-left\"\n            ActionVariant=\"flat\"\n            (Action)=\"OnFilterChange('')\" />\n        }\n      </div>\n\n      <!-- IS-A Related Records Side Panel -->\n      <mj-isa-related-panel\n        [Record]=\"EffectiveRecord\"\n        [EditMode]=\"EffectiveEditMode\"\n        [Collapsed]=\"EffectiveWidthMode === 'full-width'\"\n        (Navigate)=\"OnNavigate($event)\">\n      </mj-isa-related-panel>\n    </div>\n  </div>\n</div>\n\n<!-- ============================================\n     RECORD CHANGES DRAWER (shown when history button clicked)\n     ============================================ -->\n@if (ShowRecordChanges && EffectiveRecord) {\n  <mj-record-changes\n    [record]=\"EffectiveRecord\"\n    [AllowRestore]=\"EffectiveUserCanEdit\"\n    (RestoreRequested)=\"OnRestoreRequested($event)\"\n    (dialogClosed)=\"OnRecordChangesClosed()\">\n  </mj-record-changes>\n}\n\n<!-- ============================================\n     TAGS PANEL (shown when tags button clicked)\n     ============================================ -->\n@if (ShowTagsPanel && EffectiveRecord) {\n  <mj-record-tags\n    [Record]=\"EffectiveRecord\"\n    [WidthPx]=\"TagsPanelWidth\"\n    (PanelClosed)=\"OnTagsPanelClosed()\"\n    (TagCountChanged)=\"OnTagCountChanged($event)\"\n    (RecordNavigate)=\"OnTagsRecordNavigate($event)\"\n    (WidthChanged)=\"OnTagsPanelWidthChanged($event)\">\n  </mj-record-tags>\n}\n\n<!-- ============================================\n     ATTACHMENTS PANEL (shown when attachments button clicked)\n     ============================================ -->\n@if (ShowAttachmentsPanel && AttachmentsAvailable && EffectiveRecord) {\n  <mj-record-attachments\n    [Record]=\"EffectiveRecord\"\n    [Visible]=\"true\"\n    (PanelClosed)=\"OnAttachmentsPanelClosed()\"\n    (AttachmentCountChanged)=\"OnAttachmentCountChanged($event)\">\n  </mj-record-attachments>\n}\n\n<!-- ============================================\n     LIST MANAGEMENT DIALOG (shown when lists button clicked)\n     ============================================ -->\n@if (ShowListManagement && EffectiveRecord) {\n  <mj-list-management-dialog\n    [visible]=\"ShowListManagement\"\n    [config]=\"{\n      mode: 'manage',\n      entityId: EffectiveRecord.EntityInfo.ID,\n      entityName: EffectiveRecord.EntityInfo.Name,\n      recordIds: [EffectiveRecord.PrimaryKey.Values()[0]],\n      allowCreate: true\n    }\"\n    (complete)=\"OnListManagementComplete($event)\"\n    (cancel)=\"OnListManagementClosed()\">\n  </mj-list-management-dialog>\n}\n\n<!-- ============================================\n     SECTION MANAGER DRAWER (shown when manage-sections button clicked)\n     ============================================ -->\n<mj-section-manager\n  [Sections]=\"SectionManagerItems\"\n  [SectionOrder]=\"SectionManagerOrder\"\n  [MoreSectionKeys]=\"SectionManagerMoreKeys\"\n  [LockedMoreKeys]=\"SectionManagerLockedMoreKeys\"\n  [Visible]=\"ShowSectionManager\"\n  (SectionOrderChange)=\"OnSectionOrderChange($event)\"\n  (MembershipChange)=\"OnChromeMembershipChange($event)\"\n  (ResetRequested)=\"OnSectionManagerReset()\"\n  (Closed)=\"OnSectionManagerClosed()\">\n</mj-section-manager>\n", styles: ["/* ============================================\n   RECORD FORM CONTAINER \u2014 uses global --mj-* design tokens\n   Top-level wrapper: toolbar + scrollable content\n   ============================================ */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ViewEncapsulation.None fallback \u2014 ensure the element itself constrains overflow */\nmj-record-form-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n}\n\n/* ============================================\n   SCROLL AREA (full-width so mouse wheel works anywhere)\n   ============================================ */\n.mj-forms-scroll-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   PANELS CONTAINER (centered content within scroll area)\n   ============================================ */\n.mj-forms-panels-container {\n  padding: 24px 32px 48px;\n  max-width: 920px;\n  margin: 0 auto;\n  width: 100%;\n  box-sizing: border-box;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Widen max-width when ISA side panel is present */\n.mj-forms-panels--has-isa-panel {\n  max-width: 1240px;\n}\n\n.mj-forms-panels--full-width {\n  max-width: none;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n/* Flex row layout: form panels + optional ISA side panel */\n.mj-forms-layout-row {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav) {\n  padding: 16px 20px 24px;\n  display: flex;\n  flex-direction: column;\n  /* Definite height = the scroll-area's client box. min-height: 100% alone\n     lets the column grow with content and never gives related grids a\n     containing-block height, so Height:auto (100%) on the grid collapses. */\n  height: 100%;\n  max-height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Centered left-nav keeps the form column at the same 920px as accordion,\n   plus the rail. Full-width still uses .mj-forms-panels--full-width. */\n.mj-forms-panels-container:has(.mj-forms-layout--left-nav):not(.mj-forms-panels--full-width) {\n  max-width: 1160px;\n}\n\n.mj-forms-layout-row.mj-forms-layout--left-nav {\n  flex: 1;\n  min-height: 0;\n  /* Wins over .mj-forms-layout-row { align-items: flex-start } so the\n     body column stretches to the rail / viewport instead of hugging content. */\n  align-items: stretch;\n  gap: 16px;\n}\n\n/* Left-nav: only the active rail item is in the body. Slot-mounted\n   panels never inject the container coordinator, so host classes set\n   from the container are the hide/show channel that always reaches them. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-hidden,\n.mj-forms-layout--accordion mj-collapsible-panel.mj-chrome-hidden {\n  display: none;\n}\n\n/* Selected item: no accordion chrome \u2014 the rail is the header. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-header {\n  display: none;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel {\n  box-shadow: none;\n  border: 0;\n  background: transparent;\n  border-radius: 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-body--collapsed {\n  max-height: none;\n  padding: 0;\n  opacity: 1;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-show .mj-forms-panel-content {\n  max-height: none;\n  padding: 0;\n  overflow: visible;\n}\n\n/* Details: every field panel shows under ONE rail item, and the rail label\n   cannot head several loose field lists \u2014 without a surface the rows float\n   on the page background. So the Details panels render as ONE card: each\n   panel is a segment (surface + side borders, no radius), and the container\n   marks the visual first / last (CSS order, not DOM order) to close the top\n   and bottom edges. No per-section headers \u2014 the sections are plain groups. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details .mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first {\n  margin-top: 8px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first .mj-forms-panel {\n  border-top: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md) var(--mj-radius-md) 0 0;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-last .mj-forms-panel {\n  border-bottom: 1px solid var(--mj-border-default);\n  border-radius: 0 0 var(--mj-radius-md) var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* One panel = whole card: both edges on the same element. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first.mj-chrome-details-last .mj-forms-panel {\n  border-radius: var(--mj-radius-md);\n}\n\n/* Segment padding: sides always; top / bottom only at the card's edges, and a\n   half-step between segments so the groups still read as groups. */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details .mj-forms-panel-content {\n  padding: 8px 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-first .mj-forms-panel-content {\n  padding-top: 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-chrome-details-last .mj-forms-panel-content {\n  padding-bottom: 20px;\n}\n\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show {\n  /* Content-sized (see RelatedGridHeightPx). Do not flex-fill leftover\n     column space \u2014 a form header above the grid can collapse that to 0. */\n  flex: 0 0 auto;\n  min-height: 0;\n}\n\n/* Accordion related panels use a 400px resizable box. Left-nav grids\n   set their own pixel height from row count (RelatedGridHeightPx). */\n.mj-forms-layout--left-nav mj-collapsible-panel.mj-panel--related-entity.mj-chrome-show .mj-forms-panel-content {\n  height: auto;\n  max-height: none;\n  overflow: hidden;\n  resize: none;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels {\n  gap: 0;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n/* Details (field panels) can be taller than the viewport \u2014 scroll inside the\n   column. Related grids scroll inside AG Grid instead. */\n.mj-forms-layout--left-nav .mj-forms-all-panels:has(mj-collapsible-panel.mj-chrome-show:not(.mj-panel--related-entity)) {\n  overflow-y: auto;\n}\n\n.mj-forms-layout--left-nav .mj-forms-all-panels > *:not(mj-collapsible-panel.mj-panel--related-entity) {\n  flex-shrink: 0;\n}\n\n.mj-forms-layout--left-nav .biz-hero {\n  margin-bottom: 4px;\n}\n\n/* All panels in a single flex container \u2014 CSS order drives sequencing */\n.mj-forms-all-panels {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Hide related entity panels in edit mode (variant host class on mj-collapsible-panel) */\n.mj-forms-panels--edit-mode .mj-panel--related-entity,\n.mj-forms-panels--edit-mode .mj-forms-more-overflow {\n  display: none;\n}\n\n/* Detail / More panels sort after the overflow footer */\nmj-collapsible-panel.mj-form-role-detail,\nmj-collapsible-panel.mj-form-role-more {\n  order: 8500;\n}\n\n.mj-forms-more-overflow {\n  order: 8400;\n  display: flex;\n  flex-direction: column;\n  margin-top: 4px;\n  padding-top: 12px;\n  border-top: 1px dashed var(--mj-border-subtle);\n}\n\n.mj-forms-more-overflow-toggle {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 6px 2px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  cursor: pointer;\n  text-align: left;\n}\n\n.mj-forms-more-overflow-toggle:hover {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-more-overflow-label {\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-more-overflow-preview {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--mj-text-disabled);\n  font-weight: var(--mj-font-normal);\n}\n\n.mj-forms-more-overflow-toggle .fa-chevron-right,\n.mj-forms-more-overflow-toggle .fa-chevron-down {\n  margin-left: auto;\n}\n\n.mj-forms-chrome-rail {\n  flex: 0 0 auto;\n  width: 200px;\n  max-width: 360px;\n  min-width: 160px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  position: sticky;\n  top: 0;\n  align-self: stretch;\n  min-height: 0;\n  padding: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n}\n\n/* The rail is as tall as the body column; when it has more items than fit,\n   the ITEMS scroll (the pin / collapse toolbar above stays fixed). Without\n   this the overflow was clipped by the panels container. */\n.mj-forms-chrome-rail-items {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin;\n}\n\n.mj-forms-chrome-rail.is-resizing {\n  user-select: none;\n}\n\n.mj-forms-chrome-rail.is-collapsed {\n  flex: 0 0 36px;\n  width: 36px;\n  min-width: 36px;\n  max-width: 36px;\n  padding: 8px 0;\n  overflow: hidden;\n}\n\n.mj-forms-chrome-rail-resizer {\n  position: absolute;\n  top: 0;\n  right: -4px;\n  width: 8px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 3;\n  touch-action: none;\n}\n\n.mj-forms-chrome-rail-resizer::after {\n  content: '';\n  position: absolute;\n  top: 12px;\n  bottom: 12px;\n  left: 3px;\n  width: 2px;\n  border-radius: 1px;\n  background: transparent;\n}\n\n.mj-forms-chrome-rail:hover .mj-forms-chrome-rail-resizer::after,\n.mj-forms-chrome-rail.is-resizing .mj-forms-chrome-rail-resizer::after {\n  background: var(--mj-border-strong);\n}\n\n.mj-forms-layout--right-nav .mj-forms-chrome-rail-resizer {\n  right: auto;\n  left: -4px;\n}\n\n.mj-forms-chrome-rail-spine {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  padding: 8px 0;\n  border: 0;\n  background: transparent;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-spine:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-forms-chrome-rail-spine > i {\n  flex-shrink: 0;\n}\n\n.mj-forms-chrome-rail-spine-label {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.04em;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-height: 100%;\n}\n\n.mj-forms-chrome-rail-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 2px;\n  padding: 2px 4px 6px;\n}\n\n.mj-forms-chrome-rail-pin,\n.mj-forms-chrome-rail-collapse {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-pin:hover,\n.mj-forms-chrome-rail-collapse:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-pin:not(.is-pinned) i {\n  transform: rotate(45deg);\n}\n\n.mj-forms-chrome-rail-pin.is-pinned {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 10px 12px;\n  border: 0;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  text-align: left;\n  cursor: pointer;\n}\n\n.mj-forms-chrome-rail-item > i {\n  width: 1.15em;\n  flex-shrink: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.mj-forms-chrome-rail-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-chrome-rail-item.is-active::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 6px;\n  bottom: 6px;\n  width: 3px;\n  border-radius: 0 3px 3px 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-label {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-item.is-drag-over {\n  outline: 1px dashed var(--mj-border-focus);\n  outline-offset: -1px;\n}\n\n.mj-forms-chrome-rail-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  margin-left: -4px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: opacity var(--mj-transition-base, 0.15s) ease;\n}\n\n.mj-forms-chrome-rail-item:hover .mj-forms-chrome-rail-handle,\n.mj-forms-chrome-rail-item.is-active .mj-forms-chrome-rail-handle {\n  opacity: 1;\n}\n\n.mj-forms-chrome-rail-handle.is-spacer {\n  opacity: 0;\n  pointer-events: none;\n  cursor: default;\n}\n\n.mj-forms-chrome-rail-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-chrome-rail-handle:active {\n  cursor: grabbing;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder {\n  position: relative;\n  margin-top: 14px;\n  padding-top: 14px;\n  color: var(--mj-text-muted);\n  border-radius: 0;\n}\n\n.mj-forms-chrome-rail-item.is-more-folder::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 8px;\n  right: 8px;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--mj-border-strong) 18%,\n    var(--mj-border-strong) 82%,\n    transparent 100%\n  );\n}\n\n.mj-forms-chrome-rail-item.is-more-folder:hover {\n  background: transparent;\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-item.is-more-folder.is-expanded {\n  color: var(--mj-text-secondary);\n}\n\n.mj-forms-chrome-rail-more-toggle {\n  margin-left: auto;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-chrome-rail-more-tree {\n  margin-left: 22px;\n  padding-left: 6px;\n  border-left: 1px solid var(--mj-border-subtle);\n}\n\n.mj-forms-chrome-rail-item.is-more-child {\n  padding-left: 8px;\n}\n\n.mj-forms-chrome-rail-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related-grid row count. Not rendered at 0 \u2014 an empty grid is not a signal, and a\n   grey \"0\" beside the red invalid count reads as one more thing to attend to. */\n.mj-forms-chrome-rail-count {\n  min-width: 1.25rem;\n  padding: 0 6px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  text-align: center;\n}\n\n/* Screen-reader-only text (the indicators' live region). */\n.mj-forms-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ============================================\n   RAIL SECTION INDICATORS\n   A rail item says WHICH section holds unsaved edits or an invalid field, read\n   live from the panels it fronts (FormSectionIndicatorCoordinator). Same idioms\n   as the fields themselves: the 6px amber dot an edited field shows after its\n   label, and the error colour a failing field paints its underline in.\n   ============================================ */\n.mj-forms-chrome-rail-dirty {\n  flex: 0 0 auto;\n  width: var(--mj-space-1-5);\n  height: var(--mj-space-1-5);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n}\n\n.mj-forms-chrome-rail-error,\n.mj-forms-chrome-rail-warning {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: var(--mj-space-5);\n  padding: var(--mj-space-px) var(--mj-space-1-5);\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  line-height: 1.2;\n  text-align: center;\n}\n\n.mj-forms-chrome-rail-error {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.mj-forms-chrome-rail-warning {\n  background: var(--mj-status-warning-bg);\n  color: var(--mj-status-warning-text);\n  border: 1px solid var(--mj-status-warning-border);\n}\n\n.mj-forms-chrome-rail-error i,\n.mj-forms-chrome-rail-warning i {\n  font-size: var(--mj-space-2-5);\n}\n\n/* The section's icon takes the error colour too, so the item reads as failing\n   even before the badge is noticed \u2014 but never the active item's brand tint. */\n.mj-forms-chrome-rail-item.has-errors:not(.is-active) > i {\n  color: var(--mj-status-error);\n}\n\n/* Collapsed spine: a column of icon \u2192 badge / dot \u2192 rotated label. */\n.mj-forms-chrome-rail-error.is-spine,\n.mj-forms-chrome-rail-warning.is-spine {\n  order: 1;\n  padding: 0 var(--mj-space-1);\n  min-width: var(--mj-space-5);\n}\n\n.mj-forms-chrome-rail-dirty.is-spine {\n  order: 1;\n}\n\n.mj-forms-chrome-rail-spine > .mj-forms-chrome-rail-spine-label {\n  order: 2;\n}\n\n@media (max-width: 720px) {\n  .mj-forms-layout--left-nav {\n    flex-direction: column;\n  }\n\n  .mj-forms-chrome-rail {\n    flex: 1 1 auto;\n    width: 100%;\n    position: static;\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  .mj-forms-chrome-rail-resizer {\n    display: none;\n  }\n\n  .mj-forms-chrome-rail.is-collapsed {\n    flex: 0 0 auto;\n    width: 100%;\n    min-width: 0;\n    max-width: none;\n    height: 36px;\n    padding: 0;\n  }\n\n  .mj-forms-chrome-rail-spine {\n    flex-direction: row;\n    padding: 0 12px;\n  }\n\n  .mj-forms-chrome-rail-spine-label {\n    writing-mode: horizontal-tb;\n    transform: none;\n    max-height: none;\n  }\n\n  .mj-forms-chrome-rail-toolbar {\n    width: 100%;\n  }\n\n  .mj-forms-chrome-rail-item {\n    width: auto;\n  }\n\n  /* Phones: the rail is a wrapping row of chips, so the items wrapper must\n     wrap too \u2014 a column here stacks one chip per row and grows past the\n     rail (no scroll, body pushed out). */\n  .mj-forms-chrome-rail-items {\n    flex-direction: row;\n    flex-wrap: wrap;\n    overflow: visible;\n    min-height: auto;\n  }\n}\n\n/* ============================================\n   EMPTY SEARCH STATE\n   ============================================ */\n.mj-forms-empty-search-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 24px;\n  text-align: center;\n  min-height: 400px;\n}\n\n.mj-forms-empty-search-icon {\n  width: 80px;\n  height: 80px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 24px;\n}\n\n.mj-forms-empty-search-icon i {\n  font-size: 32px;\n  color: var(--mj-text-muted);\n}\n\n.mj-forms-empty-search-title {\n  font-size: var(--mj-text-xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  margin: 0 0 12px 0;\n}\n\n.mj-forms-empty-search-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  line-height: 1.6;\n  max-width: 400px;\n  margin: 0;\n}\n\n.mj-forms-empty-search-message strong {\n  color: var(--mj-text-primary);\n  font-weight: var(--mj-font-semibold);\n}\n\n.mj-forms-empty-search-link {\n  color: var(--mj-brand-primary);\n  text-decoration: none;\n  font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-empty-search-link:hover {\n  text-decoration: underline;\n}\n\n/* ============================================\n   RESPONSIVE\n   ============================================ */\n@media (max-width: 768px) {\n  .mj-forms-panels-container {\n    padding: 16px 12px 32px;\n  }\n}\n\n/* ====================================================================\n   VARIANT PICKER \u2014 between toolbar and form body\n   Compact \"Form: <name> \u25BE\" row that appears when more than one variant\n   is applicable for the current entity record.\n   ==================================================================== */\n\n.mj-form-variant-picker {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.mj-form-variant-picker-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.mj-form-variant-picker-control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  min-width: 160px;\n}\n.mj-form-variant-picker-control:hover,\n.mj-form-variant-picker-control:focus,\n.mj-form-variant-picker-control.open {\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.mj-form-variant-picker-current {\n  font-weight: 600;\n  flex: 1;\n}\n.mj-form-variant-picker-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 50;\n  min-width: 280px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));\n  padding: 4px;\n  max-height: 320px;\n  overflow: auto;\n}\n.mj-form-variant-picker-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.mj-form-variant-picker-row:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mj-form-variant-picker-row.current {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n.mj-form-variant-picker-row.inactive {\n  opacity: 0.7;\n}\n.mj-form-variant-picker-row-main {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex: 1;\n  min-width: 0;\n}\n.mj-form-variant-picker-row-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.mj-form-variant-picker-row-sub {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.mj-form-variant-picker-check {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n}\n\n/* Retrospective fix #8 \u2014 visually distinguish the Default row from variants. */\n.mj-form-variant-picker-row.mj-form-variant-picker-default {\n  border-bottom: 1px dashed var(--mj-border-default);\n  margin-bottom: 4px;\n  padding-bottom: 10px;\n}\n.mj-form-variant-picker-default-tag {\n  color: var(--mj-text-muted);\n  font-weight: 400;\n  font-size: 11px;\n  margin-left: 4px;\n}\n"] }]
     }], null, { recordChangesDrawer: [{
             type: ViewChild,
             args: [RecordChangesComponent]
@@ -2055,7 +2379,7 @@ export class MjRecordFormContainerComponent extends BaseAngularComponent {
             type: ContentChildren,
             args: [MjCollapsiblePanelComponent, { descendants: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjRecordFormContainerComponent, { className: "MjRecordFormContainerComponent", filePath: "src/lib/container/record-form-container.component.ts", lineNumber: 116 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjRecordFormContainerComponent, { className: "MjRecordFormContainerComponent", filePath: "src/lib/container/record-form-container.component.ts", lineNumber: 127 }); })();
 function contributionRailKey(meta) {
     if (meta.contributionKey?.trim()) {
         return meta.contributionKey.trim();