@memberjunction/ng-base-forms 0.9.17 → 0.9.21

package/dist/lib/base-form-component.d.ts

@@ -4,7 +4,7 @@ import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
 import { BaseRecordComponent } from './base-record-component';
 import { SharedService } from '@memberjunction/ng-shared';
 import { ActivatedRoute, Router } from '@angular/router';
-import { TabStripComponent } from '@progress/kendo-angular-layout';
+import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import * as i0 from "@angular/core";
 export declare abstract class BaseFormComponent extends BaseRecordComponent implements AfterViewInit, OnInit, OnDestroy {
     protected elementRef: ElementRef;
@@ -16,6 +16,12 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     EditMode: boolean;
     BottomMargin: number;
     TabHeight: string;
+    /**
+     * 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: string;
     GridBottomMargin: number;
     FavoriteInitDone: boolean;
     isHistoryDialogOpen: boolean;
@@ -23,14 +29,19 @@ export declare abstract class BaseFormComponent extends BaseRecordComponent impl
     private _pendingRecords;
     private _updatingBrowserUrl;
     constructor(elementRef: ElementRef, sharedService: SharedService, router: Router, route: ActivatedRoute);
-    tabComponent: TabStripComponent;
+    tabComponent: MJTabStripComponent;
     ngOnInit(): Promise<void>;
+    topArea: ElementRef;
     ngAfterViewInit(): void;
+    /**
+     * 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(): void;
     private resizeSub;
     ngOnDestroy(): void;
     userViewGridComponents: QueryList<UserViewGridComponent>;
     protected get PendingRecords(): BaseEntity[];
-    onTabSelect(e: any): void;
+    onTabSelect(tabIndex: any): void;
     StartEditMode(): void;
     handleHistoryDialog(): void;
     RemoveFavorite(): Promise<void>;

package/dist/lib/base-form-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-form-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-form-component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-form-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-form-component.ts"],"names":[],"mappings":"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"}

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

@@ -12,10 +12,11 @@ import { Subject, debounceTime, fromEvent } from 'rxjs';
 import { EntityInfo, EntityPermissionType, Metadata, LogError } from '@memberjunction/core';
 import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
 import { BaseRecordComponent } from './base-record-component';
-import { TabStripComponent } from '@progress/kendo-angular-layout';
+import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
+const _c0 = ["topArea"];
 export class BaseFormComponent extends BaseRecordComponent {
     constructor(elementRef, sharedService, router, route) {
         super();
@@ -28,6 +29,12 @@ export class BaseFormComponent extends BaseRecordComponent {
         this.EditMode = false;
         this.BottomMargin = 10;
         this.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.
+         */
+        this.TopAreaHeight = '300px';
         this.GridBottomMargin = 100;
         this.FavoriteInitDone = false;
         this.isHistoryDialogOpen = false;
@@ -61,7 +68,7 @@ export class BaseFormComponent extends BaseRecordComponent {
                     if (tabIndex >= 0) {
                         // found the tab index, if we don't find it, do nothing
                         this.activeTabIndex = tabIndex;
-                        this.tabComponent.selectTab(tabIndex);
+                        this.tabComponent.SelectedTabIndex = tabIndex;
                     }
                 }
             }
@@ -70,6 +77,22 @@ export class BaseFormComponent extends BaseRecordComponent {
                 this.sharedService.InvokeManualResize();
             }, 250);
         });
+        this.CalcTopAreaHeight();
+        // finally, set a timer to set the SelectedTabIndex = SelectedTabIndex to force the tab to refresh
+        setTimeout(() => {
+            if (this.tabComponent)
+                this.tabComponent.SelectedTabIndex = this.activeTabIndex;
+        }, 100);
+    }
+    /**
+     * 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) {
+            const height = this.topArea.nativeElement.offsetHeight;
+            this.TopAreaHeight = `${height}px`;
+        }
     }
     ngOnDestroy() {
         if (this.resizeSub) {
@@ -79,8 +102,8 @@ export class BaseFormComponent extends BaseRecordComponent {
     get PendingRecords() {
         return this._pendingRecords;
     }
-    onTabSelect(e) {
-        this.activeTabIndex = e.index;
+    onTabSelect(tabIndex) {
+        this.activeTabIndex = tabIndex;
         this.sharedService.InvokeManualResize();
         // now that we've updated our state and re-sized, also update the browser URL to add the tab name as a query parameter to the URL
         const tabName = this._tabIndexes[this.activeTabIndex];
@@ -431,18 +454,23 @@ export class BaseFormComponent extends BaseRecordComponent {
 }
 BaseFormComponent.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute)); };
 BaseFormComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseFormComponent, viewQuery: function BaseFormComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(TabStripComponent, 5);
+        i0.ɵɵviewQuery(MJTabStripComponent, 5);
+        i0.ɵɵviewQuery(_c0, 5);
         i0.ɵɵviewQuery(UserViewGridComponent, 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.userViewGridComponents = _t);
     } }, features: [i0.ɵɵInheritDefinitionFeature] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
         type: Directive
     }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }], { tabComponent: [{
             type: ViewChild,
-            args: [TabStripComponent, { static: false }]
+            args: [MJTabStripComponent, { static: false }]
+        }], topArea: [{
+            type: ViewChild,
+            args: ['topArea']
         }], userViewGridComponents: [{
             type: ViewChildren,
             args: [UserViewGridComponent]

package/dist/lib/form-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-toolbar.d.ts","sourceRoot":"","sources":["../../src/lib/form-toolbar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAG1D,qBAca,oBAAoB;IACpB,IAAI,EAAG,iBAAiB,CAAC;IAE3B,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAHjC,oBAAoB;2CAApB,oBAAoB;CAWhC"}
+{"version":3,"file":"form-toolbar.d.ts","sourceRoot":"","sources":["../../src/lib/form-toolbar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAG1D,qBAkBa,oBAAoB;IACpB,IAAI,EAAG,iBAAiB,CAAC;IAE3B,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;yCAHjC,oBAAoB;2CAApB,oBAAoB;CAWhC"}

package/dist/lib/form-toolbar.js

@@ -3,51 +3,51 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@memberjunction/ng-record-changes";
 import * as i3 from "@progress/kendo-angular-buttons";
-function FormToolbarComponent_button_0_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function FormToolbarComponent_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.form.StartEditMode()); });
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.form.StartEditMode()); });
     i0.ɵɵtext(1, "Edit Record");
     i0.ɵɵelementEnd();
 } }
-function FormToolbarComponent_button_1_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 4);
-    i0.ɵɵlistener("mouseup", function FormToolbarComponent_button_1_Template_button_mouseup_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.saveRecord($event)); });
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵlistener("mouseup", function FormToolbarComponent_button_2_Template_button_mouseup_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.saveRecord($event)); });
     i0.ɵɵtext(1, "Save Record");
     i0.ɵɵelementEnd();
 } }
-function FormToolbarComponent_button_2_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function FormToolbarComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.form.CancelEdit()); });
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.form.CancelEdit()); });
     i0.ɵɵtext(1, "Cancel");
     i0.ɵɵelementEnd();
 } }
-function FormToolbarComponent_button_3_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_4_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function FormToolbarComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.form.RemoveFavorite()); });
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.form.RemoveFavorite()); });
     i0.ɵɵtext(1, "Remove Favorite");
     i0.ɵɵelementEnd();
 } }
-function FormToolbarComponent_button_4_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function FormToolbarComponent_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.form.MakeFavorite()); });
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.form.MakeFavorite()); });
     i0.ɵɵtext(1, "Make Favorite");
     i0.ɵɵelementEnd();
 } }
-function FormToolbarComponent_button_5_Template(rf, ctx) { if (rf & 1) {
+function FormToolbarComponent_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function FormToolbarComponent_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.form.handleHistoryDialog()); });
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.form.handleHistoryDialog()); });
     i0.ɵɵtext(1, "History");
     i0.ɵɵelementEnd();
 } }
 function FormToolbarComponent_mj_record_changes_7_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-record-changes", 5);
+    i0.ɵɵelementStart(0, "mj-record-changes", 6);
     i0.ɵɵlistener("dialogClosed", function FormToolbarComponent_mj_record_changes_7_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.form.handleHistoryDialog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -64,11 +64,12 @@ export class FormToolbarComponent {
     }
 }
 FormToolbarComponent.ɵfac = function FormToolbarComponent_Factory(t) { return new (t || FormToolbarComponent)(); };
-FormToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { form: "form" }, decls: 8, vars: 7, consts: [["kendoButton", "", 3, "click", 4, "ngIf"], ["kendoButton", "", 3, "mouseup", 4, "ngIf"], [3, "record", "dialogClosed", 4, "ngIf"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "mouseup"], [3, "record", "dialogClosed"]], template: function FormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, FormToolbarComponent_button_0_Template, 2, 0, "button", 0)(1, FormToolbarComponent_button_1_Template, 2, 0, "button", 1)(2, FormToolbarComponent_button_2_Template, 2, 0, "button", 0)(3, FormToolbarComponent_button_3_Template, 2, 0, "button", 0)(4, FormToolbarComponent_button_4_Template, 2, 0, "button", 0)(5, FormToolbarComponent_button_5_Template, 2, 0, "button", 0);
-        i0.ɵɵelement(6, "hr");
-        i0.ɵɵtemplate(7, FormToolbarComponent_mj_record_changes_7_Template, 1, 1, "mj-record-changes", 2);
+FormToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { form: "form" }, decls: 8, vars: 7, consts: [[1, "toolbar-container"], ["kendoButton", "", 3, "click", 4, "ngIf"], ["kendoButton", "", 3, "mouseup", 4, "ngIf"], [3, "record", "dialogClosed", 4, "ngIf"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "mouseup"], [3, "record", "dialogClosed"]], template: function FormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, FormToolbarComponent_button_1_Template, 2, 0, "button", 1)(2, FormToolbarComponent_button_2_Template, 2, 0, "button", 2)(3, FormToolbarComponent_button_3_Template, 2, 0, "button", 1)(4, FormToolbarComponent_button_4_Template, 2, 0, "button", 1)(5, FormToolbarComponent_button_5_Template, 2, 0, "button", 1)(6, FormToolbarComponent_button_6_Template, 2, 0, "button", 1)(7, FormToolbarComponent_mj_record_changes_7_Template, 1, 1, "mj-record-changes", 3);
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
+        i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", !ctx.form.EditMode && ctx.form.UserCanEdit);
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.form.EditMode);
@@ -80,22 +81,23 @@ FormToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormTo
         i0.ɵɵproperty("ngIf", ctx.form.FavoriteInitDone && !ctx.form.IsFavorite);
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.form.EntityInfo == null ? null : ctx.form.EntityInfo.TrackRecordChanges);
-        i0.ɵɵadvance(2);
+        i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.form.isHistoryDialogOpen);
-    } }, dependencies: [i1.NgIf, i2.RecordChangesComponent, i3.ButtonComponent], styles: ["button[_ngcontent-%COMP%] { margin-right: 10px; }"] });
+    } }, dependencies: [i1.NgIf, i2.RecordChangesComponent, i3.ButtonComponent], styles: ["button[_ngcontent-%COMP%] { margin-right: 10px; }", ".toolbar-container[_ngcontent-%COMP%] { border-bottom: solid 1px lightgray; padding-bottom: 10px; margin-bottom: 5px; }"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormToolbarComponent, [{
         type: Component,
         args: [{ selector: 'mj-form-toolbar', template: `
-        <button kendoButton *ngIf="!form.EditMode && form.UserCanEdit" (click)="form.StartEditMode()">Edit Record</button> 
-        <button kendoButton *ngIf="form.EditMode" (mouseup)="saveRecord($event)">Save Record</button> 
-        <button kendoButton *ngIf="form.EditMode" (click)="form.CancelEdit()">Cancel</button> 
-        <button kendoButton *ngIf="form.FavoriteInitDone && form.IsFavorite" (click)="form.RemoveFavorite()">Remove Favorite</button> 
-        <button kendoButton *ngIf="form.FavoriteInitDone && !form.IsFavorite" (click)="form.MakeFavorite()">Make Favorite</button> 
-        <button kendoButton *ngIf="form.EntityInfo?.TrackRecordChanges" (click)="form.handleHistoryDialog()">History</button> 
-        <hr />
-        <mj-record-changes *ngIf="form.isHistoryDialogOpen" [record]="form.record" (dialogClosed)="form.handleHistoryDialog()"></mj-record-changes>
-    `, styles: ["button { margin-right: 10px; }"] }]
+        <div class="toolbar-container">
+            <button kendoButton *ngIf="!form.EditMode && form.UserCanEdit" (click)="form.StartEditMode()">Edit Record</button> 
+            <button kendoButton *ngIf="form.EditMode" (mouseup)="saveRecord($event)">Save Record</button> 
+            <button kendoButton *ngIf="form.EditMode" (click)="form.CancelEdit()">Cancel</button> 
+            <button kendoButton *ngIf="form.FavoriteInitDone && form.IsFavorite" (click)="form.RemoveFavorite()">Remove Favorite</button> 
+            <button kendoButton *ngIf="form.FavoriteInitDone && !form.IsFavorite" (click)="form.MakeFavorite()">Make Favorite</button> 
+            <button kendoButton *ngIf="form.EntityInfo?.TrackRecordChanges" (click)="form.handleHistoryDialog()">History</button> 
+            <mj-record-changes *ngIf="form.isHistoryDialogOpen" [record]="form.record" (dialogClosed)="form.handleHistoryDialog()"></mj-record-changes>
+        </div>
+    `, styles: ["button { margin-right: 10px; }", ".toolbar-container { border-bottom: solid 1px lightgray; padding-bottom: 10px; margin-bottom: 5px; }"] }]
     }], null, { form: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormToolbarComponent, { className: "FormToolbarComponent", filePath: "src\\lib\\form-toolbar.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormToolbarComponent, { className: "FormToolbarComponent", filePath: "src\\lib\\form-toolbar.ts", lineNumber: 23 }); })();

package/dist/lib/section-loader-component.d.ts

@@ -1,18 +1,21 @@
-import { OnDestroy, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { OnDestroy, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { BaseEntity } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare class SectionLoaderComponent implements AfterViewInit, OnDestroy, OnChanges {
+    private cdr;
     Entity: string;
     Section: string;
     record: BaseEntity;
     EditMode: boolean;
+    LoadComplete: EventEmitter<void>;
     container: ViewContainerRef;
     private _sectionObj;
+    constructor(cdr: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     private loadComponent;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SectionLoaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SectionLoaderComponent, "mj-form-section", never, { "Entity": { "alias": "Entity"; "required": false; }; "Section": { "alias": "Section"; "required": false; }; "record": { "alias": "record"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionLoaderComponent, "mj-form-section", never, { "Entity": { "alias": "Entity"; "required": false; }; "Section": { "alias": "Section"; "required": false; }; "record": { "alias": "record"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, { "LoadComplete": "LoadComplete"; }, never, never, false, never>;
 }
 //# sourceMappingURL=section-loader-component.d.ts.map

package/dist/lib/section-loader-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section-loader-component.d.ts","sourceRoot":"","sources":["../../src/lib/section-loader-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAa,gBAAgB,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGlI,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;;AAElD,qBAIa,sBAAuB,YAAW,aAAa,EAAE,SAAS,EAAE,SAAS;IACrE,MAAM,EAAG,MAAM,CAAC;IAChB,OAAO,EAAG,MAAM,CAAC;IACjB,MAAM,EAAG,UAAU,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAS;IAEiB,SAAS,EAAG,gBAAgB,CAAC;IAEjF,OAAO,CAAC,WAAW,CAAyC;IAE5D,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAOzC,eAAe,IAAI,IAAI;IAOvB,OAAO,CAAC,aAAa;IAWrB,WAAW;yCAnCF,sBAAsB;2CAAtB,sBAAsB;CAuClC"}
+{"version":3,"file":"section-loader-component.d.ts","sourceRoot":"","sources":["../../src/lib/section-loader-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAa,gBAAgB,EAAE,aAAa,EAAE,SAAS,EAAE,aAAa,EAAU,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG3K,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;;AAElD,qBAIa,sBAAuB,YAAW,aAAa,EAAE,SAAS,EAAE,SAAS;IAUlE,OAAO,CAAC,GAAG;IATd,MAAM,EAAG,MAAM,CAAC;IAChB,OAAO,EAAG,MAAM,CAAC;IACjB,MAAM,EAAG,UAAU,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAS;IACzB,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,CAA4B;IAElB,SAAS,EAAG,gBAAgB,CAAC;IAEjF,OAAO,CAAC,WAAW,CAAyC;gBACxC,GAAG,EAAE,iBAAiB;IAE1C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAOzC,eAAe,IAAI,IAAI;IAOvB,OAAO,CAAC,aAAa;IAarB,WAAW;yCAvCF,sBAAsB;2CAAtB,sBAAsB;CA2ClC"}

package/dist/lib/section-loader-component.js

@@ -1,12 +1,14 @@
-import { Component, Input, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, Input, ViewChild, ViewContainerRef, Output, EventEmitter } from '@angular/core';
 import { MJGlobal } from '@memberjunction/global';
 import { BaseFormSectionComponent } from './base-form-section-component';
 import * as i0 from "@angular/core";
 const _c0 = ["container"];
-function SectionLoaderComponent_ng_template_0_Template(rf, ctx) { }
+function SectionLoaderComponent_ng_template_1_Template(rf, ctx) { }
 export class SectionLoaderComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.EditMode = false;
+        this.LoadComplete = new EventEmitter();
         this._sectionObj = null;
     }
     ngOnChanges(changes) {
@@ -29,29 +31,33 @@ export class SectionLoaderComponent {
             this._sectionObj = componentRef.instance;
             this._sectionObj.record = this.record;
             this._sectionObj.EditMode = this.EditMode;
+            this.cdr.detectChanges(); // Manually trigger change detection so that the call below to LoadComplete.emit() will occur after DOM is updated
         }
+        this.LoadComplete.emit();
     }
     ngOnDestroy() {
         // Don't forget to cleanup dynamically created components
         this.container.clear();
     }
 }
-SectionLoaderComponent.ɵfac = function SectionLoaderComponent_Factory(t) { return new (t || SectionLoaderComponent)(); };
+SectionLoaderComponent.ɵfac = function SectionLoaderComponent_Factory(t) { return new (t || SectionLoaderComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 SectionLoaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionLoaderComponent, selectors: [["mj-form-section"]], viewQuery: function SectionLoaderComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
-    } }, inputs: { Entity: "Entity", Section: "Section", record: "record", EditMode: "EditMode" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [["container", ""]], template: function SectionLoaderComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, SectionLoaderComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    } }, inputs: { Entity: "Entity", Section: "Section", record: "record", EditMode: "EditMode" }, outputs: { LoadComplete: "LoadComplete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 0, consts: [[1, "form-section"], ["container", ""]], template: function SectionLoaderComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, SectionLoaderComponent_ng_template_1_Template, 0, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        i0.ɵɵelementEnd();
     } }, encapsulation: 2 });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SectionLoaderComponent, [{
         type: Component,
         args: [{
                 selector: 'mj-form-section',
-                template: `<ng-template #container></ng-template>`
+                template: `<div class="form-section"><ng-template #container></ng-template></div>`
             }]
-    }], null, { Entity: [{
+    }], () => [{ type: i0.ChangeDetectorRef }], { Entity: [{
             type: Input
         }], Section: [{
             type: Input
@@ -59,6 +65,8 @@ SectionLoaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Sect
             type: Input
         }], EditMode: [{
             type: Input
+        }], LoadComplete: [{
+            type: Output
         }], container: [{
             type: ViewChild,
             args: ['container', { read: ViewContainerRef }]

package/dist/module.d.ts

@@ -3,12 +3,12 @@ import * as i1 from "./lib/section-loader-component";
 import * as i2 from "./lib/form-toolbar";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/forms";
-import * as i5 from "@progress/kendo-angular-layout";
+import * as i5 from "@memberjunction/ng-tabstrip";
 import * as i6 from "@memberjunction/ng-record-changes";
 import * as i7 from "@progress/kendo-angular-buttons";
 export declare class BaseFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.TabStripModule, typeof i6.RecordChangesModule, typeof i7.ButtonsModule], [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.MJTabStripModule, typeof i6.RecordChangesModule, typeof i7.ButtonsModule], [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BaseFormsModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;AAYA,qBAiBa,eAAe;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAAI"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":";;;;;;;;AAcA,qBAiBa,eAAe;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAAI"}

package/dist/module.js

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-// Kendo UI Angular imports
 import { FormsModule } from '@angular/forms';
-import { TabStripModule } from '@progress/kendo-angular-layout';
+// Kendo UI Angular imports
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { RecordChangesModule } from '@memberjunction/ng-record-changes';
+import { MJTabStripModule } from '@memberjunction/ng-tabstrip';
 import { SectionLoaderComponent } from './lib/section-loader-component';
 import { FormToolbarComponent } from './lib/form-toolbar';
-import { RecordChangesModule } from '@memberjunction/ng-record-changes';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 export class BaseFormsModule {
 }
@@ -14,7 +14,7 @@ BaseFormsModule.ɵfac = function BaseFormsModule_Factory(t) { return new (t || B
 BaseFormsModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: BaseFormsModule });
 BaseFormsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
         FormsModule,
-        TabStripModule,
+        MJTabStripModule,
         RecordChangesModule,
         ButtonsModule] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormsModule, [{
@@ -27,7 +27,7 @@ BaseFormsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMo
                 imports: [
                     CommonModule,
                     FormsModule,
-                    TabStripModule,
+                    MJTabStripModule,
                     RecordChangesModule,
                     ButtonsModule
                 ],
@@ -40,7 +40,7 @@ BaseFormsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonMo
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(BaseFormsModule, { declarations: [SectionLoaderComponent,
         FormToolbarComponent], imports: [CommonModule,
         FormsModule,
-        TabStripModule,
+        MJTabStripModule,
         RecordChangesModule,
         ButtonsModule], exports: [SectionLoaderComponent,
         FormToolbarComponent] }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-base-forms",
-  "version": "0.9.17",
+  "version": "0.9.21",
   "description": "MemberJunction: Angular Base Form Components",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -25,12 +25,10 @@
     "@angular/router": "~17.2.2"
   },
   "dependencies": {
-    "@memberjunction/global": "^0.9.167",
-    "@memberjunction/core": "^0.9.185",
-    "@memberjunction/ng-shared": "^0.9.48",
-    "@memberjunction/ng-record-changes": "^0.9.130",
-    "@memberjunction/ng-user-view-grid": "^0.9.231",
-    "@progress/kendo-angular-layout": "~15.1.0",
+    "@memberjunction/global": "^0.9.168",
+    "@memberjunction/core": "^0.9.186",
+    "@memberjunction/ng-record-changes": "^0.9.133",
+    "@memberjunction/ng-tabstrip": "^0.9.9",
     "@progress/kendo-angular-buttons": "~15.1.0",
     "tslib": "^2.3.0"
   },