@memberjunction/ng-explorer-core 0.9.200 → 0.9.204

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

@@ -0,0 +1,366 @@
+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, EventEmitter, Input, Output } from '@angular/core';
+import { Folder, Item, ItemType } from '../../generic/Item.types';
+import { Metadata, PrimaryKeyValue, RunView } from '@memberjunction/core';
+import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent } from '../../generic/Events.types';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/router";
+import * as i3 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-layout";
+function GenericBrowserListComponent_kendo_loader_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 11);
+} }
+function GenericBrowserListComponent_div_17_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 14)(2, "kendo-card-header", 15)(3, "div", 16)(4, "kendo-button", 17);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_17_div_1_Template_kendo_button_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.deleteItem(d_r3)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(5, "kendo-card-body", 18);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_17_div_1_Template_kendo_card_body_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const d_r3 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.itemClick(d_r3)); });
+    i0.ɵɵelementStart(6, "div", 19)(7, "h5", 20);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 21);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const d_r3 = ctx.$implicit;
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(d_r3.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(d_r3.Description);
+} }
+function GenericBrowserListComponent_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, GenericBrowserListComponent_div_17_div_1_Template, 11, 2, "div", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.items);
+} }
+export class GenericBrowserListComponent {
+    constructor(sharedService, router) {
+        this.sharedService = sharedService;
+        this.router = router;
+        this.showLoader = true;
+        this.itemType = '';
+        this.title = '';
+        this.items = [];
+        this.iconName = 'view';
+        this.disableAddButton = false;
+        this.addText = 'Create New';
+        this.backText = 'Go Back';
+        this.ItemEntityName = '';
+        this.CategoryEntityName = '';
+        this.selectedFolderID = null;
+        this.showNotifications = true;
+        //Before Evewnts
+        this.BeforeAddFolderEvent = new EventEmitter();
+        this.BeforeAddItemEvent = new EventEmitter();
+        this.BeforeDeleteFolderEvent = new EventEmitter();
+        this.BeforeDeleteItemEvent = new EventEmitter();
+        this.BeforeUpdateFolderEvent = new EventEmitter();
+        this.BeforeUpdateItemEvent = new EventEmitter();
+        //After Events
+        this.AfterAddFolderEvent = new EventEmitter();
+        this.AfterAddItemEvent = new EventEmitter();
+        this.AfterDeleteFolderEvent = new EventEmitter();
+        this.AfterDeleteItemEvent = new EventEmitter();
+        this.AfterUpdateFolderEvent = new EventEmitter();
+        this.AfterUpdateItemEvent = new EventEmitter();
+        this.itemClickEvent = new EventEmitter();
+        this.backButtonClickEvent = new EventEmitter();
+        this.router = router;
+    }
+    //TODO - add property to show or hide notifications
+    //create display notification method
+    itemClick(item) {
+        if (!item) {
+            return;
+        }
+        this.itemClickEvent.emit(item);
+    }
+    backButtonClicked() {
+        this.backButtonClickEvent.emit();
+    }
+    //todo - show a modal asking the user for a name to give the resource
+    addResourceButtonClicked() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const resourceName = "Sample";
+            const md = new Metadata();
+            const entity = yield md.GetEntityObject(this.ItemEntityName);
+            entity.NewRecord();
+            entity.Set("Name", resourceName);
+            let saveResult = yield entity.Save();
+            if (saveResult) {
+                this.showNotification(`successfully created ${resourceName}`, "info");
+                let item = new Item(entity, ItemType.Entity);
+                item.Name = resourceName;
+                this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
+            }
+            else {
+                this.showNotification(`Unable to create folder ${resourceName}`, "error");
+            }
+        });
+    }
+    //todo - show a modal asking the user for a name to give the folder
+    createFolder() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let event = new BeforeAddFolderEvent("Sample Folder");
+            if (event.Cancel) {
+            }
+            let folderName = "Sample Folder";
+            const md = new Metadata();
+            const folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
+            folderEntity.NewRecord();
+            folderEntity.Set("Name", folderName);
+            folderEntity.Set("ParentID", this.selectedFolderID);
+            folderEntity.Set("Description", "Sample Description");
+            let saveResult = yield folderEntity.Save();
+            if (saveResult) {
+                this.showNotification(`successfully created folder ${folderName}`, "info");
+                let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
+                let item = new Item(folder, ItemType.Folder);
+                this.AfterAddFolderEvent.emit(new AfterAddFolderEvent(item));
+            }
+            else {
+                this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error");
+            }
+        });
+    }
+    deleteItem(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!item) {
+                return;
+            }
+            if (item.Type === ItemType.Folder) {
+                let event = new BeforeDeleteFolderEvent(item);
+                this.BeforeDeleteFolderEvent.emit(event);
+                if (event.Cancel) {
+                    return;
+                }
+                let deleteResult = yield this.deleteFolder(item);
+                if (deleteResult) {
+                    let deleteFolderEvent = new AfterDeleteFolderEvent(item);
+                    this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
+                }
+            }
+            else if (item.Type === ItemType.Entity) {
+                let event = new BeforeDeleteItemEvent(item);
+                this.BeforeDeleteItemEvent.emit(event);
+                if (event.Cancel) {
+                    return;
+                }
+                yield this.deleteResource(item);
+                let deleteItemEvent = new AfterDeleteItemEvent(item);
+                this.AfterDeleteItemEvent.emit(deleteItemEvent);
+            }
+        });
+    }
+    deleteFolder(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const folder = item.Data;
+            //the DB will throw an error if we attempt to delete a folder that has children
+            //i.e. sub folders or resources
+            //so the default behavior is to notify the user that the delete operation cannot
+            //go through 
+            const folderHasChildren = yield this.doesFolderHaveChildren(folder.ID);
+            if (folderHasChildren) {
+                this.showNotification(`unable to delete folder ${folder.Name} because it has children`, "error");
+                return false;
+            }
+            this.showLoader = true;
+            const md = new Metadata();
+            let folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
+            let pkv = new PrimaryKeyValue();
+            pkv.FieldName = "ID";
+            pkv.Value = folder.ID;
+            //create view browser component - this will be used to display views
+            //then create a new component for applications that wraps around the view browser component 
+            let loadResult = yield folderEntity.InnerLoad([pkv]);
+            if (!loadResult) {
+                this.sharedService.CreateSimpleNotification(`unable to fetch folder ${folder.Name}`, "error");
+                this.showLoader = false;
+                return false;
+            }
+            let deleteResult = yield folderEntity.Delete();
+            if (!deleteResult) {
+                this.sharedService.CreateSimpleNotification(`unable to delete folder ${folder.Name}`, "error");
+                this.showLoader = false;
+                return false;
+            }
+            else {
+                this.sharedService.CreateSimpleNotification(`successfully deleted folder ${folder.Name}`, "info");
+                this.showLoader = false;
+            }
+            return true;
+        });
+    }
+    deleteResource(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let genericEntity = item.Data;
+            if (!genericEntity) {
+                return false;
+            }
+            //the only assumption we are making here is that the entityID
+            //is a number
+            const entityID = this.TryGetID(genericEntity);
+            if (entityID && entityID > 0) {
+                const md = new Metadata();
+                let entityObject = yield md.GetEntityObject(this.ItemEntityName);
+                let pkv = new PrimaryKeyValue();
+                pkv.FieldName = "ID";
+                pkv.Value = entityID;
+                let loadResult = yield entityObject.InnerLoad([pkv]);
+                if (loadResult) {
+                    let deleteResult = yield entityObject.Delete();
+                    if (deleteResult) {
+                        this.showNotification(`successfully deleted dashboard`, "info");
+                        return true;
+                    }
+                    else {
+                        this.showNotification(`Unable to delete dashboard`, "error");
+                    }
+                }
+                else {
+                    this.showNotification(`unable to fetch dashboard`, "error");
+                }
+            }
+            return false;
+        });
+    }
+    doesFolderHaveChildren(folderID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const rv = new RunView();
+            const folderResult = yield rv.RunView({
+                EntityName: this.CategoryEntityName,
+                ExtraFilter: "ParentID = " + folderID
+            });
+            return folderResult && folderResult.Success && folderResult.Results.length > 0;
+        });
+    }
+    showNotification(message, type) {
+        if (this.showNotifications) {
+            this.sharedService.CreateSimpleNotification(message, type);
+        }
+    }
+    TryGetID(data) {
+        if (data && data.ID) {
+            return data.ID;
+        }
+        else if (typeof data.Get === "function") {
+            return data.Get("ID");
+        }
+    }
+}
+GenericBrowserListComponent.ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
+GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent" }, decls: 18, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "add-item"], ["kendoButton", "", 3, "disabled", "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-plus"], ["kendoButton", "", 3, "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-chevron-left"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], [1, "btn-wrapper"], ["iconClass", "fa fa-trash", "fillMode", "flat", "title", "Delete Item", 3, "click"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(5, "div", 3)(6, "button", 4);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_6_listener() { return ctx.addResourceButtonClicked(); });
+        i0.ɵɵelement(7, "span", 5);
+        i0.ɵɵtext(8);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "button", 6);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_9_listener() { return ctx.createFolder(); });
+        i0.ɵɵelement(10, "span", 7);
+        i0.ɵɵtext(11, " Create Folder ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "button", 6);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_12_listener() { return ctx.backButtonClicked(); });
+        i0.ɵɵelement(13, "span", 7);
+        i0.ɵɵtext(14);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(15, "div", 8);
+        i0.ɵɵtemplate(16, GenericBrowserListComponent_kendo_loader_16_Template, 1, 0, "kendo-loader", 9)(17, GenericBrowserListComponent_div_17_Template, 2, 1, "div", 10);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.title);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("disabled", ctx.disableAddButton)("primary", true);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", ctx.addText, " ");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("primary", true);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("primary", true);
+        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate1(" ", ctx.backText, " ");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.showLoader);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.showLoader);
+    } }, dependencies: [i3.NgForOf, i3.NgIf, i4.ButtonComponent, i5.LoaderComponent, i6.CardComponent, i6.CardHeaderComponent, i6.CardBodyComponent, i6.CardTitleDirective, i6.CardSubtitleDirective], styles: [".generic-browse-list-container[_ngcontent-%COMP%] {\r\n    margin: 10px;\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(GenericBrowserListComponent, [{
+        type: Component,
+        args: [{ selector: 'app-generic-browser-list', template: "<div  class=\"generic-browser-list-container\">\r\n    <div class=\"card-header-entity\">\r\n        <div class=\"title-wrap\">\r\n            <h1>{{title}}</h1>\r\n        </div>\r\n        <div class=\"add-item\">\r\n          <button kendoButton [disabled]=\"disableAddButton\" (click)=\"addResourceButtonClicked()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-plus\"></span>\r\n              {{addText}}\r\n          </button>\r\n          <button kendoButton (click)=\"createFolder()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n              Create Folder\r\n          </button>\r\n          <button kendoButton (click)=\"backButtonClicked()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n              {{backText}}\r\n          </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"main-area\"> \r\n        <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\r\n        <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\r\n          <div *ngFor=\"let d of items\">\r\n            <kendo-card class=\"card-wrapper\">\r\n              <kendo-card-header class=\"k-hstack view-card\">\r\n                <div class=\"btn-wrapper\">\r\n                  <kendo-button iconClass=\"fa fa-trash\" fillMode=\"flat\" title=\"Delete Item\" (click)=\"deleteItem(d)\"></kendo-button>\r\n                </div>\r\n              </kendo-card-header>\r\n              <kendo-card-body (click)=\"itemClick(d)\">\r\n                <div class=\"view-card-content k-cursor-pointer\">\r\n                  <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n                  <p kendoCardSubtitle>{{ d.Description }}</p>\r\n                </div>\r\n              </kendo-card-body>\r\n            </kendo-card>\r\n          </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".generic-browse-list-container {\r\n    margin: 10px;\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 }], { showLoader: [{
+            type: Input
+        }], itemType: [{
+            type: Input
+        }], title: [{
+            type: Input
+        }], items: [{
+            type: Input
+        }], iconName: [{
+            type: Input
+        }], disableAddButton: [{
+            type: Input
+        }], addText: [{
+            type: Input
+        }], backText: [{
+            type: Input
+        }], ItemEntityName: [{
+            type: Input
+        }], CategoryEntityName: [{
+            type: Input
+        }], selectedFolderID: [{
+            type: Input
+        }], showNotifications: [{
+            type: Input
+        }], BeforeAddFolderEvent: [{
+            type: Output
+        }], BeforeAddItemEvent: [{
+            type: Output
+        }], BeforeDeleteFolderEvent: [{
+            type: Output
+        }], BeforeDeleteItemEvent: [{
+            type: Output
+        }], BeforeUpdateFolderEvent: [{
+            type: Output
+        }], BeforeUpdateItemEvent: [{
+            type: Output
+        }], AfterAddFolderEvent: [{
+            type: Output
+        }], AfterAddItemEvent: [{
+            type: Output
+        }], AfterDeleteFolderEvent: [{
+            type: Output
+        }], AfterDeleteItemEvent: [{
+            type: Output
+        }], AfterUpdateFolderEvent: [{
+            type: Output
+        }], AfterUpdateItemEvent: [{
+            type: Output
+        }], itemClickEvent: [{
+            type: Output
+        }], backButtonClickEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent", filePath: "src\\lib\\generic-browser-list\\generic-browser-list.component.ts", lineNumber: 13 }); })();

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

@@ -24,8 +24,8 @@ import * as i8 from "@progress/kendo-angular-icons";
 import * as i9 from "@progress/kendo-angular-layout";
 import * as i10 from "@progress/kendo-angular-dropdowns";
 const _c0 = ["searchInput"];
-function HeaderComponent_span_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
+function HeaderComponent_span_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -152,43 +152,40 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityDropdown = _t.first);
-    } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 25, vars: 10, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", 3, "click"], [3, "icon"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ-Logo.png", "height", "45px", 1, "app-logo"], [1, "k-ml-2.5"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "icon-inbox", 3, "click"], [1, "k-icon", 2, "cursor", "pointer"], ["class", "notification", 4, "ngIf"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "user-info"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 23, vars: 9, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", 3, "click"], [3, "icon"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ_logo.svg", "height", "45px", 1, "app-logo"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "icon-inbox", 3, "click"], [1, "k-icon", 2, "cursor", "pointer"], ["class", "notification", 4, "ngIf"], [1, "user-info"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "span", 4);
         i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_4_listener() { return ctx.onButtonClick(); });
         i0.ɵɵelement(5, "kendo-svgicon", 5);
         i0.ɵɵelementEnd()();
         i0.ɵɵelementStart(6, "div", 6);
         i0.ɵɵelement(7, "img", 7);
-        i0.ɵɵelementStart(8, "h1", 8);
-        i0.ɵɵtext(9);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(10, "div", 9)(11, "div", 10)(12, "kendo-dropdownlist", 11);
-        i0.ɵɵtwoWayListener("ngModelChange", function HeaderComponent_Template_kendo_dropdownlist_ngModelChange_12_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return $event; });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(13, "input", 12, 13);
-        i0.ɵɵlistener("keydown.enter", function HeaderComponent_Template_input_keydown_enter_13_listener($event) { return ctx.onSearch($event); });
+        i0.ɵɵelementStart(8, "div", 8)(9, "div", 9)(10, "kendo-dropdownlist", 10);
+        i0.ɵɵtwoWayListener("ngModelChange", function HeaderComponent_Template_kendo_dropdownlist_ngModelChange_10_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return $event; });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(11, "input", 11, 12);
+        i0.ɵɵlistener("keydown.enter", function HeaderComponent_Template_input_keydown_enter_11_listener($event) { return ctx.onSearch($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(15, "span", 4);
-        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_15_listener($event) { return ctx.onSearch($event); });
-        i0.ɵɵelement(16, "kendo-svgicon", 5);
+        i0.ɵɵelementStart(13, "span", 4);
+        i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_13_listener($event) { return ctx.onSearch($event); });
+        i0.ɵɵelement(14, "kendo-svgicon", 5);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(17, "div", 14);
-        i0.ɵɵlistener("click", function HeaderComponent_Template_div_click_17_listener($event) { return ctx.showNotifications($event); });
-        i0.ɵɵelementStart(18, "span", 15);
-        i0.ɵɵelement(19, "kendo-svgicon", 5);
+        i0.ɵɵelementStart(15, "div", 13);
+        i0.ɵɵlistener("click", function HeaderComponent_Template_div_click_15_listener($event) { return ctx.showNotifications($event); });
+        i0.ɵɵelementStart(16, "span", 14);
+        i0.ɵɵelement(17, "kendo-svgicon", 5);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(20, HeaderComponent_span_20_Template, 2, 1, "span", 16);
+        i0.ɵɵtemplate(18, HeaderComponent_span_18_Template, 2, 1, "span", 15);
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(21, "kendo-avatar", 17);
-        i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "kendo-dropdownlist", 20);
-        i0.ɵɵlistener("valueChange", function HeaderComponent_Template_kendo_dropdownlist_valueChange_24_listener($event) { return ctx.valueChange($event); });
+        i0.ɵɵelementStart(19, "div", 16);
+        i0.ɵɵelement(20, "kendo-avatar", 17);
+        i0.ɵɵelementStart(21, "div", 18)(22, "kendo-dropdownlist", 19);
+        i0.ɵɵlistener("valueChange", function HeaderComponent_Template_kendo_dropdownlist_valueChange_22_listener($event) { return ctx.valueChange($event); });
         i0.ɵɵelementEnd()()()()()()();
     } if (rf & 2) {
         i0.ɵɵadvance(5);
         i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("menu"));
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(ctx.appName);
-        i0.ɵɵadvance(3);
+        i0.ɵɵadvance(5);
         i0.ɵɵproperty("data", ctx.searchableEntities);
         i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntity);
         i0.ɵɵadvance(4);
@@ -197,14 +194,14 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
         i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("inbox"));
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.UnreadNotificationCount > 0);
-        i0.ɵɵadvance();
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("imageSrc", ctx.userImageURL);
-        i0.ɵɵadvance(3);
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("data", ctx.menuItems)("value", ctx.selectedMenuItem);
-    } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.SVGIconComponent, i9.AvatarComponent, i9.CardMediaDirective, i10.DropDownListComponent], styles: [".header-wrap[_ngcontent-%COMP%] {\r\n  flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n  font-size: x-large;  \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%]   .notification[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .k-avatar[_ngcontent-%COMP%] {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list[_ngcontent-%COMP%] {\r\n  width: 200px; \r\n}\r\n  .search-wrapper #txtSearch::placeholder,   .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-input[_ngcontent-%COMP%], .search-wrapper[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n  color: black;\r\n}\r\n\r\n\r\n\n\r\n@media (max-width: 1700px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    font-size: x-small; \n\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    display: none;\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper[_ngcontent-%COMP%] {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list[_ngcontent-%COMP%] {\r\n    width: 150px; \r\n  }\r\n}"] });
+    } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.SVGIconComponent, i9.AvatarComponent, i9.CardMediaDirective, i10.DropDownListComponent], styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap[_ngcontent-%COMP%] {\r\n  flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n  font-size: x-large;  \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n  width: 297px;\r\n}\r\n.user-info[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  gap: 40px;\r\n  align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n  position: relative;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\r\n  width: 28px;\r\n  height: 28px;\r\n  min-width: 28px;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\r\n.user-info-wrapper[_ngcontent-%COMP%]   .header[_ngcontent-%COMP%]   .k-avatar[_ngcontent-%COMP%] {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  max-width: 526px;\r\n  width: 100%;\r\n  height: 44px;\r\n}\r\n  .search-wrapper #txtSearch::placeholder,   .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-input[_ngcontent-%COMP%]::placeholder {\r\n  color: #54585F;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-input[_ngcontent-%COMP%]{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\r\n  width: 170px; \r\n  height: 100%;\r\n  background: var(--gray-color);\r\n  border-radius: 10px 0px 0px 10px;\r\n  margin: 0;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 19px;\r\n  letter-spacing: 0em;\r\n  text-align: center;\r\n  color: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%]   .k-icon[_ngcontent-%COMP%] {\r\n  color: var(--text-darked);\r\n  position: absolute;\r\n  right: 10px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n  color: black;\r\n}\r\n\r\n\r\n\n\r\n@media (max-width: 1700px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    font-size: x-small; \n\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title[_ngcontent-%COMP%] {\r\n    display: none;\r\n  }\r\n  .app-logo[_ngcontent-%COMP%] {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper[_ngcontent-%COMP%] {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list[_ngcontent-%COMP%] {\r\n    width: 150px; \r\n  }\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
         type: Component,
-        args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n  <div class=\"header header-bg\">\r\n    <div class=\"nav-container\">\r\n      <div class=\"menu-button\">\r\n        <span class=\"k-icon\" (click)=\"onButtonClick()\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('menu')\" ></kendo-svgicon></span>\r\n      </div>\r\n\r\n      <div class=\"title\">\r\n        <img kendoCardMedia src=\"assets/MJ-Logo.png\" height=\"45px\" class=\"app-logo\" />\r\n        <h1 class=\"k-ml-2.5\">{{appName}}</h1>\r\n      </div>\r\n\r\n      <div class=\"user-info-wrapper\">\r\n        <div class=\"search-wrapper\">\r\n            <kendo-dropdownlist\r\n              [data]=\"searchableEntities\"\r\n              textField=\"Name\"\r\n              valueField=\"ID\"\r\n              class = \"search-entity-list\"\r\n              [(ngModel)]=\"selectedEntity\"\r\n            >\r\n            </kendo-dropdownlist>\r\n            <input \r\n            type=\"text\"\r\n            id=\"txtSearch\"\r\n            placeholder=\"Search\"\r\n            kendoTextBox\r\n            (keydown.enter)=\"onSearch($event)\"\r\n            #searchInput\r\n          />\r\n                        <span class=\"k-icon\" (click)=\"onSearch($event)\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('search')\"></kendo-svgicon></span>\r\n                </div>\r\n      <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n          <span class=\"k-icon\" style=\"cursor: pointer;\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('inbox')\"></kendo-svgicon></span>\r\n          <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n      </div>\r\n        <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n        <div class=\"user-info\">\r\n          <div class=\"example-col\">\r\n              <kendo-dropdownlist [data]=\"menuItems\"  [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n              </kendo-dropdownlist>\r\n            \r\n          </div>\r\n      </div>\r\n     \r\n\r\n       \r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"nav-breadcrumb\">\r\n        <kendo-breadcrumb (itemClick)=\"onBreadCrumbClick($event)\" [items]=\"breadCrumbItems\">\r\n        </kendo-breadcrumb>\r\n    </div> -->\r\n</div>\r\n", styles: [".header-wrap {\r\n  flex: auto;\r\n}\r\n\r\n.title {\r\n  font-size: x-large;  \r\n}\r\n.app-logo {\r\n  width: 100px;\r\n  height: 50px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n.icon-inbox {\r\n  position: relative;\r\n  margin: 0 26px 0 40px;\r\n}\r\n.icon-inbox .notification {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n}\r\n.user-info-wrapper .header .k-avatar {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  width: 500px;\r\n}\r\n.search-entity-list {\r\n  width: 200px; \r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-input, .search-wrapper .k-dropdownlist {\r\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\r\n  background: transparent;\r\n  border-radius: 0;\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-icon {\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input {\r\n  color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n  .title {\r\n    font-size: x-small; /* or any other size you prefer */\r\n  }\r\n  .app-logo {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title {\r\n    display: none;\r\n  }\r\n  .app-logo {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list {\r\n    width: 150px; \r\n  }\r\n}\r\n"] }]
+        args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n  <div class=\"header header-bg\">\r\n    <div class=\"nav-container\">\r\n      <div class=\"menu-button\">\r\n        <span class=\"k-icon\" (click)=\"onButtonClick()\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('menu')\" ></kendo-svgicon></span>\r\n      </div>\r\n\r\n      <div class=\"title\">\r\n        <img kendoCardMedia src=\"assets/MJ_logo.svg\" height=\"45px\" class=\"app-logo\" />\r\n        <!-- <h1 class=\"k-ml-2.5\">{{appName}}</h1> -->\r\n      </div>\r\n\r\n      <div class=\"user-info-wrapper\">\r\n        <div class=\"search-wrapper\">\r\n            <kendo-dropdownlist\r\n              [data]=\"searchableEntities\"\r\n              textField=\"Name\"\r\n              valueField=\"ID\"\r\n              class = \"search-entity-list\"\r\n              [(ngModel)]=\"selectedEntity\"\r\n            >\r\n            </kendo-dropdownlist>\r\n            <input \r\n            type=\"text\"\r\n            id=\"txtSearch\"\r\n            placeholder=\"Search\"\r\n            kendoTextBox\r\n            (keydown.enter)=\"onSearch($event)\"\r\n            #searchInput\r\n          />\r\n                        <span class=\"k-icon\" (click)=\"onSearch($event)\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('search')\"></kendo-svgicon></span>\r\n                </div>\r\n      <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n          <span class=\"k-icon\" style=\"cursor: pointer;\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('inbox')\"></kendo-svgicon></span>\r\n          <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n      </div>\r\n      <div class=\"user-info\">\r\n          <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n          <div class=\"example-col\">\r\n              <kendo-dropdownlist [data]=\"menuItems\"  [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n              </kendo-dropdownlist>\r\n            \r\n          </div>\r\n      </div>\r\n     \r\n\r\n       \r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"nav-breadcrumb\">\r\n        <kendo-breadcrumb (itemClick)=\"onBreadCrumbClick($event)\" [items]=\"breadCrumbItems\">\r\n        </kendo-breadcrumb>\r\n    </div> -->\r\n</div>\r\n", styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap {\r\n  flex: auto;\r\n}\r\n\r\n.title {\r\n  font-size: x-large;  \r\n}\r\n.app-logo {\r\n  width: 297px;\r\n}\r\n.user-info {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n  border: none;\r\n  background: transparent;\r\n  width: auto;\r\n  color: #fff;\r\n}\r\n.user-info-wrapper {\r\n  display: flex;\r\n  gap: 40px;\r\n  align-items: center;\r\n}\r\n.icon-inbox {\r\n  position: relative;\r\n}\r\n.icon-inbox .k-svg-icon {\r\n  width: 28px;\r\n  height: 28px;\r\n  min-width: 28px;\r\n}\r\n/* .icon-inbox .notification {\r\n  position: absolute;\r\n  top: -8px;\r\n  right: -8px;\r\n  width: 16px;\r\n  height: 16px;\r\n  min-width: 16px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #ff6358;\r\n  border-radius: 50%;\r\n  color: #fff;\r\n  font-size: 10px;\r\n} */\r\n.user-info-wrapper .header .k-avatar {\r\n  padding-left: 25px;\r\n  border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  max-width: 526px;\r\n  width: 100%;\r\n  height: 44px;\r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n  color: #fff;\r\n}\r\n.search-wrapper .k-input::placeholder {\r\n  color: #54585F;\r\n}\r\n.search-wrapper .k-input{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper .k-dropdownlist {\r\n  width: 170px; \r\n  height: 100%;\r\n  background: var(--gray-color);\r\n  border-radius: 10px 0px 0px 10px;\r\n  margin: 0;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  line-height: 19px;\r\n  letter-spacing: 0em;\r\n  text-align: center;\r\n  color: var(--text-darked);\r\n}\r\n.search-wrapper .k-icon {\r\n  color: var(--text-darked);\r\n  position: absolute;\r\n  right: 10px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 9;\r\n    cursor: pointer;\r\n  margin-right: 2px;\r\n} \r\n.k-input {\r\n  color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n  .title {\r\n    font-size: x-small; /* or any other size you prefer */\r\n  }\r\n  .app-logo {\r\n    width: 50px;\r\n    height: 25px;\r\n  }\r\n}\r\n@media (max-width: 1200px) {\r\n  .title {\r\n    display: none;\r\n  }\r\n  .app-logo {\r\n    display: none\r\n  }\r\n\r\n  .search-wrapper {\r\n    width: 350px;\r\n  }  \r\n  .search-entity-list {\r\n    width: 150px; \r\n  }\r\n}\r\n"] }]
     }], () => [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i3.MSFTUserImageService }, { type: i4.Router }], { applicationName: [{
             type: Input
         }], applicationInstance: [{

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

@@ -69,9 +69,9 @@ HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent
         i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("graph"));
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("gear"));
-    } }, dependencies: [i3.SVGIconComponent, i4.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\r\n    margin: 10px;\r\n}\r\n\r\n.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  }"] });
+    } }, dependencies: [i3.SVGIconComponent, i4.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\r\n    margin: 10px;\r\n}\r\n\r\n.nav-container[_ngcontent-%COMP%] {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 24px;\r\n    flex: 1;\r\n}\r\n.nav-item[_ngcontent-%COMP%] {\r\n    border: solid 1px lightgray;\r\n    border-radius: 5px;\r\n    background: #fff;\r\n    border-radius: 15px;\r\n    width: 100%;;\r\n    height: auto;\r\n    box-sizing: border-box;\r\n    padding: 25px;\r\n    text-align: left;\r\n    display: flex;\r\n    gap: 26px;\r\n    vertical-align: middle; \r\n    font-size: 20px;\r\n    cursor: pointer;\r\n}\r\n.nav-item[_ngcontent-%COMP%]   .k-svg-icon[_ngcontent-%COMP%] {\r\n    width: 75px;\r\n    height: 75px;\r\n    color: var(--sky-blue);\r\n}\r\n.nav-item[_ngcontent-%COMP%]:hover  {\r\n    background-color: rgb(243, 243, 222);\r\n}\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=\"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                <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: [".home-container {\r\n    margin: 10px;\r\n}\r\n\r\n.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  "] }]
+        args: [{ selector: 'app-home', template: "<div  class=\"home-container\">\r\n    <div class=\"card-header-entity\">\r\n        <div class=\"title-wrap\">\r\n            <h1>Home</h1>\r\n        </div>\r\n    </div>\r\n    <div class=\"main-area\"> \r\n        <div class=\"nav-container\">\r\n            <div class=\"nav-item\" (click)=\"navigate('askskip')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('user')\"></kendo-svgicon>\r\n                <span>Ask Skip</span>\r\n            </div>\r\n            <div class=\"nav-item\" (click)=\"navigate('data')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('table')\"></kendo-svgicon>\r\n                <span>Data</span>\r\n            </div>\r\n            <div class=\"nav-item\" (click)=\"navigate('queries')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('data')\"></kendo-svgicon>\r\n                <span>Queries</span>\r\n            </div>\r\n            <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('aggregateFields')\"></kendo-svgicon>\r\n                <span>Dashboards</span>\r\n            </div>\r\n            <div class=\"nav-item\" (click)=\"navigate('reports')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('graph')\"></kendo-svgicon>\r\n                <span>Reports</span>\r\n            </div>\r\n            <div class=\"nav-item\" (click)=\"navigate('settings')\">\r\n                <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('gear')\"></kendo-svgicon>\r\n                <span>Settings</span>\r\n            </div>\r\n        </div>\r\n\r\n        <app-favorites class=\"home-favorites\"></app-favorites>\r\n    </div>\r\n</div>", styles: [".home-container {\r\n    margin: 10px;\r\n}\r\n\r\n.nav-container {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 24px;\r\n    flex: 1;\r\n}\r\n.nav-item {\r\n    border: solid 1px lightgray;\r\n    border-radius: 5px;\r\n    background: #fff;\r\n    border-radius: 15px;\r\n    width: 100%;;\r\n    height: auto;\r\n    box-sizing: border-box;\r\n    padding: 25px;\r\n    text-align: left;\r\n    display: flex;\r\n    gap: 26px;\r\n    vertical-align: middle; \r\n    font-size: 20px;\r\n    cursor: pointer;\r\n}\r\n.nav-item .k-svg-icon {\r\n    width: 75px;\r\n    height: 75px;\r\n    color: var(--sky-blue);\r\n}\r\n.nav-item:hover  {\r\n    background-color: rgb(243, 243, 222);\r\n}\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 }); })();