@memberjunction/ng-explorer-core 0.9.2

package/dist/lib/home-component/home.component.js

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "../favorites/favorites.component";
+export class HomeComponent {
+    constructor(router) {
+        this.router = router;
+    }
+    navigate(route) {
+        this.router.navigate([route]);
+    }
+}
+HomeComponent.ɵfac = function HomeComponent_Factory(t) { return new (t || HomeComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], decls: 28, vars: 0, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [1, "k-icon", "k-i-user"], [1, "k-icon", "k-i-table"], [1, "k-icon", "k-i-aggregate-fields"], [1, "k-icon", "k-i-graph"], [1, "k-icon", "k-i-gear"], [1, "home-favorites"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4, "Home");
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_7_listener() { return ctx.navigate("askskip"); });
+        i0.ɵɵelement(8, "span", 6);
+        i0.ɵɵelementStart(9, "span");
+        i0.ɵɵtext(10, "Ask Skip");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(11, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_11_listener() { return ctx.navigate("data"); });
+        i0.ɵɵelement(12, "span", 7);
+        i0.ɵɵelementStart(13, "span");
+        i0.ɵɵtext(14, "Data");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(15, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_15_listener() { return ctx.navigate("dashboards"); });
+        i0.ɵɵelement(16, "span", 8);
+        i0.ɵɵelementStart(17, "span");
+        i0.ɵɵtext(18, "Dashboards");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(19, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_19_listener() { return ctx.navigate("reports"); });
+        i0.ɵɵelement(20, "span", 9);
+        i0.ɵɵelementStart(21, "span");
+        i0.ɵɵtext(22, "Reports");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(23, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_23_listener() { return ctx.navigate("settings"); });
+        i0.ɵɵelement(24, "span", 10);
+        i0.ɵɵelementStart(25, "span");
+        i0.ɵɵtext(26, "Settings");
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelement(27, "app-favorites", 11);
+        i0.ɵɵelementEnd()();
+    } }, dependencies: [i2.FavoritesComponent], styles: [".nav-container[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n}\r\n.nav-item[_ngcontent-%COMP%] {\r\n    border: solid 1px lightgray;\r\n    border-radius: 5px;\r\n    width: 150px;;\r\n    height: 50px;\r\n    padding: 25px;\r\n    text-align: center;\r\n    vertical-align: middle;\r\n    margin-bottom: 20px;\r\n    margin-right: 20px;\r\n    font-size: 20px;\r\n    cursor: pointer;\r\n}\r\n.nav-item[_ngcontent-%COMP%]:hover  {\r\n    background-color: rgb(243, 243, 222);\r\n}\r\n\r\n.nav-item[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\r\n    margin-right: 10px;\r\n}\r\n\r\n.home-favorites[_ngcontent-%COMP%] {\r\n    width: 500px;\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(HomeComponent, [{
+        type: Component,
+        args: [{ selector: 'app-home', template: "<div  class=\"card-container\">\n    <div class=\"card-header-entity\">\n        <div class=\"title-wrap\">\n            <h1>Home</h1>\n        </div>\n    </div>\n    <div class=\"main-area\"> \n        <div class=\"nav-container\">\n            <div class=\"nav-item\" (click)=\"navigate('askskip')\">\n                <span class=\"k-icon k-i-user\"></span>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <span class=\"k-icon k-i-table\"></span>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <span class=\"k-icon k-i-aggregate-fields\"></span>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <span class=\"k-icon k-i-graph\"></span>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <span class=\"k-icon k-i-gear\"></span>\n                <span>Settings</span>\n            </div>\n        </div>\n\n        <app-favorites class=\"home-favorites\"></app-favorites>\n    </div>\n</div>", styles: [".nav-container {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n}\r\n.nav-item {\r\n    border: solid 1px lightgray;\r\n    border-radius: 5px;\r\n    width: 150px;;\r\n    height: 50px;\r\n    padding: 25px;\r\n    text-align: center;\r\n    vertical-align: middle;\r\n    margin-bottom: 20px;\r\n    margin-right: 20px;\r\n    font-size: 20px;\r\n    cursor: pointer;\r\n}\r\n.nav-item:hover  {\r\n    background-color: rgb(243, 243, 222);\r\n}\r\n\r\n.nav-item > span {\r\n    margin-right: 10px;\r\n}\r\n\r\n.home-favorites {\r\n    width: 500px;\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/join-grid/join-grid.component.d.ts

@@ -0,0 +1,30 @@
+import { AfterViewInit, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class JoinGridComponent implements OnInit, AfterViewInit {
+    RowsEntity: string;
+    ColumnsEntity: string;
+    JoinEntity: string;
+    JoinRowForeignKey: string;
+    JoinColumunForeignKey: string;
+    RowsFilter: string;
+    ColumnsFilter: string;
+    EditMode: boolean;
+    showloader: boolean;
+    viewData: any[];
+    visibleColumns: any[];
+    ShowError: boolean;
+    ErrorMessage: string;
+    gridHeight: number;
+    private resizeSub;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    LoadData(): Promise<void>;
+    getJoinData(rows: any[], columns: any[]): Promise<void>;
+    prepareGridData(rows: any[], columns: any[], joinEntities: any[]): void;
+    private _gridMargin;
+    setGridHeight(): void;
+    ResizeGrid(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JoinGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JoinGridComponent, "app-join-grid", never, { "RowsEntity": "RowsEntity"; "ColumnsEntity": "ColumnsEntity"; "JoinEntity": "JoinEntity"; "JoinRowForeignKey": "JoinRowForeignKey"; "JoinColumunForeignKey": "JoinColumunForeignKey"; "RowsFilter": "RowsFilter"; "ColumnsFilter": "ColumnsFilter"; "EditMode": "EditMode"; }, {}, never, never, false, never>;
+}

package/dist/lib/join-grid/join-grid.component.js

@@ -0,0 +1,225 @@
+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 } from '@angular/core';
+import { RunView } from '@memberjunction/core';
+import { debounceTime, fromEvent } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-grid";
+import * as i3 from "@progress/kendo-angular-buttons";
+function JoinGridComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.ErrorMessage, "\n");
+} }
+function JoinGridComponent_div_1_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 9);
+    i0.ɵɵtext(1, "Save");
+    i0.ɵɵelementEnd();
+} }
+function JoinGridComponent_div_1_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_div_1_3_ng_template_0_Template, 2, 0, "ng-template", 8);
+} }
+function JoinGridComponent_div_1_kendo_grid_column_4_1_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const dataItem_r12 = ctx.$implicit;
+    const item_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵtextInterpolate1(" ", dataItem_r12[item_r6.field], " ");
+} }
+function JoinGridComponent_div_1_kendo_grid_column_4_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_div_1_kendo_grid_column_4_1_ng_template_0_Template, 1, 1, "ng-template", 11);
+} }
+function JoinGridComponent_div_1_kendo_grid_column_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "input", 12);
+} if (rf & 2) {
+    const dataItem_r14 = ctx.$implicit;
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    const ctx_r9 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("checked", dataItem_r14[item_r6.field])("disabled", !ctx_r9.EditMode);
+} }
+function JoinGridComponent_div_1_kendo_grid_column_4_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r16 = i0.ɵɵnextContext(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r16.viewData.length, " records ");
+} }
+function JoinGridComponent_div_1_kendo_grid_column_4_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, JoinGridComponent_div_1_kendo_grid_column_4_3_ng_template_0_Template, 1, 1, "ng-template", 13);
+} }
+const _c0 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
+function JoinGridComponent_div_1_kendo_grid_column_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-grid-column", 10);
+    i0.ɵɵtemplate(1, JoinGridComponent_div_1_kendo_grid_column_4_1_Template, 1, 0, null, 6);
+    i0.ɵɵtemplate(2, JoinGridComponent_div_1_kendo_grid_column_4_ng_template_2_Template, 1, 2, "ng-template", 11);
+    i0.ɵɵtemplate(3, JoinGridComponent_div_1_kendo_grid_column_4_3_Template, 1, 0, null, 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = ctx.$implicit;
+    const i_r7 = ctx.index;
+    i0.ɵɵpropertyInterpolate("field", item_r6.field);
+    i0.ɵɵpropertyInterpolate("title", item_r6.title);
+    i0.ɵɵproperty("width", item_r6.width)("headerStyle", i0.ɵɵpureFunction0(6, _c0));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", i_r7 === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", i_r7 === 0);
+} }
+function JoinGridComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "kendo-grid", 4, 5);
+    i0.ɵɵtemplate(3, JoinGridComponent_div_1_3_Template, 1, 0, null, 6);
+    i0.ɵɵtemplate(4, JoinGridComponent_div_1_kendo_grid_column_4_Template, 4, 7, "kendo-grid-column", 7);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("resizable", true)("data", ctx_r1.viewData)("rowHeight", 36)("loading", ctx_r1.showloader)("height", ctx_r1.gridHeight)("sortable", true)("resizable", true)("reorderable", true)("selectable", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.EditMode);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngForOf", ctx_r1.visibleColumns);
+} }
+export class JoinGridComponent {
+    constructor() {
+        this.RowsEntity = '';
+        this.ColumnsEntity = '';
+        this.JoinEntity = '';
+        this.JoinRowForeignKey = '';
+        this.JoinColumunForeignKey = '';
+        this.RowsFilter = '';
+        this.ColumnsFilter = '';
+        this.EditMode = false;
+        this.showloader = false;
+        this.viewData = [];
+        this.visibleColumns = [];
+        this.ShowError = false;
+        this.ErrorMessage = '';
+        this.gridHeight = 750;
+        this.resizeSub = null;
+        this._gridMargin = 150;
+    }
+    ngOnInit() {
+        if (!this.RowsEntity || !this.ColumnsEntity || !this.JoinEntity || !this.JoinRowForeignKey || !this.JoinColumunForeignKey) {
+            this.ShowError = true;
+            this.ErrorMessage = 'Missing required parameters';
+        }
+        else {
+            this.LoadData();
+        }
+    }
+    ngAfterViewInit() {
+        this.setGridHeight();
+    }
+    LoadData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rv = new RunView();
+            this.showloader = true;
+            const promises = [];
+            promises.push(rv.RunView({ EntityName: this.RowsEntity, ExtraFilter: this.RowsFilter }));
+            promises.push(rv.RunView({ EntityName: this.ColumnsEntity, ExtraFilter: this.ColumnsFilter }));
+            const responses = yield Promise.all(promises);
+            if (responses[0].Success && responses[1].Success) {
+                this.getJoinData(responses[0].Results, responses[1].Results);
+            }
+            else {
+                this.ShowError = true;
+                this.ErrorMessage = responses[0].ErrorMessage || responses[1].ErrorMessage;
+            }
+        });
+    }
+    getJoinData(rows, columns) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rv = new RunView();
+            // getting the relations between rows and columns
+            const res = yield rv.RunView({ EntityName: this.JoinEntity, ExtraFilter: `${this.JoinRowForeignKey} IN (${rows.map(obj => obj.ID).join(',')}) AND ${this.JoinColumunForeignKey} IN (${columns.map(obj => obj.ID).join(',')})` });
+            if (res.Success) {
+                this.prepareGridData(rows, columns, res.Results);
+            }
+            else {
+                this.showloader = false;
+                this.ShowError = true;
+                this.ErrorMessage = res.ErrorMessage;
+            }
+        });
+    }
+    prepareGridData(rows, columns, joinEntities) {
+        const gridData = [];
+        this.visibleColumns = [{ field: 'first', title: '', width: 80 }];
+        columns.forEach(column => {
+            this.visibleColumns.push({ field: column.Name, title: column.Name, width: 80 });
+        });
+        rows.forEach(row => {
+            let rowData = {
+                first: row.Name
+            };
+            columns.forEach(column => {
+                const join = joinEntities.find(j => j[this.JoinColumunForeignKey] === column.ID && j[this.JoinRowForeignKey] === row.ID);
+                if (join) {
+                    rowData = Object.assign(Object.assign({}, rowData), { [column.Name]: true, [this.JoinColumunForeignKey]: join[this.JoinColumunForeignKey], [this.JoinRowForeignKey]: join[this.JoinRowForeignKey], [this.JoinEntity]: join[this.JoinEntity] });
+                }
+                else {
+                    rowData[column.Name] = false;
+                }
+            });
+            gridData.push(rowData);
+        });
+        this.showloader = false;
+        this.viewData = gridData;
+    }
+    setGridHeight() {
+        // Subscribe to the window resize event
+        this.resizeSub = fromEvent(window, 'resize').pipe(debounceTime(100) // Debounce the resize event to avoid frequent updates
+        ).subscribe(() => {
+            // Update the grid height when the window is resized
+            this.ResizeGrid();
+        });
+        // Set the initial grid height with a slight delay to allow stuff to get set
+        setTimeout(() => {
+            this.ResizeGrid();
+        }, 100);
+    }
+    ResizeGrid() {
+        // this._gridMargin = this.getGridTopPosition();
+        this.gridHeight = window.innerHeight - this._gridMargin;
+    }
+}
+JoinGridComponent.ɵfac = function JoinGridComponent_Factory(t) { return new (t || JoinGridComponent)(); };
+JoinGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JoinGridComponent, selectors: [["app-join-grid"]], inputs: { RowsEntity: "RowsEntity", ColumnsEntity: "ColumnsEntity", JoinEntity: "JoinEntity", JoinRowForeignKey: "JoinRowForeignKey", JoinColumunForeignKey: "JoinColumunForeignKey", RowsFilter: "RowsFilter", ColumnsFilter: "ColumnsFilter", EditMode: "EditMode" }, decls: 2, vars: 2, consts: [["class", "card-container", 4, "ngIf"], ["class", "user-view-grid-wrap", 4, "ngIf"], [1, "card-container"], [1, "user-view-grid-wrap"], ["scrollable", "virtual", 3, "resizable", "data", "rowHeight", "loading", "height", "sortable", "reorderable", "selectable"], ["kendoGrid", ""], [4, "ngIf"], [3, "field", "title", "width", "headerStyle", 4, "ngFor", "ngForOf"], ["kendoGridToolbarTemplate", ""], ["kendoButton", ""], [3, "field", "title", "width", "headerStyle"], ["kendoGridCellTemplate", ""], ["type", "checkbox", 3, "checked", "disabled"], ["kendoGridFooterTemplate", ""]], template: function JoinGridComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, JoinGridComponent_div_0_Template, 2, 1, "div", 0);
+        i0.ɵɵtemplate(1, JoinGridComponent_div_1_Template, 5, 11, "div", 1);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", ctx.ShowError);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.ShowError);
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i2.GridComponent, i2.ToolbarTemplateDirective, i2.ColumnComponent, i2.FooterTemplateDirective, i2.CellTemplateDirective, i3.Button] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JoinGridComponent, [{
+        type: Component,
+        args: [{ selector: 'app-join-grid', template: "<div class=\"card-container\" *ngIf=\"ShowError\">\r\n    {{ErrorMessage}}\r\n</div>\r\n<div class=\"user-view-grid-wrap\" *ngIf=\"!ShowError\">\r\n    <kendo-grid \r\n        #kendoGrid \r\n        [resizable]=\"true\" \r\n        [data]=\"viewData\" \r\n        scrollable=\"virtual\" \r\n        [rowHeight]=\"36\"\r\n        [loading]=\"showloader\"\r\n        [height]=\"gridHeight\"\r\n        [sortable]=\"true\"\r\n        [resizable]=\"true\"\r\n        [reorderable]=\"true\"\r\n        [selectable]=\"true\">\r\n\r\n        <ng-template kendoGridToolbarTemplate *ngIf=\"EditMode\">\r\n            <button kendoButton>Save</button>\r\n        </ng-template>\r\n\r\n        <kendo-grid-column *ngFor=\"let item of visibleColumns; let i = index\" field=\"{{item.field}}\"\r\n            title=\"{{item.title}}\" [width]=\"item.width\"\r\n            [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\">\r\n            <ng-template *ngIf=\"i === 0\" kendoGridCellTemplate let-dataItem>\r\n                {{dataItem[item.field]}}\r\n            </ng-template>\r\n            <ng-template kendoGridCellTemplate let-dataItem>\r\n                <input type=\"checkbox\" [checked]=\"dataItem[item.field]\" [disabled]=\"!EditMode\" />\r\n            </ng-template>\r\n            <ng-template *ngIf=\"i === 0\" kendoGridFooterTemplate>\r\n                {{this.viewData.length}} records\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n\r\n    </kendo-grid>\r\n</div>" }]
+    }], function () { return []; }, { RowsEntity: [{
+            type: Input
+        }], ColumnsEntity: [{
+            type: Input
+        }], JoinEntity: [{
+            type: Input
+        }], JoinRowForeignKey: [{
+            type: Input
+        }], JoinColumunForeignKey: [{
+            type: Input
+        }], RowsFilter: [{
+            type: Input
+        }], ColumnsFilter: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }] }); })();

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

@@ -0,0 +1,102 @@
+import { ElementRef, OnInit, OnDestroy, AfterViewInit, Renderer2 } from '@angular/core';
+import { Location } from '@angular/common';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DrawerItem, DrawerSelectEvent, DrawerComponent, DrawerMode, TabCloseEvent, TabStripComponent, SelectEvent } from "@progress/kendo-angular-layout";
+import { Metadata, ApplicationInfo, EntityInfo } from '@memberjunction/core';
+import { MJEvent } from '@memberjunction/global';
+import { SharedService } from '../shared/shared.service';
+import { UserViewEntity, ViewInfo } from '@memberjunction/core-entities';
+import { ResourceData } from '../generic/base-resource-component';
+import { Title } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export interface Tab {
+    id?: number;
+    label?: string;
+    icon?: string;
+    data?: any;
+    labelLoading: boolean;
+    contentLoading: boolean;
+    workspaceItem?: any;
+}
+export declare class NavigationComponent implements OnInit, OnDestroy, AfterViewInit {
+    private router;
+    private route;
+    sharedService: SharedService;
+    private location;
+    private renderer;
+    private titleService;
+    applicationName: string;
+    drawerItems: DrawerItem[];
+    mode: DrawerMode;
+    mini: boolean;
+    viewsList: ViewInfo[];
+    selectedDrawerItem: DrawerItem | null;
+    selectedApp: ApplicationInfo | null;
+    selectedEntity: EntityInfo | null;
+    selectedView: UserViewEntity | null;
+    loading: boolean;
+    loader: boolean;
+    tabs: any[];
+    closedTabs: any[];
+    private tabQueryParams;
+    activeTabIndex: number;
+    selectedTabIndex: number;
+    private workSpace;
+    private workSpaceItems;
+    private routeSub;
+    isMobileScreen: boolean;
+    private resizeTimeout;
+    drawer: DrawerComponent;
+    drawerWrapper: ElementRef;
+    tabstrip: TabStripComponent;
+    container: ElementRef;
+    onWindowResize(): void;
+    onClick(): void;
+    contextMenuStyle: any;
+    contextMenuVisible: boolean;
+    constructor(router: Router, route: ActivatedRoute, sharedService: SharedService, location: Location, renderer: Renderer2, titleService: Title);
+    onTabContextMenu(event: MouseEvent, tab: any): void;
+    handleContextMenuOption(option: number): Promise<void>;
+    private checkViewportSize;
+    ngAfterViewInit(): void;
+    private _loggedIn;
+    private _earlyEvents;
+    protected handleEvent(event: MJEvent, args: any): Promise<void>;
+    private gotFirstNav;
+    ngOnInit(): void;
+    private _mostRecentURL;
+    protected NavigateFromUrl(): Promise<void>;
+    selectDrawerItem(index: number): void;
+    protected setActiveTabToHome(): void;
+    private checkForBaseURL;
+    private getWorkspace;
+    LoadWorkSpace(): Promise<void>;
+    protected setAppTitle(title?: string): void;
+    protected AddOrSelectTab(data: ResourceData): Promise<void>;
+    private updateBrowserURL;
+    scrollIntoView(): void;
+    GetWorkspaceItemDisplayName(data: ResourceData): Promise<string>;
+    SaveWorkspace(): Promise<boolean>;
+    SaveSingleWorkspaceItem(tab: Tab): Promise<boolean>;
+    setTabContentLoadingStatus(tab: Tab, bLoading: boolean): void;
+    onClose(ev: TabCloseEvent): Promise<void>;
+    removeWorkspaceItem(tab: Tab): Promise<void>;
+    onTabSelect(e: SelectEvent): void;
+    getActiveTabId(): any;
+    isTabActive(tabId: number): boolean;
+    ngOnDestroy(): void;
+    onDrawerSelect(ev: DrawerSelectEvent): void;
+    getEntityItemFromViewItem(viewItem: DrawerItem): DrawerItem | null;
+    getAppItemFromViewItem(viewItem: DrawerItem): DrawerItem | null;
+    loadApp(): Promise<void>;
+    private LoadDrawer;
+    protected loadSkip(md: Metadata): Promise<void>;
+    protected loadHome(md: Metadata): Promise<void>;
+    protected loadSettings(md: Metadata): Promise<void>;
+    protected loadApplications(md: Metadata): Promise<void>;
+    protected loadResourceType(key: string, resourceType: string, path: string, currentUserID: number): Promise<void>;
+    setDrawerConfig(): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavigationComponent, "app-navigation", never, { "applicationName": "applicationName"; }, {}, never, never, false, never>;
+}