@memberjunction/ng-explorer-core 0.9.2

package/dist/lib/ask-skip/skip-dynamic-report-wrapper.js

@@ -0,0 +1,49 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["theReport"];
+export class SkipDynamicReportComponent {
+    constructor() {
+        this.ConversationID = null;
+        this.ConversationName = null;
+        this.ConversationDetailID = null;
+    }
+}
+SkipDynamicReportComponent.ɵfac = function SkipDynamicReportComponent_Factory(t) { return new (t || SkipDynamicReportComponent)(); };
+SkipDynamicReportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicReportComponent, selectors: [["app-skip-dynamic-report"]], viewQuery: function SkipDynamicReportComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.theReport = _t.first);
+    } }, inputs: { SkipData: "SkipData", ConversationID: "ConversationID", ConversationName: "ConversationName", ConversationDetailID: "ConversationDetailID" }, decls: 3, vars: 5, consts: [[1, "skip-dynamic-report-container"], [3, "SkipData", "ConversationID", "ConversationName", "ConversationDetailID", "ShowCreateReportButton"], ["theReport", ""]], template: function SkipDynamicReportComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵelement(1, "app-dynamic-report", 1, 2);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("SkipData", ctx.SkipData)("ConversationID", ctx.ConversationID)("ConversationName", ctx.ConversationName)("ConversationDetailID", ctx.ConversationDetailID)("ShowCreateReportButton", true);
+    } }, styles: [".report-tab-title[_ngcontent-%COMP%] { margin-left: 10px;}", ".skip-dynamic-report-container[_ngcontent-%COMP%] {\n        display: block;\n        height: 450px;\n        width: 90%;\n        margin-right: 20px;\n    }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicReportComponent, [{
+        type: Component,
+        args: [{ selector: 'app-skip-dynamic-report', template: `
+<div class='skip-dynamic-report-container'> 
+    <app-dynamic-report #theReport
+        [SkipData]="SkipData"
+        [ConversationID]="ConversationID"
+        [ConversationName]="ConversationName"
+        [ConversationDetailID]="ConversationDetailID"
+        [ShowCreateReportButton]="true"
+    ></app-dynamic-report>
+</div>
+`, styles: [".report-tab-title { margin-left: 10px;}", ".skip-dynamic-report-container {\n        display: block;\n        height: 450px;\n        width: 90%;\n        margin-right: 20px;\n    }"] }]
+    }], null, { theReport: [{
+            type: ViewChild,
+            args: ['theReport', { static: false }]
+        }], SkipData: [{
+            type: Input
+        }], ConversationID: [{
+            type: Input
+        }], ConversationName: [{
+            type: Input
+        }], ConversationDetailID: [{
+            type: Input
+        }] }); })();

package/dist/lib/auth-button/auth-button.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from '@angular/core';
+import { MJAuthBase } from '@memberjunction/ng-auth-services';
+import * as i0 from "@angular/core";
+export declare class AuthButtonComponent implements OnInit {
+    document: Document;
+    authBase: MJAuthBase;
+    constructor(document: Document, authBase: MJAuthBase);
+    ngOnInit(): void;
+    logout(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AuthButtonComponent, "app-auth-button", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/auth-button/auth-button.component.js

@@ -0,0 +1,43 @@
+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, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-auth-services";
+export class AuthButtonComponent {
+    // Inject the authentication service into your component through the constructor
+    constructor(document, authBase) {
+        this.document = document;
+        this.authBase = authBase;
+    }
+    ngOnInit() {
+    }
+    logout() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.authBase.logout();
+            localStorage.removeItem('auth');
+            localStorage.removeItem('claims');
+        });
+    }
+}
+AuthButtonComponent.ɵfac = function AuthButtonComponent_Factory(t) { return new (t || AuthButtonComponent)(i0.ɵɵdirectiveInject(DOCUMENT), i0.ɵɵdirectiveInject(i1.MJAuthBase)); };
+AuthButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AuthButtonComponent, selectors: [["app-auth-button"]], decls: 2, vars: 0, consts: [[3, "click"]], template: function AuthButtonComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "button", 0);
+        i0.ɵɵlistener("click", function AuthButtonComponent_Template_button_click_0_listener() { return ctx.authBase.login(); });
+        i0.ɵɵtext(1, " Log in\n");
+        i0.ɵɵelementEnd();
+    } } });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AuthButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'app-auth-button', template: "<!-- <ng-container *ngIf=\"authBase.authenticated; else loggedOut\">\r\n    <button (click)=\"logout()\">\r\n        Log out\r\n    </button>\r\n</ng-container> -->\r\n<!-- <ng-template> -->\r\n<button (click)=\"authBase.login()\">\r\n        Log in\r\n</button>\r\n<!-- </ng-template> -->\r\n" }]
+    }], function () { return [{ type: Document, decorators: [{
+                type: Inject,
+                args: [DOCUMENT]
+            }] }, { type: i1.MJAuthBase }]; }, null); })();

package/dist/lib/dashboard-browser-component/dashboard-browser.component.d.ts

@@ -0,0 +1,14 @@
+import { Router } from '@angular/router';
+import { DashboardEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+export declare class DashboardBrowserComponent {
+    private router;
+    dashboards: DashboardEntity[];
+    showLoader: boolean;
+    constructor(router: Router);
+    ngOnInit(): void;
+    LoadData(): Promise<void>;
+    itemClick(item: DashboardEntity): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashboardBrowserComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DashboardBrowserComponent, "app-dashboard-browser", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/dashboard-browser-component/dashboard-browser.component.js

@@ -0,0 +1,55 @@
+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 } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "../generic-browse-list/generic-browse-list.component";
+export class DashboardBrowserComponent {
+    constructor(router) {
+        this.router = router;
+        this.dashboards = [];
+        this.showLoader = false;
+    }
+    ngOnInit() {
+        this.LoadData();
+    }
+    LoadData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showLoader = true;
+            const md = new Metadata();
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: 'Dashboards',
+                ExtraFilter: `UserID=${md.CurrentUser.ID}`
+            });
+            if (result && result.Success)
+                this.dashboards = result.Results;
+            this.showLoader = false;
+        });
+    }
+    itemClick(item) {
+        if (item) {
+            this.router.navigate(['resource', 'dashboard', item.ID]);
+        }
+    }
+}
+DashboardBrowserComponent.ɵfac = function DashboardBrowserComponent_Factory(t) { return new (t || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+DashboardBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["app-dashboard-browser"]], decls: 1, vars: 2, consts: [["title", "Dashboards", "itemType", "dashboard", 3, "items", "showLoader", "itemClickEvent"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "app-generic-browse-list", 0);
+        i0.ɵɵlistener("itemClickEvent", function DashboardBrowserComponent_Template_app_generic_browse_list_itemClickEvent_0_listener($event) { return ctx.itemClick($event); });
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("items", ctx.dashboards)("showLoader", ctx.showLoader);
+    } }, dependencies: [i2.GenericBrowseListComponent], styles: [".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserComponent, [{
+        type: Component,
+        args: [{ selector: 'app-dashboard-browser', template: "<app-generic-browse-list title=\"Dashboards\" itemType=\"dashboard\" [items]=\"dashboards\" (itemClickEvent)=\"itemClick($event)\" [showLoader]=\"showLoader\">\n\n</app-generic-browse-list>", styles: ["\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+    }], function () { return [{ type: i1.Router }]; }, null); })();

package/dist/lib/data-browser-component/data-browser.component.d.ts

@@ -0,0 +1,14 @@
+import { Router } from '@angular/router';
+import { ApplicationInfo } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export declare class DataBrowserComponent {
+    private router;
+    showLoader: boolean;
+    applications: ApplicationInfo[];
+    constructor(router: Router);
+    ngOnInit(): void;
+    LoadData(): Promise<void>;
+    appItemClick(info: ApplicationInfo): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataBrowserComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataBrowserComponent, "app-data-browser", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/data-browser-component/data-browser.component.js

@@ -0,0 +1,91 @@
+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 } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-indicators";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-layout";
+function DataBrowserComponent_kendo_loader_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 6);
+} }
+function DataBrowserComponent_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 9)(2, "kendo-card-header", 10);
+    i0.ɵɵelement(3, "kendo-icon", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-card-body", 12);
+    i0.ɵɵlistener("click", function DataBrowserComponent_div_7_div_1_Template_kendo_card_body_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const app_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.appItemClick(app_r3)); });
+    i0.ɵɵelementStart(5, "div", 13)(6, "h5", 14);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "p", 15);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const app_r3 = ctx.$implicit;
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(app_r3.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(app_r3.Description);
+} }
+function DataBrowserComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtemplate(1, DataBrowserComponent_div_7_div_1_Template, 10, 2, "div", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.applications);
+} }
+export class DataBrowserComponent {
+    constructor(router) {
+        this.router = router;
+        this.showLoader = true;
+        this.applications = [];
+    }
+    ngOnInit() {
+        this.LoadData();
+    }
+    LoadData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showLoader = true;
+            const md = new Metadata();
+            this.applications = md.Applications;
+            this.showLoader = false;
+        });
+    }
+    appItemClick(info) {
+        if (info) {
+            this.router.navigate(['app', info.Name]);
+        }
+    }
+}
+DataBrowserComponent.ɵfac = function DataBrowserComponent_Factory(t) { return new (t || DataBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+DataBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataBrowserComponent, selectors: [["app-data-browser"]], decls: 8, vars: 2, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], ["name", "table", 1, "view-icon"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function DataBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4, "Applications");
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(5, "div", 3);
+        i0.ɵɵtemplate(6, DataBrowserComponent_kendo_loader_6_Template, 1, 0, "kendo-loader", 4);
+        i0.ɵɵtemplate(7, DataBrowserComponent_div_7_Template, 2, 1, "div", 5);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(6);
+        i0.ɵɵproperty("ngIf", ctx.showLoader);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.showLoader);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.LoaderComponent, i4.IconComponent, i5.CardComponent, i5.CardHeaderComponent, i5.CardBodyComponent, i5.CardTitleDirective, i5.CardSubtitleDirective], styles: [".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataBrowserComponent, [{
+        type: Component,
+        args: [{ selector: 'app-data-browser', template: "<div  class=\"card-container\">\n    <div class=\"card-header-entity\">\n        <div class=\"title-wrap\">\n            <h1>Applications</h1>\n        </div>\n    </div>\n    <div class=\"main-area\"> \n        <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\n        <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\n          <div *ngFor=\"let app of applications\">\n            <kendo-card class=\"card-wrapper\">\n              <kendo-card-header class=\"k-hstack view-card\">\n                <kendo-icon name=\"table\" class=\"view-icon\"></kendo-icon>\n                <!-- <div class=\"btn-wrapper\">\n                  <button kendoButton fillMode=\"flat\" (click)=\"editView(entity)\">\n                    <span class=\"k-icon k-i-edit\"></span>\n                  </button>\n                  <button kendoButton fillMode=\"flat\" (click)=\"handleDeleteView(entity)\"><span\n                      class=\"k-icon k-i-delete\"></span></button>\n                </div> -->\n              </kendo-card-header>\n    \n              <kendo-card-body (click)=\"appItemClick(app)\">\n                <div class=\"view-card-content k-cursor-pointer\">\n                  <h5 kendoCardTitle>{{ app.Name }}</h5>\n                  <p kendoCardSubtitle>{{ app.Description }}</p>\n                </div>\n              </kendo-card-body>\n            </kendo-card>\n          </div>\n        </div>\n    </div>\n</div>", styles: ["\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+    }], function () { return [{ type: i1.Router }]; }, null); })();

package/dist/lib/favorites/favorites.component.d.ts

@@ -0,0 +1,13 @@
+import { Router } from '@angular/router';
+import { UserFavoriteEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+export declare class FavoritesComponent {
+    private router;
+    favorites: UserFavoriteEntity[];
+    ExtraFilter: string;
+    constructor(router: Router);
+    ngOnInit(): void;
+    favoriteItemClick(fav: UserFavoriteEntity): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FavoritesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FavoritesComponent, "app-favorites", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/favorites/favorites.component.js

@@ -0,0 +1,100 @@
+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 } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@progress/kendo-angular-listview";
+function FavoritesComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
+    i0.ɵɵelement(2, "span", 6);
+    i0.ɵɵtext(3, " Favorites ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 7);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.favorites.length);
+} }
+function FavoritesComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵlistener("click", function FavoritesComponent_ng_template_3_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r4); const dataItem_r2 = restoredCtx.dataItem; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.favoriteItemClick(dataItem_r2)); });
+    i0.ɵɵelementStart(1, "b");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r2 = ctx.dataItem;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dataItem_r2.Entity);
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(": ", dataItem_r2.RecordName ? dataItem_r2.RecordName : dataItem_r2.RecordID, " ");
+} }
+export class FavoritesComponent {
+    constructor(router) {
+        this.router = router;
+        this.favorites = [];
+        this.ExtraFilter = '';
+    }
+    ngOnInit() {
+        const md = new Metadata();
+        const rv = new RunView();
+        let sFilter = `UserID=${md.CurrentUser.ID}`;
+        if (this.ExtraFilter)
+            sFilter += `AND (${this.ExtraFilter})`;
+        rv.RunView({
+            EntityName: 'User Favorites',
+            ExtraFilter: sFilter
+        }).then((favorites) => __awaiter(this, void 0, void 0, function* () {
+            this.favorites = favorites.Results; // set the result in the list and let the below happen after async and it will update via data binding when done
+            const input = favorites.Results.map((fav) => {
+                return { EntityName: fav.Entity, RecordID: fav.RecordID };
+            });
+            const results = yield md.GetEntityRecordNames(input);
+            if (results)
+                results.forEach((result) => {
+                    const fav = favorites.Results.find((f) => f.Entity == result.EntityName && f.RecordID == result.RecordID);
+                    if (fav) {
+                        fav.RecordName = result.Success ? result.RecordName : fav.Entity + ' ' + fav.RecordID;
+                    }
+                });
+        }));
+    }
+    favoriteItemClick(fav) {
+        if (fav) {
+            if (fav.Entity === 'User Views') {
+                // opening a view, different route
+                this.router.navigate(['resource', 'view', fav.RecordID]);
+            }
+            else {
+                this.router.navigate(['resource', 'record', fav.RecordID], { queryParams: { Entity: fav.Entity } });
+            }
+        }
+    }
+}
+FavoritesComponent.ɵfac = function FavoritesComponent_Factory(t) { return new (t || FavoritesComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FavoritesComponent, selectors: [["app-favorites"]], decls: 4, vars: 1, consts: [[1, "list-view", 3, "data"], [1, "entity-wrap"], ["kendoListViewHeaderTemplate", ""], ["kendoListViewItemTemplate", ""], [1, "header"], [1, "head-tag"], [1, "k-icon", "k-i-clock"], [1, "count"], [1, "list-item", 3, "click"]], template: function FavoritesComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "kendo-listview", 0);
+        i0.ɵɵelementContainerStart(1, 1);
+        i0.ɵɵtemplate(2, FavoritesComponent_ng_template_2_Template, 6, 1, "ng-template", 2);
+        i0.ɵɵtemplate(3, FavoritesComponent_ng_template_3_Template, 4, 2, "ng-template", 3);
+        i0.ɵɵelementContainerEnd();
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("data", ctx.favorites);
+    } }, dependencies: [i2.ItemTemplateDirective, i2.HeaderTemplateDirective, i2.ListViewComponent], styles: [".favorites-list[_ngcontent-%COMP%] {\r\n    width: 400px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FavoritesComponent, [{
+        type: Component,
+        args: [{ selector: 'app-favorites', template: "<kendo-listview\n    [data]=\"favorites\"\n    class=\"list-view\"\n>\n    <ng-container class=\"entity-wrap\">\n        <ng-template kendoListViewHeaderTemplate>\n            <div class=\"header\"> \n                <div class=\"head-tag\">\n                    <span class=\"k-icon k-i-clock\"></span>\n                    Favorites\n                </div>\n                <div class=\"count\">{{favorites.length}}</div>\n                </div>\n        </ng-template>\n        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n            <div class=\"list-item\"  (click)=\"favoriteItemClick(dataItem)\">\n                <b>{{dataItem.Entity}}</b>: {{dataItem.RecordName ? dataItem.RecordName : dataItem.RecordID}}\n            </div>\n        </ng-template>\n    </ng-container>\n</kendo-listview>\n", styles: [".favorites-list {\r\n    width: 400px;\r\n}", "\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+    }], function () { return [{ type: i1.Router }]; }, null); })();

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

@@ -0,0 +1,76 @@
+import { AfterViewInit, OnInit, OnDestroy, QueryList, ElementRef } from '@angular/core';
+import { EntityInfo, ValidationResult, BaseEntity, EntityPermissionType, EntityRelationshipInfo, RunViewParams } from '@memberjunction/core';
+import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
+import { BaseRecordComponent } from './base-record-component';
+import { SharedService } from '../shared/shared.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TabStripComponent } from '@progress/kendo-angular-layout';
+import * as i0 from "@angular/core";
+export declare abstract class BaseFormComponent extends BaseRecordComponent implements AfterViewInit, OnInit, OnDestroy {
+    protected elementRef: ElementRef;
+    protected sharedService: SharedService;
+    protected router: Router;
+    protected route: ActivatedRoute;
+    activeTabIndex: number;
+    selectedTab: number;
+    EditMode: boolean;
+    BottomMargin: number;
+    TabHeight: string;
+    GridBottomMargin: number;
+    FavoriteInitDone: boolean;
+    isHistoryDialogOpen: boolean;
+    private splitterLayoutChangeSubject;
+    private _pendingRecords;
+    private _updatingBrowserUrl;
+    constructor(elementRef: ElementRef, sharedService: SharedService, router: Router, route: ActivatedRoute);
+    tabComponent: TabStripComponent;
+    ngOnInit(): Promise<void>;
+    ngAfterViewInit(): void;
+    private resizeSub;
+    ngOnDestroy(): void;
+    userViewGridComponents: QueryList<UserViewGridComponent>;
+    protected get PendingRecords(): BaseEntity[];
+    onTabSelect(e: any): void;
+    StartEditMode(): void;
+    handleHistoryDialog(): void;
+    RemoveFavorite(): Promise<void>;
+    MakeFavorite(): Promise<void>;
+    SetFavoriteStatus(isFavorite: boolean): Promise<void>;
+    private _isFavorite;
+    get IsFavorite(): boolean;
+    CheckUserPermission(type: EntityPermissionType): boolean;
+    get UserCanEdit(): boolean;
+    get UserCanRead(): boolean;
+    get UserCanCreate(): boolean;
+    get UserCanDelete(): boolean;
+    GridEditMode(): "None" | "Save" | "Queue";
+    private _tabIndexes;
+    GetTabIndex(tabName: string): number;
+    RegisterTabs(tabs: string[]): void;
+    RegisterTab(tabName: string): number;
+    IsCurrentTab(tabName: string): boolean;
+    RegisterAndCheckIfCurrentTab(tabName: string): boolean;
+    protected BuildRelationshipViewParams(item: EntityRelationshipInfo): RunViewParams;
+    BuildRelationshipViewParamsByEntityName(relatedEntityName: string): RunViewParams;
+    GetRelatedEntityTabDisplayName(relatedEntityName: string): string;
+    protected ValidatePendingRecords(): ValidationResult[];
+    Validate(): ValidationResult;
+    SaveRecord(StopEditModeAfterSave: boolean): Promise<boolean>;
+    Wait(duration: number): Promise<void>;
+    CancelEdit(): void;
+    protected PendingRecordsDirty(): boolean;
+    protected PopulatePendingRecords(): Promise<void>;
+    protected InternalSaveRecord(): Promise<boolean>;
+    protected GetTabTopPosition(): number;
+    private _tabMargin;
+    setTabHeight(): void;
+    protected get ContainerObjectHeight(): number;
+    protected ResizeTab(): void;
+    protected setupSplitterLayoutDebounce(): void;
+    splitterLayoutChange(): void;
+    protected ResizeGrids(): void;
+    ShowDependencies(): Promise<void>;
+    get EntityInfo(): EntityInfo | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseFormComponent, never, never, {}, {}, never, never, false, never>;
+}