@memberjunction/ng-explorer-core 2.8.0 → 2.10.0

package/dist/lib/resource-browser/resource-browser.component.js

@@ -8,9 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Item, ItemType } from '../../generic/Item.types';
+import { Folder, Item, ItemType } from '../../generic/Item.types';
 import { Subject, debounceTime } from 'rxjs';
 import { LogError, Metadata, RunView } from '@memberjunction/core';
+import { BeforeUpdateItemEvent } from '../../generic/Events.types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/common";
@@ -19,110 +20,123 @@ import * as i4 from "@progress/kendo-angular-dialog";
 import * as i5 from "@progress/kendo-angular-indicators";
 import * as i6 from "@progress/kendo-angular-buttons";
 import * as i7 from "@progress/kendo-angular-inputs";
-import * as i8 from "@progress/kendo-angular-layout";
-import * as i9 from "@memberjunction/ng-entity-form-dialog";
+import * as i8 from "@progress/kendo-angular-label";
+import * as i9 from "@progress/kendo-angular-layout";
+import * as i10 from "@memberjunction/ng-entity-form-dialog";
 function ResourceBrowserComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 21);
+    i0.ɵɵelementStart(0, "span", 20);
     i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_4_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.goToParent()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(1, "span", 22);
+    i0.ɵɵelement(1, "span", 21);
 } }
-function ResourceBrowserComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 23);
+function ResourceBrowserComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownbutton", 22);
+    i0.ɵɵlistener("itemClick", function ResourceBrowserComponent_Conditional_7_Template_kendo_dropdownbutton_itemClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick($event)); });
+    i0.ɵɵelement(1, "span", 23);
+    i0.ɵɵtext(2, " Create New ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("data", ctx_r2.ItemOptions);
 } }
-function ResourceBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 17);
+function ResourceBrowserComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 24);
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 16);
+} }
+function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(dataItem_r7)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const dataItem_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(dataItem_r8)); });
     i0.ɵɵelement(1, "span", 37);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(dataItem_r7)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const dataItem_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(dataItem_r8)); });
     i0.ɵɵelement(1, "span", 38);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const dataItem_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(dataItem_r7)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const dataItem_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(dataItem_r8)); });
     i0.ɵɵelement(1, "span", 40);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+function ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵtemplate(1, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button", 34)(2, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_2_Template, 2, 0, "button", 34)(3, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_3_Template, 2, 0, "button", 35);
+    i0.ɵɵtemplate(1, ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_1_Template, 2, 0, "button", 34)(2, ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_2_Template, 2, 0, "button", 34)(3, ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Conditional_3_Template, 2, 0, "button", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
+    const dataItem_r8 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EnableItemEdit ? 1 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableItemEdit && (!dataItem_r8.IsLink || dataItem_r8.LinkPermissionLevel === "Owner" || dataItem_r8.LinkPermissionLevel === "Edit") ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EnableItemDelete ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableItemDelete && (!dataItem_r8.IsLike || dataItem_r8.LinkPermissionLevel === "Owner") ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EnableRemoveLink ? 3 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableRemoveLink && dataItem_r8.IsLink ? 3 : -1);
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-grid", 26);
-    i0.ɵɵlistener("cellClick", function ResourceBrowserComponent_Conditional_22_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellItemClicked($event)); });
-    i0.ɵɵelement(1, "kendo-grid-column", 27)(2, "kendo-grid-column", 28)(3, "kendo-grid-column", 29)(4, "kendo-grid-column", 30);
-    i0.ɵɵelementStart(5, "kendo-grid-column", 31);
-    i0.ɵɵtemplate(6, ResourceBrowserComponent_Conditional_22_Conditional_0_ng_template_6_Template, 4, 3, "ng-template", 32);
+function ResourceBrowserComponent_Conditional_20_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-grid", 27);
+    i0.ɵɵlistener("cellClick", function ResourceBrowserComponent_Conditional_20_Conditional_0_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCellItemClicked($event)); });
+    i0.ɵɵelement(1, "kendo-grid-column", 28)(2, "kendo-grid-column", 29)(3, "kendo-grid-column", 30);
+    i0.ɵɵelementStart(4, "kendo-grid-column", 31);
+    i0.ɵɵtemplate(5, ResourceBrowserComponent_Conditional_20_Conditional_0_ng_template_5_Template, 4, 3, "ng-template", 32);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("kendoGridBinding", ctx_r2.Items);
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 51);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(item_r12)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editItem(item_r13)); });
     i0.ɵɵelement(1, "span", 37);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 52);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(item_r12)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteItem(item_r13)); });
     i0.ɵɵelement(1, "span", 38);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(item_r12)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.unlinkItem(item_r13)); });
     i0.ɵɵelement(1, "span", 40);
     i0.ɵɵelementEnd();
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 46);
 } if (rf & 2) {
-    const item_r12 = i0.ɵɵnextContext().$implicit;
+    const item_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", item_r12.Name + "(Shared)")("ngClass", ctx_r2.getIconForResourceType(item_r12));
+    i0.ɵɵproperty("title", item_r13.Name + "(Shared)")("ngClass", ctx_r2.getIconForResourceType(item_r13));
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 47);
 } if (rf & 2) {
-    const item_r12 = i0.ɵɵnextContext().$implicit;
+    const item_r13 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", item_r12.Name)("ngClass", ctx_r2.getIconForResourceType(item_r12));
+    i0.ɵɵproperty("title", item_r13.Name)("ngClass", ctx_r2.getIconForResourceType(item_r13));
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-card", 41)(1, "div", 42);
-    i0.ɵɵtemplate(2, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button", 43)(3, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_3_Template, 2, 0, "button", 44)(4, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_4_Template, 2, 0, "button", 35);
+    i0.ɵɵtemplate(2, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_2_Template, 2, 0, "button", 43)(3, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_3_Template, 2, 0, "button", 44)(4, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_4_Template, 2, 0, "button", 35);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "kendo-card-body", 45);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const item_r12 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.itemClick(item_r12)); });
-    i0.ɵɵtemplate(6, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_6_Template, 1, 2, "i", 46)(7, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Conditional_7_Template, 1, 2, "span", 47);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Template_kendo_card_body_click_5_listener() { const item_r13 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.itemClick(item_r13)); });
+    i0.ɵɵtemplate(6, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_6_Template, 1, 2, "i", 46)(7, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Conditional_7_Template, 1, 2, "span", 47);
     i0.ɵɵelementStart(8, "div", 48)(9, "h5", 49);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
@@ -130,49 +144,49 @@ function ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template(rf
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const item_r12 = ctx.$implicit;
+    const item_r13 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EnableItemEdit && (!item_r12.IsLink || item_r12.LinkPermissionLevel === "Owner" || item_r12.LinkPermissionLevel === "Edit") ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableItemEdit && (!item_r13.IsLink || item_r13.LinkPermissionLevel === "Owner" || item_r13.LinkPermissionLevel === "Edit") ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EnableItemDelete && (!item_r12.IsLink || item_r12.LinkPermissionLevel === "Owner") ? 3 : ctx_r2.EnableRemoveLink && item_r12.IsLink ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.EnableItemDelete && (!item_r13.IsLink || item_r13.LinkPermissionLevel === "Owner") ? 3 : ctx_r2.EnableRemoveLink && item_r13.IsLink ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(item_r12.IsLink ? 6 : 7);
+    i0.ɵɵconditional(item_r13.IsLink ? 6 : 7);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(item_r12.Name);
+    i0.ɵɵtextInterpolate(item_r13.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r12.Description);
+    i0.ɵɵtextInterpolate(item_r13.Description);
 } }
-function ResourceBrowserComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, ResourceBrowserComponent_Conditional_22_Conditional_1_For_2_Template, 13, 5, "kendo-card", 41, i0.ɵɵrepeaterTrackByIdentity);
+function ResourceBrowserComponent_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵrepeaterCreate(1, ResourceBrowserComponent_Conditional_20_Conditional_1_For_2_Template, 13, 5, "kendo-card", 41, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.Items);
 } }
-function ResourceBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ResourceBrowserComponent_Conditional_22_Conditional_0_Template, 7, 1, "kendo-grid", 24)(1, ResourceBrowserComponent_Conditional_22_Conditional_1_Template, 3, 0, "div", 25);
+function ResourceBrowserComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ResourceBrowserComponent_Conditional_20_Conditional_0_Template, 6, 1, "kendo-grid", 25)(1, ResourceBrowserComponent_Conditional_20_Conditional_1_Template, 3, 0, "div", 26);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r2.DisplayMode === "List" ? 0 : 1);
 } }
-function ResourceBrowserComponent_kendo_dialog_23_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
+function ResourceBrowserComponent_kendo_dialog_21_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-dialog", 53);
-    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_23_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
+    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_21_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
     i0.ɵɵelementStart(1, "p", 54);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "b");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "kendo-dialog-actions", 55)(6, "button", 56);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_23_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(true)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(true)); });
     i0.ɵɵtext(7, " Yes ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "button", 57);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_23_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_21_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfirmDeleteItem(false)); });
     i0.ɵɵtext(9, " No ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -183,26 +197,47 @@ function ResourceBrowserComponent_kendo_dialog_23_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r2.selectedItem == null ? null : ctx_r2.selectedItem.Name, "?");
 } }
-function ResourceBrowserComponent_kendo_dialog_24_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 58);
-    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_24_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCreateFolderView()); });
-    i0.ɵɵelementStart(1, "div", 8)(2, "kendo-textbox", 59);
-    i0.ɵɵlistener("valueChange", function ResourceBrowserComponent_kendo_dialog_24_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCreateFolderKeyup($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "kendo-dialog-actions", 55)(4, "button", 56);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createFolder()); });
-    i0.ɵɵtext(5, " Create ");
+function ResourceBrowserComponent_kendo_dialog_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_22_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.updateFolder()); });
+    i0.ɵɵtext(1, " Update ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 57);
-    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_24_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCreateFolderView()); });
-    i0.ɵɵtext(7, " Cancel ");
+} }
+function ResourceBrowserComponent_kendo_dialog_22_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_22_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.createFolder()); });
+    i0.ɵɵtext(1, " Create ");
+    i0.ɵɵelementEnd();
+} }
+function ResourceBrowserComponent_kendo_dialog_22_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 58);
+    i0.ɵɵlistener("close", function ResourceBrowserComponent_kendo_dialog_22_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleUpsertFolderView(false, false)); });
+    i0.ɵɵelementStart(1, "div", 7)(2, "kendo-label", 59)(3, "kendo-textbox", 60);
+    i0.ɵɵlistener("valueChange", function ResourceBrowserComponent_kendo_dialog_22_Template_kendo_textbox_valueChange_3_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpsertFolderNameKeyup($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(4, "br");
+    i0.ɵɵelementStart(5, "div", 7)(6, "kendo-label", 61)(7, "kendo-textbox", 62);
+    i0.ɵɵlistener("valueChange", function ResourceBrowserComponent_kendo_dialog_22_Template_kendo_textbox_valueChange_7_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUpsertFolderDescriptionKeyup($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "kendo-dialog-actions", 55);
+    i0.ɵɵtemplate(9, ResourceBrowserComponent_kendo_dialog_22_Conditional_9_Template, 2, 0, "button", 63)(10, ResourceBrowserComponent_kendo_dialog_22_Conditional_10_Template, 2, 0, "button", 63);
+    i0.ɵɵelementStart(11, "button", 57);
+    i0.ɵɵlistener("click", function ResourceBrowserComponent_kendo_dialog_22_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleUpsertFolderView(false, false)); });
+    i0.ɵɵtext(12, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    i0.ɵɵproperty("minWidth", 250)("width", 450);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r2.selectedFolder ? "Edit Folder" : "Create new folder")("minWidth", 250)("width", 450);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r2.upsertNewFolderName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r2.upsertNewFolderDescription);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.selectedFolder ? 9 : 10);
 } }
-export class NewItemOption {
-}
 export class ResourceBrowserComponent {
     /**
      * The name of the type of resource to display, cannot be changed after it is initially set
@@ -253,6 +288,9 @@ export class ResourceBrowserComponent {
     get Items() {
         return this._items;
     }
+    get ItemOptions() {
+        return this._DefaultNewItemOptions;
+    }
     constructor(sharedService) {
         this.sharedService = sharedService;
         /*******************************************************************************************
@@ -260,9 +298,19 @@ export class ResourceBrowserComponent {
          *******************************************************************************************/
         this._ResourceTypeName = null;
         /**
-         * Whether or not to enable categories, if set to false, categories will be ignored and not displayed
+         * Whether or not to enable categories. If enabled, Categories will be displayed
+         * and the option to create new categories will be available. Default is true.
          */
         this.EnableCategories = true;
+        /**
+         * If Categories are enabled, then the categories fetched will be filtered to return only those whoses EntityID
+         * matches this value.
+         */
+        this.CategoryEntityID = null;
+        /**
+         * If set, this will set the current Category/Folder for the display. Not all Resource Types support Categories, so if the Resource Type in question does not have a CategoryEntityID specified, this property will be ignored.
+         */
+        this.CurrentCategoryID = null;
         /**
          * This property determines if the UI will include a button on items in the display to edit. The button will only be shown if the user has edit permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
          */
@@ -279,14 +327,7 @@ export class ResourceBrowserComponent {
         /**
          * Array of NewItemOption objects that will be displayed in the Create New dropdown. Defaults to having a single entry for creating a new folder, you can remove this or add to it.
          */
-        this.NewItemOptions = [{
-                Text: 'New Folder',
-                Description: 'Create a new folder',
-                Icon: 'folder',
-                Action: () => {
-                    console.log('New Folder');
-                }
-            }];
+        this.NewItemOptions = [];
         /**
          * The visual display mode for this component, tile will show the contents in tiles that are spaced and wrapped based on the viewport, list will show the details of the items in a list, and tree will show the items in a tree view - tree view NOT implemented yet
          */
@@ -306,10 +347,33 @@ export class ResourceBrowserComponent {
          * Fires whenever the user changes the display mode of the component
          */
         this.DisplayModeChanged = new EventEmitter();
+        /**
+         * Fires whenever the user clicks the back button to view the parent folder
+         */
+        this.NavigateToParentEvent = new EventEmitter();
+        /**
+         * Fires whenever the users clicks to edit an Item that is not a folder
+         */
+        this.EditItemEvent = new EventEmitter();
         this._isLoading = false;
         this._CategoryParentIDFieldName = undefined;
         this._UserIDFieldName = undefined;
         this._items = [];
+        this._DefaultNewItemOptions = [
+            {
+                Text: 'New Folder',
+                Description: 'Create a new Folder',
+                Icon: 'folder',
+                Action: () => {
+                    if (this.EnableCategories) {
+                        this.toggleUpsertFolderView(true, true);
+                    }
+                }
+            }
+        ];
+        this.upsertNewFolderName = "";
+        this.upsertNewFolderDescription = "";
+        this.selectedFolder = null;
         // JS code here and below from old component....
         this._filterDebounceTime = 250;
         this.filterItemsSubject = new Subject();
@@ -318,17 +382,9 @@ export class ResourceBrowserComponent {
         this.selectedItem = null;
         this.deleteDialogOpened = false;
         this.copyFromDialogOpened = false;
-        this.createFolderDialogOpened = false;
-        this.newFolderText = "Sample Folder";
+        this.upsertFolderDialogVisible = false;
         this._allResourceTypes = [];
-        this.createNewRecordName = "Record";
         this.entityObjectName = "";
-        /**
-         * Options for the create button dropdown
-         */
-        this.dropdownOptions = [
-            { text: "Folder" }
-        ];
         this._currentDeleteOrUnlinkState = false;
         this.filterItemsSubject
             .pipe(debounceTime(this._filterDebounceTime))
@@ -337,14 +393,26 @@ export class ResourceBrowserComponent {
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c;
+            /**
+             * Hide the create folder option is EnableCategories is false
+             */
+            if (this.EnableCategories) {
+                this._DefaultNewItemOptions.push(...this.NewItemOptions);
+            }
+            else {
+                this._DefaultNewItemOptions = this.NewItemOptions;
+            }
             this._allResourceTypes = this.sharedService.ResourceTypes;
-            const rt = this._allResourceTypes.find(rt => rt.Entity === this.ResourceTypeName);
-            if (!rt)
+            const resourceType = this._allResourceTypes.find(rt => {
+                return rt.Entity === this.ResourceTypeName;
+            });
+            if (!resourceType) {
                 throw new Error(`Resource Type ${this.ResourceTypeName} not found`);
-            else if (!rt.EntityID)
+            }
+            this.ResourceType = resourceType;
+            if (!this.ResourceType.EntityID) {
                 throw new Error(`Resource Type ${this.ResourceTypeName} does not have an EntityID specified. EntityID is required for any Resource Type to be used with this component.`);
-            else
-                this.ResourceType = rt;
+            }
             // now get the entity info for the resource type and for its category entity, if one is specified. 
             const md = new Metadata();
             const resourceTypeEntity = md.EntityByID(this.ResourceType.EntityID);
@@ -364,30 +432,102 @@ export class ResourceBrowserComponent {
      */
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const md = new Metadata();
-                if (!this.ResourceType || !this.ResourceType.Entity)
-                    throw new Error('Resource Type not set, or Resource Type does not have an Entity specified');
-                const rv = new RunView();
-                // create a combined filter for the SQL query that combines the user's provided ItemFilter, if provided, with a user filter that only includes items that are OWNED by the current user
-                // and finally filter on the current category, if one is set and we have a category entity
-                const combinedFilter = `${this.ItemFilter ? '(' + this.ItemFilter + ') AND' : ''}
-                              ([${this.UserIDFieldName}] = '${md.CurrentUser.ID}') 
-                              ${this.CurrentCategoryID && this.CategoryIDFieldName ? `AND ([${this.CategoryIDFieldName}] = '${this.CurrentCategoryID}')` : ''}`;
-                const itemResult = yield rv.RunView({
-                    EntityName: this.ResourceType.Entity,
-                    ExtraFilter: combinedFilter,
-                    OrderBy: this.OrderBy
-                });
-                if (!itemResult || !itemResult.Success)
-                    throw new Error(`Failed to load items for ${this.ResourceType.Entity}`);
-                this._items = itemResult.Results.map(r => new Item(r, ItemType.Resource));
-            }
-            catch (error) {
-                LogError(error);
-                console.error(error);
+            const views = yield this.LoadResources();
+            const categories = yield this.LoadCategories();
+            const items = [...categories, ...views];
+            const sortedItems = this.sortItems(items);
+            this._items = sortedItems;
+        });
+    }
+    LoadResources() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let results = [];
+            if (!this.ResourceType || !this.ResourceType.Entity) {
+                return results;
+            }
+            const md = new Metadata();
+            const rv = new RunView();
+            // create a combined filter for the SQL query that combines the user's provided ItemFilter, if provided, with a user filter that only includes items that are OWNED by the current user
+            // and finally filter on the current category, if one is set and we have a category entity
+            let filter = "";
+            if (this.ItemFilter) {
+                filter += `(${this.ItemFilter})`;
+            }
+            if (this.UserIDFieldName) {
+                let base = this.ItemFilter ? "AND" : "";
+                filter += `${base}([${this.UserIDFieldName}] = '${md.CurrentUser.ID}')`;
+            }
+            if (this.CurrentCategoryID && this.CategoryIDFieldName) {
+                let base = (this.ItemFilter || this.UserIDFieldName) ? "AND" : "";
+                filter += `${base}([${this.CategoryIDFieldName}] = '${this.CurrentCategoryID}')`;
+            }
+            const itemResult = yield rv.RunView({
+                EntityName: this.ResourceType.Entity,
+                ExtraFilter: filter,
+                OrderBy: this.OrderBy,
+                ResultType: 'entity_object'
+            });
+            if (!itemResult.Success) {
+                LogError(`Unable to load views for ${this.ResourceType.Entity}. Reason: ${itemResult.ErrorMessage}`);
+                return results;
+                ;
+            }
+            const views = itemResult.Results;
+            const items = views.map(view => new Item(view, ItemType.Resource));
+            return items;
+        });
+    }
+    LoadCategories() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.EnableCategories || !this.CategoryEntityID) {
+                return [];
+            }
+            if (!this.ResourceType || !this.ResourceType.CategoryEntity) {
+                return [];
+            }
+            const md = new Metadata();
+            let filter = `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.CategoryEntityID}'`;
+            if (this.CurrentCategoryID) {
+                filter += ` AND ParentID = '${this.CurrentCategoryID}'`;
+            }
+            const rv = new RunView();
+            const rvResult = yield rv.RunView({
+                EntityName: this.ResourceType.CategoryEntity,
+                ExtraFilter: filter,
+                ResultType: 'entity_object'
+            });
+            if (!rvResult.Success) {
+                LogError(`Unable to load categories for ${this.ResourceType.CategoryEntity}. Reason: ${rvResult.ErrorMessage}`);
+                return [];
+            }
+            const categories = rvResult.Results;
+            const folders = categories.map((category) => {
+                const folderID = category.FirstPrimaryKey.Value;
+                const NameEntityField = category.Fields.find(field => field.EntityFieldInfo.IsNameField);
+                const folderName = NameEntityField ? NameEntityField.Value : "Folder";
+                const folder = new Folder(folderID, folderName);
+                folder.CategoryEntity = category;
+                folder.Description = category.Get("Description");
+                return folder;
+            });
+            const items = folders.map(folder => new Item(folder, ItemType.Folder));
+            return items;
+        });
+    }
+    //maybe pass in a sort function for custom sorting?
+    sortItems(items) {
+        items.sort(function (a, b) {
+            const aName = a.Name.toLowerCase();
+            const bName = b.Name.toLowerCase();
+            if (aName < bName) {
+                return -1;
             }
+            if (aName > bName) {
+                return 1;
+            }
+            return 0;
         });
+        return items;
     }
     //wrapper function for the grid view
     onCellItemClicked(event) {
@@ -399,74 +539,63 @@ export class ResourceBrowserComponent {
         }
         this.ResourceSelected.emit(item);
     }
-    backButtonClicked() {
-        // this.backButtonClickEvent.emit();
-    }
-    addResourceButtonClicked() {
+    updateFolder() {
         return __awaiter(this, void 0, void 0, function* () {
-            // let event: BeforeAddItemEvent = new BeforeAddItemEvent("");
-            // this.BeforeAddItemEvent.emit(event);
-            // if(event.Cancel){
-            //   return;
-            // }
-            // const resourceName: string = `Sample ${this.ItemEntityName}`;
-            // const md: Metadata = new Metadata();
-            // const entity: BaseEntity = await md.GetEntityObject<BaseEntity>(this.ItemEntityName);
-            // entity.NewRecord();
-            // //some entities, like resources, have common fields 
-            // //we can try to set here
-            // entity.Set("Name", resourceName);
-            // entity.Set("UserID", md.CurrentUser.ID);
-            // let saveResult: boolean = await entity.Save();
-            // if(saveResult){
-            //   this.showNotification(`successfully created ${resourceName}`, "info");
-            //   let item: Item = new Item(entity, ItemType.Entity);
-            //   item.Name = resourceName;
-            //   this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
-            // }
-            // else{
-            //   this.showNotification(`Unable to create ${resourceName}`, "error");
-            // }
+            const folder = this.selectedFolder;
+            if (!folder || !folder.CategoryEntity) {
+                LogError("Folder or CategoryEntity is not set, cannot update folder");
+                this.sharedService.CreateSimpleNotification("Unable to update folder", "error", 2500);
+                return;
+            }
+            const categoryEntity = folder.CategoryEntity;
+            categoryEntity.Set("Name", this.upsertNewFolderName);
+            categoryEntity.Set("Description", this.upsertNewFolderDescription);
+            const saveResult = yield categoryEntity.Save();
+            if (!saveResult) {
+                LogError(`Unable to update folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
+                this.sharedService.CreateSimpleNotification(`Unable to update folder ${folder.Name}`, "error", 2500);
+            }
+            else {
+                this.sharedService.CreateSimpleNotification(`Successfully updated folder ${folder.Name}`, "info", 2500);
+                yield this.Refresh();
+            }
+            this.toggleUpsertFolderView(false, false);
         });
     }
     createFolder() {
         return __awaiter(this, void 0, void 0, function* () {
-            // this.toggleCreateFolderView(false);
-            // let event: BeforeAddFolderEvent = new BeforeAddFolderEvent(this.newFolderText);
-            // if(event.Cancel){
-            //   return;
-            // }
-            // let folderName: string = this.newFolderText;
-            // let description: string = "";
-            // const md: Metadata = new Metadata();
-            // const folderEntity: BaseEntity = await md.GetEntityObject<BaseEntity>(this.CategoryEntityName);
-            // folderEntity.NewRecord();
-            // folderEntity.Set("Name", folderName);
-            // folderEntity.Set("ParentID", this.selectedFolderID);
-            // folderEntity.Set("Description", description);
-            // folderEntity.Set("UserID", md.CurrentUser.ID);
-            // if(this.categoryEntityID){
-            //   folderEntity.Set("EntityID", this.categoryEntityID);
-            // }
-            // let saveResult: boolean = await folderEntity.Save();
-            // if(saveResult){
-            //   this.showNotification(`successfully created folder ${folderName}`, "info");
-            //   let folder: Folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
-            //   folder.Description = folderEntity.Get("Description");
-            //   let item: Item = new Item(folder, ItemType.Folder);
-            //   let event: AfterAddFolderEvent = new AfterAddFolderEvent(item);
-            //   this.AfterAddFolderEvent.emit(event);
-            //   if(event.Cancel){
-            //     return;
-            //   }
-            //   //navigate to the newly created folder
-            //   //by raising an item click event
-            //   this.itemClick(item);
-            // }
-            // else{
-            //   this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error", 3500);
-            // }
-            // this.newFolderText = "Sample Folder";
+            if (!this.ResourceType.CategoryEntity) {
+                LogError("ResourceType.CategoryEntity is not set, cannot create folder");
+                this.sharedService.CreateSimpleNotification("Unable to create folder", "error", 1500);
+                return;
+            }
+            if (!this.CategoryEntityID) {
+                LogError("CategoryEntityID is not set, cannot create folder");
+                this.sharedService.CreateSimpleNotification("Unable to create folder", "error", 1500);
+                return;
+            }
+            const md = new Metadata();
+            const folderEntity = yield md.GetEntityObject(this.ResourceType.CategoryEntity);
+            folderEntity.NewRecord();
+            folderEntity.Set("Name", this.upsertNewFolderName);
+            folderEntity.Set("Description", this.upsertNewFolderDescription);
+            folderEntity.Set("ParentID", this.CurrentCategoryID);
+            folderEntity.Set("UserID", md.CurrentUser.ID);
+            folderEntity.Set("EntityID", this.CategoryEntityID);
+            let saveResult = yield folderEntity.Save();
+            if (!saveResult) {
+                this.sharedService.CreateSimpleNotification(`Unable to create folder ${this.upsertNewFolderName}`, "error", 1500);
+                LogError(`Unable to create folder ${this.upsertNewFolderName}`, undefined, folderEntity.LatestResult);
+            }
+            this.toggleUpsertFolderView(false, false);
+            this.sharedService.CreateSimpleNotification(`successfully created folder ${this.upsertNewFolderName}`, 'success', 1500);
+            let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
+            folder.ParentFolderID = folderEntity.Get("ParentID");
+            folder.Description = folderEntity.Get("Description");
+            let item = new Item(folder, ItemType.Folder);
+            //navigate to the newly created folder
+            //by raising an item click event
+            this.itemClick(item);
         });
     }
     unlinkItem(item) {
@@ -476,39 +605,24 @@ export class ResourceBrowserComponent {
     }
     deleteOrUnlink(item, bDelete) {
         return __awaiter(this, void 0, void 0, function* () {
-            // this._currentDeleteOrUnlinkState = bDelete;
-            // if(!item){
-            //   return;
-            // }
-            // this.selectedItem = item;
-            // if(item.Type === ItemType.Folder && bDelete){
-            //   let event: BeforeDeleteFolderEvent = new BeforeDeleteFolderEvent(item);
-            //   this.BeforeDeleteFolderEvent.emit(event);
-            //   if(event.Cancel){
-            //     return;
-            //   }
-            //   this.deleteDialogOpened = true;
-            // }
-            // else if(item.Type === ItemType.Entity && bDelete){
-            //   let event: BeforeDeleteItemEvent = new BeforeDeleteItemEvent(item);
-            //   this.BeforeDeleteItemEvent.emit(event);
-            //   if(event.Cancel){
-            //     return;
-            //   }
-            //   this.deleteDialogOpened = true;
-            // }
-            // else if (item.Type === ItemType.Entity && !bDelete) {
-            //   let event: BeforeUnlinkItemEvent = new BeforeUnlinkItemEvent(item);
-            //   this.BeforeUnlinkItemEvent.emit(event);
-            //   if(event.Cancel){
-            //     return;
-            //   }
-            //   this.deleteDialogOpened = true;
-            // }  
+            if (!item) {
+                return;
+            }
+            this._currentDeleteOrUnlinkState = bDelete;
+            this.selectedItem = item;
+            if (item.Type === ItemType.Folder && bDelete) {
+                this.deleteDialogOpened = true;
+            }
+            else if (item.Type === ItemType.Resource && bDelete) {
+                this.deleteDialogOpened = true;
+            }
+            else if (item.Type === ItemType.Resource && !bDelete) {
+                this.deleteDialogOpened = true;
+            }
         });
     }
     goToParent() {
-        //this.NavigateToParentEvent.emit();
+        this.NavigateToParentEvent.emit();
     }
     deleteItem(item) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -517,105 +631,58 @@ export class ResourceBrowserComponent {
     }
     onConfirmDeleteItem(shouldDelete) {
         return __awaiter(this, void 0, void 0, function* () {
-            // this.deleteDialogOpened = false;
-            // if(!this.selectedItem || !shouldDelete){
-            //   return;
-            // }
-            // let item: Item = this.selectedItem;
-            // if(item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState){
-            //   let deleteResult = await this.deleteFolder(item);
-            //   if(deleteResult){
-            //     let deleteFolderEvent: AfterDeleteFolderEvent = new AfterDeleteFolderEvent(item);
-            //     this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
-            //   }
-            // }
-            // else if(item.Type === ItemType.Entity && this._currentDeleteOrUnlinkState){
-            //   await this.deleteResource(item);
-            //   let deleteItemEvent: AfterDeleteItemEvent = new AfterDeleteItemEvent(item);
-            //   this.AfterDeleteItemEvent.emit(deleteItemEvent);
-            // }
-            // else if(item.Type === ItemType.Entity && !this._currentDeleteOrUnlinkState){
-            //   await this.unlinkResource(item);
-            //   let unlinkItemEvent: AfterUnlinkItemEvent = new AfterUnlinkItemEvent(item);
-            //   this.AfterUnlinkItemEvent.emit(unlinkItemEvent);
-            // }
-            // this.selectedItem = null;
+            if (!this.selectedItem || !shouldDelete) {
+                return;
+            }
+            this.deleteDialogOpened = false;
+            let item = this.selectedItem;
+            let success = false;
+            if (item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState) {
+                success = yield this.deleteFolder(item);
+            }
+            else if (item.Type === ItemType.Resource && this._currentDeleteOrUnlinkState) {
+                success = yield this.deleteResource(item);
+            }
+            else if (item.Type === ItemType.Resource && !this._currentDeleteOrUnlinkState) {
+                success = yield this.unlinkResource(item);
+            }
+            this.selectedItem = null;
+            if (success) {
+                yield this.Refresh();
+            }
         });
     }
     deleteFolder(item) {
         return __awaiter(this, void 0, void 0, function* () {
+            const folder = item.Data;
+            if (!folder || !folder.CategoryEntity) {
+                LogError("Folder or CategoryEntity is not set, cannot delete folder");
+                this.sharedService.CreateSimpleNotification("Unable to delete folder", "error", 2500);
+                return false;
+            }
+            const hasChildren = yield this.doesFolderHaveChildren(folder.ID);
+            if (hasChildren) {
+                this.sharedService.CreateSimpleNotification(`Unable to delete Folder ${folder.Name} because it has children`, "error", 2500);
+                return false;
+            }
+            const categoryEntity = folder.CategoryEntity;
+            const deleteResult = yield categoryEntity.Delete();
+            if (!deleteResult) {
+                LogError(`Unable to delete folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
+                this.sharedService.CreateSimpleNotification(`unable to delete folder ${folder.Name}.`, "error", 2500);
+                return false;
+            }
+            this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2500);
             return true;
-            // const folder: Folder = <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: boolean = await 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: BaseEntity = await md.GetEntityObject<BaseEntity>(this.CategoryEntityName);
-            // let pkv: KeyValuePair = new KeyValuePair();
-            // pkv.FieldName = "ID";
-            // pkv.Value = folder.ID;
-            // let compositeKey: CompositeKey = new CompositeKey([pkv]);
-            // //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 = await folderEntity.InnerLoad(compositeKey);
-            // if(!loadResult){
-            //   this.sharedService.CreateSimpleNotification(`Unable to fetch folder ${folder.Name}`, "error", 3500);
-            //   this.showLoader = false;
-            //   return false;
-            // }
-            // let deleteResult = await folderEntity.Delete();
-            // if(!deleteResult){
-            //   this.sharedService.CreateSimpleNotification(`Unable to delete folder ${folder.Name}`, "error", 3500);
-            //   this.showLoader = false;
-            //   return false;
-            // }
-            // else{
-            //   this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2000);
-            //   this.showLoader = false;
-            // }
-            // return true;
         });
     }
     deleteResource(item) {
         return __awaiter(this, void 0, void 0, function* () {
+            let genericEntity = item.Data;
+            if (!genericEntity) {
+                return false;
+            }
             return true;
-            // let genericEntity: BaseEntity = <BaseEntity>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.length > 0) {
-            //   const md = new Metadata();
-            //   let entityObject = await md.GetEntityObject(this.ItemEntityName);
-            //   let pkv: KeyValuePair = new KeyValuePair();
-            //   pkv.FieldName = "ID";
-            //   pkv.Value = entityID;
-            //   let compositeKey: CompositeKey = new CompositeKey([pkv]);
-            //   let loadResult = await entityObject.InnerLoad(compositeKey);
-            //   if(loadResult){
-            //     let deleteResult = await entityObject.Delete();
-            //     if(deleteResult){
-            //       this.showNotification(`successfully deleted`, "info");
-            //       return true;
-            //     }
-            //     else{
-            //       this.showNotification(`Unable to delete`, "error");
-            //     }
-            //   }
-            //   else{
-            //     this.showNotification(`unable to fetch`, "error");
-            //   }
-            // }
-            // return false; 
         });
     }
     unlinkResource(item) {
@@ -636,39 +703,32 @@ export class ResourceBrowserComponent {
     }
     doesFolderHaveChildren(folderID) {
         return __awaiter(this, void 0, void 0, function* () {
-            return true;
-            // const md: Metadata = new Metadata();
-            // const rv: RunView = new RunView();
-            // const folderResult = await rv.RunView({
-            //   EntityName:this.CategoryEntity,
-            //   ExtraFilter: `ParentID ='${folderID}'`
-            // });
-            // return folderResult && folderResult.Success && folderResult.Results.length > 0;
+            if (!this.ResourceType.CategoryEntity) {
+                throw new Error("ResourceType.CategoryEntity is not set, cannot check for children");
+            }
+            const rv = new RunView();
+            const folderResult = yield rv.RunView({
+                EntityName: this.ResourceType.CategoryEntity,
+                ExtraFilter: `ParentID ='${folderID}'`
+            });
+            if (!folderResult.Success) {
+                throw new Error(`Unable to fetch children for folder ${folderID}. Reason: ${folderResult.ErrorMessage}`);
+            }
+            return folderResult.Results.length > 0;
         });
     }
-    showNotification(message, type) {
-        // if(this.showNotifications){
-        //   this.sharedService.CreateSimpleNotification(message, type, 1000);
-        // }
-    }
-    TryGetID(data) {
-        if (data && data.ID) {
-            return data.ID;
-        }
-        else if (typeof data.Get === "function") {
-            return data.Get("ID");
-        }
-    }
     changeViewMode(mode) {
-        // this.displayAsGrid = mode === 'grid';
-        // this.viewModeChangeEvent.emit(mode);
+        this.DisplayMode = mode;
     }
     onKeyup(Value) {
         this.filter = Value;
         this.filterItemsSubject.next(true);
     }
-    onCreateFolderKeyup(value) {
-        this.newFolderText = value;
+    onUpsertFolderNameKeyup(value) {
+        this.upsertNewFolderName = value;
+    }
+    onUpsertFolderDescriptionKeyup(value) {
+        this.upsertNewFolderDescription = value;
     }
     filterItems(filter) {
         if (!this.sourceItems) {
@@ -682,61 +742,29 @@ export class ResourceBrowserComponent {
             return item.Name.toLowerCase().includes(filter.toLowerCase());
         });
     }
-    SetFavoriteStatus(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // if(!item){
-            //   return;
-            // }
-            // item.Favorite = !item.Favorite;
-            // const md: Metadata = new Metadata();
-            // let entityName: string = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
-            // let compositeKey: CompositeKey = new CompositeKey([{FieldName: "ID", Value: item.Data.ID}]);
-            // await md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, compositeKey, item.Favorite);
-        });
-    }
     editItem(item) {
-        // if(!item){
-        //   return;
-        // }
-        // if(item.Type === ItemType.Folder){
-        //   let event: BeforeUpdateFolderEvent = new BeforeUpdateFolderEvent(item);
-        //   this.BeforeUpdateFolderEvent.emit(event);
-        //   if(event.Cancel){
-        //     return;
-        //   }
-        // }
-        // else{
-        //   let event: BeforeUpdateItemEvent = new BeforeUpdateItemEvent(item);
-        //   this.BeforeUpdateItemEvent.emit(event);
-        //   if(event.Cancel){
-        //     return;
-        //   }
-        // }
-    }
-    onDropdownItemClick(data) {
+        if (!item || !item.Data) {
+            LogError("Item or item data is not set");
+            this.sharedService.CreateSimpleNotification("Unable to edit item", "error", 2500);
+            return;
+        }
+        if (item.Type === ItemType.Folder) {
+            const folder = item.Data;
+            this.selectedFolder = folder;
+            this.toggleUpsertFolderView(true, false);
+        }
+        else {
+            const event = new BeforeUpdateItemEvent(item);
+            this.EditItemEvent.emit(event);
+        }
+    }
+    onDropdownItemClick(dropdownItem) {
         return __awaiter(this, void 0, void 0, function* () {
-            // if(!data || !data.text){
-            //   return;
-            // }
-            // if(data.text === "Folder"){
-            //   this.toggleCreateFolderView();
-            // }
-            // else if(data.text === this.resourceName){
-            //   this.addResourceButtonClicked();
-            // }
-            // else if(data.text === this.createNewRecordName){
-            //   if(this.entityFormDialogRef){
-            //     // create a new record for the given entity
-            //     const md = new Metadata();
-            //     const newRecord = await md.GetEntityObject(this.entityObjectName);  
-            //     this.entityFormDialogRef.Record = newRecord;
-            //     this.entityFormDialogRef.ShowForm();
-            //   }
-            // }
-            // else{
-            //   let event: DropdownOptionClickEvent = new DropdownOptionClickEvent(data.text);
-            //   this.dropdownOptionClickEvent.emit(event);
-            // }
+            if (!dropdownItem || !dropdownItem.Action) {
+                LogError("Dropdown item or action is not set");
+                return;
+            }
+            dropdownItem.Action();
         });
     }
     toggleCopyFromView() {
@@ -745,60 +773,60 @@ export class ResourceBrowserComponent {
     getCopyFromTitle() {
         return `Select ${this.ResourceTypeName} to Copy`;
     }
-    toggleCreateFolderView(visible) {
-        if (visible !== undefined) {
-            this.createFolderDialogOpened = visible;
+    toggleUpsertFolderView(visible, createNew) {
+        this.upsertFolderDialogVisible = visible;
+        if (createNew) {
+            this.upsertNewFolderName = "";
+            this.upsertNewFolderDescription = "";
+            this.selectedFolder = null;
         }
-        else {
-            this.createFolderDialogOpened = !this.createFolderDialogOpened;
+        else if (visible && this.selectedFolder) {
+            this.upsertNewFolderName = this.selectedFolder.Name;
+            this.upsertNewFolderDescription = this.selectedFolder.Description || "";
         }
     }
     getIconForResourceType(item) {
+        if (!item) {
+            return "";
+        }
+        const LargeClass = "fa-3x ";
+        if (item.Type === ItemType.Folder) {
+            return LargeClass + "fa-regular fa-folder";
+        }
+        const resourceType = this._allResourceTypes.find(rt => rt.ID === this.ResourceType.ID);
+        if (resourceType) {
+            return LargeClass + resourceType.Icon; // + rotateStyle;
+        }
         return "";
-        // if(!item){
-        //   return "";
-        // }
-        // const LargeClass: string = "fa-3x ";
-        // if(item.Type === ItemType.Folder){  
-        //   return LargeClass + "fa-regular fa-folder";
-        // }
-        // const resourceType = this._allResourceTypes.find(rt => rt.Entity === this.Resource);
-        // if(resourceType){
-        //   return LargeClass + resourceType.Icon;// + rotateStyle;
-        // }
-        // return "";
     }
 }
 ResourceBrowserComponent.ɵfac = function ResourceBrowserComponent_Factory(t) { return new (t || ResourceBrowserComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
-ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceBrowserComponent, selectors: [["mj-resource-browser"]], inputs: { ResourceTypeName: "ResourceTypeName", EnableCategories: "EnableCategories", EnableItemEdit: "EnableItemEdit", EnableItemDelete: "EnableItemDelete", EnableRemoveLink: "EnableRemoveLink", Title: "Title", ItemFilter: "ItemFilter", OrderBy: "OrderBy", NewItemOptions: "NewItemOptions", CurrentCategoryID: "CurrentCategoryID", DisplayMode: "DisplayMode" }, outputs: { ResourceSelected: "ResourceSelected", CategoryChanged: "CategoryChanged", DisplayModeChanged: "DisplayModeChanged" }, decls: 27, vars: 8, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new folder", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function ResourceBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceBrowserComponent, selectors: [["mj-resource-browser"]], inputs: { ResourceTypeName: "ResourceTypeName", EnableCategories: "EnableCategories", CategoryEntityID: "CategoryEntityID", CurrentCategoryID: "CurrentCategoryID", EnableItemEdit: "EnableItemEdit", EnableItemDelete: "EnableItemDelete", EnableRemoveLink: "EnableRemoveLink", Title: "Title", ItemFilter: "ItemFilter", OrderBy: "OrderBy", NewItemOptions: "NewItemOptions", DisplayMode: "DisplayMode" }, outputs: { ResourceSelected: "ResourceSelected", CategoryChanged: "CategoryChanged", DisplayModeChanged: "DisplayModeChanged", NavigateToParentEvent: "NavigateToParentEvent", EditItemEvent: "EditItemEvent" }, decls: 25, vars: 8, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "data"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Description", "title", "Description"], ["field", "Type", "title", "Type"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width"], ["text", "Name"], ["placeholder", "Enter a folder name", 3, "valueChange", "value"], ["text", "Description"], ["placeholder", "Enter a Description", 3, "valueChange", "value"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn"]], template: function ResourceBrowserComponent_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
         i0.ɵɵtemplate(4, ResourceBrowserComponent_Conditional_4_Template, 2, 0);
         i0.ɵɵelementStart(5, "h4");
         i0.ɵɵtext(6);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(7, "kendo-dropdownbutton", 6);
-        i0.ɵɵlistener("itemClick", function ResourceBrowserComponent_Template_kendo_dropdownbutton_itemClick_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
-        i0.ɵɵelement(8, "span", 7);
-        i0.ɵɵtext(9, " Create New ");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(10, "div", 4)(11, "div", 8)(12, "kendo-textbox", 9, 0);
-        i0.ɵɵlistener("keyup", function ResourceBrowserComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r4 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r4.value)); });
-        i0.ɵɵtemplate(14, ResourceBrowserComponent_ng_template_14_Template, 1, 0, "ng-template", 10);
+        i0.ɵɵtemplate(7, ResourceBrowserComponent_Conditional_7_Template, 3, 1, "kendo-dropdownbutton", 6);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(8, "div", 4)(9, "div", 7)(10, "kendo-textbox", 8, 0);
+        i0.ɵɵlistener("keyup", function ResourceBrowserComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r5 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r5.value)); });
+        i0.ɵɵtemplate(12, ResourceBrowserComponent_ng_template_12_Template, 1, 0, "ng-template", 9);
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
-        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("grid")); });
-        i0.ɵɵelement(17, "span", 13);
+        i0.ɵɵelementStart(13, "div", 10)(14, "button", 11);
+        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("List")); });
+        i0.ɵɵelement(15, "span", 12);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(18, "button", 14);
-        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("list")); });
-        i0.ɵɵelement(19, "span", 15);
+        i0.ɵɵelementStart(16, "button", 13);
+        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("Tile")); });
+        i0.ɵɵelement(17, "span", 14);
         i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(20, "div", 16);
-        i0.ɵɵtemplate(21, ResourceBrowserComponent_Conditional_21_Template, 1, 0, "kendo-loader", 17)(22, ResourceBrowserComponent_Conditional_22_Template, 2, 1);
+        i0.ɵɵelementStart(18, "div", 15);
+        i0.ɵɵtemplate(19, ResourceBrowserComponent_Conditional_19_Template, 1, 0, "kendo-loader", 16)(20, ResourceBrowserComponent_Conditional_20_Template, 2, 1);
         i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(23, ResourceBrowserComponent_kendo_dialog_23_Template, 10, 4, "kendo-dialog", 18)(24, ResourceBrowserComponent_kendo_dialog_24_Template, 8, 2, "kendo-dialog", 19);
-        i0.ɵɵelement(25, "mj-entity-form-dialog", 20, 1);
+        i0.ɵɵtemplate(21, ResourceBrowserComponent_kendo_dialog_21_Template, 10, 4, "kendo-dialog", 17)(22, ResourceBrowserComponent_kendo_dialog_22_Template, 13, 6, "kendo-dialog", 18);
+        i0.ɵɵelement(23, "mj-entity-form-dialog", 19, 1);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵadvance(4);
@@ -806,26 +834,30 @@ ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Re
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(ctx.Title);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.dropdownOptions);
-        i0.ɵɵadvance(5);
+        i0.ɵɵconditional(ctx.ItemOptions.length > 0 ? 7 : -1);
+        i0.ɵɵadvance(3);
         i0.ɵɵproperty("clearButton", true);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("showSeparator", true);
         i0.ɵɵadvance(7);
-        i0.ɵɵconditional(ctx.IsLoading ? 21 : 22);
+        i0.ɵɵconditional(ctx.IsLoading ? 19 : 20);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
-    } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective, i9.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
+        i0.ɵɵproperty("ngIf", ctx.upsertFolderDialogVisible);
+    } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.LabelComponent, i9.CardComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective, i10.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'mj-resource-browser', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(CurrentCategoryID){\n          <span title=\"Parent\" class=\"title-folder fa-solid fa-arrow-left fa-2xl breadcrumb-icon\" (click)=\"goToParent()\"></span> \n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{Title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"dropdownOptions\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      @if (IsLoading) {\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n      }\n      @else {\n        @if(DisplayMode === 'List'){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"Items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(EnableItemEdit){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete) {\n                    <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>  \n                  }\n                  @if(EnableRemoveLink) {\n                    <button (click)=\"unlinkItem(dataItem)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else {\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of Items; track item) {\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(EnableItemEdit && (!item.IsLink || item.LinkPermissionLevel === 'Owner' || item.LinkPermissionLevel === 'Edit')) {\n                    <button (click)=\"editItem(item)\" class=\"list-btn\" title=\"Edit Item\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!item.IsLink || item.LinkPermissionLevel === 'Owner') ) {\n                    <button (click)=\"deleteItem(item)\" class=\"list-btn\" title=\"Delete Item\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>                    \n                  }\n                  @else if (EnableRemoveLink && item.IsLink) {\n                    <button (click)=\"unlinkItem(item)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    @if(item.IsLink) {\n                      <i [title]=\"item.Name + '(Shared)'\" [ngClass]=\"getIconForResourceType(item)\" style=\"color: rgb(19, 92, 201);\"></i>\n                    }\n                    @else {\n                      <span [title]=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    }\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to {{(selectedItem?.IsLink && selectedItem?.LinkPermissionLevel === 'Owner') || !selectedItem?.IsLink ? 'delete' : 'unlink'}} <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No \n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    title=\"Create new folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper .search  input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon {\n    cursor: pointer;\n}\n.breacrumb-icon:hover {\n    color: var(--primary-color);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+        args: [{ selector: 'mj-resource-browser', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(CurrentCategoryID){\n          <span title=\"Parent\" class=\"title-folder fa-solid fa-arrow-left fa-2xl breadcrumb-icon\" (click)=\"goToParent()\"></span> \n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{Title}}</h4>\n      </div>\n      @if(ItemOptions.length > 0){\n        <kendo-dropdownbutton \n          class=\"custom-dropdwn\" \n          (itemClick)=\"onDropdownItemClick($event)\" \n          [data]=\"ItemOptions\" \n          textField=\"Text\"\n          themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n              Create New\n        </kendo-dropdownbutton> \n      }\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('List')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('Tile')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      @if (IsLoading) {\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n      }\n      @else {\n        @if(DisplayMode === 'List'){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"Items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Description\" title=\"Description\"></kendo-grid-column>\n            <kendo-grid-column field=\"Type\" title=\"Type\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(EnableItemEdit && (!dataItem.IsLink || dataItem.LinkPermissionLevel === 'Owner' || dataItem.LinkPermissionLevel === 'Edit')) {\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!dataItem.IsLike || dataItem.LinkPermissionLevel === 'Owner')) {\n                    <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>  \n                  }\n                  @if(EnableRemoveLink && dataItem.IsLink) {\n                    <button (click)=\"unlinkItem(dataItem)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else {\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of Items; track item) {\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(EnableItemEdit && (!item.IsLink || item.LinkPermissionLevel === 'Owner' || item.LinkPermissionLevel === 'Edit')) {\n                    <button (click)=\"editItem(item)\" class=\"list-btn\" title=\"Edit Item\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!item.IsLink || item.LinkPermissionLevel === 'Owner') ) {\n                    <button (click)=\"deleteItem(item)\" class=\"list-btn\" title=\"Delete Item\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>                    \n                  }\n                  @else if (EnableRemoveLink && item.IsLink) {\n                    <button (click)=\"unlinkItem(item)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    @if(item.IsLink) {\n                      <i [title]=\"item.Name + '(Shared)'\" [ngClass]=\"getIconForResourceType(item)\" style=\"color: rgb(19, 92, 201);\"></i>\n                    }\n                    @else {\n                      <span [title]=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    }\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to {{(selectedItem?.IsLink && selectedItem?.LinkPermissionLevel === 'Owner') || !selectedItem?.IsLink ? 'delete' : 'unlink'}} <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No \n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    [title]=\"selectedFolder ? 'Edit Folder' : 'Create new folder'\" \n    *ngIf=\"upsertFolderDialogVisible\" \n    (close)=\"toggleUpsertFolderView(false, false)\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-label text=\"Name\">\n      <kendo-textbox [value]=\"upsertNewFolderName\" placeholder=\"Enter a folder name\" (valueChange)=\"onUpsertFolderNameKeyup($event)\"/>\n    </kendo-label>\n  </div>\n  <br>\n  <div class=\"search\">\n    <kendo-label text=\"Description\">\n      <kendo-textbox [value]=\"upsertNewFolderDescription\" placeholder=\"Enter a Description\" (valueChange)=\"onUpsertFolderDescriptionKeyup($event)\"/>\n    </kendo-label>\n  </div>\n  <kendo-dialog-actions class=\"popup-actions-btn\">\n    @if(selectedFolder){\n      <button class=\"cancel-btn\" (click)=\"updateFolder()\" kendoButton themeColor=\"info\">\n        Update\n      </button>\n    }\n    @else {\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n    }\n    <button  class=\"yes-btn\" (click)=\"toggleUpsertFolderView(false, false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n      Cancel\n    </button>\n  </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper .search  input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon {\n    cursor: pointer;\n}\n.breacrumb-icon:hover {\n    color: var(--primary-color);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
     }], () => [{ type: i1.SharedService }], { ResourceTypeName: [{
             type: Input,
             args: [{ required: true }]
         }], EnableCategories: [{
             type: Input
+        }], CategoryEntityID: [{
+            type: Input
+        }], CurrentCategoryID: [{
+            type: Input
         }], EnableItemEdit: [{
             type: Input
         }], EnableItemDelete: [{
@@ -840,8 +872,6 @@ ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Re
             type: Input
         }], NewItemOptions: [{
             type: Input
-        }], CurrentCategoryID: [{
-            type: Input
         }], DisplayMode: [{
             type: Input
         }], ResourceSelected: [{
@@ -850,6 +880,10 @@ ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Re
             type: Output
         }], DisplayModeChanged: [{
             type: Output
+        }], NavigateToParentEvent: [{
+            type: Output
+        }], EditItemEvent: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResourceBrowserComponent, { className: "ResourceBrowserComponent", filePath: "src/lib/resource-browser/resource-browser.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ResourceBrowserComponent, { className: "ResourceBrowserComponent", filePath: "src/lib/resource-browser/resource-browser.component.ts", lineNumber: 15 }); })();
 //# sourceMappingURL=resource-browser.component.js.map