@memberjunction/ng-explorer-core 0.9.79 → 0.9.116

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

@@ -1,54 +1,77 @@
-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); })();
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/router";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "../favorites/favorites.component";
+export class HomeComponent {
+    constructor(sharedService, router) {
+        this.sharedService = sharedService;
+        this.router = router;
+    }
+    navigate(route) {
+        this.router.navigate([route]);
+    }
+}
+HomeComponent.ɵfac = function HomeComponent_Factory(t) { return new (t || HomeComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
+HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], decls: 32, vars: 6, consts: [[1, "card-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [3, "icon"], [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, "kendo-svgicon", 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, "kendo-svgicon", 6);
+        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("queries"); });
+        i0.ɵɵelement(16, "kendo-svgicon", 6);
+        i0.ɵɵelementStart(17, "span");
+        i0.ɵɵtext(18, "Queries");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(19, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_19_listener() { return ctx.navigate("dashboards"); });
+        i0.ɵɵelement(20, "kendo-svgicon", 6);
+        i0.ɵɵelementStart(21, "span");
+        i0.ɵɵtext(22, "Dashboards");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(23, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_23_listener() { return ctx.navigate("reports"); });
+        i0.ɵɵelement(24, "kendo-svgicon", 6);
+        i0.ɵɵelementStart(25, "span");
+        i0.ɵɵtext(26, "Reports");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(27, "div", 5);
+        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_27_listener() { return ctx.navigate("settings"); });
+        i0.ɵɵelement(28, "kendo-svgicon", 6);
+        i0.ɵɵelementStart(29, "span");
+        i0.ɵɵtext(30, "Settings");
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelement(31, "app-favorites", 7);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(8);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("user"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("table"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("data"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("aggregateFields"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("graph"));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("gear"));
+    } }, dependencies: [i3.SVGIconComponent, i4.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  }"] });
+(() => { (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                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('user')\"></kendo-svgicon>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('table')\"></kendo-svgicon>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('data')\"></kendo-svgicon>\n                <span>Queries</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('aggregateFields')\"></kendo-svgicon>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('graph')\"></kendo-svgicon>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('gear')\"></kendo-svgicon>\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  "] }]
+    }], () => [{ type: i1.SharedService }, { type: i2.Router }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeComponent, { className: "HomeComponent", filePath: "src\\lib\\home-component\\home.component.ts", lineNumber: 10 }); })();

package/dist/lib/join-grid/join-grid.component.d.ts

@@ -1,30 +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>;
-}
+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": { "alias": "RowsEntity"; "required": false; }; "ColumnsEntity": { "alias": "ColumnsEntity"; "required": false; }; "JoinEntity": { "alias": "JoinEntity"; "required": false; }; "JoinRowForeignKey": { "alias": "JoinRowForeignKey"; "required": false; }; "JoinColumunForeignKey": { "alias": "JoinColumunForeignKey"; "required": false; }; "RowsFilter": { "alias": "RowsFilter"; "required": false; }; "ColumnsFilter": { "alias": "ColumnsFilter"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, {}, never, never, false, never>;
+}