@memberjunction/ng-base-forms 5.23.0 → 5.25.0

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

@@ -1,28 +1,33 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, NgZone, ContentChildren, ViewEncapsulation } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject, NgZone, ContentChildren, ViewChild, ViewEncapsulation } from '@angular/core';
+import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DEFAULT_TOOLBAR_CONFIG } from '../types/toolbar-config';
 import { MjCollapsiblePanelComponent } from '../panel/collapsible-panel.component';
 import { BeforeHistoryViewEventArgs, BeforeListManagementEventArgs } from '../types/form-events';
+import { RecordChangesComponent } from '@memberjunction/ng-record-changes';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-record-changes";
 import * as i2 from "@memberjunction/ng-list-management";
-import * as i3 from "../toolbar/form-toolbar.component";
-import * as i4 from "../section-manager/section-manager.component";
-import * as i5 from "../isa-related-panel/isa-related-panel.component";
+import * as i3 from "@memberjunction/ng-record-tags";
+import * as i4 from "../toolbar/form-toolbar.component";
+import * as i5 from "../section-manager/section-manager.component";
+import * as i6 from "../isa-related-panel/isa-related-panel.component";
 const _c0 = [[["", "before-toolbar", ""]], "*"];
 const _c1 = ["[before-toolbar]", "*"];
 const _c2 = a0 => [a0];
 const _c3 = (a0, a1, a2) => ({ mode: "manage", entityId: a0, entityName: a1, recordIds: a2, allowCreate: true });
 function MjRecordFormContainerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 10);
-    i0.ɵɵelement(2, "i", 11);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 11);
+    i0.ɵɵelement(2, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h3", 12);
+    i0.ɵɵelementStart(3, "h3", 13);
     i0.ɵɵtext(4, "No sections found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 13);
+    i0.ɵɵelementStart(5, "p", 14);
     i0.ɵɵtext(6, " No sections match \"");
     i0.ɵɵelementStart(7, "strong");
     i0.ɵɵtext(8);
@@ -30,7 +35,7 @@ function MjRecordFormContainerComponent_Conditional_7_Template(rf, ctx) { if (rf
     i0.ɵɵtext(9, "\". ");
     i0.ɵɵelement(10, "br");
     i0.ɵɵtext(11, "Try a different search term or ");
-    i0.ɵɵelementStart(12, "a", 14);
+    i0.ɵɵelementStart(12, "a", 15);
     i0.ɵɵlistener("click", function MjRecordFormContainerComponent_Conditional_7_Template_a_click_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.OnFilterChange(""); return i0.ɵɵresetView($event.preventDefault()); });
     i0.ɵɵtext(13, "clear the search");
     i0.ɵɵelementEnd();
@@ -43,17 +48,26 @@ function MjRecordFormContainerComponent_Conditional_7_Template(rf, ctx) { if (rf
 } }
 function MjRecordFormContainerComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-record-changes", 15);
-    i0.ɵɵlistener("dialogClosed", function MjRecordFormContainerComponent_Conditional_9_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRecordChangesClosed()); });
+    i0.ɵɵelementStart(0, "mj-record-changes", 16);
+    i0.ɵɵlistener("RestoreRequested", function MjRecordFormContainerComponent_Conditional_9_Template_mj_record_changes_RestoreRequested_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRestoreRequested($event)); })("dialogClosed", function MjRecordFormContainerComponent_Conditional_9_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r3); 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);
+    i0.ɵɵproperty("record", ctx_r1.EffectiveRecord)("AllowRestore", ctx_r1.EffectiveUserCanEdit);
 } }
 function MjRecordFormContainerComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-management-dialog", 16);
-    i0.ɵɵlistener("complete", function MjRecordFormContainerComponent_Conditional_10_Template_mj_list_management_dialog_complete_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); })("cancel", function MjRecordFormContainerComponent_Conditional_10_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); });
+    i0.ɵɵelementStart(0, "mj-record-tags", 17);
+    i0.ɵɵlistener("PanelClosed", function MjRecordFormContainerComponent_Conditional_10_Template_mj_record_tags_PanelClosed_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsPanelClosed()); })("TagCountChanged", function MjRecordFormContainerComponent_Conditional_10_Template_mj_record_tags_TagCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagCountChanged($event)); })("RecordNavigate", function MjRecordFormContainerComponent_Conditional_10_Template_mj_record_tags_RecordNavigate_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTagsRecordNavigate($event)); })("WidthChanged", function MjRecordFormContainerComponent_Conditional_10_Template_mj_record_tags_WidthChanged_0_listener($event) { i0.ɵɵrestoreView(_r4); 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_11_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-list-management-dialog", 18);
+    i0.ɵɵlistener("complete", function MjRecordFormContainerComponent_Conditional_11_Template_mj_list_management_dialog_complete_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); })("cancel", function MjRecordFormContainerComponent_Conditional_11_Template_mj_list_management_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -92,11 +106,23 @@ function MjRecordFormContainerComponent_Conditional_10_Template(rf, ctx) { if (r
 export class MjRecordFormContainerComponent {
     cdr = inject(ChangeDetectorRef);
     ngZone = inject(NgZone);
+    notificationService = inject(MJNotificationService);
     destroy$ = new Subject();
     panelNavReset$ = new Subject();
     // ---- Internal State ----
+    /** Reference to the record changes drawer (when visible) for triggering refresh after save */
+    recordChangesDrawer;
     /** Controls visibility of record changes drawer */
     ShowRecordChanges = false;
+    /** Controls visibility of tags panel */
+    ShowTagsPanel = false;
+    /** Persisted tags panel width */
+    TagsPanelWidth = 0;
+    static TAGS_WIDTH_KEY = 'MJ_TagsPanel_Width';
+    /** Number of tags on this record */
+    TagCount = 0;
+    /** Number of tracked record change versions for this record */
+    VersionCount = 0;
     /** Controls visibility of list management dialog */
     ShowListManagement = false;
     /** Controls visibility of section manager drawer */
@@ -282,6 +308,10 @@ export class MjRecordFormContainerComponent {
     }
     // ---- Lifecycle ----
     ngAfterContentInit() {
+        // Load saved tags panel width
+        const savedWidth = UserInfoEngine.Instance.GetSetting(MjRecordFormContainerComponent.TAGS_WIDTH_KEY);
+        if (savedWidth)
+            this.TagsPanelWidth = parseInt(savedWidth, 10) || 0;
         // Subscribe to panel Navigate events and relay them
         this.SubscribeToPanelNavigateEvents();
         // Watch for panel changes to update counts and re-subscribe
@@ -291,6 +321,7 @@ export class MjRecordFormContainerComponent {
         });
         // Watch for changes to record dirty state
         this.watchRecordChanges();
+        // Badge counts are loaded when the form emits RecordReady (see SubscribeToPanelNavigateEvents)
     }
     ngOnDestroy() {
         this.panelNavReset$.next();
@@ -304,6 +335,12 @@ export class MjRecordFormContainerComponent {
      */
     SubscribeToPanelNavigateEvents() {
         this.panelNavReset$.next(); // tear down previous subscriptions
+        // Subscribe to RecordReady on the form component — fires once after record is fully initialized
+        if (this.fc) {
+            this.fc.RecordReady.pipe(takeUntil(this.panelNavReset$)).subscribe(() => {
+                this.LoadBadgeCounts();
+            });
+        }
         this.Panels.forEach(panel => {
             panel.Navigate.pipe(takeUntil(this.panelNavReset$)).subscribe((event) => {
                 this.Navigate.emit(event);
@@ -324,6 +361,70 @@ export class MjRecordFormContainerComponent {
         // Cleanup on destroy
         this.destroy$.subscribe(() => clearInterval(checkInterval));
     }
+    // ---- Badge Count Loading ----
+    /**
+     * Loads tag count and record change version count for toolbar badges.
+     * Both queries run in parallel for performance.
+     */
+    badgeCountsLoaded = false;
+    LoadBadgeCounts() {
+        if (this.badgeCountsLoaded)
+            return;
+        const record = this.EffectiveRecord;
+        if (!record?.EntityInfo)
+            return;
+        this.badgeCountsLoaded = true;
+        // Fire both queries in parallel — no await needed, they update state async
+        this.LoadTagCount(record);
+        this.LoadVersionCount(record);
+    }
+    /**
+     * Queries the count of tagged items for the current entity + record
+     * and updates the TagCount badge on the toolbar.
+     */
+    async LoadTagCount(record) {
+        try {
+            const rv = new RunView();
+            // Don't narrow Fields — the server caches RunView results by entity+filter (ignoring Fields),
+            // so a narrow query here would poison the cache for the subsequent full-field load in the Tags panel.
+            const result = await rv.RunView({
+                EntityName: 'MJ: Tagged Items',
+                ExtraFilter: `EntityID='${record.EntityInfo.ID}' AND RecordID='${record.PrimaryKey.Values()}'`,
+                ResultType: 'simple'
+            });
+            if (result.Success) {
+                this.TagCount = result.Results.length;
+                this.cdr.detectChanges();
+            }
+        }
+        catch {
+            // Non-critical — badge just stays at 0
+        }
+    }
+    /**
+     * Queries the count of record change entries for the current entity + record
+     * and updates the VersionCount badge on the toolbar.
+     */
+    async LoadVersionCount(record) {
+        if (!record.EntityInfo.TrackRecordChanges)
+            return;
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Record Changes',
+                Fields: ['ID'],
+                ExtraFilter: `EntityID='${record.EntityInfo.ID}' AND RecordID='${record.PrimaryKey.ToConcatenatedString()}'`,
+                ResultType: 'simple'
+            });
+            if (result.Success) {
+                this.VersionCount = result.Results.length;
+                this.cdr.detectChanges();
+            }
+        }
+        catch {
+            // Non-critical — badge just stays at 0
+        }
+    }
     // ---- Toolbar Event Handlers ----
     /**
      * Navigation events are always re-emitted for the host app to handle.
@@ -358,6 +459,8 @@ export class MjRecordFormContainerComponent {
             this.cdr.markForCheck();
             try {
                 await this.fc.SaveRecord(true);
+                // After successful save, refresh version count badge and record changes drawer
+                this.RefreshAfterSave();
             }
             finally {
                 // Use microtask timing to avoid ExpressionChangedAfterItHasBeenCheckedError
@@ -372,6 +475,22 @@ export class MjRecordFormContainerComponent {
             this.SaveRequested.emit();
         }
     }
+    /**
+     * Refreshes the version count badge and record changes drawer after a save.
+     * The save operation creates a new RecordChange entry server-side, so we need
+     * to update the UI to reflect the new version.
+     */
+    RefreshAfterSave() {
+        const record = this.EffectiveRecord;
+        if (!record?.EntityInfo?.TrackRecordChanges)
+            return;
+        // Refresh version count badge
+        this.LoadVersionCount(record);
+        // If the record changes drawer is open, refresh it too
+        if (this.ShowRecordChanges && this.recordChangesDrawer) {
+            this.recordChangesDrawer.Refresh();
+        }
+    }
     /**
      * Cancel: delegate to FormComponent if available, otherwise re-emit.
      */
@@ -417,9 +536,80 @@ export class MjRecordFormContainerComponent {
         // Also emit for backward compatibility
         this.ListManagementRequested.emit();
     }
+    OnTagsPanelToggled() {
+        this.ShowTagsPanel = !this.ShowTagsPanel;
+        this.cdr.detectChanges();
+    }
+    OnTagsPanelClosed() {
+        this.ShowTagsPanel = false;
+        this.cdr.detectChanges();
+        // Refresh tag count — tags may have been added/removed while panel was open
+        const record = this.EffectiveRecord;
+        if (record?.EntityInfo) {
+            this.LoadTagCount(record);
+        }
+    }
+    /**
+     * Handles live tag count updates from the tags panel component.
+     */
+    OnTagCountChanged(count) {
+        this.TagCount = count;
+        this.cdr.markForCheck();
+    }
+    OnTagsPanelWidthChanged(width) {
+        this.TagsPanelWidth = width;
+        UserInfoEngine.Instance.SetSettingDebounced(MjRecordFormContainerComponent.TAGS_WIDTH_KEY, String(width));
+    }
+    OnTagsRecordNavigate(event) {
+        const md = new Metadata();
+        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 }];
+        }
+        this.Navigate.emit({ Kind: 'record', EntityName: event.EntityName, PrimaryKey: pkey });
+    }
     OnRecordChangesClosed() {
         this.ShowRecordChanges = false;
         this.cdr.markForCheck();
+        // Refresh version count — new changes may have occurred
+        const record = this.EffectiveRecord;
+        if (record?.EntityInfo) {
+            this.LoadVersionCount(record);
+        }
+    }
+    /**
+     * Handles a restore request from the record-changes panel.
+     * Applies the old field values to the current record, saves, then refreshes version count.
+     */
+    async OnRestoreRequested(event) {
+        const record = this.EffectiveRecord;
+        if (!record)
+            return;
+        try {
+            // Apply old values from the version to the current record
+            for (const [fieldName, values] of Object.entries(event.FieldChanges)) {
+                record.Set(fieldName, values.OldValue);
+            }
+            // Save the record — this creates a new Record Change entry automatically
+            const saved = await record.Save();
+            if (saved) {
+                this.notificationService.CreateSimpleNotification(`Restored ${Object.keys(event.FieldChanges).length} field(s) from version dated ${new Date(event.ChangedAt).toLocaleDateString()}`, 'info', 3000);
+                // Refresh version count since a new change was created by the save
+                this.LoadVersionCount(record);
+                this.cdr.markForCheck();
+            }
+            else {
+                this.notificationService.CreateSimpleNotification('Failed to save restored values. Please try again.', 'error', 4000);
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Unknown error';
+            this.notificationService.CreateSimpleNotification(`Restore failed: ${message}`, 'error', 4000);
+        }
     }
     OnListManagementClosed() {
         this.ShowListManagement = false;
@@ -498,11 +688,16 @@ export class MjRecordFormContainerComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.Panels = _t);
-        } }, 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", ToolbarConfig: "ToolbarConfig", WidthMode: "WidthMode" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick" }, standalone: false, ngContentSelectors: _c1, decls: 12, vars: 34, consts: [[3, "Navigate", "EditModeChange", "BeforeSave", "SaveRequested", "BeforeCancel", "CancelRequested", "BeforeDelete", "DeleteRequested", "FavoriteToggled", "BeforeHistoryView", "HistoryRequested", "BeforeListManagement", "ListManagementRequested", "ShowChangesRequested", "CustomButtonClick", "FilterChange", "ExpandAllRequested", "CollapseAllRequested", "ShowEmptyFieldsChange", "WidthModeChange", "ResetSectionOrderRequested", "ManageSectionsRequested", "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "EntityInfo", "Config", "IsSaving", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder"], [1, "mj-forms-scroll-area"], [1, "mj-forms-panels-container"], [1, "mj-forms-layout-row"], [1, "mj-forms-all-panels"], [1, "mj-forms-empty-search-state"], [3, "Navigate", "Record", "EditMode", "Collapsed"], [3, "record"], [3, "visible", "config"], [3, "SectionOrderChange", "ResetRequested", "Closed", "Sections", "SectionOrder", "Visible"], [1, "mj-forms-empty-search-icon"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mj-forms-empty-search-title"], [1, "mj-forms-empty-search-message"], ["href", "#", 1, "mj-forms-empty-search-link", 3, "click"], [3, "dialogClosed", "record"], [3, "complete", "cancel", "visible", "config"]], template: function MjRecordFormContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, viewQuery: function MjRecordFormContainerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(RecordChangesComponent, 5);
+        } 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", ToolbarConfig: "ToolbarConfig", WidthMode: "WidthMode" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick" }, standalone: false, ngContentSelectors: _c1, decls: 13, vars: 37, consts: [[3, "Navigate", "EditModeChange", "BeforeSave", "SaveRequested", "BeforeCancel", "CancelRequested", "BeforeDelete", "DeleteRequested", "FavoriteToggled", "BeforeHistoryView", "HistoryRequested", "BeforeListManagement", "ListManagementRequested", "ShowChangesRequested", "CustomButtonClick", "FilterChange", "ExpandAllRequested", "CollapseAllRequested", "ShowEmptyFieldsChange", "WidthModeChange", "ResetSectionOrderRequested", "ManageSectionsRequested", "TagsPanelToggled", "Record", "EditMode", "UserCanEdit", "UserCanDelete", "IsFavorite", "FavoriteInitDone", "IsDirty", "DirtyFieldNames", "ListCount", "TagCount", "VersionCount", "EntityInfo", "Config", "IsSaving", "VisibleSectionCount", "TotalSectionCount", "ExpandedSectionCount", "SearchFilter", "ShowEmptyFields", "WidthMode", "HasCustomSectionOrder"], [1, "mj-forms-scroll-area"], [1, "mj-forms-panels-container"], [1, "mj-forms-layout-row"], [1, "mj-forms-all-panels"], [1, "mj-forms-empty-search-state"], [3, "Navigate", "Record", "EditMode", "Collapsed"], [3, "record", "AllowRestore"], [3, "Record", "WidthPx"], [3, "visible", "config"], [3, "SectionOrderChange", "ResetRequested", "Closed", "Sections", "SectionOrder", "Visible"], [1, "mj-forms-empty-search-icon"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mj-forms-empty-search-title"], [1, "mj-forms-empty-search-message"], ["href", "#", 1, "mj-forms-empty-search-link", 3, "click"], [3, "RestoreRequested", "dialogClosed", "record", "AllowRestore"], [3, "PanelClosed", "TagCountChanged", "RecordNavigate", "WidthChanged", "Record", "WidthPx"], [3, "complete", "cancel", "visible", "config"]], template: function MjRecordFormContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c0);
             i0.ɵɵprojection(0);
             i0.ɵɵelementStart(1, "mj-form-toolbar", 0);
-            i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Template_mj_form_toolbar_Navigate_1_listener($event) { return ctx.OnNavigate($event); })("EditModeChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_EditModeChange_1_listener($event) { return ctx.OnEditModeChange($event); })("BeforeSave", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeSave_1_listener($event) { return ctx.BeforeSave.emit($event); })("SaveRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_SaveRequested_1_listener() { return ctx.OnSaveRequested(); })("BeforeCancel", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeCancel_1_listener($event) { return ctx.BeforeCancel.emit($event); })("CancelRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CancelRequested_1_listener() { return ctx.OnCancelRequested(); })("BeforeDelete", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeDelete_1_listener($event) { return ctx.BeforeDelete.emit($event); })("DeleteRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_DeleteRequested_1_listener() { return ctx.OnDeleteRequested(); })("FavoriteToggled", function MjRecordFormContainerComponent_Template_mj_form_toolbar_FavoriteToggled_1_listener() { return ctx.OnFavoriteToggled(); })("BeforeHistoryView", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeHistoryView_1_listener($event) { return ctx.BeforeHistoryView.emit($event); })("HistoryRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_HistoryRequested_1_listener() { return ctx.OnHistoryRequested(); })("BeforeListManagement", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeListManagement_1_listener($event) { return ctx.BeforeListManagement.emit($event); })("ListManagementRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ListManagementRequested_1_listener() { return ctx.OnListManagementRequested(); })("ShowChangesRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ShowChangesRequested_1_listener() { return ctx.OnShowChangesRequested(); })("CustomButtonClick", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CustomButtonClick_1_listener($event) { return ctx.CustomButtonClick.emit($event); })("FilterChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_FilterChange_1_listener($event) { return ctx.OnFilterChange($event); })("ExpandAllRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ExpandAllRequested_1_listener() { return ctx.OnExpandAll(); })("CollapseAllRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CollapseAllRequested_1_listener() { return ctx.OnCollapseAll(); })("ShowEmptyFieldsChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ShowEmptyFieldsChange_1_listener($event) { return ctx.OnShowEmptyFieldsChange($event); })("WidthModeChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_WidthModeChange_1_listener($event) { return ctx.OnWidthModeChange($event); })("ResetSectionOrderRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ResetSectionOrderRequested_1_listener() { return ctx.OnResetSectionOrder(); })("ManageSectionsRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ManageSectionsRequested_1_listener() { return ctx.OnManageSections(); });
+            i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Template_mj_form_toolbar_Navigate_1_listener($event) { return ctx.OnNavigate($event); })("EditModeChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_EditModeChange_1_listener($event) { return ctx.OnEditModeChange($event); })("BeforeSave", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeSave_1_listener($event) { return ctx.BeforeSave.emit($event); })("SaveRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_SaveRequested_1_listener() { return ctx.OnSaveRequested(); })("BeforeCancel", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeCancel_1_listener($event) { return ctx.BeforeCancel.emit($event); })("CancelRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CancelRequested_1_listener() { return ctx.OnCancelRequested(); })("BeforeDelete", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeDelete_1_listener($event) { return ctx.BeforeDelete.emit($event); })("DeleteRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_DeleteRequested_1_listener() { return ctx.OnDeleteRequested(); })("FavoriteToggled", function MjRecordFormContainerComponent_Template_mj_form_toolbar_FavoriteToggled_1_listener() { return ctx.OnFavoriteToggled(); })("BeforeHistoryView", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeHistoryView_1_listener($event) { return ctx.BeforeHistoryView.emit($event); })("HistoryRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_HistoryRequested_1_listener() { return ctx.OnHistoryRequested(); })("BeforeListManagement", function MjRecordFormContainerComponent_Template_mj_form_toolbar_BeforeListManagement_1_listener($event) { return ctx.BeforeListManagement.emit($event); })("ListManagementRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ListManagementRequested_1_listener() { return ctx.OnListManagementRequested(); })("ShowChangesRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ShowChangesRequested_1_listener() { return ctx.OnShowChangesRequested(); })("CustomButtonClick", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CustomButtonClick_1_listener($event) { return ctx.CustomButtonClick.emit($event); })("FilterChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_FilterChange_1_listener($event) { return ctx.OnFilterChange($event); })("ExpandAllRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ExpandAllRequested_1_listener() { return ctx.OnExpandAll(); })("CollapseAllRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_CollapseAllRequested_1_listener() { return ctx.OnCollapseAll(); })("ShowEmptyFieldsChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ShowEmptyFieldsChange_1_listener($event) { return ctx.OnShowEmptyFieldsChange($event); })("WidthModeChange", function MjRecordFormContainerComponent_Template_mj_form_toolbar_WidthModeChange_1_listener($event) { return ctx.OnWidthModeChange($event); })("ResetSectionOrderRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ResetSectionOrderRequested_1_listener() { return ctx.OnResetSectionOrder(); })("ManageSectionsRequested", function MjRecordFormContainerComponent_Template_mj_form_toolbar_ManageSectionsRequested_1_listener() { return ctx.OnManageSections(); })("TagsPanelToggled", function MjRecordFormContainerComponent_Template_mj_form_toolbar_TagsPanelToggled_1_listener() { return ctx.OnTagsPanelToggled(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(2, "div", 1)(3, "div", 2)(4, "div", 3)(5, "div", 4);
             i0.ɵɵprojection(6, 1);
@@ -511,14 +706,15 @@ export class MjRecordFormContainerComponent {
             i0.ɵɵelementStart(8, "mj-isa-related-panel", 6);
             i0.ɵɵlistener("Navigate", function MjRecordFormContainerComponent_Template_mj_isa_related_panel_Navigate_8_listener($event) { return ctx.OnNavigate($event); });
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(9, MjRecordFormContainerComponent_Conditional_9_Template, 1, 1, "mj-record-changes", 7);
-            i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_10_Template, 1, 8, "mj-list-management-dialog", 8);
-            i0.ɵɵelementStart(11, "mj-section-manager", 9);
-            i0.ɵɵlistener("SectionOrderChange", function MjRecordFormContainerComponent_Template_mj_section_manager_SectionOrderChange_11_listener($event) { return ctx.OnSectionOrderChange($event); })("ResetRequested", function MjRecordFormContainerComponent_Template_mj_section_manager_ResetRequested_11_listener() { return ctx.OnSectionManagerReset(); })("Closed", function MjRecordFormContainerComponent_Template_mj_section_manager_Closed_11_listener() { return ctx.OnSectionManagerClosed(); });
+            i0.ɵɵconditionalCreate(9, MjRecordFormContainerComponent_Conditional_9_Template, 1, 2, "mj-record-changes", 7);
+            i0.ɵɵconditionalCreate(10, MjRecordFormContainerComponent_Conditional_10_Template, 1, 2, "mj-record-tags", 8);
+            i0.ɵɵconditionalCreate(11, MjRecordFormContainerComponent_Conditional_11_Template, 1, 8, "mj-list-management-dialog", 9);
+            i0.ɵɵelementStart(12, "mj-section-manager", 10);
+            i0.ɵɵlistener("SectionOrderChange", function MjRecordFormContainerComponent_Template_mj_section_manager_SectionOrderChange_12_listener($event) { return ctx.OnSectionOrderChange($event); })("ResetRequested", function MjRecordFormContainerComponent_Template_mj_section_manager_ResetRequested_12_listener() { return ctx.OnSectionManagerReset(); })("Closed", function MjRecordFormContainerComponent_Template_mj_section_manager_Closed_12_listener() { return ctx.OnSectionManagerClosed(); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Record", ctx.EffectiveRecord)("EditMode", ctx.EffectiveEditMode)("UserCanEdit", ctx.EffectiveUserCanEdit)("UserCanDelete", ctx.EffectiveUserCanDelete)("IsFavorite", ctx.EffectiveIsFavorite)("FavoriteInitDone", ctx.EffectiveFavoriteInitDone)("IsDirty", ctx.EffectiveIsDirty)("DirtyFieldNames", ctx.EffectiveDirtyFieldNames)("ListCount", ctx.ListCount)("EntityInfo", ctx.EffectiveEntityInfo)("Config", ctx.ToolbarConfig)("IsSaving", ctx.EffectiveIsSaving)("VisibleSectionCount", ctx.VisibleSectionCount)("TotalSectionCount", ctx.TotalSectionCount)("ExpandedSectionCount", ctx.ExpandedSectionCount)("SearchFilter", ctx.EffectiveSearchFilter)("ShowEmptyFields", ctx.EffectiveShowEmptyFields)("WidthMode", ctx.EffectiveWidthMode)("HasCustomSectionOrder", ctx.EffectiveHasCustomSectionOrder);
+            i0.ɵɵproperty("Record", ctx.EffectiveRecord)("EditMode", ctx.EffectiveEditMode)("UserCanEdit", ctx.EffectiveUserCanEdit)("UserCanDelete", ctx.EffectiveUserCanDelete)("IsFavorite", ctx.EffectiveIsFavorite)("FavoriteInitDone", ctx.EffectiveFavoriteInitDone)("IsDirty", ctx.EffectiveIsDirty)("DirtyFieldNames", ctx.EffectiveDirtyFieldNames)("ListCount", ctx.ListCount)("TagCount", ctx.TagCount)("VersionCount", ctx.VersionCount)("EntityInfo", ctx.EffectiveEntityInfo)("Config", ctx.ToolbarConfig)("IsSaving", ctx.EffectiveIsSaving)("VisibleSectionCount", ctx.VisibleSectionCount)("TotalSectionCount", ctx.TotalSectionCount)("ExpandedSectionCount", ctx.ExpandedSectionCount)("SearchFilter", ctx.EffectiveSearchFilter)("ShowEmptyFields", ctx.EffectiveShowEmptyFields)("WidthMode", ctx.EffectiveWidthMode)("HasCustomSectionOrder", ctx.EffectiveHasCustomSectionOrder);
             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(4);
@@ -528,15 +724,20 @@ export class MjRecordFormContainerComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowRecordChanges && ctx.EffectiveRecord ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowListManagement && ctx.EffectiveRecord ? 10 : -1);
+            i0.ɵɵconditional(ctx.ShowTagsPanel && ctx.EffectiveRecord ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowListManagement && ctx.EffectiveRecord ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Sections", ctx.SectionManagerItems)("SectionOrder", ctx.SectionManagerOrder)("Visible", ctx.ShowSectionManager);
-        } }, dependencies: [i1.RecordChangesComponent, i2.ListManagementDialogComponent, i3.MjFormToolbarComponent, i4.MjSectionManagerComponent, i5.MjIsaRelatedPanelComponent], 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}\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}\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/* 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  display: none;\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"], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [i1.RecordChangesComponent, i2.ListManagementDialogComponent, i3.RecordTagsComponent, i4.MjFormToolbarComponent, i5.MjSectionManagerComponent, i6.MjIsaRelatedPanelComponent], 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}\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}\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/* 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  display: none;\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"], 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, 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     ============================================ -->\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  [EntityInfo]=\"EffectiveEntityInfo\"\n  [Config]=\"ToolbarConfig\"\n  [IsSaving]=\"EffectiveIsSaving\"\n  [VisibleSectionCount]=\"VisibleSectionCount\"\n  [TotalSectionCount]=\"TotalSectionCount\"\n  [ExpandedSectionCount]=\"ExpandedSectionCount\"\n  [SearchFilter]=\"EffectiveSearchFilter\"\n  [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n  [WidthMode]=\"EffectiveWidthMode\"\n  [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\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  (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  (FilterChange)=\"OnFilterChange($event)\"\n  (ExpandAllRequested)=\"OnExpandAll()\"\n  (CollapseAllRequested)=\"OnCollapseAll()\"\n  (ShowEmptyFieldsChange)=\"OnShowEmptyFieldsChange($event)\"\n  (WidthModeChange)=\"OnWidthModeChange($event)\"\n  (ResetSectionOrderRequested)=\"OnResetSectionOrder()\"\n  (ManageSectionsRequested)=\"OnManageSections()\">\n</mj-form-toolbar>\n\n<!-- ============================================\n     SCROLL AREA (full-width so mouse wheel works anywhere)\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: form panels on left, ISA side panel on right -->\n    <div class=\"mj-forms-layout-row\">\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        <!-- Empty state when no sections match search -->\n        @if (EffectiveSearchFilter && VisibleSectionCount === 0) {\n          <div class=\"mj-forms-empty-search-state\">\n            <div class=\"mj-forms-empty-search-icon\">\n              <i class=\"fa-solid fa-magnifying-glass\"></i>\n            </div>\n            <h3 class=\"mj-forms-empty-search-title\">No sections found</h3>\n            <p class=\"mj-forms-empty-search-message\">\n              No sections match \"<strong>{{ EffectiveSearchFilter }}</strong>\".\n              <br>Try a different search term or <a href=\"#\" (click)=\"OnFilterChange(''); $event.preventDefault()\" class=\"mj-forms-empty-search-link\">clear the search</a>.\n            </p>\n          </div>\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    (dialogClosed)=\"OnRecordChangesClosed()\">\n  </mj-record-changes>\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)=\"OnListManagementClosed()\"\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  [Visible]=\"ShowSectionManager\"\n  (SectionOrderChange)=\"OnSectionOrderChange($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}\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}\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/* 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  display: none;\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"] }]
-    }], null, { Record: [{
+        args: [{ standalone: false, selector: 'mj-record-form-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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     ============================================ -->\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  [VersionCount]=\"VersionCount\"\n  [EntityInfo]=\"EffectiveEntityInfo\"\n  [Config]=\"ToolbarConfig\"\n  [IsSaving]=\"EffectiveIsSaving\"\n  [VisibleSectionCount]=\"VisibleSectionCount\"\n  [TotalSectionCount]=\"TotalSectionCount\"\n  [ExpandedSectionCount]=\"ExpandedSectionCount\"\n  [SearchFilter]=\"EffectiveSearchFilter\"\n  [ShowEmptyFields]=\"EffectiveShowEmptyFields\"\n  [WidthMode]=\"EffectiveWidthMode\"\n  [HasCustomSectionOrder]=\"EffectiveHasCustomSectionOrder\"\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  (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  (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</mj-form-toolbar>\n\n<!-- ============================================\n     SCROLL AREA (full-width so mouse wheel works anywhere)\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: form panels on left, ISA side panel on right -->\n    <div class=\"mj-forms-layout-row\">\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        <!-- Empty state when no sections match search -->\n        @if (EffectiveSearchFilter && VisibleSectionCount === 0) {\n          <div class=\"mj-forms-empty-search-state\">\n            <div class=\"mj-forms-empty-search-icon\">\n              <i class=\"fa-solid fa-magnifying-glass\"></i>\n            </div>\n            <h3 class=\"mj-forms-empty-search-title\">No sections found</h3>\n            <p class=\"mj-forms-empty-search-message\">\n              No sections match \"<strong>{{ EffectiveSearchFilter }}</strong>\".\n              <br>Try a different search term or <a href=\"#\" (click)=\"OnFilterChange(''); $event.preventDefault()\" class=\"mj-forms-empty-search-link\">clear the search</a>.\n            </p>\n          </div>\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     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)=\"OnListManagementClosed()\"\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  [Visible]=\"ShowSectionManager\"\n  (SectionOrderChange)=\"OnSectionOrderChange($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}\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}\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/* 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  display: none;\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"] }]
+    }], null, { recordChangesDrawer: [{
+            type: ViewChild,
+            args: [RecordChangesComponent]
+        }], Record: [{
             type: Input
         }], FormComponent: [{
             type: Input
@@ -598,5 +799,5 @@ export class MjRecordFormContainerComponent {
             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: 63 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjRecordFormContainerComponent, { className: "MjRecordFormContainerComponent", filePath: "src/lib/container/record-form-container.component.ts", lineNumber: 66 }); })();
 //# sourceMappingURL=record-form-container.component.js.map