@memberjunction/ng-explorer-core 0.9.210 → 0.9.214

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

@@ -10,54 +10,206 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Folder, Item, ItemType } from '../../generic/Item.types';
 import { Metadata, PrimaryKeyValue, RunView } from '@memberjunction/core';
-import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent } from '../../generic/Events.types';
+import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeAddItemEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent, BeforeUpdateFolderEvent, BeforeUpdateItemEvent } from '../../generic/Events.types';
+import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
 import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@progress/kendo-angular-indicators";
-import * as i6 from "@progress/kendo-angular-layout";
-function GenericBrowserListComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "h1");
-    i0.ɵɵtext(2);
+import * as i4 from "@progress/kendo-angular-grid";
+import * as i5 from "@progress/kendo-angular-dialog";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-indicators";
+import * as i8 from "@progress/kendo-angular-inputs";
+import * as i9 from "@progress/kendo-angular-layout";
+function GenericBrowserListComponent_kendo_loader_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 38);
+} }
+function GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "button", 49);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template_button_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const dataItem_r9 = restoredCtx.$implicit; const ctx_r10 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r10.SetFavoriteStatus(dataItem_r9)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 50)(3, "g", 51);
+    i0.ɵɵelement(4, "path", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "defs")(6, "clipPath", 53);
+    i0.ɵɵelement(7, "rect", 54);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(8, "button", 49);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template_button_click_8_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const dataItem_r9 = restoredCtx.$implicit; const ctx_r12 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r12.itemClick(dataItem_r9)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 55);
+    i0.ɵɵelement(10, "path", 56)(11, "path", 57)(12, "path", 58);
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.title);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(13, "button", 49);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template_button_click_13_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const dataItem_r9 = restoredCtx.$implicit; const ctx_r13 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r13.editItem(dataItem_r9)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(14, "svg", 59);
+    i0.ɵɵelement(15, "path", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(16, "button", 49);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template_button_click_16_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const dataItem_r9 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r14.deleteItem(dataItem_r9)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(17, "svg", 59);
+    i0.ɵɵelement(18, "path", 61);
+    i0.ɵɵelementEnd()()();
 } }
-function GenericBrowserListComponent_kendo_loader_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 12);
+function GenericBrowserListComponent_div_43_kendo_grid_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-grid", 41);
+    i0.ɵɵlistener("cellClick", function GenericBrowserListComponent_div_43_kendo_grid_1_Template_kendo_grid_cellClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.onCellItemClicked($event)); });
+    i0.ɵɵelement(1, "kendo-grid-column", 42)(2, "kendo-grid-column", 43)(3, "kendo-grid-column", 44)(4, "kendo-grid-column", 45);
+    i0.ɵɵelementStart(5, "kendo-grid-column", 46);
+    i0.ɵɵtemplate(6, GenericBrowserListComponent_div_43_kendo_grid_1_ng_template_6_Template, 19, 0, "ng-template", 47);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("kendoGridBinding", ctx_r6.items);
 } }
-function GenericBrowserListComponent_div_15_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 15)(2, "kendo-card-header", 16)(3, "div", 17)(4, "kendo-button", 18);
-    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_15_div_1_Template_kendo_button_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const d_r4 = restoredCtx.$implicit; const ctx_r5 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r5.deleteItem(d_r4)); });
+function GenericBrowserListComponent_div_43_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "kendo-card", 64)(2, "div", 65)(3, "button", 66);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_div_2_div_1_Template_button_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const d_r18 = restoredCtx.$implicit; const ctx_r19 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r19.SetFavoriteStatus(d_r18)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 50)(5, "g", 51);
+    i0.ɵɵelement(6, "path", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "defs")(8, "clipPath", 53);
+    i0.ɵɵelement(9, "rect", 54);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(10, "button", 66);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_div_2_div_1_Template_button_click_10_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const d_r18 = restoredCtx.$implicit; const ctx_r21 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r21.itemClick(d_r18)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(11, "svg", 55);
+    i0.ɵɵelement(12, "path", 56)(13, "path", 57)(14, "path", 58);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(15, "button", 66);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_div_2_div_1_Template_button_click_15_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const d_r18 = restoredCtx.$implicit; const ctx_r22 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r22.editItem(d_r18)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(16, "svg", 59);
+    i0.ɵɵelement(17, "path", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(18, "button", 66);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_div_2_div_1_Template_button_click_18_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const d_r18 = restoredCtx.$implicit; const ctx_r23 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r23.deleteItem(d_r18)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(19, "svg", 59);
+    i0.ɵɵelement(20, "path", 61);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(5, "kendo-card-body", 19);
-    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_15_div_1_Template_kendo_card_body_click_5_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const d_r4 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.itemClick(d_r4)); });
-    i0.ɵɵelementStart(6, "div", 20)(7, "h5", 21);
-    i0.ɵɵtext(8);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(21, "kendo-card-body", 67);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_div_43_div_2_div_1_Template_kendo_card_body_click_21_listener() { const restoredCtx = i0.ɵɵrestoreView(_r20); const d_r18 = restoredCtx.$implicit; const ctx_r24 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r24.itemClick(d_r18)); });
+    i0.ɵɵelementStart(22, "div", 68);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(23, "svg", 69);
+    i0.ɵɵelement(24, "path", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(25, "h5", 71);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p", 22);
-    i0.ɵɵtext(10);
+    i0.ɵɵelementStart(27, "p", 72);
+    i0.ɵɵtext(28);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const d_r4 = ctx.$implicit;
-    i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(d_r4.Name);
+    const d_r18 = ctx.$implicit;
+    i0.ɵɵadvance(26);
+    i0.ɵɵtextInterpolate(d_r18.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(d_r4.Description);
+    i0.ɵɵtextInterpolate(d_r18.Description);
+} }
+function GenericBrowserListComponent_div_43_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵtemplate(1, GenericBrowserListComponent_div_43_div_2_div_1_Template, 29, 2, "div", 63);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r7.items);
 } }
-function GenericBrowserListComponent_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵtemplate(1, GenericBrowserListComponent_div_15_div_1_Template, 11, 2, "div", 14);
+function GenericBrowserListComponent_div_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, GenericBrowserListComponent_div_43_kendo_grid_1_Template, 7, 1, "kendo-grid", 39)(2, GenericBrowserListComponent_div_43_div_2_Template, 2, 1, "div", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.items);
+    i0.ɵɵproperty("ngIf", ctx_r2.displayAsGrid);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.displayAsGrid);
+} }
+function GenericBrowserListComponent_kendo_dialog_44_kendo_loader_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 38);
+} }
+function GenericBrowserListComponent_kendo_dialog_44_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 73);
+    i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_44_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onConfirmDeleteItem(false)); });
+    i0.ɵɵtemplate(1, GenericBrowserListComponent_kendo_dialog_44_kendo_loader_1_Template, 1, 0, "kendo-loader", 33);
+    i0.ɵɵelementStart(2, "div")(3, "p", 74);
+    i0.ɵɵtext(4, " Are you sure you want to delete ");
+    i0.ɵɵelementStart(5, "b");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 75)(8, "button", 76);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_44_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r27); const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.onConfirmDeleteItem(true)); });
+    i0.ɵɵelement(9, "span", 77);
+    i0.ɵɵtext(10, " Yes ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 78);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_44_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r27); const ctx_r29 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r29.onConfirmDeleteItem(false)); });
+    i0.ɵɵelement(12, "span", 79);
+    i0.ɵɵtext(13, " No");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r3.showLoader);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r3.showLoader ? "disabled-div" : "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r3.selectedItem == null ? null : ctx_r3.selectedItem.Name);
+} }
+function GenericBrowserListComponent_kendo_dialog_45_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 80);
+    i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_45_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.toggleCopyFromView()); });
+    i0.ɵɵelementStart(1, "div", 14)(2, "input", 15);
+    i0.ɵɵlistener("keyup", function GenericBrowserListComponent_kendo_dialog_45_Template_input_keyup_2_listener() { i0.ɵɵrestoreView(_r31); const ctx_r32 = i0.ɵɵnextContext(); const _r0 = i0.ɵɵreference(23); return i0.ɵɵresetView(ctx_r32.onKeyup(_r0.value)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 81);
+    i0.ɵɵtext(5, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 82);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 450)("width", 600)("title", ctx_r4.getCopyFromTitle());
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" Create new ", ctx_r4.resourceName, " ");
+} }
+function GenericBrowserListComponent_kendo_dialog_46_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 83);
+    i0.ɵɵlistener("close", function GenericBrowserListComponent_kendo_dialog_46_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r33 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r33.toggleCreateFolderView()); });
+    i0.ɵɵelementStart(1, "div", 14)(2, "kendo-textbox", 84);
+    i0.ɵɵlistener("valueChange", function GenericBrowserListComponent_kendo_dialog_46_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r35 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r35.onCreateFolderKeyup($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 78);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_46_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r34); const ctx_r36 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r36.toggleCreateFolderView()); });
+    i0.ɵɵtext(5, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 76);
+    i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_46_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r34); const ctx_r37 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r37.createFolder()); });
+    i0.ɵɵtext(7, " Create ");
+    i0.ɵɵelementEnd()()();
 } }
 export class GenericBrowserListComponent {
     constructor(sharedService, router) {
@@ -76,6 +228,8 @@ export class GenericBrowserListComponent {
         this.selectedFolderID = null;
         this.showNotifications = true;
         this.categoryEntityID = null;
+        this.displayAsGrid = false;
+        this.resourceName = "Resource";
         /**
          * If we are viewing a reesource, such as dashboards, reports, queries, etc
          * then the UI will need to change abit to accomodate this like
@@ -103,10 +257,33 @@ export class GenericBrowserListComponent {
         this.AfterUpdateItemEvent = new EventEmitter();
         this.itemClickEvent = new EventEmitter();
         this.backButtonClickEvent = new EventEmitter();
+        this.viewModeChangeEvent = new EventEmitter();
+        this._resizeDebounceTime = 250;
+        this._resizeEndDebounceTime = 500;
+        this.filterItemsSubject = new Subject();
+        this.filter = '';
+        this.sourceItems = null;
+        this.selectedItem = null;
+        this.deleteDialogOpened = false;
+        this.copyFromDialogOpened = false;
+        this.createFolderDialogOpened = false;
+        this.newFolderText = "Sample Folder";
+        this.data = [
+            { text: "Folder" },
+            { text: "Report with Skip" }
+        ];
         this.router = router;
+        this.filterItemsSubject
+            .pipe(debounceTime(this._resizeDebounceTime))
+            .subscribe(() => this.filterItems(this.filter));
+    }
+    ngOnInit() {
+        //this.data.push({ text: `${this.resourceName} from Existing` });
+    }
+    //wrapper function for the grid view
+    onCellItemClicked(event) {
+        this.itemClick(event.dataItem);
     }
-    //TODO - add property to show or hide notifications
-    //create display notification method
     itemClick(item) {
         if (!item) {
             return;
@@ -119,11 +296,19 @@ export class GenericBrowserListComponent {
     //todo - show a modal asking the user for a name to give the resource
     addResourceButtonClicked() {
         return __awaiter(this, void 0, void 0, function* () {
-            const resourceName = "Sample";
+            let event = new BeforeAddItemEvent("");
+            this.BeforeAddItemEvent.emit(event);
+            if (event.Cancel) {
+                return;
+            }
+            const resourceName = `Sample ${this.ItemEntityName}`;
             const md = new Metadata();
             const entity = yield md.GetEntityObject(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 = yield entity.Save();
             if (saveResult) {
                 this.showNotification(`successfully created ${resourceName}`, "info");
@@ -132,18 +317,20 @@ export class GenericBrowserListComponent {
                 this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
             }
             else {
-                this.showNotification(`Unable to create folder ${resourceName}`, "error");
+                this.showNotification(`Unable to create ${resourceName}`, "error");
             }
         });
     }
     //todo - show a modal asking the user for a name to give the folder
     createFolder() {
         return __awaiter(this, void 0, void 0, function* () {
-            let event = new BeforeAddFolderEvent("Sample Folder");
+            this.toggleCreateFolderView(false);
+            let event = new BeforeAddFolderEvent(this.newFolderText);
             if (event.Cancel) {
             }
-            let folderName = "Sample Folder " + this.ItemEntityName;
-            let description = `Sub folder of ${(this.selectedFolderID ? this.selectedFolderID : "root")} inside ${this.ItemEntityName}`;
+            let folderName = this.newFolderText;
+            let description = "";
+            console.log("creating folder: ", folderName, this.CategoryEntityName);
             const md = new Metadata();
             const folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
             folderEntity.NewRecord();
@@ -164,6 +351,7 @@ export class GenericBrowserListComponent {
             else {
                 this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error");
             }
+            this.newFolderText = "Sample Folder";
         });
     }
     deleteItem(item) {
@@ -171,17 +359,14 @@ export class GenericBrowserListComponent {
             if (!item) {
                 return;
             }
+            this.selectedItem = item;
             if (item.Type === ItemType.Folder) {
                 let event = new BeforeDeleteFolderEvent(item);
                 this.BeforeDeleteFolderEvent.emit(event);
                 if (event.Cancel) {
                     return;
                 }
-                let deleteResult = yield this.deleteFolder(item);
-                if (deleteResult) {
-                    let deleteFolderEvent = new AfterDeleteFolderEvent(item);
-                    this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
-                }
+                this.deleteDialogOpened = true;
             }
             else if (item.Type === ItemType.Entity) {
                 let event = new BeforeDeleteItemEvent(item);
@@ -189,10 +374,30 @@ export class GenericBrowserListComponent {
                 if (event.Cancel) {
                     return;
                 }
+                this.deleteDialogOpened = true;
+            }
+        });
+    }
+    onConfirmDeleteItem(shouldDelete) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.deleteDialogOpened = false;
+            if (!this.selectedItem || !shouldDelete) {
+                return;
+            }
+            let item = this.selectedItem;
+            if (item.Type === ItemType.Folder) {
+                let deleteResult = yield this.deleteFolder(item);
+                if (deleteResult) {
+                    let deleteFolderEvent = new AfterDeleteFolderEvent(item);
+                    this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
+                }
+            }
+            else if (item.Type === ItemType.Entity) {
                 yield this.deleteResource(item);
                 let deleteItemEvent = new AfterDeleteItemEvent(item);
                 this.AfterDeleteItemEvent.emit(deleteItemEvent);
             }
+            this.selectedItem = null;
         });
     }
     deleteFolder(item) {
@@ -291,50 +496,178 @@ export class GenericBrowserListComponent {
             return data.Get("ID");
         }
     }
+    changeViewMode(mode) {
+        this.displayAsGrid = mode === 'grid';
+        this.viewModeChangeEvent.emit(mode);
+    }
+    onKeyup(Value) {
+        this.filter = Value;
+        this.filterItemsSubject.next(true);
+    }
+    onCreateFolderKeyup(value) {
+        this.newFolderText = value;
+    }
+    filterItems(filter) {
+        console.log("filtering items");
+        if (!this.sourceItems) {
+            this.sourceItems = [...this.items];
+        }
+        if (!filter) {
+            this.items = [...this.sourceItems];
+            return;
+        }
+        this.items = this.sourceItems.filter(item => {
+            return item.Name.toLowerCase().includes(filter.toLowerCase());
+        });
+    }
+    SetFavoriteStatus(item) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!item) {
+                return;
+            }
+            console.log("????");
+            console.log(item);
+            console.log("setting favorite status for item: ", item.Name);
+            item.Favorite = !item.Favorite;
+            const md = new Metadata();
+            let entityName = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
+            let pkv = [{ FieldName: "ID", Value: item.Data.ID }];
+            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, pkv, item.Favorite);
+            console.log("favorite status set for item: ", item.Favorite);
+        });
+    }
+    editItem(item) {
+        if (!item) {
+            return;
+        }
+        console.log("on edit item clicked: ", item.Name);
+        if (item.Type === ItemType.Folder) {
+            let event = new BeforeUpdateFolderEvent(item);
+            this.BeforeUpdateFolderEvent.emit(event);
+            if (event.Cancel) {
+                return;
+            }
+        }
+        else {
+            let event = new BeforeUpdateItemEvent(item);
+            this.BeforeUpdateItemEvent.emit(event);
+            if (event.Cancel) {
+                return;
+            }
+        }
+    }
+    onDropdownItemClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log("onDropdownItemClick: ", data.text);
+            if (data.text === "Folder") {
+                this.toggleCreateFolderView();
+            }
+            else if (data.text === "Report with Skip") {
+                //todo - implement
+            }
+            else if (data.text === `${this.resourceName} from Existing`) {
+                this.toggleCopyFromView();
+            }
+        });
+    }
+    toggleCopyFromView() {
+        this.copyFromDialogOpened = !this.copyFromDialogOpened;
+    }
+    getCopyFromTitle() {
+        return `Select ${this.resourceName} to Copy`;
+    }
+    toggleCreateFolderView(visible) {
+        if (visible !== undefined) {
+            this.createFolderDialogOpened = visible;
+        }
+        else {
+            this.createFolderDialogOpened = !this.createFolderDialogOpened;
+        }
+    }
 }
 GenericBrowserListComponent.ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
-GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent" }, decls: 16, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "card-header-entity"], ["class", "title-wrap", 4, "ngIf"], [1, "add-item"], ["kendoButton", "", 3, "disabled", "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-plus"], ["kendoButton", "", 3, "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-chevron-left"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], [1, "title-wrap"], ["type", "converging-spinner"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "k-hstack", "view-card"], [1, "btn-wrapper"], ["iconClass", "fa fa-trash", "fillMode", "flat", "title", "Delete Item", 3, "click"], [3, "click"], [1, "view-card-content", "k-cursor-pointer"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-        i0.ɵɵtemplate(2, GenericBrowserListComponent_div_2_Template, 3, 1, "div", 2);
-        i0.ɵɵelementStart(3, "div", 3)(4, "button", 4);
-        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_4_listener() { return ctx.addResourceButtonClicked(); });
-        i0.ɵɵelement(5, "span", 5);
-        i0.ɵɵtext(6);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(7, "button", 6);
-        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_7_listener() { return ctx.createFolder(); });
-        i0.ɵɵelement(8, "span", 7);
-        i0.ɵɵtext(9, " Create Folder ");
+GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 47, vars: 10, consts: [[1, "generic-browser-list-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "add-item"], ["kendoButton", "", 3, "primary", "click"], [1, "k-icon", "k-font-icon", "k-i-plus"], ["width", "22", "height", "22", "viewBox", "0 0 22 22", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M3.14105 19.6753C3.2141 19.6753 3.28715 19.6667 3.36019 19.6452L8.63671 18.1628C8.89882 18.0898 9.13944 17.948 9.3285 17.7546L18.9577 8.12538C19.4218 7.66133 19.6796 7.04687 19.6796 6.39374C19.6796 5.74062 19.4261 5.12616 18.962 4.6621L17.3421 3.04219C16.878 2.57813 16.2636 2.32031 15.6061 2.32031C14.953 2.32031 14.3386 2.57383 13.8745 3.0379L4.24529 12.6715C4.05192 12.8649 3.91442 13.1012 3.83708 13.3633L2.35466 18.6398C2.27302 18.9234 2.35466 19.2285 2.5652 19.439C2.71559 19.5937 2.92615 19.6754 3.14098 19.6754L3.14105 19.6753ZM8.7571 16.2636L5.74072 13.2473L13.0797 5.90825L16.0961 8.92463L8.7571 16.2636ZM15.6063 3.78122C15.8684 3.78122 16.1176 3.88434 16.3066 4.0691L17.9266 5.68902C18.1113 5.87378 18.2144 6.12301 18.2144 6.38941C18.2144 6.65581 18.1113 6.90074 17.9266 7.0898L17.1273 7.88902L14.1109 4.87264L14.9102 4.07341C15.0949 3.88436 15.3441 3.78122 15.6063 3.78122ZM5.01013 14.5878L7.41217 16.9898L4.06927 17.9308L5.01013 14.5878Z", "fill", "#2264DC"], [1, "main-fav-wrapper"], [1, "title-wrapper"], ["themeColor", "primary", 3, "data", "itemClick"], ["width", "16", "height", "16", "viewBox", "0 0 16 16", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M7.86401 1V14.7279", "stroke", "white", "stroke-width", "2", "stroke-linecap", "round"], ["d", "M1 7.86401H14.7279", "stroke", "white", "stroke-width", "2", "stroke-linecap", "round"], [1, "search"], ["type", "text", "placeholder", "Search", 3, "keyup"], ["searchInput", ""], ["width", "20", "height", "20", "viewBox", "0 0 20 20", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["fill-rule", "evenodd", "clip-rule", "evenodd", "d", "M3.3255 3.32539C0.468025 6.18288 0.468025 10.816 3.3255 13.6735C7.94035 18.2884 15.8169 14.9659 15.8169 8.49936C15.8169 4.45816 12.5406 1.18209 8.49964 1.18209C6.62675 1.18238 4.75424 1.89678 3.3255 3.32558V3.32539ZM14.9133 14.0772L19.82 18.9839C20.3702 19.5341 19.5342 20.3703 18.984 19.8199L14.0773 14.9132C10.7273 17.8324 5.65827 17.6785 2.48951 14.5096C-0.830025 11.1901 -0.829651 5.80856 2.48951 2.48938C5.80868 -0.829795 11.1905 -0.829795 14.5097 2.48938C17.6784 5.65796 17.8324 10.7272 14.9132 14.0772L14.9133 14.0772Z", "fill", "#1B1C1E"], [1, "filter-wrapper"], ["themeColor", "primary", 3, "data"], ["kendobutton", "", 1, "grid-btn", "btn-cmn", 3, "click"], ["width", "18", "height", "18", "viewBox", "0 0 18 18", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M1 1H17", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["d", "M1 11.6667H17", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["d", "M1 6.33328H17", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["d", "M1 17H17", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["kendobutton", "", 1, "active", "btn-cmn", 3, "click"], ["x", "1", "y", "10.5999", "width", "6.4", "height", "6.4", "stroke", "#2264DC", "stroke-width", "1.5", "stroke-linejoin", "round"], ["x", "1", "y", "1", "width", "6.4", "height", "6.4", "stroke", "#2264DC", "stroke-width", "1.5", "stroke-linejoin", "round"], ["x", "10.6002", "y", "10.5999", "width", "6.4", "height", "6.4", "stroke", "#2264DC", "stroke-width", "1.5", "stroke-linejoin", "round"], ["x", "10.6002", "y", "1", "width", "6.4", "height", "6.4", "stroke", "#2264DC", "stroke-width", "1.5", "stroke-linejoin", "round"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["title", "Confirm", 3, "close", 4, "ngIf"], [3, "minWidth", "width", "title", "close", 4, "ngIf"], ["title", "Create new Folder", 3, "close", 4, "ngIf"], ["type", "converging-spinner"], [3, "kendoGridBinding", "cellClick", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], [3, "kendoGridBinding", "cellClick"], ["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", 3, "click"], ["width", "21", "height", "20", "viewBox", "0 0 21 20", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["clip-path", "url(#clip0_141_7562)"], ["d", "M10.574 2.68001L12.5291 6.57001H12.5291C12.8449 7.19788 13.4512 7.63094 14.1503 7.72801L18.481 8.32801L15.3633 11.382C14.8618 11.875 14.6361 12.5816 14.7598 13.272L15.5201 17.554L11.64 15.554V15.5539C11.0154 15.2275 10.2692 15.2275 9.64464 15.5539L5.77256 17.5999L6.49667 13.3119C6.61263 12.6199 6.37874 11.9153 5.8711 11.4279L2.72516 8.39994L7.04982 7.75391C7.74789 7.64981 8.34969 7.21074 8.659 6.57994L10.5739 2.67994M10.5739 0.437943C10.4356 0.437032 10.3 0.475313 10.1828 0.548295C10.0655 0.621212 9.97172 0.725828 9.91213 0.849928L7.39377 5.97593C7.28665 6.19156 7.07993 6.34103 6.84061 6.37593L1.17028 7.22593C0.988324 7.25314 0.823183 7.34715 0.70749 7.48935C0.591726 7.6316 0.533782 7.81175 0.544975 7.99436C0.556171 8.17698 0.635727 8.34879 0.767996 8.47594L4.89352 12.4359H4.89346C5.06829 12.6035 5.14881 12.8458 5.10868 13.0839L4.16333 18.7059C4.13209 18.8867 4.17053 19.0726 4.27084 19.2265C4.37122 19.3805 4.5262 19.4911 4.7049 19.5366C4.88365 19.5821 5.07308 19.559 5.23546 19.4719L10.3003 16.7999C10.515 16.6876 10.7716 16.6876 10.9862 16.7999L16.0732 19.4199C16.2364 19.5052 16.4259 19.5263 16.604 19.4791C16.7821 19.4319 16.9358 19.3198 17.0346 19.165C17.1334 19.0104 17.1701 18.8243 17.1373 18.6439L16.1316 13.0299C16.0872 12.7935 16.1623 12.5506 16.3327 12.3799L20.418 8.37995C20.549 8.2515 20.6269 8.07891 20.6363 7.89623C20.6457 7.71354 20.5859 7.534 20.4689 7.39291C20.3518 7.25183 20.1858 7.15944 20.0037 7.13393L14.3253 6.33393C14.0845 6.30027 13.876 6.15059 13.7681 5.93393L11.2256 0.843928C11.1646 0.722705 11.0706 0.620945 10.9543 0.550245C10.8381 0.479542 10.7042 0.442693 10.5678 0.44393L10.5739 0.437943Z", "fill", "#4E5050"], ["id", "clip0_141_7562"], ["width", "20.1147", "height", "20", "fill", "white", "transform", "translate(0.54277)"], ["width", "19", "height", "19", "viewBox", "0 0 19 19", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M7.06452 4H2.80661C1.70204 4 0.80661 4.89543 0.80661 6V16C0.80661 17.1046 1.70204 18 2.80661 18H12.8869C13.9915 18 14.8869 17.1046 14.8869 16V11.8889", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["d", "M10.8271 1H17.8673V8", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round", "stroke-linejoin", "round"], ["d", "M5.88773 13L16.9508 2", "stroke", "#4E5050", "stroke-width", "1.5", "stroke-linecap", "round"], ["width", "23", "height", "22", "viewBox", "0 0 23 22", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M3.20082 19.6753C3.27429 19.6753 3.34776 19.6667 3.42122 19.6453L8.728 18.1628C8.99161 18.0898 9.23362 17.948 9.42376 17.7546L19.1082 8.12541C19.5749 7.66136 19.8342 7.0469 19.8342 6.39377C19.8342 5.74065 19.5792 5.12619 19.1125 4.66213L17.4833 3.04222C17.0166 2.57816 16.3986 2.32034 15.7374 2.32034C15.0805 2.32034 14.4626 2.57386 13.9958 3.03793L4.31139 12.6715C4.11692 12.8649 3.97863 13.1012 3.90084 13.3633L2.40992 18.6399C2.32782 18.9235 2.40992 19.2285 2.62167 19.4391C2.77292 19.5938 2.98469 19.6754 3.20075 19.6754L3.20082 19.6753ZM8.84908 16.2637L5.8154 13.2473L13.1965 5.90828L16.2302 8.92466L8.84908 16.2637ZM15.7375 3.78125C16.0011 3.78125 16.2518 3.88437 16.4419 4.06913L18.0711 5.68905C18.257 5.87381 18.3607 6.12304 18.3607 6.38944C18.3607 6.65584 18.257 6.90077 18.0711 7.08983L17.2673 7.88905L14.2336 4.87267L15.0374 4.07344C15.2233 3.88439 15.4739 3.78125 15.7375 3.78125ZM5.08063 14.5878L7.49644 16.9899L4.13436 17.9309L5.08063 14.5878Z", "fill", "#4E5050"], ["d", "M18.2716 4.125H16.1973V3.4375C16.1973 2.89051 15.9788 2.36586 15.5898 1.97906C15.2007 1.59227 14.6731 1.375 14.123 1.375H8.59142C8.04129 1.375 7.51363 1.59229 7.12462 1.97906C6.7356 2.36586 6.51709 2.89051 6.51709 3.4375V4.125H4.44276C4.076 4.125 3.72423 4.26988 3.46495 4.52776C3.20559 4.78557 3.05988 5.13535 3.05988 5.5V6.875C3.05988 7.23967 3.20558 7.58943 3.46495 7.84723C3.72423 8.10511 4.07602 8.25 4.44276 8.25V18.5625C4.44276 19.1095 4.66129 19.6341 5.05029 20.0209C5.43931 20.4077 5.96696 20.625 6.51709 20.625H16.1973C16.7474 20.625 17.2751 20.4077 17.6641 20.0209C18.0531 19.6341 18.2716 19.1095 18.2716 18.5625V8.25C18.6384 8.25 18.9901 8.10512 19.2494 7.84723C19.5088 7.58943 19.6545 7.23965 19.6545 6.875V5.5C19.6545 5.13533 19.5088 4.78557 19.2494 4.52776C18.9901 4.26989 18.6384 4.125 18.2716 4.125ZM7.89998 3.4375C7.89998 3.25517 7.97279 3.08029 8.1025 2.95137C8.23215 2.82239 8.40803 2.75 8.59142 2.75H14.123C14.3063 2.75 14.4822 2.8224 14.6119 2.95137C14.7416 3.08028 14.8144 3.25516 14.8144 3.4375V4.125H7.89998V3.4375ZM16.8887 18.5625C16.8887 18.7448 16.8159 18.9197 16.6862 19.0486C16.5566 19.1776 16.3807 19.25 16.1973 19.25H6.51709C6.33371 19.25 6.15784 19.1776 6.02818 19.0486C5.89846 18.9197 5.82565 18.7448 5.82565 18.5625V8.25H16.8887V18.5625ZM18.2716 6.875H4.44276V5.5H18.2716V6.875ZM8.59142 17.1875V10.3125C8.59142 10.0669 8.72322 9.83992 8.93714 9.71709C9.15106 9.59427 9.41466 9.59427 9.62858 9.71709C9.84251 9.83991 9.97431 10.0669 9.97431 10.3125V17.1875C9.97431 17.4331 9.8425 17.6601 9.62858 17.7829C9.41466 17.9057 9.15106 17.9057 8.93714 17.7829C8.72322 17.6601 8.59142 17.4331 8.59142 17.1875ZM12.7401 17.1875V10.3125C12.7401 10.0669 12.8719 9.83992 13.0858 9.71709C13.2997 9.59427 13.5633 9.59427 13.7772 9.71709C13.9912 9.83991 14.123 10.0669 14.123 10.3125V17.1875C14.123 17.4331 13.9912 17.6601 13.7772 17.7829C13.5633 17.9057 13.2997 17.9057 13.0858 17.7829C12.8719 17.6601 12.7401 17.4331 12.7401 17.1875Z", "fill", "#4E5050"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper"], [1, "list-item-icon"], [1, "common-btn", 3, "click"], [3, "click"], [1, "view-card-content-list", "k-cursor-pointer"], ["width", "46", "height", "46", "viewBox", "0 0 46 46", "fill", "none", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M15.3333 34.0208C16.9854 34.0208 18.5698 33.3645 19.7382 32.1964C20.9063 31.0281 21.5627 29.4437 21.5627 27.7915C21.5627 26.1393 20.9063 24.555 19.7382 23.3866C18.5699 22.2185 16.9855 21.5622 15.3333 21.5622C13.6811 21.5622 12.0968 22.2185 10.9285 23.3866C9.76032 24.5549 9.10401 26.1393 9.10401 27.7915C9.1091 29.4421 9.76691 31.0235 10.9341 32.1906C12.1012 33.3579 13.6826 34.0157 15.3333 34.0208L15.3333 34.0208ZM15.3333 24.4375C16.2229 24.4375 17.076 24.7909 17.7051 25.4199C18.3341 26.049 18.6875 26.9021 18.6875 27.7917C18.6875 28.6813 18.3341 29.5343 17.7051 30.1634C17.076 30.7924 16.2229 31.1458 15.3333 31.1458C14.4437 31.1458 13.5907 30.7924 12.9616 30.1634C12.3326 29.5343 11.9792 28.6813 11.9792 27.7917C11.9843 26.9037 12.3391 26.0533 12.9671 25.4255C13.595 24.7975 14.4453 24.4426 15.3333 24.4375ZM33.8292 32.5833V26.8333C33.8292 26.3197 34.1032 25.8452 34.5479 25.5884C34.9927 25.3316 35.5407 25.3316 35.9854 25.5884C36.4302 25.8452 36.7042 26.3197 36.7042 26.8333V32.5833C36.7042 33.0969 36.4301 33.5715 35.9854 33.8283C35.5407 34.0851 34.9927 34.0851 34.5479 33.8283C34.1032 33.5715 33.8292 33.097 33.8292 32.5833ZM29.2292 32.5833V23C29.2292 22.4864 29.5032 22.0119 29.9479 21.755C30.3927 21.4982 30.9407 21.4982 31.3854 21.755C31.8302 22.0119 32.1042 22.4864 32.1042 23V32.5833C32.1042 33.0969 31.8301 33.5715 31.3854 33.8283C30.9407 34.0851 30.3927 34.0851 29.9479 33.8283C29.5032 33.5715 29.2292 33.097 29.2292 32.5833ZM24.4375 32.5833V28.75C24.4375 28.2364 24.7115 27.7619 25.1562 27.505C25.601 27.2482 26.149 27.2482 26.5938 27.505C27.0385 27.7619 27.3125 28.2364 27.3125 28.75V32.5833C27.3125 33.0969 27.0385 33.5715 26.5938 33.8283C26.149 34.0851 25.601 34.0851 25.1562 33.8283C24.7115 33.5715 24.4375 33.097 24.4375 32.5833ZM37.375 4.3125H8.625C7.48129 4.3125 6.3843 4.76683 5.57555 5.57555C4.76679 6.3843 4.3125 7.48129 4.3125 8.625V37.375C4.3125 38.5187 4.76683 39.6157 5.57555 40.4245C6.3843 41.2332 7.48129 41.6875 8.625 41.6875H37.375C38.5187 41.6875 39.6157 41.2332 40.4245 40.4245C41.2332 39.6157 41.6875 38.5187 41.6875 37.375V8.625C41.6875 7.48129 41.2332 6.3843 40.4245 5.57555C39.6157 4.76679 38.5187 4.3125 37.375 4.3125ZM38.8125 37.375C38.8076 37.7547 38.6545 38.1174 38.386 38.386C38.1174 38.6545 37.7547 38.8076 37.375 38.8125H8.625C8.24526 38.8076 7.8826 38.6545 7.61396 38.386C7.34548 38.1174 7.19245 37.7547 7.1875 37.375V16.7708H38.8125V37.375ZM38.8125 13.8958H7.1875V8.625C7.19244 8.24526 7.34548 7.8826 7.61396 7.61396C7.88259 7.34548 8.24527 7.19245 8.625 7.1875H37.375C37.7547 7.19244 38.1174 7.34548 38.386 7.61396C38.6545 7.88259 38.8076 8.24527 38.8125 8.625V13.8958ZM19.6458 10.5417C19.6409 10.9214 19.4879 11.2841 19.2194 11.5527C18.9507 11.8212 18.5881 11.9742 18.2083 11.9792H16.2917C15.7781 11.9792 15.3035 11.7051 15.0467 11.2604C14.7899 10.8157 14.7899 10.2677 15.0467 9.82292C15.3035 9.37817 15.778 9.10417 16.2917 9.10417H18.2083C18.5881 9.10911 18.9507 9.26214 19.2194 9.53062C19.4879 9.79926 19.6409 10.1619 19.6458 10.5417ZM13.8958 10.5417C13.8909 10.9214 13.7379 11.2841 13.4694 11.5527C13.2007 11.8212 12.8381 11.9742 12.4583 11.9792H10.5417C10.0281 11.9792 9.55355 11.7051 9.29671 11.2604C9.03991 10.8157 9.03991 10.2677 9.29671 9.82292C9.55352 9.37817 10.028 9.10417 10.5417 9.10417H12.4583C12.8381 9.10911 13.2007 9.26214 13.4694 9.53062C13.7379 9.79926 13.8909 10.1619 13.8958 10.5417Z", "fill", "#4E5050"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Confirm", 3, "close"], [1, "k-m-7.5", "k-text-center"], [1, "k-actions", "k-actions-end", "popup-actions"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "k-icon", "k-i-check"], ["kendoButton", "", 3, "click"], [1, "k-icon", "k-i-close"], [3, "minWidth", "width", "title", "close"], ["kendoButton", ""], ["kendoButton", "", "themeColor", "primary"], ["title", "Create new Folder", 3, "close"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r38 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(5, "div", 3)(6, "button", 4);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_6_listener() { return ctx.addResourceButtonClicked(); });
+        i0.ɵɵelement(7, "span", 5);
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(8, "svg", 6);
+        i0.ɵɵelement(9, "path", 7);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(10, "button", 6);
-        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_10_listener() { return ctx.backButtonClicked(); });
-        i0.ɵɵelement(11, "span", 7);
-        i0.ɵɵtext(12);
+        i0.ɵɵtext(10);
         i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(13, "div", 8);
-        i0.ɵɵtemplate(14, GenericBrowserListComponent_kendo_loader_14_Template, 1, 0, "kendo-loader", 9)(15, GenericBrowserListComponent_div_15_Template, 2, 1, "div", 10);
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "h4");
+        i0.ɵɵtext(14, "Favorites");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(15, "kendo-dropdownbutton", 10);
+        i0.ɵɵlistener("itemClick", function GenericBrowserListComponent_Template_kendo_dropdownbutton_itemClick_15_listener($event) { return ctx.onDropdownItemClick($event); });
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(16, "svg", 11);
+        i0.ɵɵelement(17, "path", 12)(18, "path", 13);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtext(19, " Create New ");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(20, "div", 9)(21, "div", 14)(22, "input", 15, 16);
+        i0.ɵɵlistener("keyup", function GenericBrowserListComponent_Template_input_keyup_22_listener() { i0.ɵɵrestoreView(_r38); const _r0 = i0.ɵɵreference(23); return i0.ɵɵresetView(ctx.onKeyup(_r0.value)); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(24, "svg", 17);
+        i0.ɵɵelement(25, "path", 18);
         i0.ɵɵelementEnd()();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(26, "div", 19)(27, "kendo-dropdownbutton", 20);
+        i0.ɵɵtext(28, " Sort By Recents ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(29, "button", 21);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_29_listener() { return ctx.changeViewMode("grid"); });
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(30, "svg", 22);
+        i0.ɵɵelement(31, "path", 23)(32, "path", 24)(33, "path", 25)(34, "path", 26);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(35, "button", 27);
+        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_35_listener() { return ctx.changeViewMode("list"); });
+        i0.ɵɵnamespaceSVG();
+        i0.ɵɵelementStart(36, "svg", 22);
+        i0.ɵɵelement(37, "rect", 28)(38, "rect", 29)(39, "rect", 30)(40, "rect", 31);
+        i0.ɵɵelementEnd()()()();
+        i0.ɵɵnamespaceHTML();
+        i0.ɵɵelementStart(41, "div", 32);
+        i0.ɵɵtemplate(42, GenericBrowserListComponent_kendo_loader_42_Template, 1, 0, "kendo-loader", 33)(43, GenericBrowserListComponent_div_43_Template, 3, 2, "div", 34);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(44, GenericBrowserListComponent_kendo_dialog_44_Template, 14, 4, "kendo-dialog", 35)(45, GenericBrowserListComponent_kendo_dialog_45_Template, 8, 4, "kendo-dialog", 36)(46, GenericBrowserListComponent_kendo_dialog_46_Template, 8, 0, "kendo-dialog", 37);
+        i0.ɵɵelementEnd();
     } if (rf & 2) {
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate(ctx.title);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.viewingResource);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.disableAddButton)("primary", true);
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", ctx.addText, " ");
-        i0.ɵɵadvance();
         i0.ɵɵproperty("primary", true);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("primary", true);
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", ctx.backText, " ");
-        i0.ɵɵadvance(2);
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate1(" ", ctx.addText, " ");
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("data", ctx.data);
+        i0.ɵɵadvance(12);
+        i0.ɵɵproperty("data", ctx.data);
+        i0.ɵɵadvance(15);
         i0.ɵɵproperty("ngIf", ctx.showLoader);
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", !ctx.showLoader);
-    } }, dependencies: [i3.NgForOf, i3.NgIf, i4.ButtonComponent, i5.LoaderComponent, i6.CardComponent, i6.CardHeaderComponent, i6.CardBodyComponent, i6.CardTitleDirective, i6.CardSubtitleDirective], styles: [".generic-browse-list-container[_ngcontent-%COMP%] {\r\n    margin: 10px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%] {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container[_ngcontent-%COMP%] {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    gap: 20px;\r\n  }"] });
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.copyFromDialogOpened);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
+    } }, dependencies: [i3.NgForOf, i3.NgIf, i4.GridComponent, i4.DataBindingDirective, i4.ColumnComponent, i4.CellTemplateDirective, i5.DialogComponent, i5.DialogActionsComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.LoaderComponent, i8.TextBoxComponent, i9.CardComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective], styles: [".card-header-entity .title-wrap h1 {\r\n    margin: 0 !important;\r\n    font-size: 36px !important;\r\n    line-height: 42px !important;\r\n    color: var(--black) !important;\r\n}\r\n   .card-header-entity .add-item .k-button {\r\n    border: 1px solid var(--border-blue) !important;\r\n    background: var(--white-color) !important;\r\n    color: var(--border-blue);\r\n    font-weight: 500 ;\r\n    font-size: 16px ;\r\n    border-radius: 10px;\r\n    line-height: 34px;\r\n}\r\n  .card-header-entity .add-item .k-button:hover {\r\n    background: var(--border-blue) !important;\r\n    color: var(--white-color);\r\n}\r\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\r\n    fill: var(--white-color) !important;\r\n}\r\n .title-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 14px 0;\r\n    border-bottom: 1px solid var(--med-gray);\r\n}\r\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\r\n    margin: 0;\r\n    font-size: 24px;\r\n    line-height: 28px;\r\n }\r\n .main-fav-wrapper[_ngcontent-%COMP%] {\r\n    background: #fff;\r\n    padding: 20px;\r\n }\r\n .filter-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    gap: 14px;\r\n    align-items: center;\r\n}\r\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\r\n    width: 100%;\r\n    height: 100%;\r\n    font-size: 16px;\r\n    background: transparent;\r\n    border: none;\r\n    box-sizing: border-box;\r\n    padding-left: 40px;\r\n\r\n }\r\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\r\n    background: var(--light-shade);\r\n    width: 360px;\r\n    height: 44px;\r\n    position: relative;\r\n    border-radius: 10px;\r\n }\r\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    left: 12px;\r\n}\r\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\r\n    background: var(--border-blue);\r\n    color: var(--white-color);\r\n    font-size: 16px;\r\n    border: none;\r\n    padding: 8px 25px;\r\n    border-radius: 10px;\r\n}\r\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n.btn-cmn[_ngcontent-%COMP%] {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: transparent;\r\n    border-radius: 8px;\r\n    border: 1px solid var(--gray-color);\r\n}\r\n.btn-cmn.active[_ngcontent-%COMP%] {\r\n    border: 1px solid var(--border-blue);\r\n}\r\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\r\n    border: 1px solid var(--gray-color);\r\n    border-radius: 8px;   padding: 10px 25px;\r\n    background: var(--white-color);\r\n    color: var(--sideNav);\r\n}\r\n  .main-area .card-list .card-wrapper .k-card-body {\r\n    padding: 16px !important;\r\n    position: relative;\r\n}\r\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    top:12px;\r\n    right: 12px;\r\n    z-index: 9;\r\n}\r\n.grid-wrapper[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\r\n    width: 38px;\r\n    height: 38px;\r\n    background: #000;\r\n    min-width: 38px;\r\n    border: 1px solid var(--gray-color);\r\n    border-radius: 8px; \r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background: transparent;\r\n    cursor: pointer;\r\n}\r\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\r\n    border: 1px solid var(--border-active);\r\n}\r\n\r\n\r\n  .main-area .card-list .card-wrapper:hover {\r\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n    border: 1px solid var(--border-active);\r\n}\r\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\r\n    color: var(--border-blue);\r\n}\r\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\r\n    color: var(--sideNav);\r\n    font-size: 14px;\r\n    line-height: 16px;\r\n    height: auto;\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n\r\n}\r\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\r\n    font-size: 18px;\r\n    line-height: 21px;\r\n    color: var(--text-darked);\r\n    font-weight: 600;\r\n}\r\n.breadcrumb-wrap[_ngcontent-%COMP%] {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 0;\r\n}\r\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\r\n    font-size: 16px;\r\n    line-height: 18px;\r\n    font-weight: 400;\r\n    color: var(--black);\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n  width: 100%;\r\n  gap: 24px;\r\n  padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n  padding: 16px;\r\n  min-width: 300px;\r\n  border-radius: 4px;\r\n  background:  #FAFAFA;\r\n  border: none;\r\n}\r\n  .list-view .k-listview-header,   .list-view .k-listview-footer {\r\n  border: none;\r\n}\r\n  .list-view .k-listview-content {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  border-radius: 4px;\r\n  background: #fff;\r\n  padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n  color: #424242;\r\n  font-size: 16px;\r\n  height: auto;\r\n  margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n  color: #424242;\r\n  margin-bottom: 16px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\r\n  width: 24px;\r\n  height: 24px;\r\n  min-width: 24px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 10px;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n  font-size: 14px;\r\n  margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n  color:  #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 30px;\r\n  cursor: pointer;\r\n  margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  padding-bottom: 20px;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n  color: #424242;\r\n  font-size: 28px;\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  line-height: 28px;\r\n  margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n  margin: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\r\n  color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  border-radius: 6px;\r\n  width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\r\n  background: #fff;\r\n  padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\r\n  overflow: auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background: #fafafa;\r\n  padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\r\n  color: #424242;\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  margin-bottom: 0;\r\n  letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n  color: #666;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  height: 48px;\r\n  margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n  padding: 0;\r\n  margin: 0;\r\n  box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  padding-bottom: 20px;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\r\n  color: #424242;\r\n  font-size: 28px;\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  line-height: 28px;\r\n  margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n  margin: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 20px;\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowserListComponent, [{
         type: Component,
-        args: [{ selector: 'app-generic-browser-list', template: "<div  class=\"generic-browser-list-container\">\r\n    <div class=\"card-header-entity\">\r\n        <div *ngIf=\"viewingResource\" class=\"title-wrap\">\r\n            <h1>{{title}}</h1>\r\n        </div>\r\n        <div class=\"add-item\">\r\n          <button kendoButton [disabled]=\"disableAddButton\" (click)=\"addResourceButtonClicked()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-plus\"></span>\r\n              {{addText}}\r\n          </button>\r\n          <button kendoButton (click)=\"createFolder()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n              Create Folder\r\n          </button>\r\n          <button kendoButton (click)=\"backButtonClicked()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n              {{backText}}\r\n          </button>\r\n        </div>\r\n    </div>\r\n    <div class=\"main-area\"> \r\n        <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\r\n        <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\r\n          <div *ngFor=\"let d of items\">\r\n            <kendo-card class=\"card-wrapper\">\r\n              <kendo-card-header class=\"k-hstack view-card\">\r\n                <div class=\"btn-wrapper\">\r\n                  <kendo-button iconClass=\"fa fa-trash\" fillMode=\"flat\" title=\"Delete Item\" (click)=\"deleteItem(d)\"></kendo-button>\r\n                </div>\r\n              </kendo-card-header>\r\n              <kendo-card-body (click)=\"itemClick(d)\">\r\n                <div class=\"view-card-content k-cursor-pointer\">\r\n                  <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n                  <p kendoCardSubtitle>{{ d.Description }}</p>\r\n                </div>\r\n              </kendo-card-body>\r\n            </kendo-card>\r\n          </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".generic-browse-list-container {\r\n    margin: 10px;\r\n}", "\r\n.main-area {\r\n    display: flex;\r\n    height: 100%;\r\n    width: 100%;\r\n    gap: 24px;\r\n    padding: 24px 0;\r\n}\r\n.list-view {\r\n    padding: 16px;\r\n    min-width: 300px;\r\n    border-radius: 4px;\r\n    background:  #FAFAFA;\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n    border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 4px;\r\n    background: #fff;\r\n    padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    height: auto;\r\n    margin:0;\r\n}\r\n\r\n.header {\r\n    color: #424242;\r\n    margin-bottom: 16px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n.header .head-tag {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n    width: 24px;\r\n    height: 24px;\r\n    min-width: 24px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    font-size: 10px;\r\n    background: rgba(0, 0, 0, 0.08);\r\n    border-radius: 50%;\r\n}\r\n.footer {\r\n    font-size: 14px;\r\n    margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n    color:  #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 30px;\r\n    cursor: pointer;\r\n    margin: 4px;\r\n}\r\n.card-container {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-shadow: none;\r\n}\r\n.card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n\r\n \r\n\r\n\r\n   \r\n  .view-card .view-icon {\r\n    color: #ff6358;\r\n  }\r\n  .card-wrapper {\r\n    border: 1px solid rgba(0, 0, 0, 0.08);\r\n    border-radius: 6px;\r\n  }\r\n  .card-wrapper .k-card-body {\r\n    background: #fff;\r\n    padding: 12px 20px;\r\n  }\r\n  .card-wrapper .view-card {\r\n    overflow: auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: #fafafa;\r\n    padding: 4px 15px;\r\n  }\r\n  .view-card .btn-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n  \r\n  .k-card-body .view-card-content h5 {\r\n    color: #424242;\r\n    font-size: 16px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    margin-bottom: 0;\r\n    letter-spacing: 0.18px;\r\n  }\r\n  .k-card-body .view-card-content p {\r\n    color: #666;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n    height: 48px;\r\n    margin-bottom: 0;\r\n  }\r\n  .card-container {\r\n    padding: 0;\r\n    margin: 0;\r\n    box-shadow: none;\r\n  }\r\n  .card-header-entity {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: flex-start;\r\n    padding-bottom: 20px;\r\n    border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n  }\r\n  \r\n  .card-header-entity .title-wrap h1 {\r\n    color: #424242;\r\n    font-size: 28px;\r\n    font-style: normal;\r\n    font-weight: 300;\r\n    line-height: 28px;\r\n    margin-bottom: 15px;\r\n  }\r\n  .card-header-entity .title-wrap {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .card-header-entity .title-wrap p {\r\n    margin: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    color: #424242;\r\n    font-size: 14px;\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    line-height: 20px;\r\n  }\r\n  .main-area .card-list {\r\n    display: flex;\r\n    gap: 20px;\r\n  }\r\n  "] }]
+        args: [{ selector: 'app-generic-browser-list', template: "\r\n<div class=\"generic-browser-list-container\">\r\n  <!-- <div class=\"breadcrumb-wrap\"><span>Home</span> > <span>Dashboards</span></div> -->\r\n  <!-- <div class=\"card-header-entity\">\r\n    <div *ngIf=\"viewingResource\" class=\"title-wrap\">\r\n        <h1>{{title}}</h1>\r\n    </div>\r\n    <div class=\"add-item\">\r\n      <button kendoButton [disabled]=\"disableAddButton\" (click)=\"addResourceButtonClicked()\" [primary]=\"true\">\r\n        <span class=\"k-icon k-font-icon k-i-plus\"></span>\r\n          {{addText}}\r\n      </button>\r\n      <button kendoButton (click)=\"createFolder()\" [primary]=\"true\">\r\n        <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n          Create Folder\r\n      </button>\r\n      <button kendoButton (click)=\"backButtonClicked()\" [primary]=\"true\">\r\n        <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n          {{backText}}\r\n      </button>\r\n    </div>\r\n</div> -->\r\n  <div class=\"card-header-entity\">\r\n    <div class=\"title-wrap\">\r\n      <h1>{{ title }}</h1>\r\n    </div>\r\n    <div class=\"add-item\">\r\n      <button kendoButton (click)=\"addResourceButtonClicked()\" [primary]=\"true\">\r\n        <span class=\"k-icon k-font-icon k-i-plus\"></span>\r\n        <svg\r\n          width=\"22\"\r\n          height=\"22\"\r\n          viewBox=\"0 0 22 22\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M3.14105 19.6753C3.2141 19.6753 3.28715 19.6667 3.36019 19.6452L8.63671 18.1628C8.89882 18.0898 9.13944 17.948 9.3285 17.7546L18.9577 8.12538C19.4218 7.66133 19.6796 7.04687 19.6796 6.39374C19.6796 5.74062 19.4261 5.12616 18.962 4.6621L17.3421 3.04219C16.878 2.57813 16.2636 2.32031 15.6061 2.32031C14.953 2.32031 14.3386 2.57383 13.8745 3.0379L4.24529 12.6715C4.05192 12.8649 3.91442 13.1012 3.83708 13.3633L2.35466 18.6398C2.27302 18.9234 2.35466 19.2285 2.5652 19.439C2.71559 19.5937 2.92615 19.6754 3.14098 19.6754L3.14105 19.6753ZM8.7571 16.2636L5.74072 13.2473L13.0797 5.90825L16.0961 8.92463L8.7571 16.2636ZM15.6063 3.78122C15.8684 3.78122 16.1176 3.88434 16.3066 4.0691L17.9266 5.68902C18.1113 5.87378 18.2144 6.12301 18.2144 6.38941C18.2144 6.65581 18.1113 6.90074 17.9266 7.0898L17.1273 7.88902L14.1109 4.87264L14.9102 4.07341C15.0949 3.88436 15.3441 3.78122 15.6063 3.78122ZM5.01013 14.5878L7.41217 16.9898L4.06927 17.9308L5.01013 14.5878Z\"\r\n            fill=\"#2264DC\"\r\n          />\r\n        </svg>\r\n        {{ addText }}\r\n      </button>\r\n      <!-- <button kendoButton (click)=\"createFolder()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n              Create Folder\r\n          </button> -->\r\n      <!-- <button kendoButton (click)=\"backButtonClicked()\" [primary]=\"true\">\r\n            <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n            <kendo-svgicon icon=\"k-i-chevron-left\" size=\"xlarge\"></kendo-svgicon>\r\n              {{backText}}\r\n          </button> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"main-fav-wrapper\">\r\n    <div class=\"title-wrapper\">\r\n      <h4>Favorites</h4>\r\n      <kendo-dropdownbutton (itemClick)=\"onDropdownItemClick($event)\" [data]=\"data\" themeColor=\"primary\">\r\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M7.86401 1V14.7279\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          <path d=\"M1 7.86401H14.7279\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n          </svg>\r\n            Create New\r\n      </kendo-dropdownbutton>\r\n    </div>\r\n    <div class=\"title-wrapper\">\r\n      <div class=\"search\">\r\n        <input type=\"text\" #searchInput placeholder=\"Search\" (keyup)=\"onKeyup(searchInput.value)\"/>\r\n        <svg\r\n          width=\"20\"\r\n          height=\"20\"\r\n          viewBox=\"0 0 20 20\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            fill-rule=\"evenodd\"\r\n            clip-rule=\"evenodd\"\r\n            d=\"M3.3255 3.32539C0.468025 6.18288 0.468025 10.816 3.3255 13.6735C7.94035 18.2884 15.8169 14.9659 15.8169 8.49936C15.8169 4.45816 12.5406 1.18209 8.49964 1.18209C6.62675 1.18238 4.75424 1.89678 3.3255 3.32558V3.32539ZM14.9133 14.0772L19.82 18.9839C20.3702 19.5341 19.5342 20.3703 18.984 19.8199L14.0773 14.9132C10.7273 17.8324 5.65827 17.6785 2.48951 14.5096C-0.830025 11.1901 -0.829651 5.80856 2.48951 2.48938C5.80868 -0.829795 11.1905 -0.829795 14.5097 2.48938C17.6784 5.65796 17.8324 10.7272 14.9132 14.0772L14.9133 14.0772Z\"\r\n            fill=\"#1B1C1E\"\r\n          />\r\n        </svg>\r\n      </div>\r\n      <div class=\"filter-wrapper\">\r\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\r\n          Sort By Recents\r\n        </kendo-dropdownbutton>\r\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"grid-btn btn-cmn\">\r\n          <svg\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 18 18\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M1 1H17\"\r\n              stroke=\"#4E5050\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n            />\r\n            <path\r\n              d=\"M1 11.6667H17\"\r\n              stroke=\"#4E5050\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n            />\r\n            <path\r\n              d=\"M1 6.33328H17\"\r\n              stroke=\"#4E5050\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n            />\r\n            <path\r\n              d=\"M1 17H17\"\r\n              stroke=\"#4E5050\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"active btn-cmn\">\r\n          <svg\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 18 18\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <rect\r\n              x=\"1\"\r\n              y=\"10.5999\"\r\n              width=\"6.4\"\r\n              height=\"6.4\"\r\n              stroke=\"#2264DC\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <rect\r\n              x=\"1\"\r\n              y=\"1\"\r\n              width=\"6.4\"\r\n              height=\"6.4\"\r\n              stroke=\"#2264DC\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <rect\r\n              x=\"10.6002\"\r\n              y=\"10.5999\"\r\n              width=\"6.4\"\r\n              height=\"6.4\"\r\n              stroke=\"#2264DC\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n            <rect\r\n              x=\"10.6002\"\r\n              y=\"1\"\r\n              width=\"6.4\"\r\n              height=\"6.4\"\r\n              stroke=\"#2264DC\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-area\">\r\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n      <div *ngIf=\"!showLoader\">\r\n        <kendo-grid *ngIf=\"displayAsGrid\" (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\r\n          <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\r\n          <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\r\n          <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\r\n          <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\r\n          <kendo-grid-column title=\"\">\r\n            <ng-template kendoGridCellTemplate let-dataItem>\r\n              <div class=\"grid-wrapper\">\r\n\r\n                <button class=\"list-btn\" (click)=\"SetFavoriteStatus(dataItem)\">\r\n                    <svg\r\n                    width=\"21\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 21 20\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_141_7562)\">\r\n                      <path\r\n                        d=\"M10.574 2.68001L12.5291 6.57001H12.5291C12.8449 7.19788 13.4512 7.63094 14.1503 7.72801L18.481 8.32801L15.3633 11.382C14.8618 11.875 14.6361 12.5816 14.7598 13.272L15.5201 17.554L11.64 15.554V15.5539C11.0154 15.2275 10.2692 15.2275 9.64464 15.5539L5.77256 17.5999L6.49667 13.3119C6.61263 12.6199 6.37874 11.9153 5.8711 11.4279L2.72516 8.39994L7.04982 7.75391C7.74789 7.64981 8.34969 7.21074 8.659 6.57994L10.5739 2.67994M10.5739 0.437943C10.4356 0.437032 10.3 0.475313 10.1828 0.548295C10.0655 0.621212 9.97172 0.725828 9.91213 0.849928L7.39377 5.97593C7.28665 6.19156 7.07993 6.34103 6.84061 6.37593L1.17028 7.22593C0.988324 7.25314 0.823183 7.34715 0.70749 7.48935C0.591726 7.6316 0.533782 7.81175 0.544975 7.99436C0.556171 8.17698 0.635727 8.34879 0.767996 8.47594L4.89352 12.4359H4.89346C5.06829 12.6035 5.14881 12.8458 5.10868 13.0839L4.16333 18.7059C4.13209 18.8867 4.17053 19.0726 4.27084 19.2265C4.37122 19.3805 4.5262 19.4911 4.7049 19.5366C4.88365 19.5821 5.07308 19.559 5.23546 19.4719L10.3003 16.7999C10.515 16.6876 10.7716 16.6876 10.9862 16.7999L16.0732 19.4199C16.2364 19.5052 16.4259 19.5263 16.604 19.4791C16.7821 19.4319 16.9358 19.3198 17.0346 19.165C17.1334 19.0104 17.1701 18.8243 17.1373 18.6439L16.1316 13.0299C16.0872 12.7935 16.1623 12.5506 16.3327 12.3799L20.418 8.37995C20.549 8.2515 20.6269 8.07891 20.6363 7.89623C20.6457 7.71354 20.5859 7.534 20.4689 7.39291C20.3518 7.25183 20.1858 7.15944 20.0037 7.13393L14.3253 6.33393C14.0845 6.30027 13.876 6.15059 13.7681 5.93393L11.2256 0.843928C11.1646 0.722705 11.0706 0.620945 10.9543 0.550245C10.8381 0.479542 10.7042 0.442693 10.5678 0.44393L10.5739 0.437943Z\"\r\n                        fill=\"#4E5050\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_141_7562\">\r\n                        <rect\r\n                          width=\"20.1147\"\r\n                          height=\"20\"\r\n                          fill=\"white\"\r\n                          transform=\"translate(0.54277)\"\r\n                        />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                  </button>\r\n                  <button class=\"list-btn\" (click)=\"itemClick(dataItem)\">\r\n                    <svg\r\n                    width=\"19\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 19 19\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M7.06452 4H2.80661C1.70204 4 0.80661 4.89543 0.80661 6V16C0.80661 17.1046 1.70204 18 2.80661 18H12.8869C13.9915 18 14.8869 17.1046 14.8869 16V11.8889\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.8271 1H17.8673V8\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M5.88773 13L16.9508 2\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  </svg>\r\n                  </button>\r\n                  <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\r\n                    <svg\r\n                      width=\"23\"\r\n                      height=\"22\"\r\n                      viewBox=\"0 0 23 22\"\r\n                      fill=\"none\"\r\n                      xmlns=\"http://www.w3.org/2000/svg\"\r\n                    >\r\n                      <path\r\n                        d=\"M3.20082 19.6753C3.27429 19.6753 3.34776 19.6667 3.42122 19.6453L8.728 18.1628C8.99161 18.0898 9.23362 17.948 9.42376 17.7546L19.1082 8.12541C19.5749 7.66136 19.8342 7.0469 19.8342 6.39377C19.8342 5.74065 19.5792 5.12619 19.1125 4.66213L17.4833 3.04222C17.0166 2.57816 16.3986 2.32034 15.7374 2.32034C15.0805 2.32034 14.4626 2.57386 13.9958 3.03793L4.31139 12.6715C4.11692 12.8649 3.97863 13.1012 3.90084 13.3633L2.40992 18.6399C2.32782 18.9235 2.40992 19.2285 2.62167 19.4391C2.77292 19.5938 2.98469 19.6754 3.20075 19.6754L3.20082 19.6753ZM8.84908 16.2637L5.8154 13.2473L13.1965 5.90828L16.2302 8.92466L8.84908 16.2637ZM15.7375 3.78125C16.0011 3.78125 16.2518 3.88437 16.4419 4.06913L18.0711 5.68905C18.257 5.87381 18.3607 6.12304 18.3607 6.38944C18.3607 6.65584 18.257 6.90077 18.0711 7.08983L17.2673 7.88905L14.2336 4.87267L15.0374 4.07344C15.2233 3.88439 15.4739 3.78125 15.7375 3.78125ZM5.08063 14.5878L7.49644 16.9899L4.13436 17.9309L5.08063 14.5878Z\"\r\n                        fill=\"#4E5050\"\r\n                      />\r\n                    </svg>\r\n                  </button>\r\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\r\n                    <svg\r\n                    width=\"23\"\r\n                    height=\"22\"\r\n                    viewBox=\"0 0 23 22\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M18.2716 4.125H16.1973V3.4375C16.1973 2.89051 15.9788 2.36586 15.5898 1.97906C15.2007 1.59227 14.6731 1.375 14.123 1.375H8.59142C8.04129 1.375 7.51363 1.59229 7.12462 1.97906C6.7356 2.36586 6.51709 2.89051 6.51709 3.4375V4.125H4.44276C4.076 4.125 3.72423 4.26988 3.46495 4.52776C3.20559 4.78557 3.05988 5.13535 3.05988 5.5V6.875C3.05988 7.23967 3.20558 7.58943 3.46495 7.84723C3.72423 8.10511 4.07602 8.25 4.44276 8.25V18.5625C4.44276 19.1095 4.66129 19.6341 5.05029 20.0209C5.43931 20.4077 5.96696 20.625 6.51709 20.625H16.1973C16.7474 20.625 17.2751 20.4077 17.6641 20.0209C18.0531 19.6341 18.2716 19.1095 18.2716 18.5625V8.25C18.6384 8.25 18.9901 8.10512 19.2494 7.84723C19.5088 7.58943 19.6545 7.23965 19.6545 6.875V5.5C19.6545 5.13533 19.5088 4.78557 19.2494 4.52776C18.9901 4.26989 18.6384 4.125 18.2716 4.125ZM7.89998 3.4375C7.89998 3.25517 7.97279 3.08029 8.1025 2.95137C8.23215 2.82239 8.40803 2.75 8.59142 2.75H14.123C14.3063 2.75 14.4822 2.8224 14.6119 2.95137C14.7416 3.08028 14.8144 3.25516 14.8144 3.4375V4.125H7.89998V3.4375ZM16.8887 18.5625C16.8887 18.7448 16.8159 18.9197 16.6862 19.0486C16.5566 19.1776 16.3807 19.25 16.1973 19.25H6.51709C6.33371 19.25 6.15784 19.1776 6.02818 19.0486C5.89846 18.9197 5.82565 18.7448 5.82565 18.5625V8.25H16.8887V18.5625ZM18.2716 6.875H4.44276V5.5H18.2716V6.875ZM8.59142 17.1875V10.3125C8.59142 10.0669 8.72322 9.83992 8.93714 9.71709C9.15106 9.59427 9.41466 9.59427 9.62858 9.71709C9.84251 9.83991 9.97431 10.0669 9.97431 10.3125V17.1875C9.97431 17.4331 9.8425 17.6601 9.62858 17.7829C9.41466 17.9057 9.15106 17.9057 8.93714 17.7829C8.72322 17.6601 8.59142 17.4331 8.59142 17.1875ZM12.7401 17.1875V10.3125C12.7401 10.0669 12.8719 9.83992 13.0858 9.71709C13.2997 9.59427 13.5633 9.59427 13.7772 9.71709C13.9912 9.83991 14.123 10.0669 14.123 10.3125V17.1875C14.123 17.4331 13.9912 17.6601 13.7772 17.7829C13.5633 17.9057 13.2997 17.9057 13.0858 17.7829C12.8719 17.6601 12.7401 17.4331 12.7401 17.1875Z\"\r\n                      fill=\"#4E5050\"\r\n                    />\r\n                  </svg>\r\n                  </button>\r\n              </div>\r\n            </ng-template>\r\n          </kendo-grid-column>\r\n        </kendo-grid>\r\n        <div *ngIf=\"!displayAsGrid\" class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\r\n          <div *ngFor=\"let d of items\">\r\n            <kendo-card class=\"card-wrapper\">\r\n              <!-- <kendo-card-header class=\"k-hstack view-card\">\r\n                <button kendoButton (click)=\"createFolder()\" [primary]=\"true\">\r\n                  <span class=\"k-icon k-font-icon k-i-chevron-left\"></span>\r\n                  Create Folder\r\n                </button>\r\n                <div class=\"btn-wrapper\">\r\n                  <kendo-button\r\n                    iconClass=\"fa fa-trash\"\r\n                    fillMode=\"flat\"\r\n                    title=\"Delete Item\"\r\n                    (click)=\"deleteItem(d)\"\r\n                  ></kendo-button>\r\n                </div>\r\n              </kendo-card-header> -->\r\n              <div class=\"list-item-icon\">\r\n                <button (click)=\"SetFavoriteStatus(d)\" class=\"common-btn\">\r\n                  <svg\r\n                    width=\"21\"\r\n                    height=\"20\"\r\n                    viewBox=\"0 0 21 20\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_141_7562)\">\r\n                      <path\r\n                        d=\"M10.574 2.68001L12.5291 6.57001H12.5291C12.8449 7.19788 13.4512 7.63094 14.1503 7.72801L18.481 8.32801L15.3633 11.382C14.8618 11.875 14.6361 12.5816 14.7598 13.272L15.5201 17.554L11.64 15.554V15.5539C11.0154 15.2275 10.2692 15.2275 9.64464 15.5539L5.77256 17.5999L6.49667 13.3119C6.61263 12.6199 6.37874 11.9153 5.8711 11.4279L2.72516 8.39994L7.04982 7.75391C7.74789 7.64981 8.34969 7.21074 8.659 6.57994L10.5739 2.67994M10.5739 0.437943C10.4356 0.437032 10.3 0.475313 10.1828 0.548295C10.0655 0.621212 9.97172 0.725828 9.91213 0.849928L7.39377 5.97593C7.28665 6.19156 7.07993 6.34103 6.84061 6.37593L1.17028 7.22593C0.988324 7.25314 0.823183 7.34715 0.70749 7.48935C0.591726 7.6316 0.533782 7.81175 0.544975 7.99436C0.556171 8.17698 0.635727 8.34879 0.767996 8.47594L4.89352 12.4359H4.89346C5.06829 12.6035 5.14881 12.8458 5.10868 13.0839L4.16333 18.7059C4.13209 18.8867 4.17053 19.0726 4.27084 19.2265C4.37122 19.3805 4.5262 19.4911 4.7049 19.5366C4.88365 19.5821 5.07308 19.559 5.23546 19.4719L10.3003 16.7999C10.515 16.6876 10.7716 16.6876 10.9862 16.7999L16.0732 19.4199C16.2364 19.5052 16.4259 19.5263 16.604 19.4791C16.7821 19.4319 16.9358 19.3198 17.0346 19.165C17.1334 19.0104 17.1701 18.8243 17.1373 18.6439L16.1316 13.0299C16.0872 12.7935 16.1623 12.5506 16.3327 12.3799L20.418 8.37995C20.549 8.2515 20.6269 8.07891 20.6363 7.89623C20.6457 7.71354 20.5859 7.534 20.4689 7.39291C20.3518 7.25183 20.1858 7.15944 20.0037 7.13393L14.3253 6.33393C14.0845 6.30027 13.876 6.15059 13.7681 5.93393L11.2256 0.843928C11.1646 0.722705 11.0706 0.620945 10.9543 0.550245C10.8381 0.479542 10.7042 0.442693 10.5678 0.44393L10.5739 0.437943Z\"\r\n                        fill=\"#4E5050\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_141_7562\">\r\n                        <rect\r\n                          width=\"20.1147\"\r\n                          height=\"20\"\r\n                          fill=\"white\"\r\n                          transform=\"translate(0.54277)\"\r\n                        />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </button>\r\n                <button (click)=\"itemClick(d)\" class=\"common-btn\">\r\n                  <svg\r\n                    width=\"19\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 19 19\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M7.06452 4H2.80661C1.70204 4 0.80661 4.89543 0.80661 6V16C0.80661 17.1046 1.70204 18 2.80661 18H12.8869C13.9915 18 14.8869 17.1046 14.8869 16V11.8889\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M10.8271 1H17.8673V8\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\"\r\n                    />\r\n                    <path\r\n                      d=\"M5.88773 13L16.9508 2\"\r\n                      stroke=\"#4E5050\"\r\n                      stroke-width=\"1.5\"\r\n                      stroke-linecap=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n                <button (click)=\"editItem(d)\" class=\"common-btn\">\r\n                  <svg\r\n                    width=\"23\"\r\n                    height=\"22\"\r\n                    viewBox=\"0 0 23 22\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M3.20082 19.6753C3.27429 19.6753 3.34776 19.6667 3.42122 19.6453L8.728 18.1628C8.99161 18.0898 9.23362 17.948 9.42376 17.7546L19.1082 8.12541C19.5749 7.66136 19.8342 7.0469 19.8342 6.39377C19.8342 5.74065 19.5792 5.12619 19.1125 4.66213L17.4833 3.04222C17.0166 2.57816 16.3986 2.32034 15.7374 2.32034C15.0805 2.32034 14.4626 2.57386 13.9958 3.03793L4.31139 12.6715C4.11692 12.8649 3.97863 13.1012 3.90084 13.3633L2.40992 18.6399C2.32782 18.9235 2.40992 19.2285 2.62167 19.4391C2.77292 19.5938 2.98469 19.6754 3.20075 19.6754L3.20082 19.6753ZM8.84908 16.2637L5.8154 13.2473L13.1965 5.90828L16.2302 8.92466L8.84908 16.2637ZM15.7375 3.78125C16.0011 3.78125 16.2518 3.88437 16.4419 4.06913L18.0711 5.68905C18.257 5.87381 18.3607 6.12304 18.3607 6.38944C18.3607 6.65584 18.257 6.90077 18.0711 7.08983L17.2673 7.88905L14.2336 4.87267L15.0374 4.07344C15.2233 3.88439 15.4739 3.78125 15.7375 3.78125ZM5.08063 14.5878L7.49644 16.9899L4.13436 17.9309L5.08063 14.5878Z\"\r\n                      fill=\"#4E5050\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n                <button (click)=\"deleteItem(d)\" class=\"common-btn\">\r\n                  <svg\r\n                    width=\"23\"\r\n                    height=\"22\"\r\n                    viewBox=\"0 0 23 22\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path\r\n                      d=\"M18.2716 4.125H16.1973V3.4375C16.1973 2.89051 15.9788 2.36586 15.5898 1.97906C15.2007 1.59227 14.6731 1.375 14.123 1.375H8.59142C8.04129 1.375 7.51363 1.59229 7.12462 1.97906C6.7356 2.36586 6.51709 2.89051 6.51709 3.4375V4.125H4.44276C4.076 4.125 3.72423 4.26988 3.46495 4.52776C3.20559 4.78557 3.05988 5.13535 3.05988 5.5V6.875C3.05988 7.23967 3.20558 7.58943 3.46495 7.84723C3.72423 8.10511 4.07602 8.25 4.44276 8.25V18.5625C4.44276 19.1095 4.66129 19.6341 5.05029 20.0209C5.43931 20.4077 5.96696 20.625 6.51709 20.625H16.1973C16.7474 20.625 17.2751 20.4077 17.6641 20.0209C18.0531 19.6341 18.2716 19.1095 18.2716 18.5625V8.25C18.6384 8.25 18.9901 8.10512 19.2494 7.84723C19.5088 7.58943 19.6545 7.23965 19.6545 6.875V5.5C19.6545 5.13533 19.5088 4.78557 19.2494 4.52776C18.9901 4.26989 18.6384 4.125 18.2716 4.125ZM7.89998 3.4375C7.89998 3.25517 7.97279 3.08029 8.1025 2.95137C8.23215 2.82239 8.40803 2.75 8.59142 2.75H14.123C14.3063 2.75 14.4822 2.8224 14.6119 2.95137C14.7416 3.08028 14.8144 3.25516 14.8144 3.4375V4.125H7.89998V3.4375ZM16.8887 18.5625C16.8887 18.7448 16.8159 18.9197 16.6862 19.0486C16.5566 19.1776 16.3807 19.25 16.1973 19.25H6.51709C6.33371 19.25 6.15784 19.1776 6.02818 19.0486C5.89846 18.9197 5.82565 18.7448 5.82565 18.5625V8.25H16.8887V18.5625ZM18.2716 6.875H4.44276V5.5H18.2716V6.875ZM8.59142 17.1875V10.3125C8.59142 10.0669 8.72322 9.83992 8.93714 9.71709C9.15106 9.59427 9.41466 9.59427 9.62858 9.71709C9.84251 9.83991 9.97431 10.0669 9.97431 10.3125V17.1875C9.97431 17.4331 9.8425 17.6601 9.62858 17.7829C9.41466 17.9057 9.15106 17.9057 8.93714 17.7829C8.72322 17.6601 8.59142 17.4331 8.59142 17.1875ZM12.7401 17.1875V10.3125C12.7401 10.0669 12.8719 9.83992 13.0858 9.71709C13.2997 9.59427 13.5633 9.59427 13.7772 9.71709C13.9912 9.83991 14.123 10.0669 14.123 10.3125V17.1875C14.123 17.4331 13.9912 17.6601 13.7772 17.7829C13.5633 17.9057 13.2997 17.9057 13.0858 17.7829C12.8719 17.6601 12.7401 17.4331 12.7401 17.1875Z\"\r\n                      fill=\"#4E5050\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              </div>\r\n              <kendo-card-body (click)=\"itemClick(d)\">\r\n                <div class=\"view-card-content-list k-cursor-pointer\">\r\n                  <svg width=\"46\" height=\"46\" viewBox=\"0 0 46 46\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M15.3333 34.0208C16.9854 34.0208 18.5698 33.3645 19.7382 32.1964C20.9063 31.0281 21.5627 29.4437 21.5627 27.7915C21.5627 26.1393 20.9063 24.555 19.7382 23.3866C18.5699 22.2185 16.9855 21.5622 15.3333 21.5622C13.6811 21.5622 12.0968 22.2185 10.9285 23.3866C9.76032 24.5549 9.10401 26.1393 9.10401 27.7915C9.1091 29.4421 9.76691 31.0235 10.9341 32.1906C12.1012 33.3579 13.6826 34.0157 15.3333 34.0208L15.3333 34.0208ZM15.3333 24.4375C16.2229 24.4375 17.076 24.7909 17.7051 25.4199C18.3341 26.049 18.6875 26.9021 18.6875 27.7917C18.6875 28.6813 18.3341 29.5343 17.7051 30.1634C17.076 30.7924 16.2229 31.1458 15.3333 31.1458C14.4437 31.1458 13.5907 30.7924 12.9616 30.1634C12.3326 29.5343 11.9792 28.6813 11.9792 27.7917C11.9843 26.9037 12.3391 26.0533 12.9671 25.4255C13.595 24.7975 14.4453 24.4426 15.3333 24.4375ZM33.8292 32.5833V26.8333C33.8292 26.3197 34.1032 25.8452 34.5479 25.5884C34.9927 25.3316 35.5407 25.3316 35.9854 25.5884C36.4302 25.8452 36.7042 26.3197 36.7042 26.8333V32.5833C36.7042 33.0969 36.4301 33.5715 35.9854 33.8283C35.5407 34.0851 34.9927 34.0851 34.5479 33.8283C34.1032 33.5715 33.8292 33.097 33.8292 32.5833ZM29.2292 32.5833V23C29.2292 22.4864 29.5032 22.0119 29.9479 21.755C30.3927 21.4982 30.9407 21.4982 31.3854 21.755C31.8302 22.0119 32.1042 22.4864 32.1042 23V32.5833C32.1042 33.0969 31.8301 33.5715 31.3854 33.8283C30.9407 34.0851 30.3927 34.0851 29.9479 33.8283C29.5032 33.5715 29.2292 33.097 29.2292 32.5833ZM24.4375 32.5833V28.75C24.4375 28.2364 24.7115 27.7619 25.1562 27.505C25.601 27.2482 26.149 27.2482 26.5938 27.505C27.0385 27.7619 27.3125 28.2364 27.3125 28.75V32.5833C27.3125 33.0969 27.0385 33.5715 26.5938 33.8283C26.149 34.0851 25.601 34.0851 25.1562 33.8283C24.7115 33.5715 24.4375 33.097 24.4375 32.5833ZM37.375 4.3125H8.625C7.48129 4.3125 6.3843 4.76683 5.57555 5.57555C4.76679 6.3843 4.3125 7.48129 4.3125 8.625V37.375C4.3125 38.5187 4.76683 39.6157 5.57555 40.4245C6.3843 41.2332 7.48129 41.6875 8.625 41.6875H37.375C38.5187 41.6875 39.6157 41.2332 40.4245 40.4245C41.2332 39.6157 41.6875 38.5187 41.6875 37.375V8.625C41.6875 7.48129 41.2332 6.3843 40.4245 5.57555C39.6157 4.76679 38.5187 4.3125 37.375 4.3125ZM38.8125 37.375C38.8076 37.7547 38.6545 38.1174 38.386 38.386C38.1174 38.6545 37.7547 38.8076 37.375 38.8125H8.625C8.24526 38.8076 7.8826 38.6545 7.61396 38.386C7.34548 38.1174 7.19245 37.7547 7.1875 37.375V16.7708H38.8125V37.375ZM38.8125 13.8958H7.1875V8.625C7.19244 8.24526 7.34548 7.8826 7.61396 7.61396C7.88259 7.34548 8.24527 7.19245 8.625 7.1875H37.375C37.7547 7.19244 38.1174 7.34548 38.386 7.61396C38.6545 7.88259 38.8076 8.24527 38.8125 8.625V13.8958ZM19.6458 10.5417C19.6409 10.9214 19.4879 11.2841 19.2194 11.5527C18.9507 11.8212 18.5881 11.9742 18.2083 11.9792H16.2917C15.7781 11.9792 15.3035 11.7051 15.0467 11.2604C14.7899 10.8157 14.7899 10.2677 15.0467 9.82292C15.3035 9.37817 15.778 9.10417 16.2917 9.10417H18.2083C18.5881 9.10911 18.9507 9.26214 19.2194 9.53062C19.4879 9.79926 19.6409 10.1619 19.6458 10.5417ZM13.8958 10.5417C13.8909 10.9214 13.7379 11.2841 13.4694 11.5527C13.2007 11.8212 12.8381 11.9742 12.4583 11.9792H10.5417C10.0281 11.9792 9.55355 11.7051 9.29671 11.2604C9.03991 10.8157 9.03991 10.2677 9.29671 9.82292C9.55352 9.37817 10.028 9.10417 10.5417 9.10417H12.4583C12.8381 9.10911 13.2007 9.26214 13.4694 9.53062C13.7379 9.79926 13.8909 10.1619 13.8958 10.5417Z\" fill=\"#4E5050\"/>\r\n                    </svg>\r\n                    \r\n                  <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n                  <p kendoCardSubtitle>{{ d.Description }}</p>\r\n                </div>\r\n              </kendo-card-body>\r\n            </kendo-card>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <kendo-dialog title=\"Confirm\" *ngIf=\"deleteDialogOpened\" (close)=\"onConfirmDeleteItem(false)\">\r\n    <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n    <div [class]=\"showLoader ? 'disabled-div' : ''\">\r\n      <p class=\"k-m-7.5 k-text-center\">\r\n        Are you sure you want to delete <b>{{selectedItem?.Name}}</b>\r\n      </p>\r\n      <div class=\"k-actions k-actions-end popup-actions\">\r\n        <button kendoButton (click)=\"onConfirmDeleteItem(true)\" themeColor=\"primary\">\r\n          <span class=\"k-icon k-i-check\"></span> Yes\r\n        </button>\r\n        <button kendoButton (click)=\"onConfirmDeleteItem(false)\"><span class=\"k-icon k-i-close\"></span> No</button>\r\n      </div>\r\n    </div>\r\n  </kendo-dialog>\r\n  <kendo-dialog \r\n    [minWidth]=\"450\"\r\n    [width]=\"600\"\r\n    [title]=\"getCopyFromTitle()\" \r\n    *ngIf=\"copyFromDialogOpened\" \r\n    (close)=\"toggleCopyFromView()\"\r\n  >\r\n  <div class=\"search\">\r\n    <input type=\"text\" placeholder=\"Search\" (keyup)=\"onKeyup(searchInput.value)\"/>\r\n  </div>\r\n    <kendo-dialog-actions>\r\n      <button kendoButton>\r\n        Cancel\r\n      </button>\r\n      <button kendoButton themeColor=\"primary\">\r\n        Create new {{resourceName}}\r\n      </button>\r\n    </kendo-dialog-actions>\r\n  </kendo-dialog>\r\n  <kendo-dialog \r\n    title=\"Create new Folder\" \r\n    *ngIf=\"createFolderDialogOpened\" \r\n    (close)=\"toggleCreateFolderView()\"\r\n  >\r\n  <div class=\"search\">\r\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\r\n  </div>\r\n    <kendo-dialog-actions>\r\n      <button (click)=\"toggleCreateFolderView()\" kendoButton>\r\n        Cancel\r\n      </button>\r\n      <button (click)=\"createFolder()\" kendoButton themeColor=\"primary\">\r\n        Create\r\n      </button>\r\n    </kendo-dialog-actions>\r\n  </kendo-dialog>\r\n</div>\r\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\r\n    margin: 0 !important;\r\n    font-size: 36px !important;\r\n    line-height: 42px !important;\r\n    color: var(--black) !important;\r\n}\r\n ::ng-deep .card-header-entity .add-item .k-button {\r\n    border: 1px solid var(--border-blue) !important;\r\n    background: var(--white-color) !important;\r\n    color: var(--border-blue);\r\n    font-weight: 500 ;\r\n    font-size: 16px ;\r\n    border-radius: 10px;\r\n    line-height: 34px;\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover {\r\n    background: var(--border-blue) !important;\r\n    color: var(--white-color);\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\r\n    fill: var(--white-color) !important;\r\n}\r\n .title-wrapper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 14px 0;\r\n    border-bottom: 1px solid var(--med-gray);\r\n}\r\n .title-wrapper h4 {\r\n    margin: 0;\r\n    font-size: 24px;\r\n    line-height: 28px;\r\n }\r\n .main-fav-wrapper {\r\n    background: #fff;\r\n    padding: 20px;\r\n }\r\n .filter-wrapper {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    gap: 14px;\r\n    align-items: center;\r\n}\r\n .title-wrapper .search  input {\r\n    width: 100%;\r\n    height: 100%;\r\n    font-size: 16px;\r\n    background: transparent;\r\n    border: none;\r\n    box-sizing: border-box;\r\n    padding-left: 40px;\r\n\r\n }\r\n    .title-wrapper .search  {\r\n    background: var(--light-shade);\r\n    width: 360px;\r\n    height: 44px;\r\n    position: relative;\r\n    border-radius: 10px;\r\n }\r\n .title-wrapper .search svg {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    left: 12px;\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\r\n    background: var(--border-blue);\r\n    color: var(--white-color);\r\n    font-size: 16px;\r\n    border: none;\r\n    padding: 8px 25px;\r\n    border-radius: 10px;\r\n}\r\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 {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n.btn-cmn {\r\n    width: 44px;\r\n    height: 44px;\r\n    min-width: 44px;\r\n    background: transparent;\r\n    border-radius: 8px;\r\n    border: 1px solid var(--gray-color);\r\n}\r\n.btn-cmn.active {\r\n    border: 1px solid var(--border-blue);\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\r\n    border: 1px solid var(--gray-color);\r\n    border-radius: 8px;   padding: 10px 25px;\r\n    background: var(--white-color);\r\n    color: var(--sideNav);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\r\n    padding: 16px !important;\r\n    position: relative;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    top:12px;\r\n    right: 12px;\r\n    z-index: 9;\r\n}\r\n.grid-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\r\n    width: 38px;\r\n    height: 38px;\r\n    background: #000;\r\n    min-width: 38px;\r\n    border: 1px solid var(--gray-color);\r\n    border-radius: 8px; \r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    background: transparent;\r\n    cursor: pointer;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\r\n    border: 1px solid var(--border-active);\r\n}\r\n\r\n\r\n::ng-deep .main-area .card-list .card-wrapper:hover {\r\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n    border: 1px solid var(--border-active);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\r\n    color: var(--border-blue);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\r\n    color: var(--sideNav);\r\n    font-size: 14px;\r\n    line-height: 16px;\r\n    height: auto;\r\n    text-overflow: ellipsis;\r\n    overflow: hidden;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\r\n    font-size: 18px;\r\n    line-height: 21px;\r\n    color: var(--text-darked);\r\n    font-weight: 600;\r\n}\r\n.breadcrumb-wrap {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 0;\r\n}\r\n.breadcrumb-wrap span {\r\n    font-size: 16px;\r\n    line-height: 18px;\r\n    font-weight: 400;\r\n    color: var(--black);\r\n}", "\r\n.main-area {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n  width: 100%;\r\n  gap: 24px;\r\n  padding: 24px 0;\r\n}\r\n.list-view {\r\n  padding: 16px;\r\n  min-width: 300px;\r\n  border-radius: 4px;\r\n  background:  #FAFAFA;\r\n  border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n  border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  border-radius: 4px;\r\n  background: #fff;\r\n  padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n  color: #424242;\r\n  font-size: 16px;\r\n  height: auto;\r\n  margin:0;\r\n}\r\n\r\n.header {\r\n  color: #424242;\r\n  margin-bottom: 16px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n.header .head-tag {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color:  #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n  width: 24px;\r\n  height: 24px;\r\n  min-width: 24px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  font-size: 10px;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  border-radius: 50%;\r\n}\r\n.footer {\r\n  font-size: 14px;\r\n  margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n  color:  #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 30px;\r\n  cursor: pointer;\r\n  margin: 4px;\r\n}\r\n.card-container {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-shadow: none;\r\n}\r\n.card-header-entity {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  padding-bottom: 20px;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n  color: #424242;\r\n  font-size: 28px;\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  line-height: 28px;\r\n  margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n  margin: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n  color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n  border: 1px solid rgba(0, 0, 0, 0.08);\r\n  border-radius: 6px;\r\n  width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n  background: #fff;\r\n  padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n  overflow: auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background: #fafafa;\r\n  padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n  color: #424242;\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  margin-bottom: 0;\r\n  letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n  color: #666;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  height: 48px;\r\n  margin-bottom: 0;\r\n}\r\n.card-container {\r\n  padding: 0;\r\n  margin: 0;\r\n  box-shadow: none;\r\n}\r\n.card-header-entity {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n  padding-bottom: 20px;\r\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n  color: #424242;\r\n  font-size: 28px;\r\n  font-style: normal;\r\n  font-weight: 300;\r\n  line-height: 28px;\r\n  margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n  margin: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #424242;\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 20px;\r\n}\r\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.Router }], { showLoader: [{
             type: Input
         }], itemType: [{
@@ -361,6 +694,10 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Input
         }], categoryEntityID: [{
             type: Input
+        }], displayAsGrid: [{
+            type: Input
+        }], resourceName: [{
+            type: Input
         }], viewingResource: [{
             type: Input
         }], displayItemsAsList: [{
@@ -393,5 +730,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: Output
         }], backButtonClickEvent: [{
             type: Output
+        }], viewModeChangeEvent: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent", filePath: "src\\lib\\generic-browser-list\\generic-browser-list.component.ts", lineNumber: 13 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenericBrowserListComponent, { className: "GenericBrowserListComponent", filePath: "src\\lib\\generic-browser-list\\generic-browser-list.component.ts", lineNumber: 15 }); })();