@memberjunction/ng-explorer-core 1.2.1 → 1.3.0

package/dist/app-routing.module.d.ts

@@ -0,0 +1,28 @@
+import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { SharedService } from '@memberjunction/ng-shared';
+import { DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+export declare class CustomReuseStrategy implements RouteReuseStrategy {
+    storedRoutes: {
+        [key: string]: DetachedRouteHandle;
+    };
+    shouldDetach(route: ActivatedRouteSnapshot): boolean;
+    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
+    shouldAttach(route: ActivatedRouteSnapshot): boolean;
+    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
+    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
+}
+export declare class ResourceResolver implements Resolve<void> {
+    private sharedService;
+    constructor(sharedService: SharedService);
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ResourceResolver, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ResourceResolver>;
+}
+export declare class AppRoutingModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppRoutingModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AppRoutingModule, never, [typeof i1.RouterModule], [typeof i1.RouterModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AppRoutingModule>;
+}
+//# sourceMappingURL=app-routing.module.d.ts.map

package/dist/app-routing.module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-routing.module.d.ts","sourceRoot":"","sources":["../src/app-routing.module.ts"],"names":[],"mappings":"AACA,OAAO,EAAwB,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAkB7G,OAAO,EAAc,aAAa,EAAgB,MAAM,2BAA2B,CAAC;AAEpF,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;;AAE1E,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,mBAAmB,CAAA;KAAE,CAAM;IAG1D,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAMpD,KAAK,CAAC,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,mBAAmB,GAAG,IAAI;IAOvE,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAOpD,QAAQ,CAAC,KAAK,EAAE,sBAAsB,GAAG,mBAAmB,GAAG,IAAI;IAQnE,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,EAAE,IAAI,EAAE,sBAAsB,GAAG,OAAO;CAGxF;AAED,qBAGa,gBAAiB,YAAW,OAAO,CAAC,IAAI,CAAC;IACxC,OAAO,CAAC,aAAa;gBAAb,aAAa,EAAE,aAAa;IAEhD,OAAO,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI;yCAH7D,gBAAgB;6CAAhB,gBAAgB;CA2D5B;AAgDD,qBAIa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAG"}

package/dist/app-routing.module.js

@@ -0,0 +1,177 @@
+import { Injectable, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SingleApplicationComponent, SingleEntityComponent, SingleRecordComponent, HomeComponent, UserNotificationsComponent, DataBrowserComponent, ReportBrowserComponent, DashboardBrowserComponent, AuthGuardService as AuthGuard, FilesComponent, QueryBrowserComponent, } from './public-api';
+import { SettingsComponent } from '@memberjunction/ng-explorer-settings';
+import { LogError } from '@memberjunction/core';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
+import { SkipChatComponent } from '@memberjunction/ng-ask-skip';
+import { EventCodes, ResourceData } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/router";
+export class CustomReuseStrategy {
+    constructor() {
+        this.storedRoutes = {};
+    }
+    // Determines if a route should be detached and stored
+    shouldDetach(route) {
+        var _a;
+        // Store the route if it's an "askskip" route
+        return route.routeConfig && ((_a = route.routeConfig.path) === null || _a === void 0 ? void 0 : _a.includes('askskip')) ? true : false;
+    }
+    // Stores the detached route
+    store(route, handle) {
+        if (route.routeConfig && route.routeConfig.path) {
+            this.storedRoutes[route.routeConfig.path] = handle;
+        }
+    }
+    // Determines if a stored route should be reattached
+    shouldAttach(route) {
+        var _a;
+        // Reattach if we have a stored route for the incoming route
+        if ((_a = route.routeConfig) === null || _a === void 0 ? void 0 : _a.path)
+            return !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];
+        else
+            return false;
+    }
+    // Retrieves the stored route; null means no stored route for this path
+    retrieve(route) {
+        if (!route.routeConfig || (route.routeConfig.path && !this.storedRoutes[route.routeConfig.path])) {
+            return null;
+        }
+        else if (route.routeConfig.path)
+            return this.storedRoutes[route.routeConfig.path];
+        else
+            return null;
+    }
+    // Determines if the route should be reused
+    shouldReuseRoute(future, curr) {
+        return future.routeConfig === curr.routeConfig;
+    }
+}
+export class ResourceResolver {
+    constructor(sharedService) {
+        this.sharedService = sharedService;
+    }
+    resolve(route, state) {
+        var _a;
+        let resourceType = route.params['resourceType'];
+        const resourceRecordId = route.params['resourceRecordId'];
+        if (resourceType !== undefined && resourceRecordId !== undefined) {
+            resourceType = this.sharedService.mapResourceTypeRouteSegmentToName(resourceType);
+            const data = new ResourceData({
+                Name: '',
+                ResourceRecordID: resourceRecordId,
+                ResourceTypeID: (_a = this.sharedService.ResourceTypeByName(resourceType)) === null || _a === void 0 ? void 0 : _a.ID,
+                Configuration: {},
+            });
+            let code = EventCodes.AddDashboard;
+            switch (resourceType.trim().toLowerCase()) {
+                case 'user views':
+                    code = EventCodes.ViewClicked;
+                    break;
+                case 'dashboards':
+                    code = EventCodes.AddDashboard;
+                    break;
+                case 'reports':
+                    code = EventCodes.AddReport;
+                    break;
+                case 'queries':
+                    code = EventCodes.AddQuery;
+                    break;
+                case 'records':
+                    code = EventCodes.EntityRecordClicked;
+                    data.Configuration.Entity = route.queryParams['Entity'] || route.queryParams['entity']; // Entity or entity is specified for this resource type since resource record id isn't good enough
+                    if (data.Configuration.Entity === undefined || data.Configuration.Entity === null) {
+                        LogError('No Entity provided in the URL, must have Entity as a query parameter for this resource type');
+                        return; // should handle the error better - TO-DO
+                    }
+                    break;
+                case 'search results':
+                    code = EventCodes.RunSearch;
+                    data.Configuration.Entity = route.queryParams['Entity'] || route.queryParams['entity'];
+                    data.Configuration.SearchInput = resourceRecordId;
+                    data.ResourceRecordID = 0; /*tell nav to create new tab*/
+                    break;
+                default:
+                    // unsupported resource type
+                    return; // should handle the error better - TO-DO
+            }
+            MJGlobal.Instance.RaiseEvent({
+                component: this,
+                event: MJEventType.ComponentEvent,
+                eventCode: code,
+                args: data,
+            });
+        }
+        else {
+            // to-do - handle error
+        }
+    }
+}
+ResourceResolver.ɵfac = function ResourceResolver_Factory(t) { return new (t || ResourceResolver)(i0.ɵɵinject(i1.SharedService)); };
+ResourceResolver.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ResourceResolver, factory: ResourceResolver.ɵfac, providedIn: 'root' });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ResourceResolver, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], () => [{ type: i1.SharedService }], null); })();
+const routes = [
+    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
+    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
+    { path: 'askskip', component: SkipChatComponent, canActivate: [AuthGuard] },
+    { path: 'askskip/:conversationId', component: SkipChatComponent, canActivate: [AuthGuard] },
+    { path: 'dashboards', component: DashboardBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'dashboards/:folderID', component: DashboardBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'reports', component: ReportBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'reports/:folderID', component: ReportBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'queries', component: QueryBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'queries/:folderID', component: QueryBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'data', component: DataBrowserComponent, canActivate: [AuthGuard] },
+    { path: 'files', component: FilesComponent, canActivate: [AuthGuard] },
+    {
+        path: 'settings',
+        component: SettingsComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {
+                path: '',
+                component: SettingsComponent,
+                pathMatch: 'full',
+            },
+            {
+                path: '**',
+                component: SettingsComponent,
+            },
+        ],
+    },
+    { path: 'notifications', component: UserNotificationsComponent, canActivate: [AuthGuard] },
+    { path: 'app/:appName', component: SingleApplicationComponent, canActivate: [AuthGuard] },
+    { path: 'app/:appName/:entityName', component: SingleApplicationComponent, canActivate: [AuthGuard] },
+    { path: 'app/:appName/:entityName/:folderID', component: SingleApplicationComponent, canActivate: [AuthGuard] },
+    { path: 'entity/:entityName', component: SingleEntityComponent, canActivate: [AuthGuard] },
+    {
+        path: 'resource/:resourceType/:resourceRecordId',
+        resolve: { data: ResourceResolver },
+        canActivate: [AuthGuard],
+        component: SingleRecordComponent,
+    },
+    {
+        path: '**',
+        redirectTo: 'home',
+    },
+];
+export class AppRoutingModule {
+}
+AppRoutingModule.ɵfac = function AppRoutingModule_Factory(t) { return new (t || AppRoutingModule)(); };
+AppRoutingModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AppRoutingModule });
+AppRoutingModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [RouterModule.forRoot(routes, { initialNavigation: 'disabled' }), RouterModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AppRoutingModule, [{
+        type: NgModule,
+        args: [{
+                imports: [RouterModule.forRoot(routes, { initialNavigation: 'disabled' })],
+                exports: [RouterModule],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppRoutingModule, { imports: [i2.RouterModule], exports: [RouterModule] }); })();

package/dist/lib/favorites/favorites.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"favorites.component.d.ts","sourceRoot":"","sources":["../../../src/lib/favorites/favorites.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;;AAEnE,qBAKa,kBAAkB;IAIjB,OAAO,CAAC,MAAM;IAHnB,SAAS,EAAE,kBAAkB,EAAE,CAAM;IACrC,WAAW,EAAE,MAAM,CAAM;gBAEZ,MAAM,EAAE,MAAM;IAE5B,QAAQ;IA2Bd,iBAAiB,CAAC,GAAG,EAAE,kBAAkB;IAgCzC,uBAAuB,CAAC,GAAG,EAAE,GAAG;yCAjErB,kBAAkB;2CAAlB,kBAAkB;CA2E9B"}
+{"version":3,"file":"favorites.component.d.ts","sourceRoot":"","sources":["../../../src/lib/favorites/favorites.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;;AAEnE,qBAKa,kBAAkB;IAIjB,OAAO,CAAC,MAAM;IAHnB,SAAS,EAAE,kBAAkB,EAAE,CAAM;IACrC,WAAW,EAAE,MAAM,CAAM;gBAEZ,MAAM,EAAE,MAAM;IAE5B,QAAQ;IA6Bd,iBAAiB,CAAC,GAAG,EAAE,kBAAkB;IAgCzC,uBAAuB,CAAC,GAAG,EAAE,GAAG;yCAnErB,kBAAkB;2CAAlB,kBAAkB;CA6E9B"}

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

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component } from '@angular/core';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata, RunView, CompositeKey } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@progress/kendo-angular-listview";
@@ -61,12 +61,14 @@ export class FavoritesComponent {
             });
             this.favorites = viewResults.Results; // set the result in the list and let the below happen after async and it will update via data binding when done
             const input = this.favorites.map(fav => {
-                return { EntityName: fav.Entity, PrimaryKeyValues: [{ FieldName: 'ID', Value: fav.RecordID }] };
+                let compositeKey = new CompositeKey([{ FieldName: 'ID', Value: fav.RecordID }]);
+                return { EntityName: fav.Entity, CompositeKey: compositeKey };
             });
             const results = yield md.GetEntityRecordNames(input);
             if (results) {
                 results.forEach((result) => {
-                    const fav = this.favorites.find(f => f.Entity == result.EntityName && f.RecordID == result.PrimaryKeyValues[0].Value);
+                    let compositeKey = new CompositeKey(result.CompositeKey.KeyValuePairs);
+                    const fav = this.favorites.find(f => f.Entity == result.EntityName && f.RecordID == compositeKey.GetValueByIndex(0));
                     if (fav) {
                         // typecast fav to any so we can add the recordname into the object below
                         fav.RecordName = result.Success ? result.RecordName : fav.Entity + ' ' + fav.RecordID;

package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts

@@ -59,7 +59,7 @@ export declare class GenericBrowserListComponent implements OnInit {
     createFolderDialogOpened: boolean;
     private newFolderText;
     private resourceTypes;
-    data: {
+    createButtonDropdownData: {
         text: string;
     }[];
     constructor(sharedService: SharedService);

package/dist/lib/generic-browser-list/generic-browser-list.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generic-browser-list.component.d.ts","sourceRoot":"","sources":["../../../src/lib/generic-browser-list/generic-browser-list.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"generic-browser-list.component.d.ts","sourceRoot":"","sources":["../../../src/lib/generic-browser-list/generic-browser-list.component.ts"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Folder, Item, ItemType } from '../../generic/Item.types';
-import { Metadata, PrimaryKeyValue, RunView } from '@memberjunction/core';
+import { Metadata, KeyValuePair, RunView, CompositeKey } from '@memberjunction/core';
 import { AfterAddFolderEvent, AfterAddItemEvent, AfterDeleteFolderEvent, AfterDeleteItemEvent, BeforeAddFolderEvent, BeforeAddItemEvent, BeforeDeleteFolderEvent, BeforeDeleteItemEvent, BeforeUpdateFolderEvent, BeforeUpdateItemEvent } from '../../generic/Events.types';
 import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -34,7 +34,7 @@ function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 33);
     i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const dataItem_r10 = i0.ɵɵnextContext().$implicit; const ctx_r12 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r12.editItem(dataItem_r10)); });
-    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelement(1, "span", 35);
     i0.ɵɵelementEnd();
 } }
 function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template(rf, ctx) { if (rf & 1) {
@@ -43,7 +43,7 @@ function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_
     i0.ɵɵtemplate(1, GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Conditional_1_Template, 2, 0, "button", 32);
     i0.ɵɵelementStart(2, "button", 33);
     i0.ɵɵlistener("click", function GenericBrowserListComponent_Conditional_22_Conditional_0_ng_template_6_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const dataItem_r10 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r15.deleteItem(dataItem_r10)); });
-    i0.ɵɵelement(3, "i", 34);
+    i0.ɵɵelement(3, "span", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r9 = i0.ɵɵnextContext(3);
@@ -214,7 +214,7 @@ export class GenericBrowserListComponent {
         this.createFolderDialogOpened = false;
         this.newFolderText = "Sample Folder";
         this.resourceTypes = [];
-        this.data = [
+        this.createButtonDropdownData = [
             { text: "Folder" },
         ];
         this.filterItemsSubject
@@ -224,7 +224,7 @@ export class GenericBrowserListComponent {
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.disableAddButton) {
-                this.data.unshift({ text: this.resourceName });
+                this.createButtonDropdownData.unshift({ text: this.resourceName });
             }
             const md = new Metadata();
             const view = new RunView();
@@ -379,12 +379,13 @@ export class GenericBrowserListComponent {
             this.showLoader = true;
             const md = new Metadata();
             let folderEntity = yield md.GetEntityObject(this.CategoryEntityName);
-            let pkv = new PrimaryKeyValue();
+            let pkv = new KeyValuePair();
             pkv.FieldName = "ID";
             pkv.Value = folder.ID;
+            let compositeKey = new CompositeKey([pkv]);
             //create view browser component - this will be used to display views
             //then create a new component for applications that wraps around the view browser component 
-            let loadResult = yield folderEntity.InnerLoad([pkv]);
+            let loadResult = yield folderEntity.InnerLoad(compositeKey);
             if (!loadResult) {
                 this.sharedService.CreateSimpleNotification(`unable to fetch folder ${folder.Name}`, "error");
                 this.showLoader = false;
@@ -415,10 +416,11 @@ export class GenericBrowserListComponent {
             if (entityID && entityID > 0) {
                 const md = new Metadata();
                 let entityObject = yield md.GetEntityObject(this.ItemEntityName);
-                let pkv = new PrimaryKeyValue();
+                let pkv = new KeyValuePair();
                 pkv.FieldName = "ID";
                 pkv.Value = entityID;
-                let loadResult = yield entityObject.InnerLoad([pkv]);
+                let compositeKey = new CompositeKey([pkv]);
+                let loadResult = yield entityObject.InnerLoad(compositeKey);
                 if (loadResult) {
                     let deleteResult = yield entityObject.Delete();
                     if (deleteResult) {
@@ -491,8 +493,8 @@ export class GenericBrowserListComponent {
             item.Favorite = !item.Favorite;
             const md = new Metadata();
             let entityName = item.Type === ItemType.Folder ? this.CategoryEntityName : this.ItemEntityName;
-            let pkv = [{ FieldName: "ID", Value: item.Data.ID }];
-            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, pkv, item.Favorite);
+            let compositeKey = new CompositeKey([{ FieldName: "ID", Value: item.Data.ID }]);
+            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, entityName, compositeKey, item.Favorite);
         });
     }
     editItem(item) {
@@ -592,7 +594,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(ctx.title);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("data", ctx.data);
+        i0.ɵɵproperty("data", ctx.createButtonDropdownData);
         i0.ɵɵadvance(5);
         i0.ɵɵproperty("clearButton", true);
         i0.ɵɵadvance(2);
@@ -608,7 +610,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i2.NgClass, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.LoaderComponent, i6.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.CardComponent, i8.CardBodyComponent, i8.CardTitleDirective, i8.CardSubtitleDirective], 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-line-clamp: 2;\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}", ".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,   .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%], .footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowserListComponent, [{
         type: Component,
-        args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(selectedFolderID){\n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"data\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n      @if(!showLoader){\n        @if(displayAsGrid){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(disableEditButton){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <i class=\"fa-regular fa-pen-to-square\"></i>\n                    </button>\n                  }\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                    <i class=\"fa-regular fa-trash-can\"></i>\n                  </button>\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else{\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of items; track item){\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(!disableEditButton){\n                    <button (click)=\"editItem(item)\" class=\"list-btn\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\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 delete <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, Delete\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No, Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <kendo-dialog \n    title=\"Create new Folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n</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-line-clamp: 2;\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.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+        args: [{ selector: 'app-generic-browser-list', template: "\n<div class=\"generic-browser-list-container\">\n  <div class=\"main-fav-wrapper\">\n    <div class=\"title-wrapper\">\n      <div class=\"title-flex-display\">\n        @if(selectedFolderID){\n          <span title=\"Folder\" class=\"title-folder fa-regular fa-folder fa-2xl\"></span>\n        }\n        <h4>{{title}}</h4>\n      </div>\n      <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"createButtonDropdownData\" themeColor=\"info\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Create New\n      </kendo-dropdownbutton>\n    </div>\n    <div class=\"title-wrapper\">\n      <div class=\"search\">\n        <kendo-textbox \n        type=\"text\" \n        #searchInput \n        placeholder=\"Search\" \n        (keyup)=\"onKeyup(searchInput.value)\"\n        [clearButton]=\"true\"\n        size=\"large\"\n        rounded=\"large\"\n        fillMode=\"solid\"\n        >\n          <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n            <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      <div class=\"filter-wrapper\">\n        <!--\n        <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\n          Sort By Recents\n        </kendo-dropdownbutton>\n        -->\n        <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\n          <span class=\"fa-solid fa-bars\"></span>\n        </button>\n        <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\n          <span class=\"fa-solid fa-table-cells-large\"></span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"main-area\">\n      <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\n      @if(!showLoader){\n        @if(displayAsGrid){\n          <kendo-grid (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\n            <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\n            <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\n            <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\n            <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\n            <kendo-grid-column title=\"\">\n              <ng-template kendoGridCellTemplate let-dataItem>\n                <div class=\"grid-wrapper\">\n                  @if(disableEditButton){\n                    <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n              </ng-template>\n            </kendo-grid-column>\n          </kendo-grid>\n        }\n        @else{\n          <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\n            @for(item of items; track item){\n              <kendo-card class=\"card-wrapper cursor-pointer\">\n                <div class=\"list-item-icon\">\n                  @if(!disableEditButton){\n                    <button (click)=\"editItem(item)\" class=\"list-btn\">\n                      <span class=\"fa-regular fa-pen-to-square\"></span>\n                    </button>\n                  }\n                  <button (click)=\"deleteItem(item)\" class=\"list-btn\">\n                    <span class=\"fa-regular fa-trash-can\"></span>\n                  </button>\n                </div>\n                <kendo-card-body (click)=\"itemClick(item)\">\n                    <span (title)=\"item.Name\" [ngClass]=\"getIconForResourceType(item)\"></span>\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 delete <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, Delete\n      </button>\n      <button class=\"yes-btn\" (click)=\"onConfirmDeleteItem(false)\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        No, Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n  <kendo-dialog \n    title=\"Create new Folder\" \n    *ngIf=\"createFolderDialogOpened\" \n    (close)=\"toggleCreateFolderView()\"\n    [minWidth]=\"250\"\n    [width]=\"450\"\n    class=\"dialog-wrapper\"\n  >\n  <div class=\"search\">\n    <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\n  </div>\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n      <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\n        Create\n      </button>\n      <button  class=\"yes-btn\" (click)=\"toggleCreateFolderView()\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n        Cancel\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n</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-line-clamp: 2;\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.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
     }], () => [{ type: i1.SharedService }], { showLoader: [{
             type: Input
         }], itemType: [{

package/dist/lib/navigation/navigation.component.js

@@ -1090,7 +1090,7 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
         i0.ɵɵproperty("ngIf", !ctx.loading);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.contextMenuVisible);
-    } }, dependencies: [i3.NgClass, i3.NgIf, i3.NgStyle, i1.RouterOutlet, i5.LoaderComponent, i6.FillContainer, i7.DrawerComponent, i7.DrawerContainerComponent, i7.DrawerContentComponent, i7.DrawerItemTemplateDirective, i8.SkipButtonComponent, i9.MJTabStripComponent, i9.MJTabBodyComponent, i9.MJTabComponent, i10.ResourceContainerComponent], styles: [".navigation-wrap[_ngcontent-%COMP%] {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title[_ngcontent-%COMP%] {\n  margin-left: 10px;\n}\n\n.drawer-item-icon[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu[_ngcontent-%COMP%] {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item[_ngcontent-%COMP%]:hover {\n  background-color: #f1f1f1;\n}\n  .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n  .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource[_ngcontent-%COMP%] {\n  display: block;\n}"] });
+    } }, dependencies: [i1.RouterOutlet, i3.NgClass, i3.NgIf, i3.NgStyle, i5.LoaderComponent, i6.FillContainer, i7.DrawerComponent, i7.DrawerContainerComponent, i7.DrawerContentComponent, i7.DrawerItemTemplateDirective, i8.SkipButtonComponent, i9.MJTabStripComponent, i9.MJTabBodyComponent, i9.MJTabComponent, i10.ResourceContainerComponent], styles: [".navigation-wrap[_ngcontent-%COMP%] {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title[_ngcontent-%COMP%] {\n  margin-left: 10px;\n}\n\n.drawer-item-icon[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu[_ngcontent-%COMP%] {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item[_ngcontent-%COMP%]:hover {\n  background-color: #f1f1f1;\n}\n  .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n  .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource[_ngcontent-%COMP%] {\n  display: block;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
         type: Component,
         args: [{ selector: 'app-navigation', template: "<div class=\"navigation-wrap\" [ngClass]=\"{'waiting': loader}\"  #drawerWrapper>\n  <kendo-loader *ngIf=\"loading\" type=\"converging-spinner\" ></kendo-loader>\n  <kendo-drawer-container *ngIf=\"!loading\" >\n    <kendo-drawer\n      #drawer\n      [items]=\"drawerItems\"\n      [mode]=\"mode\"\n      [mini]=\"mini\"\n      [animation]=\"false\"\n      (select)=\"onDrawerSelect($event)\"\n      [autoCollapse]=\"false\"\n    >\n      <ng-template kendoDrawerItemTemplate let-item>\n        <div class=\"drawer-item-icon\">\n          <span [class]=\"item.icon\"></span>\n        </div>\n        <div class=\"item-descr-wrap\" *ngIf=\"!mini\">\n          <div>{{ item.text }}</div>\n          <span class=\"item-descr\">{{ item.description }}</span>\n        </div>\n      </ng-template>    \n    </kendo-drawer>\n    <kendo-drawer-content mjFillContainer>\n\n      <mj-tabstrip #mjTabstrip mjFillContainer (TabClosed)=\"handleTabClosed($event)\" (TabSelected)=\"handleTabSelected($event)\" (TabContextMenu)=\"handleTabContextMenu($event)\">\n        <mj-tab [TabCloseable]=\"false\">\n          Home\n        </mj-tab>\n        <mj-tab-body>\n          <router-outlet></router-outlet>\n        </mj-tab-body>\n\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab [TabCloseable]=\"true\">\n            @if(tab?.contentLoading) {\n              <span class=\"fa-regular fa-clock\"></span>\n            }\n            @else if (tab?.icon) {\n              <span [class]=\"tab.icon\"></span>\n            }\n            {{ tab.labelLoading ? 'Loading...' : tab.label }}\n          </mj-tab>\n        }\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab-body>\n            <mj-resource [Data]=\"tab.data\" [isVisible]=\"activeTabIndex - 1 === i\"\n              (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\n              (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\n              (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\n              mjFillContainer\n              class=\"tab-resource\"\n            ></mj-resource>\n          </mj-tab-body>  \n        }\n      </mj-tabstrip>\n    </kendo-drawer-content>\n  </kendo-drawer-container>\n\n  \n  <mj-skip-button\n    action=\"route\"\n  ></mj-skip-button>\n  <!-- Skip Button shows up through the above line of code -->\n</div>\n\n<div class=\"context-menu\" [ngStyle]=\"contextMenuStyle\" *ngIf=\"contextMenuVisible\">\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(1)\">Close All</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(2)\">Close Others</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(3)\">Close Tabs to the Right</div>\n </div>\n", styles: [".navigation-wrap {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title {\n  margin-left: 10px;\n}\n\n.drawer-item-icon {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item:hover {\n  background-color: #f1f1f1;\n}\n::ng-deep .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n::ng-deep .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource {\n  display: block;\n}"] }]

package/dist/lib/resource-wrappers/query-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/query-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;;AAIhF,wBAAgB,iBAAiB,SAEhC;AAED,qBAKa,aAAc,SAAQ,qBAAsB,YAAW,MAAM;IACtE,QAAQ,IAAI,IAAI;IAGV,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAJxD,aAAa;2CAAb,aAAa;CASzB"}
+{"version":3,"file":"query-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/query-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;;AAIhF,wBAAgB,iBAAiB,SAEhC;AAED,qBAKa,aAAc,SAAQ,qBAAsB,YAAW,MAAM;IACtE,QAAQ,IAAI,IAAI;IAGV,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAJxD,aAAa;2CAAb,aAAa;CAUzB"}

package/dist/lib/resource-wrappers/query-resource.component.js

@@ -16,7 +16,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Component } from '@angular/core';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { RegisterClass } from '@memberjunction/global';
-import { Metadata } from '@memberjunction/core';
+import { CompositeKey, Metadata } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../single-query/single-query.component";
 export function LoadQueryResource() {
@@ -28,7 +28,8 @@ let QueryResource = class QueryResource extends BaseResourceComponent {
     GetResourceDisplayName(data) {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
-            const name = yield md.GetEntityRecordName('Queries', [{ FieldName: "ID", Value: data.ResourceRecordID }]);
+            let compositeKey = new CompositeKey([{ FieldName: "ID", Value: data.ResourceRecordID }]);
+            const name = yield md.GetEntityRecordName('Queries', compositeKey);
             return `${name ? name : 'Query ID: ' + data.ResourceRecordID}`;
         });
     }

package/dist/lib/resource-wrappers/record-resource.component.d.ts

@@ -1,10 +1,10 @@
 import { BaseResourceComponent, ResourceData } from '@memberjunction/ng-shared';
-import { PrimaryKeyValue } from '@memberjunction/core';
+import { CompositeKey } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare function LoadRecordResource(): void;
 export declare class EntityRecordResource extends BaseResourceComponent {
-    get primaryKeyValues(): PrimaryKeyValue[];
-    static GetPrimaryKeyValues(data: ResourceData): PrimaryKeyValue[];
+    get CompositeKey(): CompositeKey;
+    static GetCompositeKey(data: ResourceData): CompositeKey;
     GetResourceDisplayName(data: ResourceData): Promise<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EntityRecordResource, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EntityRecordResource, "mj-record-resource", never, {}, {}, never, never, false, never>;

package/dist/lib/resource-wrappers/record-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/record-resource.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAC;;AAGjE,wBAAgB,kBAAkB,SAEjC;AAED,qBAKa,oBAAqB,SAAQ,qBAAqB;IAC3D,IAAW,gBAAgB,IAAI,eAAe,EAAE,CAE/C;WACa,mBAAmB,CAAC,IAAI,EAAE,YAAY,GAAG,eAAe,EAAE;IASlE,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAbxD,oBAAoB;2CAApB,oBAAoB;CAwBhC"}
+{"version":3,"file":"record-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/record-resource.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAY,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAE9D,wBAAgB,kBAAkB,SAEjC;AAED,qBAKa,oBAAqB,SAAQ,qBAAqB;IAC3D,IAAW,YAAY,IAAI,YAAY,CAEtC;WAEa,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,YAAY;IAYzD,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAjBxD,oBAAoB;2CAApB,oBAAoB;CA6BhC"}