@memberjunction/ng-base-forms 3.4.0 → 4.1.0

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

@@ -1,73 +1,75 @@
-import { Directive, ViewChildren, ViewChild, inject } from '@angular/core';
-import { Subject, debounceTime, fromEvent } from 'rxjs';
+import { Directive, ViewChildren, ElementRef, ChangeDetectorRef, Output, EventEmitter, inject } from '@angular/core';
+import { Subject, debounceTime } from 'rxjs';
 import { EntityInfo, EntityPermissionType, Metadata, LogError, RunView } from '@memberjunction/core';
-import { BaseRecordComponent } from './base-record-component';
-import { BaseFormSectionInfo } from './base-form-section-info';
-import { CollapsiblePanelComponent } from './collapsible-panel.component';
-import { NavigationService } from '@memberjunction/ng-shared';
-import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
 import { FormEditingCompleteEvent, BaseFormComponentEventCodes } from '@memberjunction/ng-base-types';
+import { BaseRecordComponent } from './base-record-component';
+import { BaseFormSectionInfo } from './base-form-section-info';
+import { MjCollapsiblePanelComponent } from './panel/collapsible-panel.component';
 import { FormStateService } from './form-state.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared";
-import * as i2 from "@angular/router";
-const _c0 = ["topArea"];
+/**
+ * Abstract base class for all entity record forms in MemberJunction.
+ *
+ * Generated forms (via CodeGen) and custom forms extend this class.
+ * It provides core form logic — section management, validation, pending records,
+ * permissions, favorites, related entity helpers — with ZERO Explorer dependencies.
+ *
+ * Instead of calling Explorer services directly, events are emitted via @Output:
+ * - **Navigate**: Form navigation requests (record links, new records, external links)
+ * - **Notification**: User-facing notifications (save success, validation errors, etc.)
+ * - **RecordSaved**: Emitted after a successful save
+ * - **RecordDeleted**: Emitted after a successful delete
+ *
+ * The host application (e.g. SingleRecordComponent in Explorer) subscribes to
+ * these events and maps them to its own services (NavigationService, SharedService, etc.).
+ */
 export class BaseFormComponent extends BaseRecordComponent {
-    elementRef;
-    sharedService;
-    router;
-    route;
-    cdr;
     EditMode = false;
-    BottomMargin = 10;
-    TabHeight = '500px';
-    /**
-     * This property is automatically updated by the BaseFormComponent to reflect the height of the "Top Area" of the form. The Top Area is defined in a template by having
-     * a #topArea element anywhere in the form. This property will automatically be updated AfterViewInit to reflect the height of the top area. This is useful for various things
-     * like setting a pane in a splitter to a specific height based on the top area height.
-     */
-    TopAreaHeight = '300px';
-    GridBottomMargin = 100;
     FavoriteInitDone = false;
     isHistoryDialogOpen = false;
     showDeleteDialog = false;
     showCreateDialog = false;
-    splitterLayoutChangeSubject = new Subject();
+    /**
+     * Height of the top area when a splitter layout is used.
+     * Referenced by CodeGen-generated templates for entities with "top area" sections.
+     */
+    TopAreaHeight = '300px';
+    /**
+     * Called when the splitter layout changes (for entities with "top area" sections).
+     * No-op in the generic version; override in host application if splitter resizing is needed.
+     */
+    splitterLayoutChange() {
+        // No-op — host application can override
+    }
     _pendingRecords = [];
-    _updatingBrowserUrl = false;
-    __debug = false;
-    /** Form state service for persisting section states to User Settings */
+    // #region Injected Dependencies (no constructor params)
+    elementRef = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
     formStateService = inject(FormStateService);
-    /** Navigation service for URL management */
-    navigationService = inject(NavigationService);
+    // #endregion
+    // #region @Output Events
+    /** Emitted when navigation is requested (record link, external link, email, new record, etc.) */
+    Navigate = new EventEmitter();
+    /** Emitted when a user-facing notification should be shown */
+    Notification = new EventEmitter();
+    /** Emitted after a record is saved successfully */
+    RecordSaved = new EventEmitter();
+    /** Emitted after a record is deleted successfully */
+    RecordDeleted = new EventEmitter();
+    /** Emitted when a record save fails */
+    RecordSaveFailed = new EventEmitter();
+    /** Emitted when a record delete fails */
+    RecordDeleteFailed = new EventEmitter();
+    /** Emitted when validation fails before save */
+    ValidationFailed = new EventEmitter();
+    // #endregion
     /** Subscription to form state changes */
     formStateSubscription;
-    constructor(elementRef, sharedService, router, route, cdr) {
-        super();
-        this.elementRef = elementRef;
-        this.sharedService = sharedService;
-        this.router = router;
-        this.route = route;
-        this.cdr = cdr;
-        this.setupSplitterLayoutDebounce();
-    }
-    tabComponent;
-    tabStrips;
     collapsiblePanels;
-    get TabStripComponent() {
-        return this.tabComponent;
-    }
-    /**
-     * Convenience method to resize application container when required
-     */
-    InvokeManualResize(delay) {
-        this.sharedService.InvokeManualResize(delay);
-    }
     async ngOnInit() {
         if (this.record) {
             if (!this.record.IsSaved) {
-                // we have a new record so by definition we are in edit mode
                 this.StartEditMode();
             }
             const md = new Metadata();
@@ -77,85 +79,28 @@ export class BaseFormComponent extends BaseRecordComponent {
             const entityName = this.getEntityName();
             if (entityName) {
                 await this.formStateService.initializeState(entityName);
-                // Subscribe to state changes for reactive updates
                 this.formStateSubscription = this.formStateService.getState$(entityName).subscribe(state => {
                     this.showEmptyFields = state.showEmptyFields;
                     this.cdr.markForCheck();
                 });
             }
-            // DEBUG ONLY output to console our full record info for debugging
-            if (this.__debug) {
-                const start = new Date().getTime();
-                console.log('Full Record Info: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
-                const dataObject = await this.record.GetDataObject({
-                    includeRelatedEntityData: true,
-                    oldValues: false,
-                    omitEmptyStrings: false,
-                    omitNullValues: false,
-                    excludeFields: [],
-                    relatedEntityList: this.record.EntityInfo.RelatedEntities.map(x => {
-                        return {
-                            relatedEntityName: x.RelatedEntity
-                        };
-                    })
-                });
-                const end = new Date().getTime();
-                console.log(dataObject);
-                console.log('Time to get full record info: ' + (end - start) + 'ms');
-            }
         }
         // Set up debounced filter subscription
         this.filterSubscription = this.filterSubject
             .pipe(debounceTime(100))
             .subscribe(searchTerm => {
             this.searchFilter = searchTerm;
+            // After change detection propagates FormContext to panels and they update
+            // their IsVisible state, expand any visible (matching) sections that are collapsed
+            if (searchTerm) {
+                Promise.resolve().then(() => this.expandMatchingSections());
+            }
         });
     }
-    topArea;
     ngAfterViewInit() {
-        this.setTabHeight();
-        //this.route.queryParams doesnt seem to be picking up the query params
-        // so we're going to get teh tab query param from the URLSearchParams class
-        const url = window.location.href;
-        const urlObj = new URL(url);
-        const tabName = urlObj.searchParams.get('tab');
-        // only do this if WE didn't invoke the browser URL update
-        if (tabName && !this._updatingBrowserUrl) {
-            // Select the proper tab based on the tabName
-            this.tabComponent?.SelectTabByName(tabName);
-        }
-        // now resize after a pause to allow the UI to settle
-        setTimeout(() => {
-            this.sharedService.InvokeManualResize();
-        }, 250);
-        this.CalcTopAreaHeight();
-    }
-    /**
-     * This method can be called at anytime to re-calculate the height of the top area and set the TopAreaHeight property. This is useful if the top area height changes dynamically
-     */
-    CalcTopAreaHeight() {
-        // calculate the top area height and set it to our TopAreaHeight property, sub-classes can then do whatever they want with that property
-        if (this.topArea && this.topArea.nativeElement) {
-            // give it a brief pause to let the UI settle
-            setTimeout(() => {
-                let height = this.topArea.nativeElement.offsetHeight;
-                if (height === 0) {
-                    // if we get here, still probably a timing issue so chekc our immediate parent which might be a splitter pane, if it is, use it's height
-                    const parent = this.topArea.nativeElement.parentElement;
-                    if (parent && parent.offsetHeight > 0 && parent.nodeName === "KENDO-SPLITTER-PANE") {
-                        height = parent.offsetHeight;
-                    }
-                }
-                if (height > 0)
-                    this.TopAreaHeight = `${height}px`;
-            }, 100);
-        }
+        // Subclasses can override for post-view-init logic
     }
-    resizeSub = null;
     ngOnDestroy() {
-        if (this.resizeSub) {
-            this.resizeSub.unsubscribe();
-        }
         if (this.filterSubscription) {
             this.filterSubscription.unsubscribe();
         }
@@ -163,178 +108,31 @@ export class BaseFormComponent extends BaseRecordComponent {
             this.formStateSubscription.unsubscribe();
         }
     }
+    // #region Pending Records
     get PendingRecords() {
         return this._pendingRecords;
     }
-    onTabSelect(e) {
-        this.sharedService.InvokeManualResize();
-        // Update the browser URL to add the tab name as a query parameter
-        // Use NavigationService to properly update query params while respecting app-scoped routes
-        this._updatingBrowserUrl = true;
-        this.navigationService.UpdateActiveTabQueryParams({
-            tab: e.tab?.Name || null
-        });
-        this._updatingBrowserUrl = false;
-    }
-    StartEditMode() {
-        this.EditMode = true;
-    }
-    EndEditMode() {
-        this.EditMode = false;
-    }
-    handleHistoryDialog() {
-        this.isHistoryDialogOpen = !this.isHistoryDialogOpen;
-    }
-    ShowChanges() {
-        if (this.record) {
-            const changes = this.record.GetAll(false, true);
-            const oldValues = this.record.GetAll(true, true);
-            console.log('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
-            console.log(changes);
-            console.log('Old Values');
-            console.log(oldValues);
-            this.sharedService.CreateSimpleNotification('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString() + '\n\n' + JSON.stringify(changes, null, 2) + '\n\nOld Values\n\n' + JSON.stringify(oldValues, null, 2), 'info', 30000);
-        }
-    }
-    async RemoveFavorite() {
-        return this.SetFavoriteStatus(false);
-    }
-    async MakeFavorite() {
-        return this.SetFavoriteStatus(true);
-    }
-    async SetFavoriteStatus(isFavorite) {
-        const md = new Metadata();
-        await md.SetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.PrimaryKey, isFavorite);
-        this._isFavorite = isFavorite;
-    }
-    _isFavorite = false;
-    get IsFavorite() {
-        return this._isFavorite;
-    }
-    _userPermissions = [];
-    CheckUserPermission(type) {
-        try {
-            if (this.record) {
-                const perm = this._userPermissions.find(x => x.permission === type);
-                if (perm)
-                    return perm.canDo;
-                else {
-                    const result = this.record.CheckPermissions(type, false);
-                    this._userPermissions.push({ permission: type, canDo: result });
-                    return result;
-                }
-            }
-            else
-                return false;
-        }
-        catch (e) {
-            LogError(e);
-            return false;
-        }
-    }
-    get UserCanEdit() {
-        return this.CheckUserPermission(EntityPermissionType.Update);
-    }
-    get UserCanRead() {
-        return this.CheckUserPermission(EntityPermissionType.Read);
-    }
-    get UserCanCreate() {
-        return this.CheckUserPermission(EntityPermissionType.Create);
-    }
-    get UserCanDelete() {
-        return this.CheckUserPermission(EntityPermissionType.Delete);
-    }
-    GridEditMode() {
-        return this.EditMode ? "Queue" : "None";
-    }
-    /**
-    * Returns true if the tabName specified is the currently displayed tab, otherwise returns false
-    * @param tabName
-    * @returns
-    */
-    IsCurrentTab(tabName) {
-        if (this.tabComponent) {
-            const tab = this.tabComponent.GetTabByName(tabName);
-            if (tab) {
-                return tab.index === this.tabComponent.SelectedTabIndex;
+    PendingRecordsDirty() {
+        this.PopulatePendingRecords();
+        const pendingRecords = this.PendingRecords;
+        if (pendingRecords && pendingRecords.length > 0) {
+            for (const p of pendingRecords) {
+                if (p.action === 'delete')
+                    return true;
+                else if (p.entityObject.Dirty)
+                    return true;
             }
         }
-        // if we get here we are not in a state where we can determine the current tab, so return false
         return false;
     }
-    BuildRelationshipViewParams(item) {
-        return EntityInfo.BuildRelationshipViewParams(this.record, item); // new helper method in EntityInfo
-    }
-    /**
-     * Builds a RunViewParams object for a related entity based on the relationship between the current entity and the related entity
-     * @param relatedEntityName - the name of the entity that is related to the current entity where we're building the view params from
-     * @param relatedEntityJoinField - the name of the foreign key field in the current entity that links to the related entity, only required if there are multiple relationships between the entities
-     * @returns
-     */
-    BuildRelationshipViewParamsByEntityName(relatedEntityName, relatedEntityJoinField) {
-        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName, relatedEntityJoinField);
-        if (eri)
-            return this.BuildRelationshipViewParams(eri);
-        else
-            return {};
-    }
-    /**
-     * Looks up and returns the EntityRelationshipInfo object for the related entity name
-     * @param relatedEntityName - the name of the related entity to look up the relationship for
-     * @param relatedEntityJoinField - the name of the foreign key field in the current entity that links to the related entity, only required if there are multiple relationships between the entities
-     * @returns
-     */
-    GetEntityRelationshipByRelatedEntityName(relatedEntityName, relatedEntityJoinField) {
-        if (this.record) {
-            const r = this.record;
-            const ret = r.EntityInfo.RelatedEntities.filter(x => x.RelatedEntity.trim().toLowerCase() === relatedEntityName.trim().toLowerCase());
-            // now if ret.length > 1, we need to find the one that matches the foreign key field name
-            if (ret.length > 1 && relatedEntityJoinField) {
-                const ret2 = ret.find(x => x.RelatedEntityJoinField.trim().toLowerCase() === relatedEntityJoinField.trim().toLowerCase());
-                if (ret2)
-                    return ret2;
-            }
-            else if (ret.length === 1) {
-                return ret[0];
-            }
-            else
-                return undefined;
-        }
-        return undefined;
-    }
-    /**
-     * Builds new record values for a related entity based on the relationship between the current entity and the related entity
-     * @param relatedEntityName
-     * @returns
-     */
-    NewRecordValues(relatedEntityName) {
-        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName);
-        if (eri)
-            return this.NewRecordValuesByEntityRelationship(eri);
-        else
-            return {};
-    }
-    NewRecordValuesByEntityRelationship(item) {
-        return EntityInfo.BuildRelationshipNewRecordValues(this.record, item); // new helper method in EntityInfo
-    }
-    GetRelatedEntityTabDisplayName(relatedEntityName) {
-        if (this.record) {
-            const eri = this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity === relatedEntityName);
-            if (eri)
-                return eri.DisplayName;
-        }
-        return relatedEntityName;
-    }
-    /**
-     * Returns whether the current entity has any related entities defined.
-     * Useful for conditionally showing/hiding related entity sections.
-     */
-    get HasRelatedEntities() {
-        if (this.record) {
-            const relatedEntities = this.record.EntityInfo.RelatedEntities;
-            return relatedEntities && relatedEntities.length > 0;
+    PopulatePendingRecords() {
+        this._pendingRecords = [];
+        this.RaiseEvent(BaseFormComponentEventCodes.EDITING_COMPLETE);
+        const result = this.RaiseEvent(BaseFormComponentEventCodes.POPULATE_PENDING_RECORDS);
+        if (result && result.pendingChanges) {
+            for (const p of result.pendingChanges)
+                this.PendingRecords.push(p);
         }
-        return false;
     }
     ValidatePendingRecords() {
         const results = [];
@@ -344,6 +142,20 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
         return results;
     }
+    // #endregion
+    // #region Edit Mode
+    StartEditMode() {
+        this.EditMode = true;
+    }
+    EndEditMode() {
+        this.EditMode = false;
+        this.clearValidationState();
+    }
+    handleHistoryDialog() {
+        this.isHistoryDialogOpen = !this.isHistoryDialogOpen;
+    }
+    // #endregion
+    // #region Core Form Operations
     Validate() {
         const valResults = this.record.Validate();
         const pendingValResults = this.ValidatePendingRecords();
@@ -366,109 +178,93 @@ export class BaseFormComponent extends BaseRecordComponent {
             eventCode: BaseFormComponentEventCodes.BASE_CODE,
             args: event
         });
-        return event; // if the recipients of the event provided any values, we have them now 
+        return event;
     }
     async SaveRecord(StopEditModeAfterSave) {
         try {
             try {
-                // atempt to blur the active element to force any pending changes to be committed
                 document.activeElement.blur();
-                // notify child components of this component that they must stop editing with an EDITING_COMPLETE message via MJ_global
                 this.RaiseEvent(BaseFormComponentEventCodes.EDITING_COMPLETE);
             }
-            catch (e2) {
-                // ignore
+            catch (_e) {
+                // ignore blur errors
             }
             if (this.record) {
-                this.PopulatePendingRecords(); // do this before we validate as we must validate pending records too
+                this.PopulatePendingRecords();
                 const valResults = this.Validate();
                 if (valResults.Success) {
                     const result = await this.InternalSaveRecord();
                     if (result) {
-                        // we have saved the record, so clear the pending records
                         this._pendingRecords = [];
+                        this.clearValidationState();
                         if (StopEditModeAfterSave)
                             this.EndEditMode();
-                        this.sharedService.CreateSimpleNotification('Record saved succesfully', 'success', 2500);
+                        this.Notification.emit({ Message: 'Record saved successfully', Type: 'success', Duration: 2500 });
+                        this.RecordSaved.emit({
+                            EntityName: this.record.EntityInfo.Name,
+                            RecordId: this.record.PrimaryKey.ToString(),
+                            Result: { Success: true }
+                        });
                         return true;
                     }
                     else {
-                        this.sharedService.CreateSimpleNotification('Error saving record', 'error', 5000);
+                        const serverMsg = this.record.LatestResult?.Message || '';
+                        const errorMsg = serverMsg ? `Save failed: ${serverMsg}` : 'Error saving record';
+                        this.Notification.emit({ Message: errorMsg, Type: 'error', Duration: 5000 });
+                        this.RecordSaveFailed.emit({ EntityName: this.record.EntityInfo.Name, ErrorMessage: errorMsg });
                     }
                 }
                 else {
-                    this.sharedService.CreateSimpleNotification('Validation Errors\n' + valResults.Errors.map(x => x.Message).join('\n'), 'warning', 5000);
+                    // Broadcast validation errors to all fields via FormContext
+                    this._showValidation = true;
+                    this._validationErrors = valResults.Errors;
+                    this.cdr.markForCheck();
+                    const errorMessages = valResults.Errors.map(x => x.Message);
+                    this.Notification.emit({
+                        Message: 'Validation Errors\n' + errorMessages.join('\n'),
+                        Type: 'warning',
+                        Duration: 5000
+                    });
+                    this.ValidationFailed.emit({ EntityName: this.record.EntityInfo.Name, Errors: errorMessages });
                 }
             }
-            LogError("Could not save reocrd: Record not found");
-            return false; // if we get here, we have failed/validation error/etc
+            LogError("Could not save record: Record not found");
+            return false;
         }
         catch (e) {
-            this.sharedService.CreateSimpleNotification('Error saving record: ' + e, 'error', 5000);
+            const errorMsg = 'Error saving record: ' + e;
+            this.Notification.emit({ Message: errorMsg, Type: 'error', Duration: 5000 });
+            if (this.record) {
+                this.RecordSaveFailed.emit({ EntityName: this.record.EntityInfo.Name, ErrorMessage: errorMsg });
+            }
             return false;
         }
     }
-    async Wait(duration) {
-        return new Promise(resolve => setTimeout(resolve, duration));
-    }
     CancelEdit() {
         if (this.record) {
             const r = this.record;
             if (r.Dirty || this.PendingRecordsDirty()) {
-                // ask the user to make sure they want to throw out changes
-                if (!confirm('Are you sure you want to cancel your changes?')) {
-                    return;
-                }
+                // Revert is safe here — the toolbar's discard dialog already confirmed with the user
                 r.Revert();
                 const pendingRecords = this.PendingRecords;
                 if (pendingRecords && pendingRecords.length > 0) {
-                    // we have pending records, so we need to revert them as well
                     pendingRecords.forEach(p => {
                         if (p.action === 'save')
-                            p.entityObject.Revert(); // only do this if we are saving the record, ignore deletes
+                            p.entityObject.Revert();
                     });
                 }
                 this.RaiseEvent(BaseFormComponentEventCodes.REVERT_PENDING_CHANGES);
             }
-            // if we get here we are good to go
             this.EndEditMode();
         }
     }
-    PendingRecordsDirty() {
-        this.PopulatePendingRecords();
-        const pendingRecords = this.PendingRecords;
-        if (pendingRecords && pendingRecords.length > 0) {
-            for (const p of pendingRecords) {
-                if (p.action === 'delete')
-                    return true;
-                else if (p.entityObject.Dirty)
-                    return true;
-            }
-        }
-        return false;
-    }
-    PopulatePendingRecords() {
-        // this method is called by the parent class at the right time to populate all of the pending records for a transaction
-        // all we do is talk to all of our child compoennts and get their pending records and xfer them over to the PendingRecords array
-        // the parent class will then take care of the rest...
-        this._pendingRecords = []; // wipe out our array first
-        this.RaiseEvent(BaseFormComponentEventCodes.EDITING_COMPLETE); // first tell the child components to finish up their editing
-        const result = this.RaiseEvent(BaseFormComponentEventCodes.POPULATE_PENDING_RECORDS);
-        if (result && result.pendingChanges) {
-            for (const p of result.pendingChanges)
-                this.PendingRecords.push(p);
-        }
-    }
     async InternalSaveRecord() {
         if (this.record) {
-            // DONT POPULATE PENDING RECORDS AGAIN HERE AS IT WAS DONE before Validate() was called
             if (this._pendingRecords.length > 0) {
-                // we need to create a transaction group
                 const md = new Metadata();
                 const tg = await md.CreateTransactionGroup();
                 this.record.TransactionGroup = tg;
                 await this.record.Save();
-                // now add to the rest of the pending records
                 for (const x of this._pendingRecords) {
                     x.entityObject.TransactionGroup = tg;
                     if (x.action === 'save') {
@@ -478,75 +274,163 @@ export class BaseFormComponent extends BaseRecordComponent {
                         await x.entityObject.Delete();
                     }
                 }
-                // finally submit the TG
                 return await tg.Submit();
             }
-            else
+            else {
                 return await this.record.Save();
+            }
         }
-        else
+        else {
+            return false;
+        }
+    }
+    async Wait(duration) {
+        return new Promise(resolve => setTimeout(resolve, duration));
+    }
+    // #endregion
+    // #region Permissions
+    _userPermissions = [];
+    CheckUserPermission(type) {
+        try {
+            if (this.record) {
+                const perm = this._userPermissions.find(x => x.permission === type);
+                if (perm)
+                    return perm.canDo;
+                else {
+                    const result = this.record.CheckPermissions(type, false);
+                    this._userPermissions.push({ permission: type, canDo: result });
+                    return result;
+                }
+            }
+            else {
+                return false;
+            }
+        }
+        catch (e) {
+            LogError(e);
             return false;
+        }
+    }
+    get UserCanEdit() {
+        return this.CheckUserPermission(EntityPermissionType.Update);
+    }
+    get UserCanRead() {
+        return this.CheckUserPermission(EntityPermissionType.Read);
+    }
+    get UserCanCreate() {
+        return this.CheckUserPermission(EntityPermissionType.Create);
+    }
+    get UserCanDelete() {
+        return this.CheckUserPermission(EntityPermissionType.Delete);
     }
-    GetTabTopPosition() {
-        if (this.elementRef && this.elementRef.nativeElement) {
-            const tabs = this.elementRef.nativeElement.getElementsByClassName('k-tabstrip');
-            if (tabs && tabs.length > 0) {
-                const tabElement = tabs[0];
-                const tabRect = tabElement.getBoundingClientRect();
-                const bodyRect = document.body.getBoundingClientRect();
-                return tabRect.top - bodyRect.top;
+    // #endregion
+    // #region Grid Edit Mode
+    GridEditMode() {
+        return this.EditMode ? "Queue" : "None";
+    }
+    // #endregion
+    // #region Favorites
+    _isFavorite = false;
+    get IsFavorite() {
+        return this._isFavorite;
+    }
+    async RemoveFavorite() {
+        return this.SetFavoriteStatus(false);
+    }
+    async MakeFavorite() {
+        return this.SetFavoriteStatus(true);
+    }
+    async SetFavoriteStatus(isFavorite) {
+        const md = new Metadata();
+        await md.SetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.PrimaryKey, isFavorite);
+        this._isFavorite = isFavorite;
+    }
+    // #endregion
+    // #region Related Entity Helpers
+    BuildRelationshipViewParams(item) {
+        return EntityInfo.BuildRelationshipViewParams(this.record, item);
+    }
+    BuildRelationshipViewParamsByEntityName(relatedEntityName, relatedEntityJoinField) {
+        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName, relatedEntityJoinField);
+        if (eri)
+            return this.BuildRelationshipViewParams(eri);
+        else
+            return {};
+    }
+    GetEntityRelationshipByRelatedEntityName(relatedEntityName, relatedEntityJoinField) {
+        if (this.record) {
+            const r = this.record;
+            const ret = r.EntityInfo.RelatedEntities.filter(x => x.RelatedEntity.trim().toLowerCase() === relatedEntityName.trim().toLowerCase());
+            if (ret.length > 1 && relatedEntityJoinField) {
+                const ret2 = ret.find(x => x.RelatedEntityJoinField.trim().toLowerCase() === relatedEntityJoinField.trim().toLowerCase());
+                if (ret2)
+                    return ret2;
+            }
+            else if (ret.length === 1) {
+                return ret[0];
+            }
+            else {
+                return undefined;
             }
         }
-        return 0;
+        return undefined;
     }
-    _tabMargin = 10;
-    setTabHeight() {
-        // Subscribe to the window resize event
-        this.resizeSub = fromEvent(window, 'resize').pipe(debounceTime(100) // Debounce the resize event to avoid frequent updates
-        ).subscribe(() => {
-            // Update the grid height when the window is resized
-            this.ResizeTab();
-        });
-        // Set the initial grid height with a slight delay to allow stuff to get set
-        setTimeout(() => {
-            this.ResizeTab();
-        }, 100);
-    }
-    get ContainerObjectHeight() {
-        return window.innerHeight; // default, can be overriden by subclasses
-    }
-    ResizeTab() {
-        this._tabMargin = this.GetTabTopPosition();
-        const height = this.ContainerObjectHeight - this._tabMargin - this.BottomMargin;
-        this.TabHeight = height.toString() + 'px';
-        this.GridBottomMargin = 40;
-    }
-    setupSplitterLayoutDebounce() {
-        this.splitterLayoutChangeSubject.pipe(debounceTime(300)).subscribe(() => {
-            this.setTabHeight(); // set the height of the tab first
-            // then wait through the timeout so the tab height change actually takes effect in the DOM - that's why we have the timeout
-            setTimeout(() => {
-                this.sharedService.InvokeManualResize();
-            }, 100);
-        });
+    NewRecordValues(relatedEntityName) {
+        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName);
+        if (eri)
+            return this.NewRecordValuesByEntityRelationship(eri);
+        else
+            return {};
     }
-    splitterLayoutChange() {
-        this.splitterLayoutChangeSubject.next();
+    NewRecordValuesByEntityRelationship(item) {
+        return EntityInfo.BuildRelationshipNewRecordValues(this.record, item);
+    }
+    GetRelatedEntityTabDisplayName(relatedEntityName) {
+        if (this.record) {
+            const eri = this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity === relatedEntityName);
+            if (eri)
+                return eri.DisplayName;
+        }
+        return relatedEntityName;
+    }
+    get HasRelatedEntities() {
+        if (this.record) {
+            const relatedEntities = this.record.EntityInfo.RelatedEntities;
+            return relatedEntities && relatedEntities.length > 0;
+        }
+        return false;
+    }
+    // #endregion
+    // #region Entity Info & Dependencies
+    get EntityInfo() {
+        try {
+            const r = this.record;
+            if (r)
+                return r.EntityInfo;
+            else
+                return undefined;
+        }
+        catch (e) {
+            LogError(e);
+            return undefined;
+        }
     }
     async ShowDependencies() {
-        // for now dump to console
         const md = new Metadata();
         const dep = await md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.PrimaryKey);
         console.log('Dependencies for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
         console.log(dep);
-        // if (confirm('Do you want to merge records test?') == true) {
-        //   const mergeResult = await md.MergeRecords({
-        //     EntityName: this.record.EntityInfo.Name,
-        //     SurvivingRecordID: this.record.PrimaryKey.Value,
-        //     RecordsToMerge: [4],
-        //   })
-        //   console.log(mergeResult);
-        // }
+    }
+    ShowChanges() {
+        if (this.record) {
+            const changes = this.record.GetAll(false, true);
+            const oldValues = this.record.GetAll(true, true);
+            const message = 'Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString() +
+                '\n\n' + JSON.stringify(changes, null, 2) +
+                '\n\nOld Values\n\n' + JSON.stringify(oldValues, null, 2);
+            console.log(message);
+            this.Notification.emit({ Message: message, Type: 'info', Duration: 30000 });
+        }
     }
     async GetListsCanAddTo() {
         if (!this.record) {
@@ -571,59 +455,31 @@ export class BaseFormComponent extends BaseRecordComponent {
         const dependencies = await md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.PrimaryKey);
         return dependencies;
     }
-    get EntityInfo() {
-        try {
-            const r = this.record;
-            if (r)
-                return r.EntityInfo;
-            else
-                return undefined;
-        }
-        catch (e) {
-            LogError(e);
-            return undefined;
-        }
-    }
+    // #endregion
     // #region Collapsible Section Management
-    /**
-     * Array of section information including expanded state and row counts.
-     * Initialized by subclasses via initSections().
-     */
     sections = [];
-    /**
-     * Map for fast section lookup by key.
-     */
     sectionMap = new Map();
-    /**
-     * Current search filter text for filtering sections.
-     */
     searchFilter = '';
-    /**
-     * Controls whether empty fields should be shown in read-only mode.
-     * When false (default), empty fields are hidden to reduce visual clutter.
-     */
     showEmptyFields = false;
-    /**
-     * Returns the current form context containing all form-level state.
-     * This is a computed property that creates a fresh context object on each access,
-     * ensuring child components always have the latest values.
-     */
+    /** Whether to show all validation errors on fields (set after save failure) */
+    _showValidation = false;
+    /** Validation errors from the most recent failed save attempt */
+    _validationErrors = [];
     get formContext() {
         return {
             sectionFilter: this.searchFilter,
-            showEmptyFields: this.showEmptyFields
+            showEmptyFields: this.showEmptyFields,
+            showValidation: this._showValidation,
+            validationErrors: this._validationErrors
         };
     }
-    /**
-     * Subject for debouncing filter changes.
-     */
+    /** Clears all validation display state (called on save success, cancel, end edit) */
+    clearValidationState() {
+        this._showValidation = false;
+        this._validationErrors = [];
+    }
     filterSubject = new Subject();
     filterSubscription;
-    /**
-     * Initializes the sections array. Called by subclasses in ngOnInit.
-     * Accepts either BaseFormSectionInfo instances or plain objects that will be converted.
-     * @param sections Array of section information or plain objects
-     */
     initSections(sections) {
         this.sections = sections.map(s => s instanceof BaseFormSectionInfo
             ? s
@@ -633,117 +489,93 @@ export class BaseFormComponent extends BaseRecordComponent {
             this.sectionMap.set(section.sectionKey, section);
         });
     }
-    /**
-     * Gets the section info by key.
-     * @param sectionKey The section key
-     * @returns The section info or undefined
-     */
     getSection(sectionKey) {
         return this.sectionMap.get(sectionKey);
     }
-    /**
-     * Checks if a section is expanded.
-     * Uses FormStateService for persisted state.
-     * @param sectionKey The section key
-     * @param defaultExpanded Optional default value to use when no persisted state exists
-     * @returns True if expanded, false otherwise
-     */
     IsSectionExpanded(sectionKey, defaultExpanded) {
         const entityName = this.getEntityName();
         if (entityName) {
             return this.formStateService.isSectionExpanded(entityName, sectionKey, defaultExpanded);
         }
-        // Fallback to in-memory state if no entity name
         const section = this.sectionMap.get(sectionKey);
         return section ? section.isExpanded : (defaultExpanded !== undefined ? defaultExpanded : true);
     }
-    /**
-     * Sets the expanded state of a section.
-     * Persists to User Settings via FormStateService.
-     * @param sectionKey The section key
-     * @param isExpanded The new expanded state
-     */
     SetSectionExpanded(sectionKey, isExpanded) {
         const entityName = this.getEntityName();
         if (entityName) {
             this.formStateService.setSectionExpanded(entityName, sectionKey, isExpanded);
         }
-        // Also update in-memory state for immediate UI response
         const section = this.sectionMap.get(sectionKey);
         if (section) {
             section.isExpanded = isExpanded;
         }
     }
-    /**
-     * Gets the row count for a section.
-     * @param sectionKey The section key
-     * @returns The row count or undefined
-     */
     GetSectionRowCount(sectionKey) {
         const section = this.sectionMap.get(sectionKey);
         return section?.rowCount;
     }
-    /**
-     * Sets the row count for a section.
-     * @param sectionKey The section key
-     * @param rowCount The row count
-     */
     SetSectionRowCount(sectionKey, rowCount) {
         const section = this.sectionMap.get(sectionKey);
         if (section) {
             section.rowCount = rowCount;
         }
     }
-    /**
-     * Toggles the expanded state of a section.
-     * Persists to User Settings via FormStateService.
-     * @param sectionKey The section key to toggle
-     */
+    GetSectionPanelHeight(sectionKey) {
+        const entityName = this.getEntityName();
+        if (entityName) {
+            return this.formStateService.getSectionPanelHeight(entityName, sectionKey);
+        }
+        return undefined;
+    }
+    SetSectionPanelHeight(sectionKey, height) {
+        const entityName = this.getEntityName();
+        if (entityName) {
+            this.formStateService.setSectionPanelHeight(entityName, sectionKey, height);
+        }
+    }
     toggleSection(sectionKey) {
         const entityName = this.getEntityName();
         if (entityName) {
             this.formStateService.toggleSection(entityName, sectionKey);
         }
-        // Also update in-memory state
         const section = this.sectionMap.get(sectionKey);
         if (section) {
             section.isExpanded = !section.isExpanded;
         }
     }
     /**
-     * Expands all sections.
-     * Persists to User Settings via FormStateService.
+     * Expand any sections that are visible (match the current filter) but currently collapsed.
+     * Called after filter changes so the user can immediately see matching content.
      */
+    expandMatchingSections() {
+        if (!this.collapsiblePanels)
+            return;
+        this.collapsiblePanels.forEach(panel => {
+            if (panel.IsVisible && !panel.Expanded) {
+                this.SetSectionExpanded(panel.SectionKey, true);
+            }
+        });
+    }
     expandAllSections() {
         const entityName = this.getEntityName();
         const sectionKeys = this.sections.map(s => s.sectionKey);
         if (entityName && sectionKeys.length > 0) {
             this.formStateService.expandAllSections(entityName, sectionKeys);
         }
-        // Also update in-memory state
         this.sections.forEach(section => {
             section.isExpanded = true;
         });
     }
-    /**
-     * Collapses all sections.
-     * Persists to User Settings via FormStateService.
-     */
     collapseAllSections() {
         const entityName = this.getEntityName();
         const sectionKeys = this.sections.map(s => s.sectionKey);
         if (entityName && sectionKeys.length > 0) {
             this.formStateService.collapseAllSections(entityName, sectionKeys);
         }
-        // Also update in-memory state
         this.sections.forEach(section => {
             section.isExpanded = false;
         });
     }
-    /**
-     * Gets the count of currently expanded sections.
-     * @returns Number of expanded sections
-     */
     getExpandedCount() {
         const entityName = this.getEntityName();
         const sectionKeys = this.sections.map(s => s.sectionKey);
@@ -752,42 +584,21 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
         return this.sections.filter(section => section.isExpanded).length;
     }
-    /**
-     * Gets the count of visible sections after filtering.
-     * @returns Number of sections currently visible (not hidden by search filter)
-     */
     getVisibleSectionCount() {
         if (!this.collapsiblePanels || this.collapsiblePanels.length === 0) {
             return this.sections.length;
         }
-        return this.collapsiblePanels.filter(panel => panel.isVisible).length;
+        return this.collapsiblePanels.filter(panel => panel.IsVisible).length;
     }
-    /**
-     * Gets the total count of all sections (regardless of filter).
-     * @returns Total number of sections
-     */
     getTotalSectionCount() {
         return this.sections.length;
     }
-    /**
-     * Handles filter change events from the section controls.
-     * Debounces the filter updates by 250ms to avoid excessive re-rendering during typing.
-     * @param searchTerm The search term to filter sections
-     */
     onFilterChange(searchTerm) {
         this.filterSubject.next(searchTerm);
     }
-    /**
-     * Gets the entity name for the current record (used for state persistence keys).
-     * @returns Entity name or empty string
-     */
     getEntityName() {
         return this.record?.EntityInfo?.Name || '';
     }
-    /**
-     * Gets the form width mode from persisted state.
-     * @returns Width mode ('centered' or 'full-width')
-     */
     getFormWidthMode() {
         const entityName = this.getEntityName();
         if (entityName) {
@@ -795,21 +606,12 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
         return 'centered';
     }
-    /**
-     * Sets the form width mode.
-     * Persists to User Settings via FormStateService.
-     * @param widthMode The width mode
-     */
     setFormWidthMode(widthMode) {
         const entityName = this.getEntityName();
         if (entityName) {
             this.formStateService.setWidthMode(entityName, widthMode);
         }
     }
-    /**
-     * Toggles form width mode between centered and full-width.
-     * Persists to User Settings via FormStateService.
-     */
     toggleFormWidthMode() {
         const entityName = this.getEntityName();
         if (entityName) {
@@ -818,10 +620,6 @@ export class BaseFormComponent extends BaseRecordComponent {
     }
     // #endregion
     // #region Section Ordering
-    /**
-     * Gets the current section order. Returns custom order if set, otherwise returns default order.
-     * @returns Array of section keys in display order
-     */
     getSectionOrder() {
         const entityName = this.getEntityName();
         if (entityName) {
@@ -830,32 +628,20 @@ export class BaseFormComponent extends BaseRecordComponent {
                 return customOrder;
             }
         }
-        // Return default order (order defined in sections array)
         return this.sections.map(s => s.sectionKey);
     }
-    /**
-     * Sets a custom section order.
-     * @param sectionOrder Array of section keys in the desired order
-     */
     setSectionOrder(sectionOrder) {
         const entityName = this.getEntityName();
         if (entityName) {
             this.formStateService.setSectionOrder(entityName, sectionOrder);
         }
     }
-    /**
-     * Resets section order to the default.
-     */
     resetSectionOrder() {
         const entityName = this.getEntityName();
         if (entityName) {
             this.formStateService.resetSectionOrder(entityName);
         }
     }
-    /**
-     * Checks if a custom section order is set.
-     * @returns True if custom order exists
-     */
     hasCustomSectionOrder() {
         const entityName = this.getEntityName();
         if (entityName) {
@@ -863,44 +649,98 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
         return false;
     }
-    /**
-     * Gets the CSS order value for a section.
-     * Used by CollapsiblePanelComponent to set the order style property.
-     * @param sectionKey The section key
-     * @returns The order value (0-based index)
-     */
     getSectionDisplayOrder(sectionKey) {
         const order = this.getSectionOrder();
         const index = order.indexOf(sectionKey);
-        return index >= 0 ? index : this.sections.length; // Put unknown sections at the end
+        return index >= 0 ? index : this.sections.length;
+    }
+    // #endregion
+    // #region Form Container Event Handlers
+    /**
+     * Handles navigation events from the form container and related entity grids.
+     * Relays the event upward via the Navigate @Output for the host application to handle.
+     * Generated form templates bind this as: (Navigate)="OnFormNavigate($event)"
+     */
+    OnFormNavigate(event) {
+        this.Navigate.emit(event);
     }
-    static ɵfac = function BaseFormComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    /**
+     * Handles delete requests from the form container.
+     * Emits RecordDeleted on success, RecordDeleteFailed on failure.
+     * Generated form templates bind this as: (DeleteRequested)="OnDeleteRequested()"
+     */
+    async OnDeleteRequested() {
+        if (!this.record || !this.record.IsSaved)
+            return;
+        try {
+            const result = await this.record.Delete();
+            if (result) {
+                this.Notification.emit({ Message: 'Record deleted successfully', Type: 'success', Duration: 2500 });
+                this.RecordDeleted.emit({
+                    EntityName: this.record.EntityInfo.Name,
+                    RecordId: this.record.PrimaryKey.ToString()
+                });
+            }
+            else {
+                const errorMsg = 'Error deleting record';
+                this.Notification.emit({ Message: errorMsg, Type: 'error', Duration: 5000 });
+                this.RecordDeleteFailed.emit({ EntityName: this.record.EntityInfo.Name, ErrorMessage: errorMsg });
+            }
+        }
+        catch (e) {
+            const errorMsg = 'Error deleting record: ' + e;
+            this.Notification.emit({ Message: errorMsg, Type: 'error', Duration: 5000 });
+            this.RecordDeleteFailed.emit({ EntityName: this.record.EntityInfo.Name, ErrorMessage: errorMsg });
+        }
+    }
+    /**
+     * Handles favorite toggle from the form container.
+     * Generated form templates bind this as: (FavoriteToggled)="OnFavoriteToggled()"
+     */
+    async OnFavoriteToggled() {
+        await this.SetFavoriteStatus(!this.IsFavorite);
+    }
+    /**
+     * Handles history view requests from the form container.
+     * Generated form templates bind this as: (HistoryRequested)="OnHistoryRequested()"
+     */
+    OnHistoryRequested() {
+        this.handleHistoryDialog();
+    }
+    /**
+     * Handles list management requests from the form container.
+     * Generated form templates bind this as: (ListManagementRequested)="OnListManagementRequested()"
+     */
+    OnListManagementRequested() {
+        // List management dialog is handled by the host application
+        // Subclasses can override this to implement custom list management
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵBaseFormComponent_BaseFactory; return function BaseFormComponent_Factory(__ngFactoryType__) { return (ɵBaseFormComponent_BaseFactory || (ɵBaseFormComponent_BaseFactory = i0.ɵɵgetInheritedFactory(BaseFormComponent)))(__ngFactoryType__ || BaseFormComponent); }; })();
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseFormComponent, viewQuery: function BaseFormComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(MJTabStripComponent, 5);
-            i0.ɵɵviewQuery(_c0, 5);
-            i0.ɵɵviewQuery(MJTabStripComponent, 5);
-            i0.ɵɵviewQuery(CollapsiblePanelComponent, 5);
+            i0.ɵɵviewQuery(MjCollapsiblePanelComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabComponent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.topArea = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabStrips = _t);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.collapsiblePanels = _t);
-        } }, features: [i0.ɵɵInheritDefinitionFeature] });
+        } }, outputs: { Navigate: "Navigate", Notification: "Notification", RecordSaved: "RecordSaved", RecordDeleted: "RecordDeleted", RecordSaveFailed: "RecordSaveFailed", RecordDeleteFailed: "RecordDeleteFailed", ValidationFailed: "ValidationFailed" }, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
         type: Directive
-    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], { tabComponent: [{
-            type: ViewChild,
-            args: [MJTabStripComponent, { static: false }]
-        }], tabStrips: [{
-            type: ViewChildren,
-            args: [MJTabStripComponent]
+    }], null, { Navigate: [{
+            type: Output
+        }], Notification: [{
+            type: Output
+        }], RecordSaved: [{
+            type: Output
+        }], RecordDeleted: [{
+            type: Output
+        }], RecordSaveFailed: [{
+            type: Output
+        }], RecordDeleteFailed: [{
+            type: Output
+        }], ValidationFailed: [{
+            type: Output
         }], collapsiblePanels: [{
             type: ViewChildren,
-            args: [CollapsiblePanelComponent]
-        }], topArea: [{
-            type: ViewChild,
-            args: ['topArea']
+            args: [MjCollapsiblePanelComponent]
         }] }); })();
 //# sourceMappingURL=base-form-component.js.map