@memberjunction/ng-explorer-core 2.48.0 → 2.49.0

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { SharedService } from '@memberjunction/ng-shared';
 import { Folder, Item, ItemType } from '../../generic/Item.types';
@@ -191,89 +182,88 @@ function GenericBrowserListComponent_kendo_dialog_24_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("minWidth", 250)("width", 450);
 } }
 export class GenericBrowserListComponent {
+    sharedService;
+    entityFormDialogRef;
+    showLoader = true;
+    itemType = '';
+    title = '';
+    items = [];
+    iconName = 'view';
+    disableEditButton = false;
+    addText = 'Create New';
+    backText = 'Go Back';
+    ItemEntityName = '';
+    CategoryEntityName = '';
+    selectedFolderID = null;
+    showNotifications = true;
+    categoryEntityID = null;
+    displayAsGrid = false;
+    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
+     * showing the name of the resouce as a header
+     */
+    viewingResource = false;
+    /**
+     * Indicates if the items should be displayed as a list
+     * or as a grid of icons
+     */
+    displayItemsAsList = false;
+    extraDropdownOptions = [];
+    //Before Evewnts
+    BeforeAddFolderEvent = new EventEmitter();
+    BeforeAddItemEvent = new EventEmitter();
+    BeforeDeleteFolderEvent = new EventEmitter();
+    BeforeDeleteItemEvent = new EventEmitter();
+    BeforeUnlinkItemEvent = new EventEmitter();
+    BeforeUpdateFolderEvent = new EventEmitter();
+    BeforeUpdateItemEvent = new EventEmitter();
+    //After Events
+    AfterAddFolderEvent = new EventEmitter();
+    AfterAddItemEvent = new EventEmitter();
+    AfterDeleteFolderEvent = new EventEmitter();
+    AfterDeleteItemEvent = new EventEmitter();
+    AfterUnlinkItemEvent = new EventEmitter();
+    AfterUpdateFolderEvent = new EventEmitter();
+    AfterUpdateItemEvent = new EventEmitter();
+    NavigateToParentEvent = new EventEmitter();
+    itemClickEvent = new EventEmitter();
+    backButtonClickEvent = new EventEmitter();
+    dropdownOptionClickEvent = new EventEmitter();
+    viewModeChangeEvent = new EventEmitter();
+    _resizeDebounceTime = 250;
+    _resizeEndDebounceTime = 500;
+    filterItemsSubject = new Subject();
+    filter = '';
+    sourceItems = null;
+    selectedItem = null;
+    deleteDialogOpened = false;
+    copyFromDialogOpened = false;
+    createFolderDialogOpened = false;
+    newFolderText = "Sample Folder";
+    resourceTypes = [];
+    createNewRecordName = "Record";
+    entityObjectName = "";
+    /**
+     * Options for the create button dropdown
+     */
+    dropdownOptions = [
+        { text: "Folder" }
+    ];
     constructor(sharedService) {
         this.sharedService = sharedService;
-        this.showLoader = true;
-        this.itemType = '';
-        this.title = '';
-        this.items = [];
-        this.iconName = 'view';
-        this.disableEditButton = false;
-        this.addText = 'Create New';
-        this.backText = 'Go Back';
-        this.ItemEntityName = '';
-        this.CategoryEntityName = '';
-        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
-         * showing the name of the resouce as a header
-         */
-        this.viewingResource = false;
-        /**
-         * Indicates if the items should be displayed as a list
-         * or as a grid of icons
-         */
-        this.displayItemsAsList = false;
-        this.extraDropdownOptions = [];
-        //Before Evewnts
-        this.BeforeAddFolderEvent = new EventEmitter();
-        this.BeforeAddItemEvent = new EventEmitter();
-        this.BeforeDeleteFolderEvent = new EventEmitter();
-        this.BeforeDeleteItemEvent = new EventEmitter();
-        this.BeforeUnlinkItemEvent = new EventEmitter();
-        this.BeforeUpdateFolderEvent = new EventEmitter();
-        this.BeforeUpdateItemEvent = new EventEmitter();
-        //After Events
-        this.AfterAddFolderEvent = new EventEmitter();
-        this.AfterAddItemEvent = new EventEmitter();
-        this.AfterDeleteFolderEvent = new EventEmitter();
-        this.AfterDeleteItemEvent = new EventEmitter();
-        this.AfterUnlinkItemEvent = new EventEmitter();
-        this.AfterUpdateFolderEvent = new EventEmitter();
-        this.AfterUpdateItemEvent = new EventEmitter();
-        this.NavigateToParentEvent = new EventEmitter();
-        this.itemClickEvent = new EventEmitter();
-        this.backButtonClickEvent = new EventEmitter();
-        this.dropdownOptionClickEvent = 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.resourceTypes = [];
-        this.createNewRecordName = "Record";
-        this.entityObjectName = "";
-        /**
-         * Options for the create button dropdown
-         */
-        this.dropdownOptions = [
-            { text: "Folder" }
-        ];
-        this._currentDeleteOrUnlinkState = false;
         this.filterItemsSubject
             .pipe(debounceTime(this._resizeDebounceTime))
             .subscribe(() => this.filterItems(this.filter));
     }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            if (this.extraDropdownOptions && this.extraDropdownOptions.length > 0) {
-                this.dropdownOptions.push(...this.extraDropdownOptions);
-            }
-            const view = new RunView();
-            this.resourceTypes = SharedService.Instance.ResourceTypes;
-        });
+    async ngOnInit() {
+        const md = new Metadata();
+        if (this.extraDropdownOptions && this.extraDropdownOptions.length > 0) {
+            this.dropdownOptions.push(...this.extraDropdownOptions);
+        }
+        const view = new RunView();
+        this.resourceTypes = SharedService.Instance.ResourceTypes;
     }
     //wrapper function for the grid view
     onCellItemClicked(event) {
@@ -288,245 +278,226 @@ export class GenericBrowserListComponent {
     backButtonClicked() {
         this.backButtonClickEvent.emit();
     }
-    addResourceButtonClicked() {
-        return __awaiter(this, void 0, void 0, function* () {
-            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");
-                let item = new Item(entity, ItemType.Resource);
-                item.Name = resourceName;
-                this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
-            }
-            else {
-                this.showNotification(`Unable to create ${resourceName}`, "error");
-            }
-        });
+    async addResourceButtonClicked() {
+        let event = new BeforeAddItemEvent("");
+        this.BeforeAddItemEvent.emit(event);
+        if (event.Cancel) {
+            return;
+        }
+        const resourceName = `Sample ${this.ItemEntityName}`;
+        const md = new Metadata();
+        const entity = await 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 = await entity.Save();
+        if (saveResult) {
+            this.showNotification(`successfully created ${resourceName}`, "info");
+            let item = new Item(entity, ItemType.Resource);
+            item.Name = resourceName;
+            this.AfterAddItemEvent.emit(new AfterAddItemEvent(item));
+        }
+        else {
+            this.showNotification(`Unable to create ${resourceName}`, "error");
+        }
     }
-    createFolder() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.toggleCreateFolderView(false);
-            let event = new BeforeAddFolderEvent(this.newFolderText);
+    async createFolder() {
+        this.toggleCreateFolderView(false);
+        let event = new BeforeAddFolderEvent(this.newFolderText);
+        if (event.Cancel) {
+            return;
+        }
+        let folderName = this.newFolderText;
+        let description = "";
+        const md = new Metadata();
+        const folderEntity = await md.GetEntityObject(this.CategoryEntityName);
+        folderEntity.NewRecord();
+        folderEntity.Set("Name", folderName);
+        folderEntity.Set("ParentID", this.selectedFolderID);
+        folderEntity.Set("Description", description);
+        folderEntity.Set("UserID", md.CurrentUser.ID);
+        if (this.categoryEntityID) {
+            folderEntity.Set("EntityID", this.categoryEntityID);
+        }
+        let saveResult = await folderEntity.Save();
+        if (saveResult) {
+            this.showNotification(`successfully created folder ${folderName}`, "info");
+            let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
+            folder.Description = folderEntity.Get("Description");
+            let item = new Item(folder, ItemType.Folder);
+            let event = new AfterAddFolderEvent(item);
+            this.AfterAddFolderEvent.emit(event);
             if (event.Cancel) {
                 return;
             }
-            let folderName = this.newFolderText;
-            let description = "";
-            const md = new Metadata();
-            const folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
-            folderEntity.NewRecord();
-            folderEntity.Set("Name", folderName);
-            folderEntity.Set("ParentID", this.selectedFolderID);
-            folderEntity.Set("Description", description);
-            folderEntity.Set("UserID", md.CurrentUser.ID);
-            if (this.categoryEntityID) {
-                folderEntity.Set("EntityID", this.categoryEntityID);
-            }
-            let saveResult = yield folderEntity.Save();
-            if (saveResult) {
-                this.showNotification(`successfully created folder ${folderName}`, "info");
-                let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
-                folder.Description = folderEntity.Get("Description");
-                let item = new Item(folder, ItemType.Folder);
-                let event = new AfterAddFolderEvent(item);
-                this.AfterAddFolderEvent.emit(event);
-                if (event.Cancel) {
-                    return;
-                }
-                //navigate to the newly created folder
-                //by raising an item click event
-                this.itemClick(item);
-            }
-            else {
-                this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error", 3500);
-            }
-            this.newFolderText = "Sample Folder";
-        });
+            //navigate to the newly created folder
+            //by raising an item click event
+            this.itemClick(item);
+        }
+        else {
+            this.sharedService.CreateSimpleNotification(`Unable to create folder ${folderName}`, "error", 3500);
+        }
+        this.newFolderText = "Sample Folder";
     }
-    unlinkItem(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.deleteOrUnlink(item, false);
-        });
+    async unlinkItem(item) {
+        await this.deleteOrUnlink(item, false);
     }
-    deleteOrUnlink(item, bDelete) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._currentDeleteOrUnlinkState = bDelete;
-            if (!item) {
+    _currentDeleteOrUnlinkState = false;
+    async deleteOrUnlink(item, bDelete) {
+        this._currentDeleteOrUnlinkState = bDelete;
+        if (!item) {
+            return;
+        }
+        this.selectedItem = item;
+        if (item.Type === ItemType.Folder && bDelete) {
+            let event = new BeforeDeleteFolderEvent(item);
+            this.BeforeDeleteFolderEvent.emit(event);
+            if (event.Cancel) {
                 return;
             }
-            this.selectedItem = item;
-            if (item.Type === ItemType.Folder && bDelete) {
-                let event = new BeforeDeleteFolderEvent(item);
-                this.BeforeDeleteFolderEvent.emit(event);
-                if (event.Cancel) {
-                    return;
-                }
-                this.deleteDialogOpened = true;
-            }
-            else if (item.Type === ItemType.Resource && bDelete) {
-                let event = new BeforeDeleteItemEvent(item);
-                this.BeforeDeleteItemEvent.emit(event);
-                if (event.Cancel) {
-                    return;
-                }
-                this.deleteDialogOpened = true;
+            this.deleteDialogOpened = true;
+        }
+        else if (item.Type === ItemType.Resource && bDelete) {
+            let event = new BeforeDeleteItemEvent(item);
+            this.BeforeDeleteItemEvent.emit(event);
+            if (event.Cancel) {
+                return;
             }
-            else if (item.Type === ItemType.Resource && !bDelete) {
-                let event = new BeforeUnlinkItemEvent(item);
-                this.BeforeUnlinkItemEvent.emit(event);
-                if (event.Cancel) {
-                    return;
-                }
-                this.deleteDialogOpened = true;
+            this.deleteDialogOpened = true;
+        }
+        else if (item.Type === ItemType.Resource && !bDelete) {
+            let event = new BeforeUnlinkItemEvent(item);
+            this.BeforeUnlinkItemEvent.emit(event);
+            if (event.Cancel) {
+                return;
             }
-        });
+            this.deleteDialogOpened = true;
+        }
     }
     goToParent() {
         this.NavigateToParentEvent.emit();
     }
-    deleteItem(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.deleteOrUnlink(item, true);
-        });
+    async deleteItem(item) {
+        await this.deleteOrUnlink(item, 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 && this._currentDeleteOrUnlinkState) {
-                let deleteResult = yield this.deleteFolder(item);
-                if (deleteResult) {
-                    let deleteFolderEvent = new AfterDeleteFolderEvent(item);
-                    this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
-                }
-            }
-            else if (item.Type === ItemType.Resource && this._currentDeleteOrUnlinkState) {
-                yield this.deleteResource(item);
-                let deleteItemEvent = new AfterDeleteItemEvent(item);
-                this.AfterDeleteItemEvent.emit(deleteItemEvent);
-            }
-            else if (item.Type === ItemType.Resource && !this._currentDeleteOrUnlinkState) {
-                yield this.unlinkResource(item);
-                let unlinkItemEvent = new AfterUnlinkItemEvent(item);
-                this.AfterUnlinkItemEvent.emit(unlinkItemEvent);
+    async onConfirmDeleteItem(shouldDelete) {
+        this.deleteDialogOpened = false;
+        if (!this.selectedItem || !shouldDelete) {
+            return;
+        }
+        let item = this.selectedItem;
+        if (item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState) {
+            let deleteResult = await this.deleteFolder(item);
+            if (deleteResult) {
+                let deleteFolderEvent = new AfterDeleteFolderEvent(item);
+                this.AfterDeleteFolderEvent.emit(deleteFolderEvent);
             }
-            this.selectedItem = null;
-        });
+        }
+        else if (item.Type === ItemType.Resource && this._currentDeleteOrUnlinkState) {
+            await this.deleteResource(item);
+            let deleteItemEvent = new AfterDeleteItemEvent(item);
+            this.AfterDeleteItemEvent.emit(deleteItemEvent);
+        }
+        else if (item.Type === ItemType.Resource && !this._currentDeleteOrUnlinkState) {
+            await this.unlinkResource(item);
+            let unlinkItemEvent = new AfterUnlinkItemEvent(item);
+            this.AfterUnlinkItemEvent.emit(unlinkItemEvent);
+        }
+        this.selectedItem = null;
     }
-    deleteFolder(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const folder = item.Data;
-            //the DB will throw an error if we attempt to delete a folder that has children
-            //i.e. sub folders or resources
-            //so the default behavior is to notify the user that the delete operation cannot
-            //go through 
-            const folderHasChildren = yield this.doesFolderHaveChildren(folder.ID);
-            if (folderHasChildren) {
-                this.showNotification(`unable to delete folder ${folder.Name} because it has children`, "error");
-                return false;
-            }
-            this.showLoader = true;
+    async deleteFolder(item) {
+        const folder = item.Data;
+        //the DB will throw an error if we attempt to delete a folder that has children
+        //i.e. sub folders or resources
+        //so the default behavior is to notify the user that the delete operation cannot
+        //go through 
+        const folderHasChildren = await this.doesFolderHaveChildren(folder.ID);
+        if (folderHasChildren) {
+            this.showNotification(`unable to delete folder ${folder.Name} because it has children`, "error");
+            return false;
+        }
+        this.showLoader = true;
+        const md = new Metadata();
+        let folderEntity = await md.GetEntityObject(this.CategoryEntityName);
+        let pkv = new KeyValuePair();
+        pkv.FieldName = "ID";
+        pkv.Value = folder.ID;
+        let compositeKey = new CompositeKey([pkv]);
+        //create view browser component - this will be used to display views
+        //then create a new component for applications that wraps around the view browser component 
+        let loadResult = await folderEntity.InnerLoad(compositeKey);
+        if (!loadResult) {
+            this.sharedService.CreateSimpleNotification(`Unable to fetch folder ${folder.Name}`, "error", 3500);
+            this.showLoader = false;
+            return false;
+        }
+        let deleteResult = await folderEntity.Delete();
+        if (!deleteResult) {
+            this.sharedService.CreateSimpleNotification(`Unable to delete folder ${folder.Name}`, "error", 3500);
+            this.showLoader = false;
+            return false;
+        }
+        else {
+            this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2000);
+            this.showLoader = false;
+        }
+        return true;
+    }
+    async deleteResource(item) {
+        let genericEntity = item.Data;
+        if (!genericEntity) {
+            return false;
+        }
+        //the only assumption we are making here is that the entityID
+        //is a number
+        const entityID = this.TryGetID(genericEntity);
+        if (entityID && entityID.length > 0) {
             const md = new Metadata();
-            let folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
+            let entityObject = await md.GetEntityObject(this.ItemEntityName);
             let pkv = new KeyValuePair();
             pkv.FieldName = "ID";
-            pkv.Value = folder.ID;
+            pkv.Value = entityID;
             let compositeKey = new CompositeKey([pkv]);
-            //create view browser component - this will be used to display views
-            //then create a new component for applications that wraps around the view browser component 
-            let loadResult = yield folderEntity.InnerLoad(compositeKey);
-            if (!loadResult) {
-                this.sharedService.CreateSimpleNotification(`Unable to fetch folder ${folder.Name}`, "error", 3500);
-                this.showLoader = false;
-                return false;
-            }
-            let deleteResult = yield folderEntity.Delete();
-            if (!deleteResult) {
-                this.sharedService.CreateSimpleNotification(`Unable to delete folder ${folder.Name}`, "error", 3500);
-                this.showLoader = false;
-                return false;
-            }
-            else {
-                this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2000);
-                this.showLoader = false;
-            }
-            return true;
-        });
-    }
-    deleteResource(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let genericEntity = item.Data;
-            if (!genericEntity) {
-                return false;
-            }
-            //the only assumption we are making here is that the entityID
-            //is a number
-            const entityID = this.TryGetID(genericEntity);
-            if (entityID && entityID.length > 0) {
-                const md = new Metadata();
-                let entityObject = yield md.GetEntityObject(this.ItemEntityName);
-                let pkv = new KeyValuePair();
-                pkv.FieldName = "ID";
-                pkv.Value = entityID;
-                let compositeKey = new CompositeKey([pkv]);
-                let loadResult = yield entityObject.InnerLoad(compositeKey);
-                if (loadResult) {
-                    let deleteResult = yield entityObject.Delete();
-                    if (deleteResult) {
-                        this.showNotification(`successfully deleted`, "info");
-                        return true;
-                    }
-                    else {
-                        this.showNotification(`Unable to delete`, "error");
-                    }
+            let loadResult = await entityObject.InnerLoad(compositeKey);
+            if (loadResult) {
+                let deleteResult = await entityObject.Delete();
+                if (deleteResult) {
+                    this.showNotification(`successfully deleted`, "info");
+                    return true;
                 }
                 else {
-                    this.showNotification(`unable to fetch`, "error");
+                    this.showNotification(`Unable to delete`, "error");
                 }
             }
-            return false;
-        });
-    }
-    unlinkResource(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // remove the link by removing the Resource Link record
-            if (item.ResourceLinkID) {
-                const md = new Metadata();
-                const link = yield md.GetEntityObject("Resource Links");
-                if (yield link.Load(item.ResourceLinkID))
-                    return yield link.Delete();
-                else
-                    return false;
+            else {
+                this.showNotification(`unable to fetch`, "error");
             }
+        }
+        return false;
+    }
+    async unlinkResource(item) {
+        // remove the link by removing the Resource Link record
+        if (item.ResourceLinkID) {
+            const md = new Metadata();
+            const link = await md.GetEntityObject("Resource Links");
+            if (await link.Load(item.ResourceLinkID))
+                return await link.Delete();
             else
                 return false;
-        });
+        }
+        else
+            return false;
     }
-    doesFolderHaveChildren(folderID) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const md = new Metadata();
-            const rv = new RunView();
-            const folderResult = yield rv.RunView({
-                EntityName: this.CategoryEntityName,
-                ExtraFilter: `ParentID ='${folderID}'`
-            });
-            return folderResult && folderResult.Success && folderResult.Results.length > 0;
+    async doesFolderHaveChildren(folderID) {
+        const md = new Metadata();
+        const rv = new RunView();
+        const folderResult = await rv.RunView({
+            EntityName: this.CategoryEntityName,
+            ExtraFilter: `ParentID ='${folderID}'`
         });
+        return folderResult && folderResult.Success && folderResult.Results.length > 0;
     }
     showNotification(message, type) {
         if (this.showNotifications) {
@@ -564,17 +535,15 @@ export class GenericBrowserListComponent {
             return item.Name.toLowerCase().includes(filter.toLowerCase());
         });
     }
-    SetFavoriteStatus(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!item) {
-                return;
-            }
-            item.Favorite = !item.Favorite;
-            const md = new Metadata();
-            let entityName = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
-            let compositeKey = new CompositeKey([{ FieldName: "ID", Value: item.Data.ID }]);
-            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, compositeKey, item.Favorite);
-        });
+    async SetFavoriteStatus(item) {
+        if (!item) {
+            return;
+        }
+        item.Favorite = !item.Favorite;
+        const md = new Metadata();
+        let entityName = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
+        let compositeKey = new CompositeKey([{ FieldName: "ID", Value: item.Data.ID }]);
+        await md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, compositeKey, item.Favorite);
     }
     editItem(item) {
         if (!item) {
@@ -595,31 +564,29 @@ export class GenericBrowserListComponent {
             }
         }
     }
-    onDropdownItemClick(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!data || !data.text) {
-                return;
-            }
-            if (data.text === "Folder") {
-                this.toggleCreateFolderView();
-            }
-            else if (data.text === this.resourceName) {
-                this.addResourceButtonClicked();
-            }
-            else if (data.text === this.createNewRecordName) {
-                if (this.entityFormDialogRef) {
-                    // create a new record for the given entity
-                    const md = new Metadata();
-                    const newRecord = yield md.GetEntityObject(this.entityObjectName);
-                    this.entityFormDialogRef.Record = newRecord;
-                    this.entityFormDialogRef.ShowForm();
-                }
-            }
-            else {
-                let event = new DropdownOptionClickEvent(data.text);
-                this.dropdownOptionClickEvent.emit(event);
+    async onDropdownItemClick(data) {
+        if (!data || !data.text) {
+            return;
+        }
+        if (data.text === "Folder") {
+            this.toggleCreateFolderView();
+        }
+        else if (data.text === this.resourceName) {
+            this.addResourceButtonClicked();
+        }
+        else if (data.text === this.createNewRecordName) {
+            if (this.entityFormDialogRef) {
+                // create a new record for the given entity
+                const md = new Metadata();
+                const newRecord = await md.GetEntityObject(this.entityObjectName);
+                this.entityFormDialogRef.Record = newRecord;
+                this.entityFormDialogRef.ShowForm();
             }
-        });
+        }
+        else {
+            let event = new DropdownOptionClickEvent(data.text);
+            this.dropdownOptionClickEvent.emit(event);
+        }
     }
     toggleCopyFromView() {
         this.copyFromDialogOpened = !this.copyFromDialogOpened;
@@ -649,63 +616,63 @@ export class GenericBrowserListComponent {
         }
         return "";
     }
+    static ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], viewQuery: function GenericBrowserListComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormDialogRef = _t.first);
+        } }, inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList", extraDropdownOptions: "extraDropdownOptions" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUnlinkItemEvent: "BeforeUnlinkItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUnlinkItemEvent: "AfterUnlinkItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", NavigateToParentEvent: "NavigateToParentEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", dropdownOptionClickEvent: "dropdownOptionClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 27, vars: 9, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new folder", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
+            i0.ɵɵtemplate(4, GenericBrowserListComponent_Conditional_4_Template, 2, 0);
+            i0.ɵɵelementStart(5, "h4");
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "kendo-dropdownbutton", 6);
+            i0.ɵɵlistener("itemClick", function GenericBrowserListComponent_Template_kendo_dropdownbutton_itemClick_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
+            i0.ɵɵelement(8, "span", 7);
+            i0.ɵɵtext(9, " Create New ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 4)(11, "div", 8)(12, "kendo-textbox", 9, 0);
+            i0.ɵɵlistener("keyup", function GenericBrowserListComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r4 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r4.value)); });
+            i0.ɵɵtemplate(14, GenericBrowserListComponent_ng_template_14_Template, 1, 0, "ng-template", 10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
+            i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("grid")); });
+            i0.ɵɵelement(17, "span", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "button", 14);
+            i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("list")); });
+            i0.ɵɵelement(19, "span", 15);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 16);
+            i0.ɵɵtemplate(21, GenericBrowserListComponent_kendo_loader_21_Template, 1, 0, "kendo-loader", 17)(22, GenericBrowserListComponent_Conditional_22_Template, 2, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(23, GenericBrowserListComponent_kendo_dialog_23_Template, 10, 4, "kendo-dialog", 18)(24, GenericBrowserListComponent_kendo_dialog_24_Template, 8, 2, "kendo-dialog", 19);
+            i0.ɵɵelement(25, "mj-entity-form-dialog", 20, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.selectedFolderID ? 4 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.title);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.dropdownOptions);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("clearButton", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("showSeparator", true);
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("ngIf", ctx.showLoader);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.showLoader ? 22 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
+        } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective, i9.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 }
-GenericBrowserListComponent.ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
-GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], viewQuery: function GenericBrowserListComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormDialogRef = _t.first);
-    } }, inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableEditButton: "disableEditButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList", extraDropdownOptions: "extraDropdownOptions" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUnlinkItemEvent: "BeforeUnlinkItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUnlinkItemEvent: "AfterUnlinkItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", NavigateToParentEvent: "NavigateToParentEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", dropdownOptionClickEvent: "dropdownOptionClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 27, vars: 9, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["title", "Create new folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "fa-regular", "fa-pen-to-square"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], ["title", "Create new folder", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], ["placeholder", "Enter a folder name", 3, "valueChange"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
-        i0.ɵɵtemplate(4, GenericBrowserListComponent_Conditional_4_Template, 2, 0);
-        i0.ɵɵelementStart(5, "h4");
-        i0.ɵɵtext(6);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(7, "kendo-dropdownbutton", 6);
-        i0.ɵɵlistener("itemClick", function GenericBrowserListComponent_Template_kendo_dropdownbutton_itemClick_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
-        i0.ɵɵelement(8, "span", 7);
-        i0.ɵɵtext(9, " Create New ");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(10, "div", 4)(11, "div", 8)(12, "kendo-textbox", 9, 0);
-        i0.ɵɵlistener("keyup", function GenericBrowserListComponent_Template_kendo_textbox_keyup_12_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r4 = i0.ɵɵreference(13); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r4.value)); });
-        i0.ɵɵtemplate(14, GenericBrowserListComponent_ng_template_14_Template, 1, 0, "ng-template", 10);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(15, "div", 11)(16, "button", 12);
-        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("grid")); });
-        i0.ɵɵelement(17, "span", 13);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(18, "button", 14);
-        i0.ɵɵlistener("click", function GenericBrowserListComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("list")); });
-        i0.ɵɵelement(19, "span", 15);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(20, "div", 16);
-        i0.ɵɵtemplate(21, GenericBrowserListComponent_kendo_loader_21_Template, 1, 0, "kendo-loader", 17)(22, GenericBrowserListComponent_Conditional_22_Template, 2, 1);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(23, GenericBrowserListComponent_kendo_dialog_23_Template, 10, 4, "kendo-dialog", 18)(24, GenericBrowserListComponent_kendo_dialog_24_Template, 8, 2, "kendo-dialog", 19);
-        i0.ɵɵelement(25, "mj-entity-form-dialog", 20, 1);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵconditional(ctx.selectedFolderID ? 4 : -1);
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(ctx.title);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.dropdownOptions);
-        i0.ɵɵadvance(5);
-        i0.ɵɵproperty("clearButton", true);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("showSeparator", true);
-        i0.ɵɵadvance(7);
-        i0.ɵɵproperty("ngIf", ctx.showLoader);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(!ctx.showLoader ? 22 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("ngIf", ctx.createFolderDialogOpened);
-    } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective, i9.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowserListComponent, [{
         type: Component,
         args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(selectedFolderID){\n          <span title=\"Parent\" class=\"title-folder fa-solid fa-arrow-left fa-2xl breadcrumb-icon\" (click)=\"goToParent()\"></span> \n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"dropdownOptions\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n      @if(!showLoader){\n        @if(displayAsGrid){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(disableEditButton){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else{\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of items; track item){\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(!disableEditButton && (!item.IsLink || item.LinkPermissionLevel === 'Owner' || item.LinkPermissionLevel === 'Edit')) {\n                    <button (click)=\"editItem(item)\" class=\"list-btn\" title=\"Edit Item\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(!item.IsLink || item.LinkPermissionLevel === 'Owner') {\n                    <button (click)=\"deleteItem(item)\" class=\"list-btn\" title=\"Delete Item\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>                    \n                  }\n                  @else if (item.IsLink) {\n                    <button (click)=\"unlinkItem(item)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    @if(item.IsLink) {\n                      <i [title]=\"item.Name + '(Shared)'\" [ngClass]=\"getIconForResourceType(item)\" style=\"color: rgb(19, 92, 201);\"></i>\n                    }\n                    @else {\n                      <span [title]=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    }\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to {{(selectedItem?.IsLink && selectedItem?.LinkPermissionLevel === 'Owner') || !selectedItem?.IsLink ? 'delete' : 'unlink'}} <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No \n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    title=\"Create new folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper .search  input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon {\n    cursor: pointer;\n}\n.breacrumb-icon:hover {\n    color: var(--primary-color);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]