@memberjunction/ng-explorer-core 2.48.0 → 2.49.0

package/dist/lib/resource-browser/resource-browser.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 } from '@angular/core';
 import { Folder, Item, ItemType } from '../../generic/Item.types';
 import { Subject, debounceTime } from 'rxjs';
@@ -239,6 +230,11 @@ function ResourceBrowserComponent_kendo_dialog_22_Template(rf, ctx) { if (rf & 1
     i0.ɵɵconditional(ctx_r2.selectedFolder ? 9 : 10);
 } }
 export class ResourceBrowserComponent {
+    sharedService;
+    /*******************************************************************************************
+     * PROPERTIES
+     *******************************************************************************************/
+    _ResourceTypeName = null;
     /**
      * The name of the type of resource to display, cannot be changed after it is initially set
      */
@@ -254,12 +250,92 @@ export class ResourceBrowserComponent {
             throw new Error('Resource Type cannot be changed after it has been set');
         }
     }
+    /**
+     * Whether or not to enable categories. If enabled, Categories will be displayed
+     * and the option to create new categories will be available. Default is true.
+     */
+    EnableCategories = true;
+    /**
+     * If Categories are enabled, then the categories fetched will be filtered to return only those whoses EntityID
+     * matches this value.
+     */
+    CategoryEntityID = null;
+    /**
+     * If set, this will set the current Category/Folder for the display. Not all Resource Types support Categories, so if the Resource Type in question does not have a CategoryEntityID specified, this property will be ignored.
+     */
+    CurrentCategoryID = null;
+    /**
+     * This property determines if the UI will include a button on items in the display to edit. The button will only be shown if the user has edit permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+     */
+    EnableItemEdit = true;
+    /**
+     * This property determines if the UI will include a button on items in the display to delete. The button will only be shown if the user has delete permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+     */
+    EnableItemDelete = true;
+    /**
+     * This proprerty determines if the UI will include a button on items in the display to unlink/remove a link to a shared resource (owned by another user).
+     * The button will only be shown if the user has permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
+     */
+    EnableRemoveLink = true;
+    /**
+     * The title to display, by default if not provided, we will use the ResourceType's Entity Name
+     */
+    Title;
+    /**
+     * Optional, a SQL Where clause filter to apply to Items being loaded into the browser
+     */
+    ItemFilter;
+    /**
+     * Optional, a valid expression to place into the RunView OrderBy property (don't include the keywords ORDER BY, just what is after ORDER BY)
+     */
+    OrderBy;
+    /**
+     * Array of NewItemOption objects that will be displayed in the Create New dropdown. Defaults to having a single entry for creating a new folder, you can remove this or add to it.
+     */
+    NewItemOptions = [];
+    /**
+     * The visual display mode for this component, tile will show the contents in tiles that are spaced and wrapped based on the viewport, list will show the details of the items in a list, and tree will show the items in a tree view - tree view NOT implemented yet
+     */
+    DisplayMode = 'Tile';
+    /**
+     * Fires whenever a resource/item is selected within the component
+     */
+    ResourceSelected = new EventEmitter();
+    /*******************************************************************************************
+     * EVENTS
+     *******************************************************************************************/
+    /**
+     * Fires whenever the category (e.g. the folder) the user is currently viewing changes. This can happen when a user creates a new folder and navigates to it, navigates to an existing folder, goes "up" in the folder hierarchy, etc.
+     */
+    CategoryChanged = new EventEmitter();
+    /**
+     * Fires whenever the user changes the display mode of the component
+     */
+    DisplayModeChanged = new EventEmitter();
+    /**
+     * Fires whenever the user clicks the back button to view the parent folder
+     */
+    NavigateToParentEvent = new EventEmitter();
+    /**
+     * Fires whenever the users clicks to edit an Item that is not a folder
+     */
+    EditItemEvent = new EventEmitter();
+    /**
+     * Fires whenever the users clicks to edit an Item that is not a folder
+     */
+    DeleteItemEvent = new EventEmitter();
+    /**
+     * The current Resource Type (BaseEntity derived class), automatically is populated after init based on the ResourceType string
+     */
+    ResourceType;
+    _isLoading = false;
     /**
      * This property will be true whenever the component is in the process of loading data
      */
     get IsLoading() {
         return this._isLoading;
     }
+    _CategoryIDFieldName;
     /**
      * This is the field name in the Resource Type's Entity that is used to store the CategoryID (e.g. the Folder ID) for the resource.
      * Not all entities in resource types support a CategoryID concept, so this can be null. This property is read only and
@@ -268,6 +344,7 @@ export class ResourceBrowserComponent {
     get CategoryIDFieldName() {
         return this._CategoryIDFieldName;
     }
+    _CategoryParentIDFieldName = undefined;
     /**
      * This is the field name in the Resource type's Category Entity, if a Category Entity was provided, that has the recursive/self-referencing foreign key to the parent category.
      * This field is read only and is auto-populated during the configuration of the component.
@@ -275,6 +352,7 @@ export class ResourceBrowserComponent {
     get CategoryParentIDFieldName() {
         return this._CategoryParentIDFieldName;
     }
+    _UserIDFieldName = undefined;
     /**
      * This is the field name in the Resource Type's Entity that is used to store the UserID of the user that OWNS the resource. Commonly, but not always a field called UserID, but can be
      * any field in the Resource Type's entity that is a foreign key to the Users entity. This property is read only and is auto-populated during the configuration of the component.
@@ -282,246 +360,167 @@ export class ResourceBrowserComponent {
     get UserIDFieldName() {
         return this._UserIDFieldName;
     }
+    _items = [];
     /**
      * The current list of items being displayed in the browser, DO NOT MODIFY THIS! This is read only and is auto-populated by the component.
      */
     get Items() {
         return this._items;
     }
+    _DefaultNewItemOptions = [
+        {
+            Text: 'New Folder',
+            Description: 'Create a new Folder',
+            Icon: 'folder',
+            Action: () => {
+                if (this.EnableCategories) {
+                    this.toggleUpsertFolderView(true, true);
+                }
+            }
+        }
+    ];
     get ItemOptions() {
         return this._DefaultNewItemOptions;
     }
+    upsertNewFolderName = "";
+    upsertNewFolderDescription = "";
+    selectedFolder = null;
+    // JS code here and below from old component....
+    _filterDebounceTime = 250;
+    filterItemsSubject = new Subject();
+    filter = '';
+    sourceItems = null;
+    selectedItem = null;
+    deleteDialogOpened = false;
+    copyFromDialogOpened = false;
+    upsertFolderDialogVisible = false;
+    _allResourceTypes = [];
+    entityObjectName = "";
     constructor(sharedService) {
         this.sharedService = sharedService;
-        /*******************************************************************************************
-         * PROPERTIES
-         *******************************************************************************************/
-        this._ResourceTypeName = null;
-        /**
-         * Whether or not to enable categories. If enabled, Categories will be displayed
-         * and the option to create new categories will be available. Default is true.
-         */
-        this.EnableCategories = true;
-        /**
-         * If Categories are enabled, then the categories fetched will be filtered to return only those whoses EntityID
-         * matches this value.
-         */
-        this.CategoryEntityID = null;
-        /**
-         * If set, this will set the current Category/Folder for the display. Not all Resource Types support Categories, so if the Resource Type in question does not have a CategoryEntityID specified, this property will be ignored.
-         */
-        this.CurrentCategoryID = null;
-        /**
-         * This property determines if the UI will include a button on items in the display to edit. The button will only be shown if the user has edit permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
-         */
-        this.EnableItemEdit = true;
-        /**
-         * This property determines if the UI will include a button on items in the display to delete. The button will only be shown if the user has delete permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
-         */
-        this.EnableItemDelete = true;
-        /**
-         * This proprerty determines if the UI will include a button on items in the display to unlink/remove a link to a shared resource (owned by another user).
-         * The button will only be shown if the user has permissions, but this is a global setting to turn on/off the button even if the user has permissions. Default is true.
-         */
-        this.EnableRemoveLink = true;
-        /**
-         * Array of NewItemOption objects that will be displayed in the Create New dropdown. Defaults to having a single entry for creating a new folder, you can remove this or add to it.
-         */
-        this.NewItemOptions = [];
-        /**
-         * The visual display mode for this component, tile will show the contents in tiles that are spaced and wrapped based on the viewport, list will show the details of the items in a list, and tree will show the items in a tree view - tree view NOT implemented yet
-         */
-        this.DisplayMode = 'Tile';
-        /**
-         * Fires whenever a resource/item is selected within the component
-         */
-        this.ResourceSelected = new EventEmitter();
-        /*******************************************************************************************
-         * EVENTS
-         *******************************************************************************************/
-        /**
-         * Fires whenever the category (e.g. the folder) the user is currently viewing changes. This can happen when a user creates a new folder and navigates to it, navigates to an existing folder, goes "up" in the folder hierarchy, etc.
-         */
-        this.CategoryChanged = new EventEmitter();
-        /**
-         * Fires whenever the user changes the display mode of the component
-         */
-        this.DisplayModeChanged = new EventEmitter();
-        /**
-         * Fires whenever the user clicks the back button to view the parent folder
-         */
-        this.NavigateToParentEvent = new EventEmitter();
-        /**
-         * Fires whenever the users clicks to edit an Item that is not a folder
-         */
-        this.EditItemEvent = new EventEmitter();
-        /**
-         * Fires whenever the users clicks to edit an Item that is not a folder
-         */
-        this.DeleteItemEvent = new EventEmitter();
-        this._isLoading = false;
-        this._CategoryParentIDFieldName = undefined;
-        this._UserIDFieldName = undefined;
-        this._items = [];
-        this._DefaultNewItemOptions = [
-            {
-                Text: 'New Folder',
-                Description: 'Create a new Folder',
-                Icon: 'folder',
-                Action: () => {
-                    if (this.EnableCategories) {
-                        this.toggleUpsertFolderView(true, true);
-                    }
-                }
-            }
-        ];
-        this.upsertNewFolderName = "";
-        this.upsertNewFolderDescription = "";
-        this.selectedFolder = null;
-        // JS code here and below from old component....
-        this._filterDebounceTime = 250;
-        this.filterItemsSubject = new Subject();
-        this.filter = '';
-        this.sourceItems = null;
-        this.selectedItem = null;
-        this.deleteDialogOpened = false;
-        this.copyFromDialogOpened = false;
-        this.upsertFolderDialogVisible = false;
-        this._allResourceTypes = [];
-        this.entityObjectName = "";
-        this._currentDeleteOrUnlinkState = false;
         this.filterItemsSubject
             .pipe(debounceTime(this._filterDebounceTime))
             .subscribe(() => this.filterItems(this.filter));
     }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c;
-            /**
-             * Hide the create folder option is EnableCategories is false
-             */
-            if (this.EnableCategories) {
-                this._DefaultNewItemOptions.push(...this.NewItemOptions);
-            }
-            else {
-                this._DefaultNewItemOptions = this.NewItemOptions;
-            }
-            this._allResourceTypes = this.sharedService.ResourceTypes;
-            const resourceType = this._allResourceTypes.find(rt => {
-                return rt.Entity === this.ResourceTypeName;
-            });
-            if (!resourceType) {
-                throw new Error(`Resource Type ${this.ResourceTypeName} not found`);
-            }
-            this.ResourceType = resourceType;
-            if (!this.ResourceType.EntityID) {
-                throw new Error(`Resource Type ${this.ResourceTypeName} does not have an EntityID specified. EntityID is required for any Resource Type to be used with this component.`);
-            }
-            // now get the entity info for the resource type and for its category entity, if one is specified. 
-            const md = new Metadata();
-            const resourceTypeEntity = md.EntityByID(this.ResourceType.EntityID);
-            const categoryEntity = this.ResourceType.CategoryEntityID ? md.EntityByID(this.ResourceType.CategoryEntityID) : null;
-            // figure out the column inside the entity that points to the categoryEntity, if we have a category entity
-            if (categoryEntity) {
-                this._CategoryIDFieldName = (_a = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)) === null || _a === void 0 ? void 0 : _a.Name;
-                const usersEntity = md.EntityByName("Users");
-                this._UserIDFieldName = (_b = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === usersEntity.ID)) === null || _b === void 0 ? void 0 : _b.Name;
-                this._CategoryParentIDFieldName = (_c = categoryEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)) === null || _c === void 0 ? void 0 : _c.Name;
-            }
-            yield this.Refresh();
+    async ngOnInit() {
+        /**
+         * Hide the create folder option is EnableCategories is false
+         */
+        if (this.EnableCategories) {
+            this._DefaultNewItemOptions.push(...this.NewItemOptions);
+        }
+        else {
+            this._DefaultNewItemOptions = this.NewItemOptions;
+        }
+        this._allResourceTypes = this.sharedService.ResourceTypes;
+        const resourceType = this._allResourceTypes.find(rt => {
+            return rt.Entity === this.ResourceTypeName;
         });
+        if (!resourceType) {
+            throw new Error(`Resource Type ${this.ResourceTypeName} not found`);
+        }
+        this.ResourceType = resourceType;
+        if (!this.ResourceType.EntityID) {
+            throw new Error(`Resource Type ${this.ResourceTypeName} does not have an EntityID specified. EntityID is required for any Resource Type to be used with this component.`);
+        }
+        // now get the entity info for the resource type and for its category entity, if one is specified. 
+        const md = new Metadata();
+        const resourceTypeEntity = md.EntityByID(this.ResourceType.EntityID);
+        const categoryEntity = this.ResourceType.CategoryEntityID ? md.EntityByID(this.ResourceType.CategoryEntityID) : null;
+        // figure out the column inside the entity that points to the categoryEntity, if we have a category entity
+        if (categoryEntity) {
+            this._CategoryIDFieldName = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)?.Name;
+            const usersEntity = md.EntityByName("Users");
+            this._UserIDFieldName = resourceTypeEntity.Fields.find(f => f.RelatedEntityID === usersEntity.ID)?.Name;
+            this._CategoryParentIDFieldName = categoryEntity.Fields.find(f => f.RelatedEntityID === categoryEntity.ID)?.Name;
+        }
+        await this.Refresh();
     }
     /**
      * Refresh the component from the database based on other current state variables.
      */
-    Refresh() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const views = yield this.LoadResources();
-            const categories = yield this.LoadCategories();
-            const items = [...categories, ...views];
-            const sortedItems = this.sortItems(items);
-            this._items = sortedItems;
+    async Refresh() {
+        const views = await this.LoadResources();
+        const categories = await this.LoadCategories();
+        const items = [...categories, ...views];
+        const sortedItems = this.sortItems(items);
+        this._items = sortedItems;
+    }
+    async LoadResources() {
+        let results = [];
+        if (!this.ResourceType || !this.ResourceType.Entity) {
+            return results;
+        }
+        const md = new Metadata();
+        const rv = new RunView();
+        // create a combined filter for the SQL query that combines the user's provided ItemFilter, if provided, with a user filter that only includes items that are OWNED by the current user
+        // and finally filter on the current category, if one is set and we have a category entity
+        let filter = "";
+        if (this.ItemFilter) {
+            filter += `(${this.ItemFilter})`;
+        }
+        if (this.UserIDFieldName) {
+            let base = this.ItemFilter ? "AND " : " ";
+            filter += `${base}([${this.UserIDFieldName}] = '${md.CurrentUser.ID}')`;
+        }
+        if (this.CurrentCategoryID && this.CategoryIDFieldName) {
+            let base = (this.ItemFilter || this.UserIDFieldName) ? "AND " : " ";
+            filter += `${base}([${this.CategoryIDFieldName}] = '${this.CurrentCategoryID}')`;
+        }
+        const itemResult = await rv.RunView({
+            EntityName: this.ResourceType.Entity,
+            ExtraFilter: filter,
+            OrderBy: this.OrderBy,
+            ResultType: 'entity_object'
         });
+        if (!itemResult.Success) {
+            LogError(`Unable to load views for ${this.ResourceType.Entity}. Reason: ${itemResult.ErrorMessage}`);
+            return results;
+            ;
+        }
+        const views = itemResult.Results;
+        const items = views.map(view => new Item(view, ItemType.Resource));
+        return items;
     }
-    LoadResources() {
-        return __awaiter(this, void 0, void 0, function* () {
-            let results = [];
-            if (!this.ResourceType || !this.ResourceType.Entity) {
-                return results;
-            }
-            const md = new Metadata();
-            const rv = new RunView();
-            // create a combined filter for the SQL query that combines the user's provided ItemFilter, if provided, with a user filter that only includes items that are OWNED by the current user
-            // and finally filter on the current category, if one is set and we have a category entity
-            let filter = "";
-            if (this.ItemFilter) {
-                filter += `(${this.ItemFilter})`;
-            }
-            if (this.UserIDFieldName) {
-                let base = this.ItemFilter ? "AND " : " ";
-                filter += `${base}([${this.UserIDFieldName}] = '${md.CurrentUser.ID}')`;
-            }
-            if (this.CurrentCategoryID && this.CategoryIDFieldName) {
-                let base = (this.ItemFilter || this.UserIDFieldName) ? "AND " : " ";
-                filter += `${base}([${this.CategoryIDFieldName}] = '${this.CurrentCategoryID}')`;
-            }
-            const itemResult = yield rv.RunView({
-                EntityName: this.ResourceType.Entity,
-                ExtraFilter: filter,
-                OrderBy: this.OrderBy,
-                ResultType: 'entity_object'
-            });
-            if (!itemResult.Success) {
-                LogError(`Unable to load views for ${this.ResourceType.Entity}. Reason: ${itemResult.ErrorMessage}`);
-                return results;
-                ;
-            }
-            const views = itemResult.Results;
-            const items = views.map(view => new Item(view, ItemType.Resource));
-            return items;
+    async LoadCategories() {
+        if (!this.EnableCategories) {
+            return [];
+        }
+        if (!this.ResourceType || !this.ResourceType.CategoryEntity) {
+            return [];
+        }
+        const md = new Metadata();
+        const categoryEntity = md.EntityByName(this.ResourceType.CategoryEntity);
+        if (!categoryEntity) {
+            LogError(`Category Entity ${this.ResourceType.CategoryEntity} not found`);
+            return [];
+        }
+        const hasEntityIDField = categoryEntity.Fields.some(field => field.Name === "EntityID");
+        let filter = `UserID = '${md.CurrentUser.ID}'`;
+        filter += this.CurrentCategoryID ? ` AND ParentID = '${this.CurrentCategoryID}' ` : " AND ParentID IS NULL ";
+        filter += hasEntityIDField ? ` AND EntityID = '${this.ResourceType.EntityID}'` : "";
+        const rv = new RunView();
+        const rvResult = await rv.RunView({
+            EntityName: this.ResourceType.CategoryEntity,
+            ExtraFilter: filter,
+            ResultType: 'entity_object'
         });
-    }
-    LoadCategories() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.EnableCategories) {
-                return [];
-            }
-            if (!this.ResourceType || !this.ResourceType.CategoryEntity) {
-                return [];
-            }
-            const md = new Metadata();
-            const categoryEntity = md.EntityByName(this.ResourceType.CategoryEntity);
-            if (!categoryEntity) {
-                LogError(`Category Entity ${this.ResourceType.CategoryEntity} not found`);
-                return [];
-            }
-            const hasEntityIDField = categoryEntity.Fields.some(field => field.Name === "EntityID");
-            let filter = `UserID = '${md.CurrentUser.ID}'`;
-            filter += this.CurrentCategoryID ? ` AND ParentID = '${this.CurrentCategoryID}' ` : " AND ParentID IS NULL ";
-            filter += hasEntityIDField ? ` AND EntityID = '${this.ResourceType.EntityID}'` : "";
-            const rv = new RunView();
-            const rvResult = yield rv.RunView({
-                EntityName: this.ResourceType.CategoryEntity,
-                ExtraFilter: filter,
-                ResultType: 'entity_object'
-            });
-            if (!rvResult.Success) {
-                LogError(`Unable to load categories for ${this.ResourceType.CategoryEntity}. Reason: ${rvResult.ErrorMessage}`);
-                return [];
-            }
-            const categories = rvResult.Results;
-            const folders = categories.map((category) => {
-                const folderID = category.FirstPrimaryKey.Value;
-                const NameEntityField = category.Fields.find(field => field.EntityFieldInfo.IsNameField);
-                const folderName = NameEntityField ? NameEntityField.Value : "Folder";
-                const folder = new Folder(folderID, folderName);
-                folder.CategoryEntity = category;
-                folder.Description = category.Get("Description");
-                return folder;
-            });
-            const items = folders.map(folder => new Item(folder, ItemType.Folder));
-            return items;
+        if (!rvResult.Success) {
+            LogError(`Unable to load categories for ${this.ResourceType.CategoryEntity}. Reason: ${rvResult.ErrorMessage}`);
+            return [];
+        }
+        const categories = rvResult.Results;
+        const folders = categories.map((category) => {
+            const folderID = category.FirstPrimaryKey.Value;
+            const NameEntityField = category.Fields.find(field => field.EntityFieldInfo.IsNameField);
+            const folderName = NameEntityField ? NameEntityField.Value : "Folder";
+            const folder = new Folder(folderID, folderName);
+            folder.CategoryEntity = category;
+            folder.Description = category.Get("Description");
+            return folder;
         });
+        const items = folders.map(folder => new Item(folder, ItemType.Folder));
+        return items;
     }
     //maybe pass in a sort function for custom sorting?
     sortItems(items) {
@@ -548,193 +547,174 @@ export class ResourceBrowserComponent {
         }
         this.ResourceSelected.emit(item);
     }
-    updateFolder() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const folder = this.selectedFolder;
-            if (!folder || !folder.CategoryEntity) {
-                LogError("Folder or CategoryEntity is not set, cannot update folder");
-                this.sharedService.CreateSimpleNotification("Unable to update folder", "error", 2500);
-                return;
-            }
-            const categoryEntity = folder.CategoryEntity;
-            categoryEntity.Set("Name", this.upsertNewFolderName);
-            categoryEntity.Set("Description", this.upsertNewFolderDescription);
-            const saveResult = yield categoryEntity.Save();
-            if (!saveResult) {
-                LogError(`Unable to update folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
-                this.sharedService.CreateSimpleNotification(`Unable to update folder ${folder.Name}`, "error", 2500);
-            }
-            else {
-                this.sharedService.CreateSimpleNotification(`Successfully updated folder ${folder.Name}`, "info", 2500);
-                yield this.Refresh();
-            }
-            this.toggleUpsertFolderView(false, false);
-        });
-    }
-    createFolder() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.ResourceType.CategoryEntity) {
-                LogError("ResourceType.CategoryEntity is not set, cannot create folder");
-                this.sharedService.CreateSimpleNotification("Unable to create folder", "error", 1500);
-                return;
-            }
-            const md = new Metadata();
-            const folderEntity = yield md.GetEntityObject(this.ResourceType.CategoryEntity);
-            folderEntity.NewRecord();
-            folderEntity.Set("Name", this.upsertNewFolderName);
-            folderEntity.Set("Description", this.upsertNewFolderDescription);
-            folderEntity.Set("ParentID", this.CurrentCategoryID);
-            folderEntity.Set("UserID", md.CurrentUser.ID);
-            folderEntity.Set("EntityID", this.CategoryEntityID);
-            let saveResult = yield folderEntity.Save();
-            if (!saveResult) {
-                this.sharedService.CreateSimpleNotification(`Unable to create folder ${this.upsertNewFolderName}`, "error", 1500);
-                LogError(`Unable to create folder ${this.upsertNewFolderName}`, undefined, folderEntity.LatestResult);
-            }
-            this.toggleUpsertFolderView(false, false);
-            this.sharedService.CreateSimpleNotification(`successfully created folder ${this.upsertNewFolderName}`, 'success', 1500);
-            let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
-            folder.ParentFolderID = folderEntity.Get("ParentID");
-            folder.Description = folderEntity.Get("Description");
-            let item = new Item(folder, ItemType.Folder);
-            //navigate to the newly created folder
-            //by raising an item click event
-            this.itemClick(item);
-        });
-    }
-    unlinkItem(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.deleteOrUnlink(item, false);
-        });
+    async updateFolder() {
+        const folder = this.selectedFolder;
+        if (!folder || !folder.CategoryEntity) {
+            LogError("Folder or CategoryEntity is not set, cannot update folder");
+            this.sharedService.CreateSimpleNotification("Unable to update folder", "error", 2500);
+            return;
+        }
+        const categoryEntity = folder.CategoryEntity;
+        categoryEntity.Set("Name", this.upsertNewFolderName);
+        categoryEntity.Set("Description", this.upsertNewFolderDescription);
+        const saveResult = await categoryEntity.Save();
+        if (!saveResult) {
+            LogError(`Unable to update folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
+            this.sharedService.CreateSimpleNotification(`Unable to update folder ${folder.Name}`, "error", 2500);
+        }
+        else {
+            this.sharedService.CreateSimpleNotification(`Successfully updated folder ${folder.Name}`, "info", 2500);
+            await this.Refresh();
+        }
+        this.toggleUpsertFolderView(false, false);
     }
-    deleteOrUnlink(item, bDelete) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!item) {
-                return;
-            }
-            this._currentDeleteOrUnlinkState = bDelete;
-            this.selectedItem = item;
-            if (item.Type === ItemType.Folder && bDelete) {
-                this.deleteDialogOpened = true;
-            }
-            else if (item.Type === ItemType.Resource && bDelete) {
-                this.deleteDialogOpened = true;
-            }
-            else if (item.Type === ItemType.Resource && !bDelete) {
-                this.deleteDialogOpened = true;
-            }
-        });
+    async createFolder() {
+        if (!this.ResourceType.CategoryEntity) {
+            LogError("ResourceType.CategoryEntity is not set, cannot create folder");
+            this.sharedService.CreateSimpleNotification("Unable to create folder", "error", 1500);
+            return;
+        }
+        const md = new Metadata();
+        const folderEntity = await md.GetEntityObject(this.ResourceType.CategoryEntity);
+        folderEntity.NewRecord();
+        folderEntity.Set("Name", this.upsertNewFolderName);
+        folderEntity.Set("Description", this.upsertNewFolderDescription);
+        folderEntity.Set("ParentID", this.CurrentCategoryID);
+        folderEntity.Set("UserID", md.CurrentUser.ID);
+        folderEntity.Set("EntityID", this.CategoryEntityID);
+        let saveResult = await folderEntity.Save();
+        if (!saveResult) {
+            this.sharedService.CreateSimpleNotification(`Unable to create folder ${this.upsertNewFolderName}`, "error", 1500);
+            LogError(`Unable to create folder ${this.upsertNewFolderName}`, undefined, folderEntity.LatestResult);
+        }
+        this.toggleUpsertFolderView(false, false);
+        this.sharedService.CreateSimpleNotification(`successfully created folder ${this.upsertNewFolderName}`, 'success', 1500);
+        let folder = new Folder(folderEntity.Get("ID"), folderEntity.Get("Name"));
+        folder.ParentFolderID = folderEntity.Get("ParentID");
+        folder.Description = folderEntity.Get("Description");
+        let item = new Item(folder, ItemType.Folder);
+        //navigate to the newly created folder
+        //by raising an item click event
+        this.itemClick(item);
+    }
+    async unlinkItem(item) {
+        await this.deleteOrUnlink(item, false);
+    }
+    _currentDeleteOrUnlinkState = false;
+    async deleteOrUnlink(item, bDelete) {
+        if (!item) {
+            return;
+        }
+        this._currentDeleteOrUnlinkState = bDelete;
+        this.selectedItem = item;
+        if (item.Type === ItemType.Folder && bDelete) {
+            this.deleteDialogOpened = true;
+        }
+        else if (item.Type === ItemType.Resource && bDelete) {
+            this.deleteDialogOpened = true;
+        }
+        else if (item.Type === ItemType.Resource && !bDelete) {
+            this.deleteDialogOpened = true;
+        }
     }
     goToParent() {
         this.NavigateToParentEvent.emit();
     }
-    deleteItem(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.deleteOrUnlink(item, true);
-        });
-    }
-    onConfirmDeleteItem(shouldDelete) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.selectedItem || !shouldDelete) {
-                LogError("Selected item is not set or shouldDelete is false");
-                return;
-            }
-            this.deleteDialogOpened = false;
-            let item = this.selectedItem;
-            let success = false;
-            if (item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState) {
-                success = yield this.deleteFolder(item);
-            }
-            else if (item.Type === ItemType.Resource && this._currentDeleteOrUnlinkState) {
-                success = yield this.deleteResource(item);
-            }
-            else if (item.Type === ItemType.Resource && !this._currentDeleteOrUnlinkState) {
-                success = yield this.unlinkResource(item);
-            }
-            this.selectedItem = null;
-            if (success) {
-                yield this.Refresh();
-            }
-        });
-    }
-    deleteFolder(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const folder = item.Data;
-            if (!folder || !folder.CategoryEntity) {
-                LogError("Folder or CategoryEntity is not set, cannot delete folder");
-                this.sharedService.CreateSimpleNotification("Unable to delete folder", "error", 2500);
-                return false;
-            }
-            const hasChildren = yield this.doesFolderHaveChildren(folder.ID);
-            if (hasChildren) {
-                this.sharedService.CreateSimpleNotification(`Unable to delete Folder ${folder.Name} because it has children`, "error", 2500);
-                return false;
-            }
-            const categoryEntity = folder.CategoryEntity;
-            const deleteResult = yield categoryEntity.Delete();
-            if (!deleteResult) {
-                LogError(`Unable to delete folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
-                this.sharedService.CreateSimpleNotification(`unable to delete folder ${folder.Name}.`, "error", 2500);
-                return false;
-            }
-            this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2500);
-            return true;
-        });
+    async deleteItem(item) {
+        await this.deleteOrUnlink(item, true);
     }
-    deleteResource(item) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let genericEntity = item.Data;
-            if (!genericEntity) {
-                LogError("Item Data is not set, cannot delete resource");
-                return false;
-            }
-            const deleteEvent = new BeforeDeleteItemEvent(item);
-            this.DeleteItemEvent.emit(deleteEvent);
-            if (deleteEvent.Cancel) {
-                //parent will handle deletion, so we can return early
-                return true;
-            }
-            const entity = item.Data;
-            const deleteResult = yield entity.Delete();
-            if (!deleteResult) {
-                LogError(`Unable to delete ${item.Name}`, undefined, entity.LatestResult);
-                this.sharedService.CreateSimpleNotification(`Unable to delete ${item.Name}`, "error", 2500);
-                return false;
-            }
-            return true;
-        });
+    async onConfirmDeleteItem(shouldDelete) {
+        if (!this.selectedItem || !shouldDelete) {
+            LogError("Selected item is not set or shouldDelete is false");
+            return;
+        }
+        this.deleteDialogOpened = false;
+        let item = this.selectedItem;
+        let success = false;
+        if (item.Type === ItemType.Folder && this._currentDeleteOrUnlinkState) {
+            success = await this.deleteFolder(item);
+        }
+        else if (item.Type === ItemType.Resource && this._currentDeleteOrUnlinkState) {
+            success = await this.deleteResource(item);
+        }
+        else if (item.Type === ItemType.Resource && !this._currentDeleteOrUnlinkState) {
+            success = await this.unlinkResource(item);
+        }
+        this.selectedItem = null;
+        if (success) {
+            await this.Refresh();
+        }
     }
-    unlinkResource(item) {
-        return __awaiter(this, void 0, void 0, function* () {
+    async deleteFolder(item) {
+        const folder = item.Data;
+        if (!folder || !folder.CategoryEntity) {
+            LogError("Folder or CategoryEntity is not set, cannot delete folder");
+            this.sharedService.CreateSimpleNotification("Unable to delete folder", "error", 2500);
+            return false;
+        }
+        const hasChildren = await this.doesFolderHaveChildren(folder.ID);
+        if (hasChildren) {
+            this.sharedService.CreateSimpleNotification(`Unable to delete Folder ${folder.Name} because it has children`, "error", 2500);
+            return false;
+        }
+        const categoryEntity = folder.CategoryEntity;
+        const deleteResult = await categoryEntity.Delete();
+        if (!deleteResult) {
+            LogError(`Unable to delete folder ${folder.Name}`, undefined, categoryEntity.LatestResult);
+            this.sharedService.CreateSimpleNotification(`unable to delete folder ${folder.Name}.`, "error", 2500);
+            return false;
+        }
+        this.sharedService.CreateSimpleNotification(`Successfully deleted folder ${folder.Name}`, "info", 2500);
+        return true;
+    }
+    async deleteResource(item) {
+        let genericEntity = item.Data;
+        if (!genericEntity) {
+            LogError("Item Data is not set, cannot delete resource");
+            return false;
+        }
+        const deleteEvent = new BeforeDeleteItemEvent(item);
+        this.DeleteItemEvent.emit(deleteEvent);
+        if (deleteEvent.Cancel) {
+            //parent will handle deletion, so we can return early
             return true;
-            // // remove the link by removing the Resource Link record
-            // if (item.ResourceLinkID) {
-            //   const md = new Metadata();
-            //   const link = await md.GetEntityObject<ResourceLinkEntity>("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* () {
-            if (!this.ResourceType.CategoryEntity) {
-                throw new Error("ResourceType.CategoryEntity is not set, cannot check for children");
-            }
-            const rv = new RunView();
-            const folderResult = yield rv.RunView({
-                EntityName: this.ResourceType.CategoryEntity,
-                ExtraFilter: `ParentID ='${folderID}'`
-            });
-            if (!folderResult.Success) {
-                throw new Error(`Unable to fetch children for folder ${folderID}. Reason: ${folderResult.ErrorMessage}`);
-            }
-            return folderResult.Results.length > 0;
+        }
+        const entity = item.Data;
+        const deleteResult = await entity.Delete();
+        if (!deleteResult) {
+            LogError(`Unable to delete ${item.Name}`, undefined, entity.LatestResult);
+            this.sharedService.CreateSimpleNotification(`Unable to delete ${item.Name}`, "error", 2500);
+            return false;
+        }
+        return true;
+    }
+    async unlinkResource(item) {
+        return true;
+        // // remove the link by removing the Resource Link record
+        // if (item.ResourceLinkID) {
+        //   const md = new Metadata();
+        //   const link = await md.GetEntityObject<ResourceLinkEntity>("Resource Links");
+        //   if (await link.Load(item.ResourceLinkID))
+        //     return await link.Delete();  
+        //   else
+        //     return false;
+        // }
+        // else
+        //   return false;
+    }
+    async doesFolderHaveChildren(folderID) {
+        if (!this.ResourceType.CategoryEntity) {
+            throw new Error("ResourceType.CategoryEntity is not set, cannot check for children");
+        }
+        const rv = new RunView();
+        const folderResult = await rv.RunView({
+            EntityName: this.ResourceType.CategoryEntity,
+            ExtraFilter: `ParentID ='${folderID}'`
         });
+        if (!folderResult.Success) {
+            throw new Error(`Unable to fetch children for folder ${folderID}. Reason: ${folderResult.ErrorMessage}`);
+        }
+        return folderResult.Results.length > 0;
     }
     changeViewMode(mode) {
         this.DisplayMode = mode;
@@ -777,14 +757,12 @@ export class ResourceBrowserComponent {
             this.EditItemEvent.emit(event);
         }
     }
-    onDropdownItemClick(dropdownItem) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!dropdownItem || !dropdownItem.Action) {
-                LogError("Dropdown item or action is not set");
-                return;
-            }
-            dropdownItem.Action();
-        });
+    async onDropdownItemClick(dropdownItem) {
+        if (!dropdownItem || !dropdownItem.Action) {
+            LogError("Dropdown item or action is not set");
+            return;
+        }
+        dropdownItem.Action();
     }
     toggleCopyFromView() {
         this.copyFromDialogOpened = !this.copyFromDialogOpened;
@@ -818,53 +796,53 @@ export class ResourceBrowserComponent {
         }
         return "";
     }
+    static ɵfac = function ResourceBrowserComponent_Factory(t) { return new (t || ResourceBrowserComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceBrowserComponent, selectors: [["mj-resource-browser"]], inputs: { ResourceTypeName: "ResourceTypeName", EnableCategories: "EnableCategories", CategoryEntityID: "CategoryEntityID", CurrentCategoryID: "CurrentCategoryID", EnableItemEdit: "EnableItemEdit", EnableItemDelete: "EnableItemDelete", EnableRemoveLink: "EnableRemoveLink", Title: "Title", ItemFilter: "ItemFilter", OrderBy: "OrderBy", NewItemOptions: "NewItemOptions", DisplayMode: "DisplayMode" }, outputs: { ResourceSelected: "ResourceSelected", CategoryChanged: "CategoryChanged", DisplayModeChanged: "DisplayModeChanged", NavigateToParentEvent: "NavigateToParentEvent", EditItemEvent: "EditItemEvent", DeleteItemEvent: "DeleteItemEvent" }, decls: 25, vars: 8, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "data"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Description", "title", "Description"], ["field", "Type", "title", "Type"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width"], ["text", "Name"], ["placeholder", "Enter a folder name", 3, "valueChange", "value"], ["text", "Description"], ["placeholder", "Enter a Description", 3, "valueChange", "value"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn"]], template: function ResourceBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
+            i0.ɵɵtemplate(4, ResourceBrowserComponent_Conditional_4_Template, 2, 0);
+            i0.ɵɵelementStart(5, "h4");
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(7, ResourceBrowserComponent_Conditional_7_Template, 3, 1, "kendo-dropdownbutton", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 4)(9, "div", 7)(10, "kendo-textbox", 8, 0);
+            i0.ɵɵlistener("keyup", function ResourceBrowserComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r5 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r5.value)); });
+            i0.ɵɵtemplate(12, ResourceBrowserComponent_ng_template_12_Template, 1, 0, "ng-template", 9);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 10)(14, "button", 11);
+            i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("List")); });
+            i0.ɵɵelement(15, "span", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 13);
+            i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("Tile")); });
+            i0.ɵɵelement(17, "span", 14);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(18, "div", 15);
+            i0.ɵɵtemplate(19, ResourceBrowserComponent_Conditional_19_Template, 1, 0, "kendo-loader", 16)(20, ResourceBrowserComponent_Conditional_20_Template, 2, 1);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(21, ResourceBrowserComponent_kendo_dialog_21_Template, 10, 4, "kendo-dialog", 17)(22, ResourceBrowserComponent_kendo_dialog_22_Template, 13, 6, "kendo-dialog", 18);
+            i0.ɵɵelement(23, "mj-entity-form-dialog", 19, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.CurrentCategoryID ? 4 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.Title);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ItemOptions.length > 0 ? 7 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("clearButton", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("showSeparator", true);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.IsLoading ? 19 : 20);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.upsertFolderDialogVisible);
+        } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.LabelComponent, i9.CardComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective, i10.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 }
-ResourceBrowserComponent.ɵfac = function ResourceBrowserComponent_Factory(t) { return new (t || ResourceBrowserComponent)(i0.ɵɵdirectiveInject(i1.SharedService)); };
-ResourceBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ResourceBrowserComponent, selectors: [["mj-resource-browser"]], inputs: { ResourceTypeName: "ResourceTypeName", EnableCategories: "EnableCategories", CategoryEntityID: "CategoryEntityID", CurrentCategoryID: "CurrentCategoryID", EnableItemEdit: "EnableItemEdit", EnableItemDelete: "EnableItemDelete", EnableRemoveLink: "EnableRemoveLink", Title: "Title", ItemFilter: "ItemFilter", OrderBy: "OrderBy", NewItemOptions: "NewItemOptions", DisplayMode: "DisplayMode" }, outputs: { ResourceSelected: "ResourceSelected", CategoryChanged: "CategoryChanged", DisplayModeChanged: "DisplayModeChanged", NavigateToParentEvent: "NavigateToParentEvent", EditItemEvent: "EditItemEvent", DeleteItemEvent: "DeleteItemEvent" }, decls: 25, vars: 8, consts: [["searchInput", ""], ["entityFormDialog", ""], [1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], [1, "title-flex-display"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "data"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "close", 4, "ngIf"], ["Mode", "complete"], ["title", "Parent", 1, "title-folder", "fa-solid", "fa-arrow-left", "fa-2xl", "breadcrumb-icon", 3, "click"], ["title", "Folder", 1, "title-folder", "fa-regular", "fa-folder", "fa-2xl"], ["textField", "Text", "themeColor", "info", 1, "custom-dropdwn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "kendoGridBinding"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [3, "cellClick", "kendoGridBinding"], ["field", "Name", "title", "Name"], ["field", "Description", "title", "Description"], ["field", "Type", "title", "Type"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn"], ["title", "Remove Link to Shared Item", 1, "list-btn"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], ["title", "Remove Link to Shared Item", 1, "list-btn", 3, "click"], [1, "fa-solid", "fa-link-slash", 2, "color", "rgb(19, 92, 201)"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], ["title", "Edit Item", 1, "list-btn"], ["title", "Delete Item", 1, "list-btn"], [3, "click"], [2, "color", "rgb(19, 92, 201)", 3, "title", "ngClass"], [3, "title", "ngClass"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], ["title", "Edit Item", 1, "list-btn", 3, "click"], ["title", "Delete Item", 1, "list-btn", 3, "click"], ["title", "Confirm", 1, "dialog-wrapper", 3, "close", "minWidth", "width"], [1, "k-m-7.5", "k-text-center"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width"], ["text", "Name"], ["placeholder", "Enter a folder name", 3, "valueChange", "value"], ["text", "Description"], ["placeholder", "Enter a Description", 3, "valueChange", "value"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn"]], template: function ResourceBrowserComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
-        i0.ɵɵtemplate(4, ResourceBrowserComponent_Conditional_4_Template, 2, 0);
-        i0.ɵɵelementStart(5, "h4");
-        i0.ɵɵtext(6);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(7, ResourceBrowserComponent_Conditional_7_Template, 3, 1, "kendo-dropdownbutton", 6);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(8, "div", 4)(9, "div", 7)(10, "kendo-textbox", 8, 0);
-        i0.ɵɵlistener("keyup", function ResourceBrowserComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r5 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r5.value)); });
-        i0.ɵɵtemplate(12, ResourceBrowserComponent_ng_template_12_Template, 1, 0, "ng-template", 9);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(13, "div", 10)(14, "button", 11);
-        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("List")); });
-        i0.ɵɵelement(15, "span", 12);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(16, "button", 13);
-        i0.ɵɵlistener("click", function ResourceBrowserComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeViewMode("Tile")); });
-        i0.ɵɵelement(17, "span", 14);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(18, "div", 15);
-        i0.ɵɵtemplate(19, ResourceBrowserComponent_Conditional_19_Template, 1, 0, "kendo-loader", 16)(20, ResourceBrowserComponent_Conditional_20_Template, 2, 1);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(21, ResourceBrowserComponent_kendo_dialog_21_Template, 10, 4, "kendo-dialog", 17)(22, ResourceBrowserComponent_kendo_dialog_22_Template, 13, 6, "kendo-dialog", 18);
-        i0.ɵɵelement(23, "mj-entity-form-dialog", 19, 1);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵconditional(ctx.CurrentCategoryID ? 4 : -1);
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(ctx.Title);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.ItemOptions.length > 0 ? 7 : -1);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("clearButton", true);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("showSeparator", true);
-        i0.ɵɵadvance(7);
-        i0.ɵɵconditional(ctx.IsLoading ? 19 : 20);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.deleteDialogOpened);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("ngIf", ctx.upsertFolderDialogVisible);
-    } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.LabelComponent, i9.CardComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective, i10.EntityFormDialogComponent], styles: [".card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n   .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n  .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n  .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper[_ngcontent-%COMP%] {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n  .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text,   .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}\n  .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n  .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n  .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n  .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n  .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n  .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n  .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n  .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n  .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n  .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n  .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n  .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n  .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n  .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n  .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n  .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n.card-wrapper[_ngcontent-%COMP%] {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small[_ngcontent-%COMP%] {\n    padding-top: 10px;\n}\n\n.cursor-pointer[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.title-folder[_ngcontent-%COMP%] {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n.breacrumb-icon[_ngcontent-%COMP%]:hover {\n    color: var(--primary-color);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceBrowserComponent, [{
         type: Component,
         args: [{ selector: 'mj-resource-browser', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(CurrentCategoryID){\n          <span title=\"Parent\" class=\"title-folder fa-solid fa-arrow-left fa-2xl breadcrumb-icon\" (click)=\"goToParent()\"></span> \n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{Title}}</h4>\n      </div>\n      @if(ItemOptions.length > 0){\n        <kendo-dropdownbutton \n          class=\"custom-dropdwn\" \n          (itemClick)=\"onDropdownItemClick($event)\" \n          [data]=\"ItemOptions\" \n          textField=\"Text\"\n          themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n              Create New\n        </kendo-dropdownbutton> \n      }\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('List')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('Tile')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      @if (IsLoading) {\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n      }\n      @else {\n        @if(DisplayMode === 'List'){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"Items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Description\" title=\"Description\"></kendo-grid-column>\n            <kendo-grid-column field=\"Type\" title=\"Type\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(EnableItemEdit && (!dataItem.IsLink || dataItem.LinkPermissionLevel === 'Owner' || dataItem.LinkPermissionLevel === 'Edit')) {\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!dataItem.IsLike || dataItem.LinkPermissionLevel === 'Owner')) {\n                    <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>  \n                  }\n                  @if(EnableRemoveLink && dataItem.IsLink) {\n                    <button (click)=\"unlinkItem(dataItem)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else {\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of Items; track item) {\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(EnableItemEdit && (!item.IsLink || item.LinkPermissionLevel === 'Owner' || item.LinkPermissionLevel === 'Edit')) {\n                    <button (click)=\"editItem(item)\" class=\"list-btn\" title=\"Edit Item\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  @if(EnableItemDelete && (!item.IsLink || item.LinkPermissionLevel === 'Owner') ) {\n                    <button (click)=\"deleteItem(item)\" class=\"list-btn\" title=\"Delete Item\">\n                      <span class=\"fa-regular fa-trash-can\"></span>\n                    </button>                    \n                  }\n                  @else if (EnableRemoveLink && item.IsLink) {\n                    <button (click)=\"unlinkItem(item)\" class=\"list-btn\" title=\"Remove Link to Shared Item\" >\n                      <span class=\"fa-solid fa-link-slash\" style=\"color: rgb(19, 92, 201);\"></span>\n                    </button>                    \n                  }\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    @if(item.IsLink) {\n                      <i [title]=\"item.Name + '(Shared)'\" [ngClass]=\"getIconForResourceType(item)\" style=\"color: rgb(19, 92, 201);\"></i>\n                    }\n                    @else {\n                      <span [title]=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\n                    }\n                    <div class=\"padding-top-small\">\n                      <h5 kendoCardTitle>{{ item.Name }}</h5>\n                      <p kendoCardSubtitle>{{ item.Description }}</p>\n                    </div>\n                </kendo-card-body>\n              </kendo-card>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <kendo-dialog \n  [minWidth]=\"450\"\n  [width]=\"650\"\n  class=\"dialog-wrapper\" \n  title=\"Confirm\" \n  *ngIf=\"deleteDialogOpened\" \n  (close)=\"onConfirmDeleteItem(false)\">\n    <p class=\"k-m-7.5 k-text-center\">\n      Are you sure you want to {{(selectedItem?.IsLink && selectedItem?.LinkPermissionLevel === 'Owner') || !selectedItem?.IsLink ? 'delete' : 'unlink'}} <b>{{selectedItem?.Name}}?</b>\n    </p>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"onConfirmDeleteItem(true)\" kendoButton themeColor=\"info\">\n        Yes\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No \n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n\n  <kendo-dialog \n    [title]=\"selectedFolder ? 'Edit Folder' : 'Create new folder'\" \n    *ngIf=\"upsertFolderDialogVisible\" \n    (close)=\"toggleUpsertFolderView(false, false)\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-label text=\"Name\">\n      <kendo-textbox [value]=\"upsertNewFolderName\" placeholder=\"Enter a folder name\" (valueChange)=\"onUpsertFolderNameKeyup($event)\"/>\n    </kendo-label>\n  </div>\n  <br>\n  <div class=\"search\">\n    <kendo-label text=\"Description\">\n      <kendo-textbox [value]=\"upsertNewFolderDescription\" placeholder=\"Enter a Description\" (valueChange)=\"onUpsertFolderDescriptionKeyup($event)\"/>\n    </kendo-label>\n  </div>\n  <kendo-dialog-actions class=\"popup-actions-btn\">\n    @if(selectedFolder){\n      <button class=\"cancel-btn\" (click)=\"updateFolder()\" kendoButton themeColor=\"info\">\n        Update\n      </button>\n    }\n    @else {\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n    }\n    <button  class=\"yes-btn\" (click)=\"toggleUpsertFolderView(false, false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n      Cancel\n    </button>\n  </kendo-dialog-actions>\n  </kendo-dialog>\n  <mj-entity-form-dialog\n    #entityFormDialog\n    Mode=\"complete\"\n  >\n  </mj-entity-form-dialog>\n</div>\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\n    margin: 0 !important;\n    font-size: 36px !important;\n    line-height: 42px !important;\n    color: var(--black) !important;\n}\n ::ng-deep .card-header-entity .add-item .k-button {\n    border: 1px solid var(--border-blue) !important;\n    background: var(--white-color) !important;\n    color: var(--border-blue);\n    font-weight: 500 ;\n    font-size: 16px ;\n    border-radius: 10px;\n    line-height: 34px;\n}\n::ng-deep .card-header-entity .add-item .k-button:hover {\n    background: var(--border-blue) !important;\n    color: var(--white-color);\n}\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\n    fill: var(--white-color) !important;\n}\n .title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n .title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n }\n .main-fav-wrapper {\n    background: #fff;\n    padding: 20px;\n }\n .filter-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    gap: 14px;\n    align-items: center;\n}\n .title-wrapper .search  input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n\n }\n    .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n }\n .title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\n    border: 1px solid var(--gray-color);\n    border-radius: 8px;   padding: 10px 25px;\n    background: var(--white-color);\n    color: var(--sideNav);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\n    padding: 16px !important;\n    position: relative;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    top:12px;\n    right: 12px;\n    z-index: 9;\n}\n.grid-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\n    width: 38px;\n    height: 38px;\n    background: #000;\n    min-width: 38px;\n    border: 1px solid var(--gray-color);\n    border-radius: 8px; \n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    cursor: pointer;\n}\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\n    border: 1px solid var(--border-active);\n}\n\n\n::ng-deep .main-area .card-list .card-wrapper:hover {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border: 1px solid var(--border-active);\n}\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\n    color: var(--border-blue);\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\n    color: var(--sideNav);\n    font-size: 14px;\n    line-height: 16px;\n    height: auto;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n\n}\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\n    font-size: 18px;\n    line-height: 21px;\n    color: var(--text-darked);\n    font-weight: 600;\n}\n.breadcrumb-wrap {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 0;\n}\n.breadcrumb-wrap span {\n    font-size: 16px;\n    line-height: 18px;\n    font-weight: 400;\n    color: var(--black);\n}\n::ng-deep .k-menu-popup {\n    box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\n    border-radius: 10px;\n    padding: 16px;\n}\n\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\n    box-shadow: none !important;\n} \n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\n    background: transparent !important;\n}\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\n    color: var(--primary-color);\n    background: transparent !important;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn button {\n    flex: 1;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn {\n    display: flex;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\n    background: var(--primary-color);\n    color: var(--white-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    border: 1px solid transparent;\n\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\n    border:1px solid var(--primary-color);\n    background: transparent;\n    color: var(--primary-color);\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 10px;\n    box-shadow: none;\n}\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\n    box-shadow: none !important;\n}\n::ng-deep .dialog-wrapper .k-window-title {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 36px;\n    text-align: left;\n    color: var(--text-darked);\n}\n::ng-deep .dialog-wrapper p {\n    font-size: 16px;\n    font-weight: 500;\n    line-height: 20px;\n    text-align: left;\n    color: var(--black);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n.card-wrapper {\n    min-width: 230px;\n    height: 150px;\n    min-height: 125px;\n}\n\n.padding-top-small {\n    padding-top: 10px;\n}\n\n.cursor-pointer {\n    cursor: pointer;\n}\n\n.title-folder {\n    padding-right: 20px;\n    margin: auto;\n}\n\n.title-flex-display {\n    display: flex;\n    flex-direction: row;\n}\n\n.breadcrumb-icon {\n    cursor: pointer;\n}\n.breacrumb-icon:hover {\n    color: var(--primary-color);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]