@memberjunction/ng-explorer-core 0.9.2

package/dist/lib/generic/dynamic-report.js

@@ -0,0 +1,399 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Input, ViewChild } from '@angular/core';
+import { HtmlListType } from '../shared/shared.service';
+import { Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../shared/shared.service";
+import * as i2 from "@angular/router";
+const _c0 = ["theGrid"];
+const _c1 = ["theChart"];
+const _c2 = ["tabStrip"];
+function DynamicReportComponent_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵlistener("click", function DynamicReportComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.doCreateReport()); });
+    i0.ɵɵtext(1, "Create Report");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵlistener("click", function DynamicReportComponent_div_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.clickMatchingReport()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate2("Report: ", ctx_r1.matchingReportName, " (ID: ", ctx_r1.matchingReportID, ") Created From This Message");
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-icon", 12);
+    i0.ɵɵelementStart(1, "span", 13);
+    i0.ɵɵtext(2, "Chart");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-dynamic-chart", 14, 15);
+} if (rf & 2) {
+    const ctx_r16 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("SkipData", ctx_r16.SkipData);
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 11);
+    i0.ɵɵtemplate(1, DynamicReportComponent_kendo_tabstrip_tab_5_ng_template_1_Template, 3, 0, "ng-template", 7);
+    i0.ɵɵtemplate(2, DynamicReportComponent_kendo_tabstrip_tab_5_ng_template_2_Template, 2, 1, "ng-template", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("selected", ctx_r3.isTabSelected(0));
+} }
+function DynamicReportComponent_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-icon", 16);
+    i0.ɵɵelementStart(1, "span", 13);
+    i0.ɵɵtext(2, "Table");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_ng_template_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-dynamic-grid", 14, 17);
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("SkipData", ctx_r5.SkipData);
+} }
+function DynamicReportComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 18);
+    i0.ɵɵelementStart(1, "span", 13);
+    i0.ɵɵtext(2, "Analysis");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 19);
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("innerHTML", ctx_r7.createAnalysisHtml(), i0.ɵɵsanitizeHtml);
+} }
+function DynamicReportComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-icon", 20);
+    i0.ɵɵelementStart(1, "span", 13);
+    i0.ɵɵtext(2, "Explanation");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r9 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate((ctx_r9.SkipData == null ? null : ctx_r9.SkipData.ReportExplanation) || "No Explanation Provided");
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-icon", 21);
+    i0.ɵɵelementStart(1, "span", 13);
+    i0.ɵɵtext(2, "Details");
+    i0.ɵɵelementEnd();
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "span");
+    i0.ɵɵtext(2, "Skip Conversation ID:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r21 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r21.ConversationID);
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "span");
+    i0.ɵɵtext(2, "Skip Conversation Detail ID:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r22 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r22.ConversationDetailID);
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "span")(2, "b");
+    i0.ɵɵtext(3, "SQL:");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "span")(5, "textarea", 22);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(7, DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_div_7_Template, 5, 1, "div", 23);
+    i0.ɵɵtemplate(8, DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_div_8_Template, 5, 1, "div", 23);
+} if (rf & 2) {
+    const ctx_r20 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("disabled", true)("fillHeight", false);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate(ctx_r20.SkipData == null ? null : ctx_r20.SkipData.SQLResults == null ? null : ctx_r20.SkipData.SQLResults.sql);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r20.ConversationID !== null);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", ctx_r20.ConversationDetailID !== null);
+} }
+function DynamicReportComponent_kendo_tabstrip_tab_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 11);
+    i0.ɵɵtemplate(1, DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_1_Template, 3, 0, "ng-template", 7);
+    i0.ɵɵtemplate(2, DynamicReportComponent_kendo_tabstrip_tab_15_ng_template_2_Template, 9, 5, "ng-template", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r10 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("selected", ctx_r10.isTabSelected(4));
+} }
+// This component is used for dynamically rendering report data, it is wrapped by app-single-report which gets
+// info from the database. This can also be used directly to render a dynamic report that is NOT saved in the DB
+// which is what Skip does in its conversational UI
+export class DynamicReportComponent {
+    get SkipData() {
+        return this._skipData;
+    }
+    set SkipData(d) {
+        this._skipData = d;
+        if (d && !this._loaded)
+            this.ngAfterViewInit();
+    }
+    constructor(sharedService, router) {
+        this.sharedService = sharedService;
+        this.router = router;
+        this.ShowDetailsTab = false;
+        this.ShowCreateReportButton = false;
+        this.ConversationID = null;
+        this.ConversationName = null;
+        this.ConversationDetailID = null;
+        this.matchingReportID = null;
+        this.matchingReportName = null;
+        this._loaded = false;
+        this.activeTabIndex = 0;
+    }
+    ngAfterViewInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.SkipData) {
+                this._loaded = true;
+                if (this.ShowCreateReportButton) {
+                    // check to see if a report has been created that is linked to this ConvoID/ConvoDetailID
+                    // if so don't allow the user to create another report, show a link to the existing one 
+                    const rv = new RunView();
+                    const matchingReports = yield rv.RunView({
+                        EntityName: 'Reports',
+                        ExtraFilter: 'ConversationID = ' + this.ConversationID + ' AND ConversationDetailID = ' + this.ConversationDetailID
+                    });
+                    if (matchingReports && matchingReports.Success && matchingReports.RowCount > 0) {
+                        const item = matchingReports.Results.at(0);
+                        this.matchingReportID = item === null || item === void 0 ? void 0 : item.ID;
+                        this.matchingReportName = item === null || item === void 0 ? void 0 : item.Name;
+                    }
+                }
+            }
+        });
+    }
+    clickMatchingReport() {
+        if (this.matchingReportID !== null && this.matchingReportID > 0) {
+            // navigate to the report
+            this.router.navigate(['resource', 'report', this.matchingReportID]);
+        }
+    }
+    onTabSelect(e) {
+        e.preventDefault();
+        this.activeTabIndex = e.index;
+        this.sharedService.InvokeManualResize(100);
+    }
+    isTabSelected(index) {
+        const offset = !this.IsChart ? 1 : 0;
+        return this.activeTabIndex === (index - offset);
+    }
+    get Columns() {
+        var _a;
+        return ((_a = this.SkipData) === null || _a === void 0 ? void 0 : _a.SQLResults.columns) || [];
+    }
+    get IsChart() {
+        if (!this.SkipData)
+            return false;
+        return this.SkipData.DisplayType.trim().toLowerCase() !== 'table';
+    }
+    get IsTable() {
+        if (!this.SkipData)
+            return false;
+        return this.SkipData.DisplayType.trim().toLowerCase() === 'table';
+    }
+    createAnalysisHtml() {
+        var _a;
+        const analysis = (_a = this.SkipData) === null || _a === void 0 ? void 0 : _a.Analysis;
+        if (analysis && analysis.length > 0) {
+            return this.sharedService.ConvertMarkdownStringToHtmlList(HtmlListType.Unordered, analysis);
+        }
+        else
+            return '<h2>No Analysis Provided</h2>';
+    }
+    doCreateReport() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.SkipData || !this.ConversationID || !this.ConversationName || !this.ConversationDetailID) {
+                throw new Error('Must set SkipData, ConversationID, ConversationName, and ConversationDetailID to enable saving report');
+            }
+            else {
+                if (confirm('Do you want to save this report?')) {
+                    const md = new Metadata();
+                    const report = yield md.GetEntityObject('Reports');
+                    report.NewRecord();
+                    report.Name = this.SkipData.ReportTitle;
+                    report.Description = this.SkipData.ReportExplanation ? this.SkipData.ReportExplanation : '';
+                    report.ConversationID = this.ConversationID;
+                    report.ConversationDetailID = this.ConversationDetailID;
+                    report.ReportSQL = this.SkipData.SQLResults.sql;
+                    report.ReportConfiguration = JSON.stringify(this.SkipData);
+                    report.SharingScope = 'None';
+                    report.UserID = md.CurrentUser.ID;
+                    if (yield report.Save()) {
+                        this.matchingReportID = report.ID;
+                        this.matchingReportName = report.Name;
+                        this.sharedService.CreateSimpleNotification(`Report "${report.Name}"Saved`, 'success', 2500);
+                    }
+                    else
+                        this.sharedService.CreateSimpleNotification('Error saving report', 'error', 2500);
+                }
+            }
+        });
+    }
+}
+DynamicReportComponent.ɵfac = function DynamicReportComponent_Factory(t) { return new (t || DynamicReportComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
+DynamicReportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicReportComponent, selectors: [["app-dynamic-report"]], viewQuery: function DynamicReportComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+        i0.ɵɵviewQuery(_c1, 5);
+        i0.ɵɵviewQuery(_c2, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.theGrid = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.theChart = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabStrip = _t.first);
+    } }, inputs: { ShowDetailsTab: "ShowDetailsTab", ShowCreateReportButton: "ShowCreateReportButton", ConversationID: "ConversationID", ConversationName: "ConversationName", ConversationDetailID: "ConversationDetailID", SkipData: "SkipData" }, decls: 16, vars: 12, consts: [["mjFillContainer", ""], ["kendoButton", "", "class", "create-report-button", 3, "click", 4, "ngIf"], ["class", "report-link", 3, "click", 4, "ngIf"], ["mjFillContainer", "", 1, "report-tabstrip", 3, "keepTabContent", "animate", "tabSelect"], ["tabStrip", ""], [3, "selected", 4, "ngIf"], [3, "closable", "selected"], ["kendoTabTitle", ""], ["kendoTabContent", "", "class", "report-tab-contents"], ["kendoButton", "", 1, "create-report-button", 3, "click"], [1, "report-link", 3, "click"], [3, "selected"], ["name", "graph"], [1, "report-tab-title"], ["mjFillContainer", "", 3, "SkipData"], ["theChart", ""], ["name", "table"], ["theGrid", ""], ["src", "assets/Skip - Mark Only - Small.png", 1, "avatar", 2, "height", "16px", "width", "16px"], ["mjFillContainer", "", 3, "innerHTML"], ["name", "file"], ["name", "page-properties"], ["mjFillContainer", "", 3, "disabled", "fillHeight"], [4, "ngIf"]], template: function DynamicReportComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, DynamicReportComponent_button_1_Template, 2, 0, "button", 1);
+        i0.ɵɵtemplate(2, DynamicReportComponent_div_2_Template, 2, 2, "div", 2);
+        i0.ɵɵelementStart(3, "kendo-tabstrip", 3, 4);
+        i0.ɵɵlistener("tabSelect", function DynamicReportComponent_Template_kendo_tabstrip_tabSelect_3_listener($event) { return ctx.onTabSelect($event); });
+        i0.ɵɵtemplate(5, DynamicReportComponent_kendo_tabstrip_tab_5_Template, 3, 1, "kendo-tabstrip-tab", 5);
+        i0.ɵɵelementStart(6, "kendo-tabstrip-tab", 6);
+        i0.ɵɵtemplate(7, DynamicReportComponent_ng_template_7_Template, 3, 0, "ng-template", 7);
+        i0.ɵɵtemplate(8, DynamicReportComponent_ng_template_8_Template, 2, 1, "ng-template", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "kendo-tabstrip-tab", 6);
+        i0.ɵɵtemplate(10, DynamicReportComponent_ng_template_10_Template, 3, 0, "ng-template", 7);
+        i0.ɵɵtemplate(11, DynamicReportComponent_ng_template_11_Template, 1, 1, "ng-template", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "kendo-tabstrip-tab", 6);
+        i0.ɵɵtemplate(13, DynamicReportComponent_ng_template_13_Template, 3, 0, "ng-template", 7);
+        i0.ɵɵtemplate(14, DynamicReportComponent_ng_template_14_Template, 2, 1, "ng-template", 8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(15, DynamicReportComponent_kendo_tabstrip_tab_15_Template, 3, 1, "kendo-tabstrip-tab", 5);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.ShowCreateReportButton && !ctx.matchingReportID);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.matchingReportID !== null);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("keepTabContent", true)("animate", false);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.IsChart);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("closable", false)("selected", ctx.isTabSelected(1));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("closable", false)("selected", ctx.isTabSelected(2));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("closable", false)("selected", ctx.isTabSelected(3));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", ctx.ShowDetailsTab);
+    } }, styles: [".report-tab-title[_ngcontent-%COMP%] { margin-left: 10px;}", ".create-report-button[_ngcontent-%COMP%] { \n        margin-bottom: 10px;\n        margin-top: 10px;\n      }", ".report-link[_ngcontent-%COMP%] {\n        margin-top: 10px;\n        margin-bottom: 10px;\n        cursor: pointer;\n        color: blue;\n        font-weight: bold;\n      }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicReportComponent, [{
+        type: Component,
+        args: [{ selector: 'app-dynamic-report', template: `
+<div mjFillContainer> 
+  <button kendoButton *ngIf="ShowCreateReportButton && !matchingReportID" (click)="doCreateReport()" class="create-report-button">Create Report</button>
+  <div *ngIf="matchingReportID!==null" class="report-link" (click)="clickMatchingReport()">Report: {{matchingReportName}} (ID: {{matchingReportID}}) Created From This Message</div>
+  <kendo-tabstrip mjFillContainer [keepTabContent]="true" [animate]="false" class="report-tabstrip" (tabSelect)="onTabSelect($event)" #tabStrip>
+      <kendo-tabstrip-tab *ngIf="IsChart" [selected]="isTabSelected(0)">
+          <ng-template kendoTabTitle>
+            <kendo-icon name="graph" ></kendo-icon>
+            <span class="report-tab-title">Chart</span>
+          </ng-template>
+          <ng-template kendoTabContent class="report-tab-contents">
+              <app-dynamic-chart mjFillContainer #theChart [SkipData]="SkipData">
+              </app-dynamic-chart>
+          </ng-template>
+      </kendo-tabstrip-tab>  
+      <kendo-tabstrip-tab [closable]="false" [selected]="isTabSelected(1)">
+          <ng-template kendoTabTitle>
+            <kendo-icon name="table"></kendo-icon>
+            <span class="report-tab-title">Table</span>
+          </ng-template>
+          <ng-template kendoTabContent class="report-tab-contents">
+              <app-dynamic-grid mjFillContainer #theGrid [SkipData]="SkipData">
+              </app-dynamic-grid>
+          </ng-template>
+      </kendo-tabstrip-tab>  
+      <kendo-tabstrip-tab [closable]="false" [selected]="isTabSelected(2)">
+          <ng-template kendoTabTitle>
+              <img src="assets/Skip - Mark Only - Small.png" class="avatar" style="height:16px;width:16px;" />
+              <span class="report-tab-title">Analysis</span>
+          </ng-template>
+          <ng-template kendoTabContent class="report-tab-contents">
+              <div mjFillContainer [innerHTML]="createAnalysisHtml()"></div>
+          </ng-template>
+      </kendo-tabstrip-tab>  
+      <kendo-tabstrip-tab [closable]="false" [selected]="isTabSelected(3)">
+          <ng-template kendoTabTitle>
+            <kendo-icon name="file"></kendo-icon>
+            <span class="report-tab-title">Explanation</span>
+          </ng-template>
+          <ng-template kendoTabContent class="report-tab-contents">
+              <div mjFillContainer>{{SkipData?.ReportExplanation || 'No Explanation Provided'}}</div>
+          </ng-template>
+      </kendo-tabstrip-tab>  
+      <kendo-tabstrip-tab *ngIf="ShowDetailsTab" [selected]="isTabSelected(4)">
+          <ng-template kendoTabTitle>
+            <kendo-icon name="page-properties"></kendo-icon>
+            <span class="report-tab-title">Details</span>
+          </ng-template>
+          <ng-template kendoTabContent class="report-tab-contents">
+              <div><span><b>SQL:</b></span><span><textarea [disabled]="true" mjFillContainer [fillHeight]="false">{{SkipData?.SQLResults?.sql}}</textarea></span></div>
+              <div *ngIf="ConversationID!==null"><span>Skip Conversation ID:</span><span>{{ConversationID}}</span></div>
+              <div *ngIf="ConversationDetailID!==null"><span>Skip Conversation Detail ID:</span><span>{{ConversationDetailID}}</span></div>
+          </ng-template>
+      </kendo-tabstrip-tab>  
+  </kendo-tabstrip>
+</div>
+`, styles: [".report-tab-title { margin-left: 10px;}", ".create-report-button { \n        margin-bottom: 10px;\n        margin-top: 10px;\n      }", ".report-link {\n        margin-top: 10px;\n        margin-bottom: 10px;\n        cursor: pointer;\n        color: blue;\n        font-weight: bold;\n      }"] }]
+    }], function () { return [{ type: i1.SharedService }, { type: i2.Router }]; }, { ShowDetailsTab: [{
+            type: Input
+        }], ShowCreateReportButton: [{
+            type: Input
+        }], ConversationID: [{
+            type: Input
+        }], ConversationName: [{
+            type: Input
+        }], ConversationDetailID: [{
+            type: Input
+        }], SkipData: [{
+            type: Input
+        }], theGrid: [{
+            type: ViewChild,
+            args: ['theGrid', { static: false }]
+        }], theChart: [{
+            type: ViewChild,
+            args: ['theChart', { static: false }]
+        }], tabStrip: [{
+            type: ViewChild,
+            args: ['tabStrip', { static: false }]
+        }] }); })();

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

@@ -0,0 +1,7 @@
+import { BaseFormComponent } from './base-form-component';
+import * as i0 from "@angular/core";
+export declare class FormToolbarComponent {
+    form: BaseFormComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormToolbarComponent, "mj-form-toolbar", never, { "form": "form"; }, {}, never, never, false, never>;
+}

package/dist/lib/generic/form-toolbar.js

@@ -0,0 +1,98 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@memberjunction/ng-record-changes";
+function FormToolbarComponent_button_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    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.ɵɵtext(1, "Edit Record");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.form.SaveRecord(true)); });
+    i0.ɵɵtext(1, "Save Record");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    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.ɵɵtext(1, "Cancel");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    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.ɵɵtext(1, "Remove Favorite");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    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.ɵɵtext(1, "Make Favorite");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    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.ɵɵ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", 3);
+    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) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("record", ctx_r6.form.record);
+} }
+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"], [3, "record", "dialogClosed", 4, "ngIf"], ["kendoButton", "", 3, "click"], [3, "record", "dialogClosed"]], template: function FormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, FormToolbarComponent_button_0_Template, 2, 0, "button", 0);
+        i0.ɵɵtemplate(1, FormToolbarComponent_button_1_Template, 2, 0, "button", 0);
+        i0.ɵɵtemplate(2, FormToolbarComponent_button_2_Template, 2, 0, "button", 0);
+        i0.ɵɵtemplate(3, FormToolbarComponent_button_3_Template, 2, 0, "button", 0);
+        i0.ɵɵtemplate(4, FormToolbarComponent_button_4_Template, 2, 0, "button", 0);
+        i0.ɵɵtemplate(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", 1);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", !ctx.form.EditMode && ctx.form.UserCanEdit);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.form.EditMode);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.form.EditMode);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.form.FavoriteInitDone && ctx.form.IsFavorite);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.form.FavoriteInitDone && !ctx.form.IsFavorite);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.form.EntityInfo == null ? null : ctx.form.EntityInfo.TrackRecordChanges);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.form.isHistoryDialogOpen);
+    } }, dependencies: [i1.NgIf, i2.Button, i3.RecordChangesComponent], styles: ["button[_ngcontent-%COMP%] { margin-right: 10px; }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormToolbarComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-form-toolbar', template: `
+        <button kendoButton *ngIf="!this.form.EditMode && this.form.UserCanEdit" (click)="this.form.StartEditMode()">Edit Record</button> 
+        <button kendoButton *ngIf="this.form.EditMode" (click)="this.form.SaveRecord(true)">Save Record</button> 
+        <button kendoButton *ngIf="this.form.EditMode" (click)="this.form.CancelEdit()">Cancel</button> 
+        <button kendoButton *ngIf="this.form.FavoriteInitDone && this.form.IsFavorite" (click)="this.form.RemoveFavorite()">Remove Favorite</button> 
+        <button kendoButton *ngIf="this.form.FavoriteInitDone && !this.form.IsFavorite" (click)="this.form.MakeFavorite()">Make Favorite</button> 
+        <button kendoButton *ngIf="this.form.EntityInfo?.TrackRecordChanges" (click)="this.form.handleHistoryDialog()">History</button> 
+        <hr />
+        <mj-record-changes *ngIf="this.form.isHistoryDialogOpen" [record]="this.form.record" (dialogClosed)="this.form.handleHistoryDialog()"></mj-record-changes>
+    `, styles: ["button { margin-right: 10px; }"] }]
+    }], null, { form: [{
+            type: Input
+        }] }); })();

package/dist/lib/generic/resource-container-component.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { SharedService } from '../shared/shared.service';
+import { Container } from '@memberjunction/ng-container-directives';
+import { BaseEntity } from '@memberjunction/core';
+import { ResourceData } from './base-resource-component';
+import * as i0 from "@angular/core";
+export declare class ResourceContainerComponent implements OnChanges {
+    sharedService: SharedService;
+    Data: ResourceData;
+    isVisible: boolean;
+    ResourceRecordSaved: EventEmitter<BaseEntity>;
+    ContentLoadingStarted: EventEmitter<ResourceContainerComponent>;
+    ContentLoadingComplete: EventEmitter<ResourceContainerComponent>;
+    private _loadStarted;
+    get LoadStarted(): boolean;
+    private _loadComplete;
+    get LoadComplete(): boolean;
+    resourceContainer: Container;
+    private _loaded;
+    constructor(sharedService: SharedService);
+    ngOnChanges(changes: SimpleChanges): void;
+    loadComponent(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResourceContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ResourceContainerComponent, "app-resource", never, { "Data": "Data"; "isVisible": "isVisible"; }, { "ResourceRecordSaved": "ResourceRecordSaved"; "ContentLoadingStarted": "ContentLoadingStarted"; "ContentLoadingComplete": "ContentLoadingComplete"; }, never, never, false, never>;
+}

package/dist/lib/generic/resource-container-component.js

@@ -0,0 +1,103 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Container } from '@memberjunction/ng-container-directives';
+import { LogError } from '@memberjunction/core';
+import { MJGlobal } from '@memberjunction/global';
+import { BaseResourceComponent } from './base-resource-component';
+import * as i0 from "@angular/core";
+import * as i1 from "../shared/shared.service";
+import * as i2 from "@memberjunction/ng-container-directives";
+function ResourceContainerComponent_ng_template_0_Template(rf, ctx) { }
+export class ResourceContainerComponent {
+    get LoadStarted() {
+        return this._loadStarted;
+    }
+    get LoadComplete() {
+        return this._loadComplete;
+    }
+    constructor(sharedService) {
+        this.sharedService = sharedService;
+        this.isVisible = false;
+        this.ResourceRecordSaved = new EventEmitter();
+        this.ContentLoadingStarted = new EventEmitter();
+        this.ContentLoadingComplete = new EventEmitter();
+        this._loadStarted = false;
+        this._loadComplete = false;
+        this._loaded = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['isVisible']) {
+            const previousValue = changes['isVisible'].previousValue;
+            const currentValue = changes['isVisible'].currentValue;
+            if (previousValue !== currentValue) {
+                // visible state has changed
+                if (!this._loaded && currentValue) {
+                    // first time we are loading this resource, so go ahead and load whatever our component type is
+                    this.loadComponent();
+                }
+            }
+        }
+    }
+    loadComponent() {
+        try {
+            this._loaded = true;
+            const resourceReg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseResourceComponent, this.Data.ResourceType);
+            if (!resourceReg) {
+                throw new Error(`Unable to find resource registration for ${this.Data.ResourceType}`);
+            }
+            const viewContainerRef = this.resourceContainer.viewContainerRef;
+            if (!viewContainerRef) {
+                throw new Error(`Unable to find viewContainerRef`);
+            }
+            viewContainerRef.clear();
+            const componentRef = viewContainerRef.createComponent(resourceReg.SubClass);
+            componentRef.instance.LoadCompleteEvent = () => {
+                this._loadComplete = true;
+                this.ContentLoadingComplete.emit(this);
+            };
+            componentRef.instance.ResourceRecordSavedEvent = (resourceRecordEntity) => {
+                // bubble up the event
+                this.ResourceRecordSaved.emit(resourceRecordEntity);
+            };
+            componentRef.instance.Data = this.Data;
+            // do this right away since we have started
+            this.ContentLoadingStarted.emit(this);
+            // AND - wire up the event because we might start again in the future - example dashboards where a user can change the dashboard and add items etc
+            componentRef.instance.LoadStartedEvent = () => {
+                this._loadStarted = true;
+                this.ContentLoadingStarted.emit(this);
+            };
+        }
+        catch (e) {
+            LogError(e);
+        }
+    }
+}
+ResourceContainerComponent.ɵfac = function ResourceContainerComponent_Factory(t) { return new (t || ResourceContainerComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
+ResourceContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceContainerComponent, selectors: [["app-resource"]], viewQuery: function ResourceContainerComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(Container, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resourceContainer = _t.first);
+    } }, inputs: { Data: "Data", isVisible: "isVisible" }, outputs: { ResourceRecordSaved: "ResourceRecordSaved", ContentLoadingStarted: "ContentLoadingStarted", ContentLoadingComplete: "ContentLoadingComplete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 0, consts: [["mjContainer", "", "mjFillContainer", ""]], template: function ResourceContainerComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, ResourceContainerComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
+    } }, dependencies: [i2.FillContainer, i2.Container], encapsulation: 2 });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceContainerComponent, [{
+        type: Component,
+        args: [{
+                selector: 'app-resource',
+                template: `<ng-template mjContainer mjFillContainer></ng-template>`,
+            }]
+    }], function () { return [{ type: i1.SharedService }]; }, { Data: [{
+            type: Input
+        }], isVisible: [{
+            type: Input
+        }], ResourceRecordSaved: [{
+            type: Output
+        }], ContentLoadingStarted: [{
+            type: Output
+        }], ContentLoadingComplete: [{
+            type: Output
+        }], resourceContainer: [{
+            type: ViewChild,
+            args: [Container, { static: true }]
+        }] }); })();

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

@@ -0,0 +1,17 @@
+import { OnDestroy, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { BaseEntity } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export declare class SectionLoaderComponent implements AfterViewInit, OnDestroy, OnChanges {
+    Entity: string;
+    Section: string;
+    record: BaseEntity;
+    EditMode: boolean;
+    container: ViewContainerRef;
+    private _sectionObj;
+    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": "Entity"; "Section": "Section"; "record": "record"; "EditMode": "EditMode"; }, {}, never, never, false, never>;
+}