@memberjunction/ng-explorer-core 0.9.211 → 0.9.214

package/dist/lib/expansion-panel-component/expansion-panel-component.js

@@ -1,29 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Component, Input } from '@angular/core';
+import { Metadata, RunView } from "@memberjunction/core";
+import { ItemType, TreeFolder, TreeItem } from '../../generic/Item.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-listview";
-import * as i5 from "@progress/kendo-angular-layout";
-function ExpansionPanelComponent_kendo_expansionpanel_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h3");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r4 = ctx.dataItem;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(dataItem_r4.Name);
-} }
-function ExpansionPanelComponent_kendo_expansionpanel_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 2)(1, "div", 3)(2, "kendo-listview", 4);
-    i0.ɵɵtemplate(3, ExpansionPanelComponent_kendo_expansionpanel_1_ng_template_3_Template, 2, 1, "ng-template", 5);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const item_r1 = ctx.$implicit;
-    i0.ɵɵproperty("title", item_r1.Name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("height", 400)("data", item_r1.Children);
-} }
+import * as i3 from "@progress/kendo-angular-treeview";
 export class ExpansionPanelComponent {
     constructor(sharedService, router) {
         this.sharedService = sharedService;
@@ -31,30 +21,154 @@ export class ExpansionPanelComponent {
         this.items = [];
     }
     ngOnInit() {
-        /*
-        const md = new Metadata();
-        this.items = md.Applications.map(app =>
-            new StubData(app.Name, app.ApplicationEntities.map(entity => new StubData(entity.ApplicationName, []))));
-
-        for(const application of md.Applications){
-            this.items.push(new StubData(application.Name, []));
+    }
+    onTreeNodeSelect(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let selectedItem = this.getTreeItem(event.index);
+            if (!selectedItem) {
+                return;
+            }
+            if (selectedItem.Type === ItemType.Application) {
+                let application = selectedItem.Data;
+                this.router.navigate(["app", application.Name]);
+            }
+            else if (selectedItem.Type === ItemType.Entity) {
+                //we need to get the root item to get the applicationName
+                const keys = event.index.split("_");
+                let rootItem = this.items[parseInt(keys[0])];
+                let application = rootItem.Data;
+                let entity = selectedItem.Data;
+                this.router.navigate(["app", application.Name, entity.Entity]);
+            }
+            else if (selectedItem.Type === ItemType.UserView) {
+                let userView = selectedItem.Data;
+                this.router.navigate(["resource", "view", userView.ID]);
+            }
+            else if (selectedItem.Type === ItemType.Folder) {
+                //we need to get the root item to get the applicationName
+                const keys = event.index.split("_");
+                let rootItem = this.items[parseInt(keys[0])];
+                let application = rootItem.Data;
+                let folder = selectedItem.Data;
+                this.router.navigate(["app", application.Name, folder.ID]);
+            }
+        });
+    }
+    onTreeNodeExpand(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let selectedItem = this.getTreeItem(event.index);
+            if (!selectedItem) {
+                return;
+            }
+            if (selectedItem.Type === ItemType.Application) {
+                return;
+            }
+            if (selectedItem.Type === ItemType.Entity) {
+                selectedItem.ChildItems = [];
+                let data = selectedItem.Data;
+                let treeNodeFolders = yield this.getFoldersForTreeNode(data.EntityID, null);
+                let treeNodeUserViews = yield this.getUserViewsForTreeNode(data.EntityID, null);
+                selectedItem.ChildItems.push(...treeNodeFolders);
+                selectedItem.ChildItems.push(...treeNodeUserViews);
+            }
+            else if (selectedItem.Type === ItemType.Folder) {
+                selectedItem.ChildItems = [];
+                let data = selectedItem.Data;
+                let parentFolderID = data.ParentFolderID ? data.ParentFolderID.toString() : null;
+                let treeNodeFolders = yield this.getFoldersForTreeNode(data.EntityID, parentFolderID);
+                let treeNodeUserViews = yield this.getUserViewsForTreeNode(data.EntityID, data.ID.toString());
+                selectedItem.ChildItems.push(...treeNodeFolders);
+                selectedItem.ChildItems.push(...treeNodeUserViews);
+            }
+            this.sortItems(selectedItem.ChildItems);
+            //this is to simply refresh the treeview and show the new items
+            this.items = [...this.items];
+        });
+    }
+    getFoldersForTreeNode(entityID, selectedFolderID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const categoryIDFilter = selectedFolderID ? `ParentID=${selectedFolderID}` : 'ParentID IS NULL';
+            const userViewFilter = `EntityID = ${entityID} AND ` + categoryIDFilter;
+            const viewResults = yield this.RunView('User View Categories', userViewFilter);
+            return viewResults.map((result) => {
+                let treeFolder = new TreeFolder(result.EntityID, result.ID, result.Name);
+                treeFolder.ParentFolderID = result.ID;
+                let child = new TreeItem(treeFolder, ItemType.Folder);
+                //we need a dummy child node so that the expand arrow appears
+                child.ChildItems.push(new TreeItem({ Name: 'Stub Node' }, ItemType.StubData));
+                return child;
+            });
+        });
+    }
+    getUserViewsForTreeNode(entityID, selectedFolderID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const md = new Metadata();
+            const categoryIDFilter = selectedFolderID ? `CategoryID=${selectedFolderID}` : 'CategoryID IS NULL';
+            const userViewFilter = `UserID = ${md.CurrentUser.ID} AND EntityID = ${entityID} AND ` + categoryIDFilter;
+            const viewResults = yield this.RunView('User Views', userViewFilter);
+            return viewResults.map((result) => {
+                let treeItem = new TreeItem(result, ItemType.UserView);
+                return treeItem;
+            });
+        });
+    }
+    RunView(entityName, extraFilter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: entityName,
+                ExtraFilter: extraFilter
+            });
+            if (result && result.Success) {
+                return result.Results;
+            }
+            else {
+                return [];
+            }
+        });
+    }
+    //maybe pass in a sort function for custom sorting?
+    sortItems(items) {
+        items.sort(function (a, b) {
+            if (a.Name < b.Name) {
+                return -1;
+            }
+            if (a.Name > b.Name) {
+                return 1;
+            }
+            return 0;
+        });
+    }
+    //not very robust and can easily break but
+    //this works for the common path
+    getTreeItem(index) {
+        const keys = index.split("_");
+        let selectedItem = null;
+        for (const key of keys) {
+            if (!selectedItem) {
+                selectedItem = this.items[parseInt(key)];
+            }
+            else {
+                selectedItem = selectedItem.ChildItems[parseInt(key)];
+            }
         }
-        */
+        return selectedItem;
     }
 }
 ExpansionPanelComponent.ɵfac = function ExpansionPanelComponent_Factory(t) { return new (t || ExpansionPanelComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
-ExpansionPanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpansionPanelComponent, selectors: [["expansion-panel-component"]], inputs: { items: "items" }, decls: 2, vars: 1, consts: [[1, "wrapper"], [3, "title", 4, "ngFor", "ngForOf"], [3, "title"], [1, "content"], ["containerClass", "k-d-flex k-flex-col k-flex-nowrap", 3, "height", "data"], ["kendoListViewItemTemplate", ""]], template: function ExpansionPanelComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵtemplate(1, ExpansionPanelComponent_kendo_expansionpanel_1_Template, 4, 3, "kendo-expansionpanel", 1);
-        i0.ɵɵelementEnd();
+ExpansionPanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExpansionPanelComponent, selectors: [["expansion-panel-component"]], inputs: { items: "items" }, decls: 2, vars: 1, consts: [[1, "panelbar-wrapper"], ["textField", "Name", "kendoTreeViewExpandable", "", "kendoTreeViewHierarchyBinding", "", "childrenField", "ChildItems", 3, "nodes", "expand", "selectionChange"]], template: function ExpansionPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "kendo-treeview", 1);
+        i0.ɵɵlistener("expand", function ExpansionPanelComponent_Template_kendo_treeview_expand_1_listener($event) { return ctx.onTreeNodeExpand($event); })("selectionChange", function ExpansionPanelComponent_Template_kendo_treeview_selectionChange_1_listener($event) { return ctx.onTreeNodeSelect($event); });
+        i0.ɵɵelementEnd()();
     } if (rf & 2) {
         i0.ɵɵadvance();
-        i0.ɵɵproperty("ngForOf", ctx.items);
-    } }, dependencies: [i3.NgForOf, i4.ItemTemplateDirective, i4.ListViewComponent, i5.ExpansionPanelComponent], styles: [".wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n  \r\nkendo-expansionpanel[_ngcontent-%COMP%] {\r\n    width: 300px;\r\n}\r\n  \r\n.content[_ngcontent-%COMP%] {\r\n    display: flex;\r\n}"] });
+        i0.ɵɵproperty("nodes", ctx.items);
+    } }, dependencies: [i3.TreeViewComponent, i3.ExpandDirective, i3.HierarchyBindingDirective], styles: [".wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n  \r\nkendo-expansionpanel[_ngcontent-%COMP%] {\r\n    width: 300px;\r\n}\r\n  \r\n.content[_ngcontent-%COMP%] {\r\n    display: flex;\r\n}\r\n\r\n.panelbar-wrapper[_ngcontent-%COMP%] {\r\n    width: 274px;\r\n    margin: 0 auto;\r\n    height: calc(100vh - 80px);\r\n    overflow-y: auto;\r\n    padding: 16px 0;\r\n    box-sizing: border-box;\r\n}\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item {\r\n    padding: 5px 14px !important;\r\n}\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item div .k-treeview-toggle {\r\n    margin: 0;\r\n}\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item div {\r\n    color: var(--white-color);\r\n}\r\n\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item:hover {\r\n    background: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf {\r\n    white-space: pre-line;\r\n    box-shadow: none;\r\n}\r\n  .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf:hover,   .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf:focus {\r\n    box-shadow: none;\r\n    background: transparent;\r\n    color: var(--white-color);\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExpansionPanelComponent, [{
         type: Component,
-        args: [{ selector: 'expansion-panel-component', template: "<div class=\"wrapper\">\r\n    <kendo-expansionpanel\r\n        *ngFor=\"let item of items; index as i\"\r\n        [title]=\"item.Name\"\r\n    >\r\n        <div class=\"content\">\r\n            <kendo-listview\r\n                [height]=\"400\"\r\n                [data]=\"item.Children\"\r\n                containerClass=\"k-d-flex k-flex-col k-flex-nowrap\"\r\n            >\r\n                <ng-template\r\n                    kendoListViewItemTemplate\r\n                    let-dataItem=\"dataItem\"\r\n                >\r\n                    <h3>{{dataItem.Name}}</h3>\r\n                </ng-template>\r\n            </kendo-listview>\r\n        </div>\r\n    </kendo-expansionpanel>\r\n</div>", styles: [".wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n  \r\nkendo-expansionpanel {\r\n    width: 300px;\r\n}\r\n  \r\n.content {\r\n    display: flex;\r\n}"] }]
+        args: [{ selector: 'expansion-panel-component', template: "<div class=\"panelbar-wrapper\">\r\n    <kendo-treeview\r\n      [nodes]=\"items\"\r\n      textField=\"Name\"\r\n      kendoTreeViewExpandable\r\n      kendoTreeViewHierarchyBinding\r\n      childrenField=\"ChildItems\"\r\n      (expand)=\"onTreeNodeExpand($event)\"\r\n      (selectionChange)=\"onTreeNodeSelect($event)\"\r\n    >\r\n    </kendo-treeview>\r\n</div>", styles: [".wrapper {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n  \r\nkendo-expansionpanel {\r\n    width: 300px;\r\n}\r\n  \r\n.content {\r\n    display: flex;\r\n}\r\n\r\n.panelbar-wrapper {\r\n    width: 274px;\r\n    margin: 0 auto;\r\n    height: calc(100vh - 80px);\r\n    overflow-y: auto;\r\n    padding: 16px 0;\r\n    box-sizing: border-box;\r\n}\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item {\r\n    padding: 5px 14px !important;\r\n}\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item div .k-treeview-toggle {\r\n    margin: 0;\r\n}\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item div {\r\n    color: var(--white-color);\r\n}\r\n\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item:hover {\r\n    background: rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf {\r\n    white-space: pre-line;\r\n    box-shadow: none;\r\n}\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf:hover,\r\n::ng-deep .panelbar-wrapper .k-treeview-group .k-treeview-item div > .k-treeview-leaf:focus {\r\n    box-shadow: none;\r\n    background: transparent;\r\n    color: var(--white-color);\r\n}\r\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.Router }], { items: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpansionPanelComponent, { className: "ExpansionPanelComponent", filePath: "src\\lib\\expansion-panel-component\\expansion-panel-component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExpansionPanelComponent, { className: "ExpansionPanelComponent", filePath: "src\\lib\\expansion-panel-component\\expansion-panel-component.ts", lineNumber: 13 }); })();

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

@@ -127,9 +127,9 @@ FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Favorite
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("data", ctx.favorites);
-    } }, dependencies: [i2.ItemTemplateDirective, i2.HeaderTemplateDirective, i2.ListViewComponent], styles: [".favorites-list[_ngcontent-%COMP%] {\r\n    width: 400px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+    } }, dependencies: [i2.ItemTemplateDirective, i2.HeaderTemplateDirective, i2.ListViewComponent], styles: [".favorites-list[_ngcontent-%COMP%] {\r\n    width: 400px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  flex-direction: column;\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: var(--sideNav);\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  width: 100% !important;\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: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 20px;\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FavoritesComponent, [{
         type: Component,
-        args: [{ selector: 'app-favorites', template: "<kendo-listview\n    [data]=\"favorites\"\n    class=\"list-view\"\n>\n    <ng-container class=\"entity-wrap\">\n        <ng-template kendoListViewHeaderTemplate>\n            <div class=\"header\"> \n                <div class=\"head-tag\">\n                    <span class=\"k-icon k-i-clock\"></span>\n                    Favorites\n                </div>\n                <div class=\"count\">{{favorites.length}}</div>\n                </div>\n        </ng-template>\n        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n            <div class=\"list-item\"  (click)=\"favoriteItemClick(dataItem)\">\n                <b>{{dataItem.Entity}}</b>: {{favoriteItemDisplayName(dataItem)}}\n            </div>\n        </ng-template>\n    </ng-container>\n</kendo-listview>\n", styles: [".favorites-list {\r\n    width: 400px;\r\n}", "\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+        args: [{ selector: 'app-favorites', template: "<kendo-listview\n    [data]=\"favorites\"\n    class=\"list-view\"\n>\n    <ng-container class=\"entity-wrap\">\n        <ng-template kendoListViewHeaderTemplate>\n            <div class=\"header\"> \n                <div class=\"head-tag\">\n                    <span class=\"k-icon k-i-clock\"></span>\n                    Favorites\n                </div>\n                <div class=\"count\">{{favorites.length}}</div>\n                </div>\n        </ng-template>\n        <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n            <div class=\"list-item\"  (click)=\"favoriteItemClick(dataItem)\">\n                <b>{{dataItem.Entity}}</b>: {{favoriteItemDisplayName(dataItem)}}\n            </div>\n        </ng-template>\n    </ng-container>\n</kendo-listview>\n", styles: [".favorites-list {\r\n    width: 400px;\r\n}", "\r\n.main-area {\r\n  display: flex;\r\n  flex-direction: column;\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: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  border-radius: 6px;\r\n  width: 100% !important;\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: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 20px;\r\n}\r\n"] }]
     }], () => [{ type: i1.Router }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FavoritesComponent, { className: "FavoritesComponent", filePath: "src\\lib\\favorites\\favorites.component.ts", lineNumber: 11 }); })();

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

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class FilesComponent {
-    currentItem: 'EntityPermissions' | 'Users' | 'Roles';
-    selectItem(item: 'EntityPermissions' | 'Users' | 'Roles'): void;
+    CategoryID: number | undefined;
+    categorySelected(newCategoryID: number): void;
     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,WAAW,EAAE,mBAAmB,GAAG,OAAO,GAAG,OAAO,CAAuB;IAE3E,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,OAAO,GAAG,OAAO;yCAHpD,cAAc;2CAAd,cAAc;CAM1B"}
+{"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"}

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

@@ -2,21 +2,23 @@ import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-file-storage";
 export class FilesComponent {
-    constructor() {
-        this.currentItem = 'EntityPermissions';
-    }
-    selectItem(item) {
-        this.currentItem = item;
+    categorySelected(newCategoryID) {
+        this.CategoryID = newCategoryID;
     }
 }
 FilesComponent.ɵfac = function FilesComponent_Factory(t) { return new (t || FilesComponent)(); };
-FilesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilesComponent, selectors: [["app-files"]], decls: 3, vars: 0, consts: [[1, "container"]], template: function FilesComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelement(1, "mj-files-category-tree")(2, "mj-files-grid");
+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) {
+        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();
+        i0.ɵɵelement(2, "mj-files-grid", 2);
         i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("CategoryID", ctx.CategoryID);
     } }, dependencies: [i1.CategoryTreeComponent, i1.FilesGridComponent], styles: [".container[_ngcontent-%COMP%] {\r\n    display: flex;\r\n  }"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilesComponent, [{
         type: Component,
-        args: [{ selector: 'app-files', template: "<div class=\"container\">\r\n    <mj-files-category-tree></mj-files-category-tree>\r\n    <mj-files-grid></mj-files-grid>\r\n</div>\r\n", styles: ["  .container {\r\n    display: flex;\r\n  } "] }]
+        args: [{ selector: 'app-files', template: "<div class=\"container\">\r\n  <mj-files-category-tree (categorySelected)=\"categorySelected($event)\"></mj-files-category-tree>\r\n  <mj-files-grid [CategoryID]=\"CategoryID\"></mj-files-grid>\r\n</div>\r\n", styles: ["  .container {\r\n    display: flex;\r\n  } "] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilesComponent, { className: "FilesComponent", filePath: "src\\lib\\files\\files.component.ts", lineNumber: 8 }); })();