@memberjunction/ng-base-forms 6.1.0-edge.5 → 6.1.0-edge.7

package/dist/lib/panel/collapsible-panel.component.js

@@ -6,47 +6,80 @@ import { MjFormFieldComponent } from '../field/form-field.component';
 import { CompositeKey } from '@memberjunction/core';
 import { EscapeHTML, HighlightSearchMatches } from '@memberjunction/global';
 import { FormChromeCoordinator } from '../chrome/form-chrome-coordinator.service';
+import { FormSectionIndicatorCoordinator } from '../section-indicators/form-section-indicator-coordinator.service';
+import { ClaimedCollectionErrors, DescribeSectionDirty, DescribeSectionErrors, DescribeSectionWarnings, SectionOwnsValidationSource, SumSectionIndicators, TallyValidationErrors, } from '../section-indicators/form-section-indicators';
 import * as i0 from "@angular/core";
 const _c0 = ["panelContent"];
 const _c1 = ["*"];
 function MjCollapsiblePanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵlistener("dragstart", function MjCollapsiblePanelComponent_Conditional_2_Template_div_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDragStart($event)); })("dragend", function MjCollapsiblePanelComponent_Conditional_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnDragEnd()); })("click", function MjCollapsiblePanelComponent_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 14);
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵlistener("dragstart", function MjCollapsiblePanelComponent_Conditional_2_Template_div_dragstart_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDragStart($event)); })("dragend", function MjCollapsiblePanelComponent_Conditional_2_Template_div_dragend_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDragEnd()); })("click", function MjCollapsiblePanelComponent_Conditional_2_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵelementEnd();
 } }
 function MjCollapsiblePanelComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(0, "span", 8);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.SectionDirtyTitle);
+    i0.ɵɵattribute("aria-label", ctx_r1.SectionDirtyTitle);
+} }
+function MjCollapsiblePanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.SectionErrorTitle);
+    i0.ɵɵattribute("aria-label", ctx_r1.SectionErrorTitle);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.SectionErrorCount, " ");
+} }
+function MjCollapsiblePanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r1.SectionWarningTitle);
+    i0.ɵɵattribute("aria-label", ctx_r1.SectionWarningTitle);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.SectionWarningCount, " ");
+} }
+function MjCollapsiblePanelComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("mj-forms-row-count-badge--zero", ctx_r2.BadgeCount === 0);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-forms-row-count-badge--zero", ctx_r1.BadgeCount === 0);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.BadgeCount, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.BadgeCount, " ");
 } }
-function MjCollapsiblePanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 16);
-    i0.ɵɵlistener("click", function MjCollapsiblePanelComponent_Conditional_8_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnInheritedBadgeClick($event)); });
-    i0.ɵɵelement(1, "i", 17);
+function MjCollapsiblePanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 21);
+    i0.ɵɵlistener("click", function MjCollapsiblePanelComponent_Conditional_11_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnInheritedBadgeClick($event)); });
+    i0.ɵɵelement(1, "i", 22);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", "View parent record: " + ctx_r2.InheritedFromEntity);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "View parent record: " + ctx_r1.InheritedFromEntity);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Inherited from ", ctx_r2.InheritedFromEntity, " ");
+    i0.ɵɵtextInterpolate1(" Inherited from ", ctx_r1.InheritedFromEntity, " ");
 } }
-function MjCollapsiblePanelComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
+function MjCollapsiblePanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.Expanded ? "fa fa-chevron-up" : "fa fa-chevron-down");
+    i0.ɵɵclassMap(ctx_r1.Expanded ? "fa fa-chevron-up" : "fa fa-chevron-down");
 } }
 /**
  * Reusable collapsible panel for form sections.
@@ -62,6 +95,10 @@ function MjCollapsiblePanelComponent_Conditional_9_Template(rf, ctx) { if (rf &
  * - Drag-to-reorder sections
  * - Inheritable "Inherited from X" badge with navigation event
  * - Row count badge for related entity sections
+ * - Section indicators: an unsaved-changes dot and an invalid-field count derived
+ *   live from the projected `mj-form-field`s (plus anything a custom section
+ *   supplies through `[Indicators]`), published to the form's chrome rail
+ *   through {@link FormSectionIndicatorCoordinator}
  *
  * @example
  * ```html
@@ -83,8 +120,33 @@ export class MjCollapsiblePanelComponent {
     elementRef = inject(ElementRef);
     ngZone = inject(NgZone);
     chrome = inject(FormChromeCoordinator, { optional: true });
+    indicators = inject(FormSectionIndicatorCoordinator, { optional: true });
     /** Unique key for state persistence */
     SectionKey = '';
+    /**
+     * Indicator counts a custom section supplies for content that is NOT rendered by
+     * `mj-form-field` — a designer, an inline grid, a hand-built editor. Added to the
+     * counts this panel derives from its own fields, so a section that mixes both
+     * reports the union. Omit for ordinary field panels: their state is derived.
+     *
+     * ```html
+     * <mj-collapsible-panel SectionKey="lines" [Indicators]="{ DirtyCount: LineEditor.EditedRows, ErrorCount: LineEditor.InvalidRows }">
+     * ```
+     */
+    Indicators;
+    /**
+     * Graph-path collection names whose validation failures belong to THIS panel —
+     * `ValidationSources="Modifications"` claims `Modifications[2].ProvisionID`.
+     *
+     * Only needed when a panel hosts a child collection whose path name differs from
+     * its `SectionKey`: plain field failures are joined automatically from the panel's
+     * `mj-form-field` children, and a graph path whose leading segment already matches
+     * the `SectionKey` is claimed without any declaration. Declared HERE, on the panel
+     * that owns the collection, rather than in an app-side `fieldName -> sectionKey`
+     * map that duplicates a fact the panel owns and drifts silently when a
+     * `SectionKey` is renamed. Accepts a single name or a list.
+     */
+    ValidationSources;
     /** Display name shown in the panel header */
     SectionName = '';
     /** Font Awesome icon class for the panel header */
@@ -163,6 +225,16 @@ export class MjCollapsiblePanelComponent {
     get HostIcon() {
         return this.Icon;
     }
+    /**
+     * Indicator counts mirrored onto the host element, so CSS and any DOM sweep can
+     * read a section's state without a component reference.
+     */
+    get HostDirtyCount() {
+        return this.SectionIndicators.DirtyCount;
+    }
+    get HostErrorCount() {
+        return this.SectionIndicators.ErrorCount;
+    }
     get HostClass() {
         const classes = [`mj-panel--${this.Variant}`];
         if (!this.IsVisible)
@@ -171,6 +243,13 @@ export class MjCollapsiblePanelComponent {
             classes.push('mj-dragging');
         if (this.IsDragOver)
             classes.push('mj-drag-over');
+        const indicators = this.SectionIndicators;
+        if (indicators.DirtyCount > 0)
+            classes.push('mj-panel-dirty');
+        if (indicators.ErrorCount > 0)
+            classes.push('mj-panel-has-errors');
+        else if (indicators.WarningCount > 0)
+            classes.push('mj-panel-has-warnings');
         if (this.chrome?.Spec.RelatedRoles.get(this.SectionKey) === 'Detail') {
             classes.push('mj-form-role-detail');
         }
@@ -245,12 +324,121 @@ export class MjCollapsiblePanelComponent {
         const formRef = this.Form;
         return formRef?.IsSectionExpanded ? formRef.IsSectionExpanded(this.SectionKey, this.DefaultExpanded) : true;
     }
+    // ---- Section indicators (unsaved-changes dot + invalid-field count) ----
+    /**
+     * Live state of this section: fields edited since the last save, fields that are
+     * invalid or required-and-empty, and fields carrying warnings. Derived from the
+     * projected `mj-form-field`s on every read — the same state those fields use for
+     * their own amber dot and red underline, so the section can never disagree with
+     * its fields — plus graph-path validation failures this section claims, plus
+     * whatever a custom section supplies through `[Indicators]`.
+     *
+     * Read during change detection (host bindings, the header template, the rail via
+     * the coordinator). Pure and cheap: one pass over the field list.
+     */
+    get SectionIndicators() {
+        return SumSectionIndicators(this.fieldIndicators(), TallyValidationErrors(this.claimedGraphErrors()), this.Indicators);
+    }
+    get SectionDirtyCount() {
+        return this.SectionIndicators.DirtyCount;
+    }
+    get SectionErrorCount() {
+        return this.SectionIndicators.ErrorCount;
+    }
+    get SectionWarningCount() {
+        return this.SectionIndicators.WarningCount;
+    }
+    get SectionDirtyTitle() {
+        return DescribeSectionDirty(this.SectionDirtyCount);
+    }
+    get SectionErrorTitle() {
+        return DescribeSectionErrors(this.SectionErrorCount);
+    }
+    get SectionWarningTitle() {
+        return DescribeSectionWarnings(this.SectionWarningCount);
+    }
+    /** {@link FormSectionIndicatorSource} — the rail reads this through the coordinator. */
+    GetSectionIndicators() {
+        return this.SectionIndicators;
+    }
+    /** {@link FormSectionIndicatorSource} — whether a form-level error belongs to this section. */
+    OwnsValidationSource(source) {
+        return SectionOwnsValidationSource(source, this.SectionKey, this.validationScope());
+    }
+    /** Normalized {@link ValidationSources}. */
+    get ValidationCollectionNames() {
+        const raw = this.ValidationSources;
+        if (!raw)
+            return [];
+        return (typeof raw === 'string' ? [raw] : [...raw]).map((n) => n.trim()).filter((n) => n.length > 0);
+    }
+    /** Field names this panel renders — the join between a plain-field error and this section. */
+    renderedFieldNames() {
+        const names = [];
+        this.FieldComponents?.forEach((field) => {
+            if (field.FieldName)
+                names.push(field.FieldName);
+        });
+        return names;
+    }
+    validationScope() {
+        return { FieldNames: this.renderedFieldNames(), CollectionNames: this.ValidationCollectionNames };
+    }
+    /**
+     * Counts of FIELDS (not messages) in each state. A field is invalid when it shows a
+     * failure OR is required and empty in edit mode — exactly the two conditions that
+     * paint its underline red. Warnings count only on fields with no failure, mirroring
+     * `MjFormFieldComponent.ShowWarnings`.
+     */
+    fieldIndicators() {
+        let DirtyCount = 0;
+        let ErrorCount = 0;
+        let WarningCount = 0;
+        this.FieldComponents?.forEach((field) => {
+            if (field.IsDirty)
+                DirtyCount++;
+            // Only a field that renders an EDITOR can be invalid: a read-only field renders its
+            // value as text and never paints an underline, so it is skipped even when
+            // `IsRequiredEmpty` would say otherwise (a NOT NULL `__mj_CreatedAt` on a new record
+            // is empty and read-only — the user cannot fix it, and it fills itself on save).
+            if (!field.EditMode || field.IsFieldReadOnly)
+                return;
+            if (field.ShowErrors || field.IsRequiredEmpty)
+                ErrorCount++;
+            // The field paints its amber underline on EITHER of these — a stored date the input
+            // cannot parse warns on its own, outside the validation pipeline.
+            else if (field.ShowWarnings || field.StoredDateIsUnreadable)
+                WarningCount++;
+        });
+        return { DirtyCount, ErrorCount, WarningCount };
+    }
+    /**
+     * Graph-path failures (`Lines[2].Amount`) this section owns, once the form has asked
+     * for validation to show. Plain field-name failures are NOT counted here — the field
+     * that renders them already reports through {@link fieldIndicators}.
+     */
+    claimedGraphErrors() {
+        const ctx = this.FormContext;
+        if (!ctx?.showValidation || !ctx.validationErrors?.length)
+            return [];
+        return ClaimedCollectionErrors(ctx.validationErrors, this.SectionKey, this.validationScope());
+    }
+    /** (Re)declare this section with the container-scoped registry the rail reads. */
+    registerIndicatorSource(previousKey) {
+        if (!this.indicators)
+            return;
+        if (previousKey && previousKey !== this.SectionKey) {
+            this.indicators.Unregister(this, previousKey);
+        }
+        this.indicators.Register(this);
+    }
     // ---- Lifecycle ----
     ngOnInit() {
         this.DisplayName = this.SectionName;
         this.chrome?.Changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.UpdateVisibilityAndHighlighting();
         });
+        this.registerIndicatorSource();
     }
     ngAfterContentInit() {
         this.UpdateFieldNames();
@@ -258,12 +446,18 @@ export class MjCollapsiblePanelComponent {
         this.FieldComponents.changes.subscribe(() => {
             this.UpdateFieldNames();
             this.SubscribeToFieldNavigateEvents();
+            // The set of fields changed, so the section's counts (and which errors it
+            // claims) may have too — let the rail re-read.
+            this.indicators?.NotifyChanged();
         });
     }
     ngOnChanges(changes) {
         if (changes['SectionName']) {
             this.DisplayName = this.SectionName;
         }
+        if (changes['SectionKey'] && !changes['SectionKey'].firstChange) {
+            this.registerIndicatorSource(changes['SectionKey'].previousValue);
+        }
         if (changes['SectionName'] || changes['FormContext']) {
             this.UpdateVisibilityAndHighlighting();
         }
@@ -277,6 +471,7 @@ export class MjCollapsiblePanelComponent {
         this.SetupResizeObserver();
     }
     ngOnDestroy() {
+        this.indicators?.Unregister(this);
         this.fieldNavReset$.next();
         this.fieldNavReset$.complete();
         this.destroy$.next();
@@ -425,7 +620,9 @@ export class MjCollapsiblePanelComponent {
     }
     /**
      * Subscribes to Navigate events from all child form-field components
-     * and relays them through this panel's Navigate output.
+     * and relays them through this panel's Navigate output. Also listens for
+     * value edits so the section indicators (and the rail reading them) refresh
+     * on the same tick as the keystroke rather than on the container's next poll.
      */
     SubscribeToFieldNavigateEvents() {
         this.fieldNavReset$.next(); // tear down previous subscriptions
@@ -433,6 +630,10 @@ export class MjCollapsiblePanelComponent {
             field.Navigate.pipe(takeUntil(this.fieldNavReset$)).subscribe((event) => {
                 this.Navigate.emit(event);
             });
+            field.ValueChange.pipe(takeUntil(this.fieldNavReset$)).subscribe(() => {
+                this.cdr.markForCheck();
+                this.indicators?.NotifyChanged();
+            });
         });
     }
     /**
@@ -484,6 +685,22 @@ export class MjCollapsiblePanelComponent {
             formRef?.SetSectionPanelHeight?.(this.SectionKey, height);
         }, 500);
     }
+    /**
+     * True when this panel projects form fields and field-level security denies the user EVERY one
+     * of them.
+     *
+     * Deliberately false when the panel projects no `mj-form-field` at all — related-entity grids,
+     * IS-A cards and slot-injected panels all legitimately have none, and hiding those would remove
+     * sections field security has nothing to say about. "No fields" and "no readable fields" are
+     * different states and only the second one should hide the section.
+     */
+    get AllProjectedFieldsDenied() {
+        const fields = this.FieldComponents;
+        if (!fields || fields.length === 0) {
+            return false;
+        }
+        return fields.toArray().every(f => !f.IsFieldReadableByUser);
+    }
     UpdateVisibilityAndHighlighting() {
         // Hard hide takes precedence over search state. Driven by an explicit
         // `Hidden` input OR the form config's section-visibility rules carried on
@@ -495,6 +712,15 @@ export class MjCollapsiblePanelComponent {
             this.cdr.markForCheck();
             return;
         }
+        // A section whose every field is denied by field-level security renders as a heading over
+        // nothing — the fields hide themselves individually, leaving an empty card that reads like a
+        // broken screen rather than a permissions boundary. Hide the section instead.
+        if (this.AllProjectedFieldsDenied) {
+            this.IsVisible = false;
+            this.DisplayName = EscapeHTML(this.SectionName);
+            this.cdr.markForCheck();
+            return;
+        }
         const searchTerm = (this.FormContext?.sectionFilter || '').toLowerCase().trim();
         if (!searchTerm) {
             this.IsVisible = this.hasRenderableContent();
@@ -523,29 +749,30 @@ export class MjCollapsiblePanelComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panelContentRef = _t.first);
-        } }, hostVars: 7, hostBindings: function MjCollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        } }, hostVars: 9, hostBindings: function MjCollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("dragover", function MjCollapsiblePanelComponent_dragover_HostBindingHandler($event) { return ctx.OnDragOver($event); })("dragleave", function MjCollapsiblePanelComponent_dragleave_HostBindingHandler($event) { return ctx.OnDragLeave($event); })("drop", function MjCollapsiblePanelComponent_drop_HostBindingHandler($event) { return ctx.OnDrop($event); });
         } if (rf & 2) {
-            i0.ɵɵattribute("data-section-key", ctx.HostSectionKey)("data-variant", ctx.HostVariant)("data-icon", ctx.HostIcon);
+            i0.ɵɵattribute("data-section-key", ctx.HostSectionKey)("data-variant", ctx.HostVariant)("data-icon", ctx.HostIcon)("data-dirty-count", ctx.HostDirtyCount)("data-error-count", ctx.HostErrorCount);
             i0.ɵɵclassMap(ctx.HostClass);
             i0.ɵɵstyleProp("order", ctx.CssOrder);
-        } }, inputs: { SectionKey: "SectionKey", SectionName: "SectionName", Icon: "Icon", Form: "Form", FormContext: "FormContext", Variant: "Variant", BadgeCount: "BadgeCount", DefaultExpanded: "DefaultExpanded", InheritedFromEntity: "InheritedFromEntity", InheritedRecordPrimaryKey: "InheritedRecordPrimaryKey", Hidden: "Hidden", _deprecatedSectionKey: [0, "sectionKey", "_deprecatedSectionKey"], _deprecatedSectionName: [0, "sectionName", "_deprecatedSectionName"], _deprecatedIcon: [0, "icon", "_deprecatedIcon"], _deprecatedForm: [0, "form", "_deprecatedForm"], _deprecatedFormContext: [0, "formContext", "_deprecatedFormContext"] }, outputs: { DragStarted: "DragStarted", DragEnded: "DragEnded", PanelDrop: "PanelDrop", Navigate: "Navigate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1, decls: 14, vars: 20, consts: [["panelContent", ""], [1, "mj-forms-panel"], [1, "mj-forms-panel-header", 3, "click"], ["title", "Drag to reorder sections", "draggable", "true", 1, "mj-forms-drag-handle"], [1, "mj-forms-panel-title-group"], [1, "mj-forms-panel-icon"], [1, "mj-forms-panel-title"], [3, "innerHTML"], [1, "mj-forms-row-count-badge", 3, "mj-forms-row-count-badge--zero"], [1, "mj-forms-inherited-badge", 3, "title"], [1, "mj-forms-panel-chevron"], [1, "mj-forms-panel-body"], [1, "mj-forms-panel-content"], ["title", "Drag to reorder sections", "draggable", "true", 1, "mj-forms-drag-handle", 3, "dragstart", "dragend", "click"], [1, "fa-solid", "fa-grip-vertical"], [1, "mj-forms-row-count-badge"], [1, "mj-forms-inherited-badge", 3, "click", "title"], [1, "fa-solid", "fa-arrow-up"]], template: function MjCollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
+        } }, inputs: { SectionKey: "SectionKey", Indicators: "Indicators", ValidationSources: "ValidationSources", SectionName: "SectionName", Icon: "Icon", Form: "Form", FormContext: "FormContext", Variant: "Variant", BadgeCount: "BadgeCount", DefaultExpanded: "DefaultExpanded", InheritedFromEntity: "InheritedFromEntity", InheritedRecordPrimaryKey: "InheritedRecordPrimaryKey", Hidden: "Hidden", _deprecatedSectionKey: [0, "sectionKey", "_deprecatedSectionKey"], _deprecatedSectionName: [0, "sectionName", "_deprecatedSectionName"], _deprecatedIcon: [0, "icon", "_deprecatedIcon"], _deprecatedForm: [0, "form", "_deprecatedForm"], _deprecatedFormContext: [0, "formContext", "_deprecatedFormContext"] }, outputs: { DragStarted: "DragStarted", DragEnded: "DragEnded", PanelDrop: "PanelDrop", Navigate: "Navigate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1, decls: 17, vars: 22, consts: [["panelContent", ""], [1, "mj-forms-panel"], [1, "mj-forms-panel-header", 3, "click"], ["title", "Drag to reorder sections", "draggable", "true", 1, "mj-forms-drag-handle"], [1, "mj-forms-panel-title-group"], [1, "mj-forms-panel-icon"], [1, "mj-forms-panel-title"], [3, "innerHTML"], ["role", "img", 1, "mj-forms-panel-dirty", 3, "title"], ["role", "img", 1, "mj-forms-panel-error-badge", 3, "title"], ["role", "img", 1, "mj-forms-panel-warning-badge", 3, "title"], [1, "mj-forms-row-count-badge", 3, "mj-forms-row-count-badge--zero"], [1, "mj-forms-inherited-badge", 3, "title"], [1, "mj-forms-panel-chevron"], [1, "mj-forms-panel-body"], [1, "mj-forms-panel-content"], ["title", "Drag to reorder sections", "draggable", "true", 1, "mj-forms-drag-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"], [1, "mj-forms-row-count-badge"], [1, "mj-forms-inherited-badge", 3, "click", "title"], [1, "fa-solid", "fa-arrow-up"]], template: function MjCollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
-            i0.ɵɵlistener("click", function MjCollapsiblePanelComponent_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Toggle()); });
+            i0.ɵɵlistener("click", function MjCollapsiblePanelComponent_Template_div_click_1_listener() { return ctx.Toggle(); });
             i0.ɵɵconditionalCreate(2, MjCollapsiblePanelComponent_Conditional_2_Template, 2, 0, "div", 3);
             i0.ɵɵelementStart(3, "div", 4);
             i0.ɵɵelement(4, "i", 5);
             i0.ɵɵelementStart(5, "h3", 6);
             i0.ɵɵelement(6, "span", 7);
-            i0.ɵɵconditionalCreate(7, MjCollapsiblePanelComponent_Conditional_7_Template, 2, 3, "span", 8);
+            i0.ɵɵconditionalCreate(7, MjCollapsiblePanelComponent_Conditional_7_Template, 1, 2, "span", 8);
+            i0.ɵɵconditionalCreate(8, MjCollapsiblePanelComponent_Conditional_8_Template, 3, 3, "span", 9)(9, MjCollapsiblePanelComponent_Conditional_9_Template, 3, 3, "span", 10);
+            i0.ɵɵconditionalCreate(10, MjCollapsiblePanelComponent_Conditional_10_Template, 2, 3, "span", 11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(8, MjCollapsiblePanelComponent_Conditional_8_Template, 3, 2, "a", 9);
-            i0.ɵɵconditionalCreate(9, MjCollapsiblePanelComponent_Conditional_9_Template, 2, 2, "div", 10);
+            i0.ɵɵconditionalCreate(11, MjCollapsiblePanelComponent_Conditional_11_Template, 3, 2, "a", 12);
+            i0.ɵɵconditionalCreate(12, MjCollapsiblePanelComponent_Conditional_12_Template, 2, 2, "div", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "div", 11)(11, "div", 12, 0);
-            i0.ɵɵprojection(13);
+            i0.ɵɵelementStart(13, "div", 14)(14, "div", 15, 0);
+            i0.ɵɵprojection(16);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("mj-forms-panel--related", ctx.Variant === "related-entity")("mj-forms-panel--inherited", ctx.Variant === "inherited");
@@ -560,22 +787,30 @@ export class MjCollapsiblePanelComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHTML", ctx.DisplayName, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.BadgeCount !== undefined ? 7 : -1);
+            i0.ɵɵconditional(ctx.SectionDirtyCount > 0 ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SectionErrorCount > 0 ? 8 : ctx.SectionWarningCount > 0 ? 9 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.BadgeCount !== undefined ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Variant === "inherited" && ctx.InheritedFromEntity ? 8 : -1);
+            i0.ɵɵconditional(ctx.Variant === "inherited" && ctx.InheritedFromEntity ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Collapsible ? 9 : -1);
+            i0.ɵɵconditional(ctx.Collapsible ? 12 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("mj-forms-panel-body--collapsed", !ctx.Expanded);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("height", ctx.PanelContentHeight, "px");
-        } }, styles: ["mj-collapsible-panel {\n  display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n  display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n   PANEL CARD\n   ============================================ */\n.mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-forms-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n  background: var(--mj-bg-surface-hover);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Static header \u2014 sections locked open (Config.collapsibleSections === false) */\n.mj-forms-panel-header--static {\n  cursor: default;\n}\n\n.mj-forms-panel-header--static:hover {\n  background: var(--mj-bg-surface-elevated);\n  border-bottom-color: var(--mj-border-default);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0;\n  height: 24px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n  cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.mj-forms-panel-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  width: 24px;\n  text-align: center;\n}\n\n.mj-forms-panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: transform 0.3s ease;\n  padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n  background: var(--mj-text-muted);\n}\n\n/* ============================================\n   INHERITED VARIANT (IS-A parent fields)\n   ============================================ */\n.mj-forms-panel--inherited {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n  font-size: 10px;\n}\n\n/* ============================================\n   RELATED ENTITY VARIANT\n   ============================================ */\n.mj-forms-panel--related {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Related entity content hugs the grid (toolbar + header + rows).\n   A fixed 400px box left a hollow slab when AG Grid's viewport was 0,\n   and a persisted 0/toolbar height clipped the rows after expand. */\n.mj-forms-panel--related .mj-forms-panel-content {\n  height: auto;\n  padding: 0;\n  overflow: hidden;\n  resize: vertical;\n  min-height: 0;\n  max-height: 800px;\n}\n\n/* AG Grid must fill the 400px / leftover box. Do not stretch every\n   descendant \u2014 custom widgets (relationship list) put their section\n   header as the first child, and height:100% on it parks the title\n   mid-column and hides the list below the fold. */\n.mj-forms-panel--related .mj-forms-panel-content > mj-explorer-entity-data-grid,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > mj-explorer-entity-data-grid {\n  height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n  overflow: visible;\n}\n\n/* ============================================\n   BODY (collapsible)\n   ============================================ */\n.mj-forms-panel-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n  max-height: 0 !important;\n  padding: 0 !important;\n  opacity: 0 !important;\n  overflow: hidden !important;\n  pointer-events: none;\n}\n\n.mj-forms-panel-body--collapsed .mj-forms-panel-content {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  max-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.mj-forms-panel-content {\n  padding: 20px;\n  overflow: auto;\n  max-height: 600px;\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n  /* Muted, theme-aware highlight (semantic token) \u2014 consistent with the field\n     label + FK dropdown highlights. Replaces the old bright-yellow primitive. */\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n"], encapsulation: 2, changeDetection: 0 });
+        } }, styles: ["mj-collapsible-panel {\n  display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n  display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n   PANEL CARD\n   ============================================ */\n.mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-forms-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n  background: var(--mj-bg-surface-hover);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Static header \u2014 sections locked open (Config.collapsibleSections === false) */\n.mj-forms-panel-header--static {\n  cursor: default;\n}\n\n.mj-forms-panel-header--static:hover {\n  background: var(--mj-bg-surface-elevated);\n  border-bottom-color: var(--mj-border-default);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0;\n  height: 24px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n  cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.mj-forms-panel-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  width: 24px;\n  text-align: center;\n}\n\n.mj-forms-panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: transform 0.3s ease;\n  padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n  background: var(--mj-text-muted);\n}\n\n/* ============================================\n   SECTION INDICATORS\n   Unsaved-changes dot + invalid-field count, derived from the section's own\n   fields so a collapsed accordion header (or the left-nav rail, which reads\n   the same counts) says WHERE the edited / failing field is.\n   ============================================ */\n\n/* Same 6px amber dot an edited field shows after its label. */\n.mj-forms-panel-dirty {\n  display: inline-block;\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  margin-left: var(--mj-space-2);\n  vertical-align: middle;\n}\n\n.mj-forms-panel-error-badge,\n.mj-forms-panel-warning-badge {\n  padding: var(--mj-space-0-5) var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  margin-left: var(--mj-space-2);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  justify-content: center;\n  min-width: var(--mj-space-6);\n  line-height: 1;\n  vertical-align: middle;\n}\n\n/* Same colour as the failing field's underline. */\n.mj-forms-panel-error-badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.mj-forms-panel-warning-badge {\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-panel-error-badge i,\n.mj-forms-panel-warning-badge i {\n  font-size: var(--mj-text-xs);\n}\n\n/* Card edge + header tint while the section holds an invalid field \u2014 the same\n   left-edge treatment the related / inherited variants use. Not applied to the\n   selected left-nav section (`.mj-chrome-show`): there the rail is the header\n   and the card chrome is stripped. */\nmj-collapsible-panel.mj-panel-has-errors:not(.mj-chrome-show) > .mj-forms-panel {\n  border-left: 3px solid var(--mj-status-error);\n}\n\nmj-collapsible-panel.mj-panel-has-errors:not(.mj-chrome-show) > .mj-forms-panel > .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface-elevated));\n}\n\nmj-collapsible-panel.mj-panel-has-warnings:not(.mj-chrome-show) > .mj-forms-panel {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ============================================\n   INHERITED VARIANT (IS-A parent fields)\n   ============================================ */\n.mj-forms-panel--inherited {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n  font-size: 10px;\n}\n\n/* ============================================\n   RELATED ENTITY VARIANT\n   ============================================ */\n.mj-forms-panel--related {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Related entity content hugs the grid (toolbar + header + rows).\n   A fixed 400px box left a hollow slab when AG Grid's viewport was 0,\n   and a persisted 0/toolbar height clipped the rows after expand. */\n.mj-forms-panel--related .mj-forms-panel-content {\n  height: auto;\n  padding: 0;\n  overflow: hidden;\n  resize: vertical;\n  min-height: 0;\n  max-height: 800px;\n}\n\n/* AG Grid must fill the 400px / leftover box. Do not stretch every\n   descendant \u2014 custom widgets (relationship list) put their section\n   header as the first child, and height:100% on it parks the title\n   mid-column and hides the list below the fold. */\n.mj-forms-panel--related .mj-forms-panel-content > mj-explorer-entity-data-grid,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > mj-explorer-entity-data-grid {\n  height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n  overflow: visible;\n}\n\n/* ============================================\n   BODY (collapsible)\n   ============================================ */\n.mj-forms-panel-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n  max-height: 0 !important;\n  padding: 0 !important;\n  opacity: 0 !important;\n  overflow: hidden !important;\n  pointer-events: none;\n}\n\n.mj-forms-panel-body--collapsed .mj-forms-panel-content {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  max-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.mj-forms-panel-content {\n  padding: 20px;\n  overflow: auto;\n  max-height: 600px;\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n  /* Muted, theme-aware highlight (semantic token) \u2014 consistent with the field\n     label + FK dropdown highlights. Replaces the old bright-yellow primitive. */\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n"], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjCollapsiblePanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-collapsible-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mj-forms-panel\"\n     [class.mj-forms-panel--related]=\"Variant === 'related-entity'\"\n     [class.mj-forms-panel--inherited]=\"Variant === 'inherited'\"\n     [attr.data-section-key]=\"SectionKey\">\n\n  <!-- Panel Header -->\n  <div class=\"mj-forms-panel-header\"\n       [class.mj-forms-panel-header--static]=\"!Collapsible\"\n       [attr.role]=\"Collapsible ? 'button' : null\"\n       [attr.tabindex]=\"Collapsible ? 0 : null\"\n       (click)=\"Toggle()\">\n    <!-- Drag Handle (hidden when reorder disabled) -->\n    @if (ReorderAllowed) {\n      <div class=\"mj-forms-drag-handle\"\n           title=\"Drag to reorder sections\"\n           draggable=\"true\"\n           (dragstart)=\"OnDragStart($event)\"\n           (dragend)=\"OnDragEnd()\"\n           (click)=\"$event.stopPropagation()\">\n        <i class=\"fa-solid fa-grip-vertical\"></i>\n      </div>\n    }\n\n    <!-- Icon + Title -->\n    <div class=\"mj-forms-panel-title-group\">\n      <i [class]=\"Icon\" class=\"mj-forms-panel-icon\"></i>\n      <h3 class=\"mj-forms-panel-title\">\n        <span [innerHTML]=\"DisplayName\"></span>\n        <!-- Row count badge for related entities -->\n        @if (BadgeCount !== undefined) {\n          <span class=\"mj-forms-row-count-badge\" [class.mj-forms-row-count-badge--zero]=\"BadgeCount === 0\">\n            {{ BadgeCount }}\n          </span>\n        }\n      </h3>\n    </div>\n\n    <!-- Inherited From badge (IS-A) -->\n    @if (Variant === 'inherited' && InheritedFromEntity) {\n      <a class=\"mj-forms-inherited-badge\" (click)=\"OnInheritedBadgeClick($event)\"\n         [title]=\"'View parent record: ' + InheritedFromEntity\">\n        <i class=\"fa-solid fa-arrow-up\"></i>\n        Inherited from {{ InheritedFromEntity }}\n      </a>\n    }\n\n    <!-- Chevron (hidden when sections are locked open) -->\n    @if (Collapsible) {\n      <div class=\"mj-forms-panel-chevron\">\n        <i [class]=\"Expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n      </div>\n    }\n  </div>\n\n  <!-- Panel Body -->\n  <div class=\"mj-forms-panel-body\" [class.mj-forms-panel-body--collapsed]=\"!Expanded\">\n    <div class=\"mj-forms-panel-content\"\n         #panelContent\n         [style.height.px]=\"PanelContentHeight\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["mj-collapsible-panel {\n  display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n  display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n   PANEL CARD\n   ============================================ */\n.mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-forms-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n  background: var(--mj-bg-surface-hover);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Static header \u2014 sections locked open (Config.collapsibleSections === false) */\n.mj-forms-panel-header--static {\n  cursor: default;\n}\n\n.mj-forms-panel-header--static:hover {\n  background: var(--mj-bg-surface-elevated);\n  border-bottom-color: var(--mj-border-default);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0;\n  height: 24px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n  cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.mj-forms-panel-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  width: 24px;\n  text-align: center;\n}\n\n.mj-forms-panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: transform 0.3s ease;\n  padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n  background: var(--mj-text-muted);\n}\n\n/* ============================================\n   INHERITED VARIANT (IS-A parent fields)\n   ============================================ */\n.mj-forms-panel--inherited {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n  font-size: 10px;\n}\n\n/* ============================================\n   RELATED ENTITY VARIANT\n   ============================================ */\n.mj-forms-panel--related {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Related entity content hugs the grid (toolbar + header + rows).\n   A fixed 400px box left a hollow slab when AG Grid's viewport was 0,\n   and a persisted 0/toolbar height clipped the rows after expand. */\n.mj-forms-panel--related .mj-forms-panel-content {\n  height: auto;\n  padding: 0;\n  overflow: hidden;\n  resize: vertical;\n  min-height: 0;\n  max-height: 800px;\n}\n\n/* AG Grid must fill the 400px / leftover box. Do not stretch every\n   descendant \u2014 custom widgets (relationship list) put their section\n   header as the first child, and height:100% on it parks the title\n   mid-column and hides the list below the fold. */\n.mj-forms-panel--related .mj-forms-panel-content > mj-explorer-entity-data-grid,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > mj-explorer-entity-data-grid {\n  height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n  overflow: visible;\n}\n\n/* ============================================\n   BODY (collapsible)\n   ============================================ */\n.mj-forms-panel-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n  max-height: 0 !important;\n  padding: 0 !important;\n  opacity: 0 !important;\n  overflow: hidden !important;\n  pointer-events: none;\n}\n\n.mj-forms-panel-body--collapsed .mj-forms-panel-content {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  max-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.mj-forms-panel-content {\n  padding: 20px;\n  overflow: auto;\n  max-height: 600px;\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n  /* Muted, theme-aware highlight (semantic token) \u2014 consistent with the field\n     label + FK dropdown highlights. Replaces the old bright-yellow primitive. */\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-collapsible-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mj-forms-panel\"\n     [class.mj-forms-panel--related]=\"Variant === 'related-entity'\"\n     [class.mj-forms-panel--inherited]=\"Variant === 'inherited'\"\n     [attr.data-section-key]=\"SectionKey\">\n\n  <!-- Panel Header -->\n  <div class=\"mj-forms-panel-header\"\n       [class.mj-forms-panel-header--static]=\"!Collapsible\"\n       [attr.role]=\"Collapsible ? 'button' : null\"\n       [attr.tabindex]=\"Collapsible ? 0 : null\"\n       (click)=\"Toggle()\">\n    <!-- Drag Handle (hidden when reorder disabled) -->\n    @if (ReorderAllowed) {\n      <div class=\"mj-forms-drag-handle\"\n           title=\"Drag to reorder sections\"\n           draggable=\"true\"\n           (dragstart)=\"OnDragStart($event)\"\n           (dragend)=\"OnDragEnd()\"\n           (click)=\"$event.stopPropagation()\">\n        <i class=\"fa-solid fa-grip-vertical\"></i>\n      </div>\n    }\n\n    <!-- Icon + Title -->\n    <div class=\"mj-forms-panel-title-group\">\n      <i [class]=\"Icon\" class=\"mj-forms-panel-icon\"></i>\n      <h3 class=\"mj-forms-panel-title\">\n        <span [innerHTML]=\"DisplayName\"></span>\n        <!-- Section indicators: unsaved-changes dot (same idiom as an edited field's\n             label dot) and invalid-field count (same colour as the field's red underline).\n             Derived from the projected fields \u2014 see SectionIndicators. -->\n        @if (SectionDirtyCount > 0) {\n          <span class=\"mj-forms-panel-dirty\"\n                role=\"img\"\n                [title]=\"SectionDirtyTitle\"\n                [attr.aria-label]=\"SectionDirtyTitle\"></span>\n        }\n        @if (SectionErrorCount > 0) {\n          <span class=\"mj-forms-panel-error-badge\"\n                role=\"img\"\n                [title]=\"SectionErrorTitle\"\n                [attr.aria-label]=\"SectionErrorTitle\">\n            <i class=\"fa-solid fa-circle-exclamation\" aria-hidden=\"true\"></i>{{ SectionErrorCount }}\n          </span>\n        } @else if (SectionWarningCount > 0) {\n          <span class=\"mj-forms-panel-warning-badge\"\n                role=\"img\"\n                [title]=\"SectionWarningTitle\"\n                [attr.aria-label]=\"SectionWarningTitle\">\n            <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>{{ SectionWarningCount }}\n          </span>\n        }\n        <!-- Row count badge for related entities -->\n        @if (BadgeCount !== undefined) {\n          <span class=\"mj-forms-row-count-badge\" [class.mj-forms-row-count-badge--zero]=\"BadgeCount === 0\">\n            {{ BadgeCount }}\n          </span>\n        }\n      </h3>\n    </div>\n\n    <!-- Inherited From badge (IS-A) -->\n    @if (Variant === 'inherited' && InheritedFromEntity) {\n      <a class=\"mj-forms-inherited-badge\" (click)=\"OnInheritedBadgeClick($event)\"\n         [title]=\"'View parent record: ' + InheritedFromEntity\">\n        <i class=\"fa-solid fa-arrow-up\"></i>\n        Inherited from {{ InheritedFromEntity }}\n      </a>\n    }\n\n    <!-- Chevron (hidden when sections are locked open) -->\n    @if (Collapsible) {\n      <div class=\"mj-forms-panel-chevron\">\n        <i [class]=\"Expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'\"></i>\n      </div>\n    }\n  </div>\n\n  <!-- Panel Body -->\n  <div class=\"mj-forms-panel-body\" [class.mj-forms-panel-body--collapsed]=\"!Expanded\">\n    <div class=\"mj-forms-panel-content\"\n         #panelContent\n         [style.height.px]=\"PanelContentHeight\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["mj-collapsible-panel {\n  display: block;\n}\n\nmj-collapsible-panel.mj-search-hidden {\n  display: none;\n}\n\nmj-collapsible-panel.mj-drag-over {\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-md);\n}\n\n/* ============================================\n   PANEL CARD\n   ============================================ */\n.mj-forms-panel {\n  background: var(--mj-bg-surface-card);\n  border-radius: var(--mj-radius-md);\n  box-shadow: var(--mj-shadow-sm);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-forms-panel-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.mj-forms-panel-header:hover {\n  background: var(--mj-bg-surface-hover);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n/* Static header \u2014 sections locked open (Config.collapsibleSections === false) */\n.mj-forms-panel-header--static {\n  cursor: default;\n}\n\n.mj-forms-panel-header--static:hover {\n  background: var(--mj-bg-surface-elevated);\n  border-bottom-color: var(--mj-border-default);\n}\n\n/* Drag handle */\n.mj-forms-drag-handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0;\n  height: 24px;\n  color: var(--mj-text-muted);\n  cursor: grab;\n  opacity: 0;\n  overflow: hidden;\n  transition: width var(--mj-transition-base) ease, opacity var(--mj-transition-base) ease;\n  flex-shrink: 0;\n}\n\n.mj-forms-panel-header:hover .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n}\n\n.mj-forms-drag-handle:hover {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-drag-handle:active {\n  cursor: grabbing;\n}\n\nmj-collapsible-panel.mj-dragging .mj-forms-drag-handle {\n  width: 24px;\n  opacity: 1;\n  color: var(--mj-brand-primary);\n}\n\n/* Title group */\n.mj-forms-panel-title-group {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.mj-forms-panel-icon {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\n  width: 24px;\n  text-align: center;\n}\n\n.mj-forms-panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.mj-forms-panel-chevron {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: transform 0.3s ease;\n  padding: 4px;\n}\n\n/* Row count badge */\n.mj-forms-row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 24px;\n  line-height: 1;\n}\n\n.mj-forms-row-count-badge--zero {\n  background: var(--mj-text-muted);\n}\n\n/* ============================================\n   SECTION INDICATORS\n   Unsaved-changes dot + invalid-field count, derived from the section's own\n   fields so a collapsed accordion header (or the left-nav rail, which reads\n   the same counts) says WHERE the edited / failing field is.\n   ============================================ */\n\n/* Same 6px amber dot an edited field shows after its label. */\n.mj-forms-panel-dirty {\n  display: inline-block;\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  margin-left: var(--mj-space-2);\n  vertical-align: middle;\n}\n\n.mj-forms-panel-error-badge,\n.mj-forms-panel-warning-badge {\n  padding: var(--mj-space-0-5) var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  margin-left: var(--mj-space-2);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  justify-content: center;\n  min-width: var(--mj-space-6);\n  line-height: 1;\n  vertical-align: middle;\n}\n\n/* Same colour as the failing field's underline. */\n.mj-forms-panel-error-badge {\n  background: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.mj-forms-panel-warning-badge {\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-panel-error-badge i,\n.mj-forms-panel-warning-badge i {\n  font-size: var(--mj-text-xs);\n}\n\n/* Card edge + header tint while the section holds an invalid field \u2014 the same\n   left-edge treatment the related / inherited variants use. Not applied to the\n   selected left-nav section (`.mj-chrome-show`): there the rail is the header\n   and the card chrome is stripped. */\nmj-collapsible-panel.mj-panel-has-errors:not(.mj-chrome-show) > .mj-forms-panel {\n  border-left: 3px solid var(--mj-status-error);\n}\n\nmj-collapsible-panel.mj-panel-has-errors:not(.mj-chrome-show) > .mj-forms-panel > .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface-elevated));\n}\n\nmj-collapsible-panel.mj-panel-has-warnings:not(.mj-chrome-show) > .mj-forms-panel {\n  border-left: 3px solid var(--mj-status-warning);\n}\n\n/* ============================================\n   INHERITED VARIANT (IS-A parent fields)\n   ============================================ */\n.mj-forms-panel--inherited {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--inherited .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n.mj-forms-inherited-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  cursor: pointer;\n  transition: all var(--mj-transition-base) ease;\n  text-decoration: none;\n}\n\n.mj-forms-inherited-badge:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.mj-forms-inherited-badge i {\n  font-size: 10px;\n}\n\n/* ============================================\n   RELATED ENTITY VARIANT\n   ============================================ */\n.mj-forms-panel--related {\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-header {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface-elevated));\n}\n\n.mj-forms-panel--related .mj-forms-panel-header:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface-elevated));\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.mj-forms-panel--related .mj-forms-panel-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Related entity content hugs the grid (toolbar + header + rows).\n   A fixed 400px box left a hollow slab when AG Grid's viewport was 0,\n   and a persisted 0/toolbar height clipped the rows after expand. */\n.mj-forms-panel--related .mj-forms-panel-content {\n  height: auto;\n  padding: 0;\n  overflow: hidden;\n  resize: vertical;\n  min-height: 0;\n  max-height: 800px;\n}\n\n/* AG Grid must fill the 400px / leftover box. Do not stretch every\n   descendant \u2014 custom widgets (relationship list) put their section\n   header as the first child, and height:100% on it parks the title\n   mid-column and hides the list below the fold. */\n.mj-forms-panel--related .mj-forms-panel-content > mj-explorer-entity-data-grid,\n.mj-forms-panel--related .mj-forms-panel-content > .ng-star-inserted > mj-explorer-entity-data-grid {\n  height: 100%;\n}\n\n/* Related entity panels need the body to not clip the resize handle */\n.mj-forms-panel--related .mj-forms-panel-body {\n  overflow: visible;\n}\n\n/* ============================================\n   BODY (collapsible)\n   ============================================ */\n.mj-forms-panel-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.mj-forms-panel-body--collapsed {\n  max-height: 0 !important;\n  padding: 0 !important;\n  opacity: 0 !important;\n  overflow: hidden !important;\n  pointer-events: none;\n}\n\n.mj-forms-panel-body--collapsed .mj-forms-panel-content {\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  max-height: 0 !important;\n  overflow: hidden !important;\n}\n\n.mj-forms-panel-content {\n  padding: 20px;\n  overflow: auto;\n  max-height: 600px;\n}\n\n/* ============================================\n   SEARCH HIGHLIGHTING\n   ============================================ */\n.mj-forms-panel-title ::ng-deep .mj-forms-search-highlight {\n  /* Muted, theme-aware highlight (semantic token) \u2014 consistent with the field\n     label + FK dropdown highlights. Replaces the old bright-yellow primitive. */\n  background-color: var(--mj-search-highlight-bg);\n  color: var(--mj-search-highlight-text);\n  border-radius: 2px;\n  padding: 0 1px;\n  font-weight: 600;\n}\n"] }]
     }], null, { SectionKey: [{
             type: Input
+        }], Indicators: [{
+            type: Input
+        }], ValidationSources: [{
+            type: Input
         }], SectionName: [{
             type: Input
         }], Icon: [{
@@ -631,6 +866,12 @@ export class MjCollapsiblePanelComponent {
         }], HostIcon: [{
             type: HostBinding,
             args: ['attr.data-icon']
+        }], HostDirtyCount: [{
+            type: HostBinding,
+            args: ['attr.data-dirty-count']
+        }], HostErrorCount: [{
+            type: HostBinding,
+            args: ['attr.data-error-count']
         }], HostClass: [{
             type: HostBinding,
             args: ['class']
@@ -650,5 +891,5 @@ export class MjCollapsiblePanelComponent {
             type: HostListener,
             args: ['drop', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjCollapsiblePanelComponent, { className: "MjCollapsiblePanelComponent", filePath: "src/lib/panel/collapsible-panel.component.ts", lineNumber: 56 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjCollapsiblePanelComponent, { className: "MjCollapsiblePanelComponent", filePath: "src/lib/panel/collapsible-panel.component.ts", lineNumber: 73 }); })();
 //# sourceMappingURL=collapsible-panel.component.js.map