@memberjunction/ng-explorer-core 1.8.0 → 2.0.0

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

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component } from '@angular/core';
-import { Metadata, RunView, CompositeKey } from '@memberjunction/core';
+import { Metadata, RunView, CompositeKey, LogError } from '@memberjunction/core';
+import { SharedService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@progress/kendo-angular-listview";
@@ -52,13 +53,19 @@ export class FavoritesComponent {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
             const rv = new RunView();
-            let sFilter = `UserID=${md.CurrentUser.ID}`;
-            if (this.ExtraFilter)
+            let sFilter = `UserID='${md.CurrentUser.ID}'`;
+            if (this.ExtraFilter) {
                 sFilter += `AND (${this.ExtraFilter})`;
+            }
             const viewResults = yield rv.RunView({
                 EntityName: 'User Favorites',
                 ExtraFilter: sFilter
             });
+            if (!viewResults.Success) {
+                LogError(viewResults.ErrorMessage);
+                SharedService.Instance.CreateSimpleNotification("Unable to load User Favorites");
+                return;
+            }
             this.favorites = viewResults.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 = this.favorites.map(fav => {
                 let compositeKey = new CompositeKey([{ FieldName: 'ID', Value: fav.RecordID }]);
@@ -134,4 +141,4 @@ FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Favorite
         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=\"fa-regular fa-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>: {{favoriteItemDisplayName(dataItem)}}\n            </div>\n        </ng-template>\n    </ng-container>\n</kendo-listview>\n", styles: [".favorites-list {\n    width: 400px;\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
     }], () => [{ type: i1.Router }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FavoritesComponent, { className: "FavoritesComponent", filePath: "src/lib/favorites/favorites.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FavoritesComponent, { className: "FavoritesComponent" }); })();

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

@@ -1,7 +1,9 @@
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-export declare class FilesComponent {
+export declare class FilesComponent extends BaseNavigationComponent {
     CategoryID: number | undefined;
     categorySelected(newCategoryID: number): void;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FilesComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FilesComponent, "app-files", never, {}, {}, never, never, false, never>;
 }

package/dist/lib/files/files.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"files.component.d.ts","sourceRoot":"","sources":["../../../src/lib/files/files.component.ts"],"names":[],"mappings":";AAEA,qBAKa,cAAc;IAClB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,gBAAgB,CAAC,aAAa,EAAE,MAAM;yCAHlC,cAAc;2CAAd,cAAc;CAM1B"}
+{"version":3,"file":"files.component.d.ts","sourceRoot":"","sources":["../../../src/lib/files/files.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAEpE,qBAMa,cAAe,SAAQ,uBAAuB;IAClD,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/B,gBAAgB,CAAC,aAAa,EAAE,MAAM;;yCAHlC,cAAc;2CAAd,cAAc;CAU1B"}

package/dist/lib/files/files.component.js

@@ -1,13 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-file-storage";
-export class FilesComponent {
+let FilesComponent = class FilesComponent extends BaseNavigationComponent {
     categorySelected(newCategoryID) {
         this.CategoryID = newCategoryID;
     }
-}
+    constructor() {
+        super();
+    }
+};
 FilesComponent.ɵfac = function FilesComponent_Factory(t) { return new (t || FilesComponent)(); };
-FilesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilesComponent, selectors: [["app-files"]], decls: 3, vars: 1, consts: [[1, "container"], [3, "categorySelected"], [3, "CategoryID"]], template: function FilesComponent_Template(rf, ctx) { if (rf & 1) {
+FilesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilesComponent, selectors: [["app-files"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "container"], [3, "categorySelected"], [3, "CategoryID"]], template: function FilesComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "mj-files-category-tree", 1);
         i0.ɵɵlistener("categorySelected", function FilesComponent_Template_mj_files_category_tree_categorySelected_1_listener($event) { return ctx.categorySelected($event); });
         i0.ɵɵelementEnd();
@@ -17,8 +28,12 @@ FilesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilesCompone
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("CategoryID", ctx.CategoryID);
     } }, dependencies: [i1.CategoryTreeComponent, i1.FilesGridComponent], styles: [".container[_ngcontent-%COMP%] {\n    display: flex;\n  }"] });
+FilesComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Files')
+], FilesComponent);
+export { FilesComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilesComponent, [{
         type: Component,
         args: [{ selector: 'app-files', template: "<div class=\"container\">\n  <mj-files-category-tree (categorySelected)=\"categorySelected($event)\"></mj-files-category-tree>\n  <mj-files-grid [CategoryID]=\"CategoryID\"></mj-files-grid>\n</div>\n", styles: ["  .container {\n    display: flex;\n  } "] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilesComponent, { className: "FilesComponent", filePath: "src/lib/files/files.component.ts", lineNumber: 8 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilesComponent, { className: "FilesComponent" }); })();

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

@@ -91,4 +91,4 @@ FormToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormTo
     }], null, { form: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormToolbarComponent, { className: "FormToolbarComponent", filePath: "src/lib/generic/form-toolbar.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormToolbarComponent, { className: "FormToolbarComponent" }); })();

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

@@ -105,4 +105,4 @@ ResourceContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: ViewChild,
             args: [Container, { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResourceContainerComponent, { className: "ResourceContainerComponent", filePath: "src/lib/generic/resource-container-component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResourceContainerComponent, { className: "ResourceContainerComponent" }); })();

package/dist/lib/generic-browse-list/generic-browse-list.component.js

@@ -163,4 +163,4 @@ GenericBrowseListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         }], itemClickEvent: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowseListComponent, { className: "GenericBrowseListComponent", filePath: "src/lib/generic-browse-list/generic-browse-list.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowseListComponent, { className: "GenericBrowseListComponent" }); })();

package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts

@@ -21,7 +21,7 @@ export declare class GenericBrowserListComponent implements OnInit {
     CategoryEntityName: string;
     selectedFolderID: number | null;
     showNotifications: boolean;
-    categoryEntityID: number | null;
+    categoryEntityID: string | null;
     displayAsGrid: boolean;
     resourceName: string;
     /**

package/dist/lib/generic-browser-list/generic-browser-list.component.js

@@ -459,7 +459,7 @@ export class GenericBrowserListComponent {
             const rv = new RunView();
             const folderResult = yield rv.RunView({
                 EntityName: this.CategoryEntityName,
-                ExtraFilter: "ParentID = " + folderID
+                ExtraFilter: `ParentID ='${folderID}'`
             });
             return folderResult && folderResult.Success && folderResult.Results.length > 0;
         });
@@ -713,4 +713,4 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         }], createButtonDropdownData: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent", filePath: "src/lib/generic-browser-list/generic-browser-list.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent" }); })();

package/dist/lib/header/header.component.js

@@ -214,4 +214,4 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
             type: ViewChild,
             args: [DropDownListComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderComponent, { className: "HeaderComponent", filePath: "src/lib/header/header.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderComponent, { className: "HeaderComponent" }); })();

package/dist/lib/home-component/home.component.d.ts

@@ -1,10 +1,13 @@
 import { Router } from '@angular/router';
-import { SharedService } from '@memberjunction/ng-shared';
+import { Metadata } from '@memberjunction/core';
+import { BaseNavigationComponent, SharedService } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-export declare class HomeComponent {
+export declare class HomeComponent extends BaseNavigationComponent {
     sharedService: SharedService;
     private router;
     constructor(sharedService: SharedService, router: Router);
+    md: Metadata;
+    HomeItems: import("@memberjunction/core/dist/generic/explorerNavigationItem").ExplorerNavigationItem[];
     navigate(route: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HomeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<HomeComponent, "app-home", never, {}, {}, never, never, false, never>;

package/dist/lib/home-component/home.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/lib/home-component/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAE1D,qBAKa,aAAa;IACL,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAChE,QAAQ,CAAC,KAAK,EAAE,MAAM;yCAFlB,aAAa;2CAAb,aAAa;CAKzB"}
+{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/lib/home-component/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAEnF,qBAMa,aAAc,SAAQ,uBAAuB;IACrC,aAAa,EAAE,aAAa;IAAE,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAIhE,EAAE,WAAkB;IACpB,SAAS,8FAAgF;IAEzF,QAAQ,CAAC,KAAK,EAAE,MAAM;yCARlB,aAAa;2CAAb,aAAa;CAazB"}

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

@@ -1,69 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Component } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
-import * as i3 from "../favorites/favorites.component";
-export class HomeComponent {
+import * as i3 from "@angular/common";
+import * as i4 from "../favorites/favorites.component";
+function HomeComponent_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵlistener("click", function HomeComponent_For_8_Template_div_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.navigate(item_r2.Route)); });
+    i0.ɵɵelement(1, "span", 8);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", "fa-solid fa-4x sky-blue " + item_r2.IconCSSClass);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r2.Name);
+} }
+let HomeComponent = class HomeComponent extends BaseNavigationComponent {
     constructor(sharedService, router) {
+        super();
         this.sharedService = sharedService;
         this.router = router;
+        this.md = new Metadata();
+        this.HomeItems = this.md.VisibleExplorerNavigationItems.filter(item => item.ShowInHomeScreen); // only want to show the home items here
     }
     navigate(route) {
-        this.router.navigate([route]);
+        this.router.navigate([route]).catch(err => {
+            console.error('Navigation error:', err);
+        });
     }
-}
+};
 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: 36, vars: 0, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [1, "fa-solid", "fa-user", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-table-cells", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-database", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-layer-group", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-chart-line", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-list-ul", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-gear", "fa-4x", "sky-blue"], [1, "home-favorites"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
+HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 0, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item"], [1, "home-favorites"], [1, "nav-item", 3, "click"], [3, "ngClass"]], 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.ɵɵelementStart(5, "div", 3)(6, "div", 4);
+        i0.ɵɵrepeaterCreate(7, HomeComponent_For_8_Template, 4, 2, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelement(9, "app-favorites", 6);
         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("queries"); });
-        i0.ɵɵelement(16, "span", 8);
-        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, "span", 9);
-        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, "span", 10);
-        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("lists"); });
-        i0.ɵɵelement(28, "span", 11);
-        i0.ɵɵelementStart(29, "span");
-        i0.ɵɵtext(30, "Lists");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(31, "div", 5);
-        i0.ɵɵlistener("click", function HomeComponent_Template_div_click_31_listener() { return ctx.navigate("settings"); });
-        i0.ɵɵelement(32, "span", 12);
-        i0.ɵɵelementStart(33, "span");
-        i0.ɵɵtext(34, "Settings");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelement(35, "app-favorites", 13);
-        i0.ɵɵelementEnd()();
-    } }, dependencies: [i3.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\n    padding: 15px;\n}\n\n.nav-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item[_ngcontent-%COMP%] {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item[_ngcontent-%COMP%]:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites[_ngcontent-%COMP%] {\n    width: 500px;\n}\n\n.sky-blue[_ngcontent-%COMP%] {\n    color: var(--sky-blue);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
+    } if (rf & 2) {
+        i0.ɵɵadvance(7);
+        i0.ɵɵrepeater(ctx.HomeItems);
+    } }, dependencies: [i3.NgClass, i4.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\n    padding: 15px;\n}\n\n.nav-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item[_ngcontent-%COMP%] {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item[_ngcontent-%COMP%]:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites[_ngcontent-%COMP%] {\n    width: 500px;\n}\n\n.sky-blue[_ngcontent-%COMP%] {\n    color: var(--sky-blue);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
+HomeComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Home')
+], HomeComponent);
+export { HomeComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeComponent, [{
         type: Component,
-        args: [{ selector: 'app-home', template: "<div  class=\"home-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=\"fa-solid fa-user fa-4x sky-blue\"></span>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <span class=\"fa-solid fa-table-cells fa-4x sky-blue\"></span>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\n                <span class=\"fa-solid fa-database fa-4x sky-blue\"></span>\n                <span>Queries</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <span class=\"fa-solid fa-layer-group fa-4x sky-blue\"></span>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <span class=\"fa-solid fa-chart-line fa-4x sky-blue\"></span>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('lists')\">\n                <span class=\"fa-solid fa-list-ul fa-4x sky-blue\"></span>\n                <span>Lists</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <span class=\"fa-solid fa-gear fa-4x sky-blue\"></span>\n                <span>Settings</span>\n            </div>\n        </div>\n\n        <app-favorites class=\"home-favorites\"></app-favorites>\n    </div>\n</div>", styles: [".home-container {\n    padding: 15px;\n}\n\n.nav-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item .k-svg-icon {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites {\n    width: 500px;\n}\n\n.sky-blue {\n    color: var(--sky-blue);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+        args: [{ selector: 'app-home', template: "<div  class=\"home-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=\"fa-solid fa-user fa-4x sky-blue\"></span>\n                <span>Ask Skip</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\n                <span class=\"fa-solid fa-table-cells fa-4x sky-blue\"></span>\n                <span>Data</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\n                <span class=\"fa-solid fa-database fa-4x sky-blue\"></span>\n                <span>Queries</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n                <span class=\"fa-solid fa-layer-group fa-4x sky-blue\"></span>\n                <span>Dashboards</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\n                <span class=\"fa-solid fa-chart-line fa-4x sky-blue\"></span>\n                <span>Reports</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('lists')\">\n                <span class=\"fa-solid fa-list-ul fa-4x sky-blue\"></span>\n                <span>Lists</span>\n            </div>\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\n                <span class=\"fa-solid fa-gear fa-4x sky-blue\"></span>\n                <span>Settings</span>\n            </div> -->\n            @for (item of HomeItems; track item) {\n                <div class=\"nav-item\" (click)=\"navigate(item.Route)\">\n                    <span [ngClass]=\"'fa-solid fa-4x sky-blue ' + item.IconCSSClass\"></span>\n                    <span>{{item.Name}}</span>\n                </div>\n            }\n        </div>\n\n        <app-favorites class=\"home-favorites\"></app-favorites>\n    </div>\n</div>", styles: [".home-container {\n    padding: 15px;\n}\n\n.nav-container {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 24px;\n    flex: 1;\n}\n.nav-item {\n    border: solid 1px lightgray;\n    border-radius: 5px;\n    background: #fff;\n    border-radius: 15px;\n    width: 100%;;\n    height: auto;\n    box-sizing: border-box;\n    padding: 25px;\n    text-align: left;\n    display: flex;\n    gap: 26px;\n    vertical-align: middle; \n    font-size: 20px;\n    cursor: pointer;\n}\n.nav-item .k-svg-icon {\n    width: 75px;\n    height: 75px;\n    color: var(--sky-blue);\n}\n.nav-item:hover  {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n}\n\n\n.home-favorites {\n    width: 500px;\n}\n\n.sky-blue {\n    color: var(--sky-blue);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeComponent, { className: "HomeComponent" }); })();

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

@@ -0,0 +1,31 @@
+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>;
+}
+//# sourceMappingURL=join-grid.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"join-grid.component.d.ts","sourceRoot":"","sources":["../../../src/lib/join-grid/join-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;;AAIxE,qBAKa,iBAAkB,YAAW,MAAM,EAAE,aAAa;IACpD,UAAU,EAAE,MAAM,CAAM;IACxB,aAAa,EAAE,MAAM,CAAM;IAC3B,UAAU,EAAE,MAAM,CAAM;IACxB,iBAAiB,EAAE,MAAM,CAAM;IAC/B,qBAAqB,EAAE,MAAM,CAAM;IACnC,UAAU,EAAE,MAAM,CAAM;IACxB,aAAa,EAAE,MAAM,CAAM;IAC3B,QAAQ,EAAE,OAAO,CAAS;IAC5B,UAAU,EAAE,OAAO,CAAS;IAC5B,QAAQ,EAAE,GAAG,EAAE,CAAM;IACrB,cAAc,EAAE,GAAG,EAAE,CAAM;IAC3B,SAAS,EAAE,OAAO,CAAS;IAC3B,YAAY,EAAE,MAAM,CAAM;IAC1B,UAAU,EAAE,MAAM,CAAO;IAChC,OAAO,CAAC,SAAS,CAA6B;;IAI9C,QAAQ,IAAI,IAAI;IAShB,eAAe,IAAI,IAAI;IAIjB,QAAQ;IAeR,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IAa7C,eAAe,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE;IA8BhE,OAAO,CAAC,WAAW,CAAO;IAC1B,aAAa,IAAI,IAAI;IAed,UAAU,IAAI,IAAI;yCA1Gd,iBAAiB;2CAAjB,iBAAiB;CA8G7B"}