@memberjunction/ng-explorer-core 1.8.1 → 2.1.1

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

@@ -27,6 +27,10 @@ interface DetachedRouteHandleExt extends DetachedRouteHandle {
     componentRef: ComponentRef<any>;
 }
 export declare class AppRoutingModule {
+    private router;
+    constructor(router: Router);
+    loadDynamicRoutes(): void;
+    protected innerLoadDynamicRoutes(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppRoutingModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<AppRoutingModule, never, [typeof i1.RouterModule], [typeof i1.RouterModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AppRoutingModule>;

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

@@ -1 +1 @@
-{"version":3,"file":"app-routing.module.d.ts","sourceRoot":"","sources":["../src/app-routing.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAwB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAwB,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,EAAoD,MAAM,iBAAiB,CAAC;AAoBvK,OAAO,EAAc,aAAa,EAAgB,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;;AAE1E,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,GAAG,IAAI,CAAA;KAAE,CAAM;IAGpE,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAMpD,KAAK,CAAC,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,GAAG,IAAI;IAYjF,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAUpD,QAAQ,CAAC,KAAK,EAAE,sBAAsB,GAAG,mBAAmB,GAAG,IAAI;IAgBnE,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,EAAE,IAAI,EAAE,sBAAsB,GAAG,OAAO;IAIvF,OAAO,CAAC,QAAQ;CAUjB;AAED,qBAGa,gBAAiB,YAAW,OAAO,CAAC,IAAI,CAAC;IACxC,OAAO,CAAC,aAAa;IAAiB,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAexE,OAAO,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI;yCAhB7D,gBAAgB;6CAAhB,gBAAgB;CAsF5B;AAmDD,UAAU,sBAAuB,SAAQ,mBAAmB;IAC1D,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,qBAKa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAG"}
+{"version":3,"file":"app-routing.module.d.ts","sourceRoot":"","sources":["../src/app-routing.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAwB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAwB,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,EAAoD,MAAM,iBAAiB,CAAC;AAoBvK,OAAO,EAAc,aAAa,EAAyC,MAAM,2BAA2B,CAAC;AAC7G,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;;;AAG1E,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,sBAAsB,GAAG,IAAI,CAAA;KAAE,CAAM;IAGpE,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAMpD,KAAK,CAAC,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,GAAG,IAAI;IAYjF,YAAY,CAAC,KAAK,EAAE,sBAAsB,GAAG,OAAO;IAUpD,QAAQ,CAAC,KAAK,EAAE,sBAAsB,GAAG,mBAAmB,GAAG,IAAI;IAgBnE,gBAAgB,CAAC,MAAM,EAAE,sBAAsB,EAAE,IAAI,EAAE,sBAAsB,GAAG,OAAO;IAIvF,OAAO,CAAC,QAAQ;CAUjB;AAED,qBAGa,gBAAiB,YAAW,OAAO,CAAC,IAAI,CAAC;IACxC,OAAO,CAAC,aAAa;IAAiB,OAAO,CAAC,MAAM;gBAA5C,aAAa,EAAE,aAAa,EAAU,MAAM,EAAE,MAAM;IAexE,OAAO,CAAC,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI;yCAhB7D,gBAAgB;6CAAhB,gBAAgB;CAsF5B;AAmDD,UAAU,sBAAuB,SAAQ,mBAAmB;IAC1D,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,qBAIa,gBAAgB;IACf,OAAO,CAAC,MAAM;gBAAN,MAAM,EAAE,MAAM;IAIlC,iBAAiB;cAWD,sBAAsB;yCAhB3B,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAoD5B"}

package/dist/app-routing.module.js

@@ -1,3 +1,12 @@
+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 { Injectable, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SingleApplicationComponent, SingleEntityComponent, SingleRecordComponent, HomeComponent, UserNotificationsComponent, DataBrowserComponent, ReportBrowserComponent, DashboardBrowserComponent, AuthGuardService as AuthGuard, FilesComponent, QueryBrowserComponent, ListViewComponent, SingleListDetailComponent } from './public-api';
@@ -5,7 +14,7 @@ import { SettingsComponent } from '@memberjunction/ng-explorer-settings';
 import { LogError, Metadata } from '@memberjunction/core';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
 import { SkipChatComponent } from '@memberjunction/ng-ask-skip';
-import { EventCodes, ResourceData } from '@memberjunction/ng-shared';
+import { EventCodes, ResourceData, BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
@@ -212,8 +221,56 @@ const routes = [
     },
 ];
 export class AppRoutingModule {
+    constructor(router) {
+        this.router = router;
+        this.loadDynamicRoutes();
+    }
+    loadDynamicRoutes() {
+        MJGlobal.Instance.GetEventListener(true) // true gets us replay of past events so we can "catch up" as needed
+            .subscribe((event) => {
+            // event handler
+            switch (event.event) {
+                case MJEventType.LoggedIn:
+                    this.innerLoadDynamicRoutes();
+            }
+        });
+    }
+    innerLoadDynamicRoutes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // gets called after we're logged in
+            const md = new Metadata();
+            const dynamicRoutes = md.VisibleExplorerNavigationItems.map(item => {
+                const registration = MJGlobal.Instance.ClassFactory.GetRegistration(BaseNavigationComponent, item.Name);
+                if (registration) {
+                    // remove the leading slash from the route if it exists
+                    const route = item.Route.startsWith('/') ? item.Route.substring(1) : item.Route;
+                    return {
+                        path: route,
+                        component: registration.SubClass,
+                        canActivate: [AuthGuard],
+                    };
+                }
+                else {
+                    throw new Error(`No registration found for Explorer Navigation Item: ${item.Name}`);
+                }
+            });
+            // Find and remove the wildcard route
+            const wildcardRouteIndex = routes.findIndex(route => { var _a; return ((_a = route.path) === null || _a === void 0 ? void 0 : _a.trim()) === '**'; });
+            const wildcardRoute = routes[wildcardRouteIndex];
+            if (wildcardRouteIndex > -1) {
+                routes.splice(wildcardRouteIndex, 1);
+            }
+            // create a combined routes array and make sure that we filter out any dynamic routes that are ALREADY in the router config
+            const newCombinedRoutes = [...routes, ...dynamicRoutes.filter(route => !routes.some(r => { var _a, _b; return ((_a = r.path) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) === ((_b = route.path) === null || _b === void 0 ? void 0 : _b.trim().toLowerCase()); }))];
+            // Re-add the wildcard route at the end
+            if (wildcardRoute) {
+                newCombinedRoutes.push(wildcardRoute);
+            }
+            this.router.resetConfig(newCombinedRoutes);
+        });
+    }
 }
-AppRoutingModule.ɵfac = function AppRoutingModule_Factory(t) { return new (t || AppRoutingModule)(); };
+AppRoutingModule.ɵfac = function AppRoutingModule_Factory(t) { return new (t || AppRoutingModule)(i0.ɵɵinject(i2.Router)); };
 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, [{
@@ -222,5 +279,5 @@ AppRoutingModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [RouterM
                 imports: [RouterModule.forRoot(routes, { initialNavigation: 'disabled' })],
                 exports: [RouterModule],
             }]
-    }], null, null); })();
+    }], () => [{ type: i2.Router }], null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AppRoutingModule, { imports: [i2.RouterModule], exports: [RouterModule] }); })();

package/dist/generic/Events.types.d.ts

@@ -139,4 +139,17 @@ export declare class AfterUpdateItemEvent extends BaseEvent {
     Item: Item;
     constructor(item: Item);
 }
+export declare class DropdownOptionClickEvent {
+    /**
+     * The text of the dropdown option that was clicked.
+     */
+    Text: string;
+    /**
+     * Signals to the source component that another component
+     * has handled responding to this event, and that the source
+     * component should do nothing.
+     */
+    Cancel: boolean;
+    constructor(text: string);
+}
 //# sourceMappingURL=Events.types.d.ts.map

package/dist/generic/Events.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Events.types.d.ts","sourceRoot":"","sources":["../../src/generic/Events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAE,MAAM,cAAc,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAcb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEpE,qBAAa,SAAS;IAClB;;OAEG;IACI,SAAS,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACI,MAAM,EAAE,OAAO,CAAC;gBAEX,SAAS,EAAE,UAAU;CAIpC;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;OAEG;IACI,UAAU,EAAE,MAAM,CAAC;gBAEd,UAAU,EAAE,MAAM;CAIjC;AAED,qBAAa,kBAAmB,SAAQ,SAAS;IAC7C;;OAEG;IACI,QAAQ,EAAE,MAAM,CAAC;gBAEZ,QAAQ,EAAE,MAAM;CAI/B;AAED,qBAAa,uBAAwB,SAAQ,SAAS;IAClD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,qBAAsB,SAAQ,SAAS;IAChD;;;;;;;;;OASG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,uBAAwB,SAAQ,SAAS;IAClD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,qBAAsB,SAAQ,SAAS;IAChD;;;;;;;;;OASG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,mBAAoB,SAAQ,SAAS;IAC9C;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,iBAAkB,SAAQ,SAAS;IAC5C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,sBAAuB,SAAQ,SAAS;IACjD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,sBAAuB,SAAQ,SAAS;IACjD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB"}
+{"version":3,"file":"Events.types.d.ts","sourceRoot":"","sources":["../../src/generic/Events.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAE,MAAM,cAAc,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAcb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEpE,qBAAa,SAAS;IAClB;;OAEG;IACI,SAAS,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACI,MAAM,EAAE,OAAO,CAAC;gBAEX,SAAS,EAAE,UAAU;CAIpC;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;OAEG;IACI,UAAU,EAAE,MAAM,CAAC;gBAEd,UAAU,EAAE,MAAM;CAIjC;AAED,qBAAa,kBAAmB,SAAQ,SAAS;IAC7C;;OAEG;IACI,QAAQ,EAAE,MAAM,CAAC;gBAEZ,QAAQ,EAAE,MAAM;CAI/B;AAED,qBAAa,uBAAwB,SAAQ,SAAS;IAClD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,qBAAsB,SAAQ,SAAS;IAChD;;;;;;;;;OASG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,uBAAwB,SAAQ,SAAS;IAClD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,qBAAsB,SAAQ,SAAS;IAChD;;;;;;;;;OASG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,mBAAoB,SAAQ,SAAS;IAC9C;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,iBAAkB,SAAQ,SAAS;IAC5C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,sBAAuB,SAAQ,SAAS;IACjD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,sBAAuB,SAAQ,SAAS;IACjD;;OAEG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,oBAAqB,SAAQ,SAAS;IAC/C;;;;;;OAMG;IACI,IAAI,EAAE,IAAI,CAAC;gBAEN,IAAI,EAAE,IAAI;CAIzB;AAED,qBAAa,wBAAwB;IACjC;;OAEG;IACI,IAAI,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACI,MAAM,EAAE,OAAO,CAAC;gBAEX,IAAI,EAAE,MAAM;CAI3B"}

package/dist/generic/Events.types.js

@@ -93,3 +93,9 @@ export class AfterUpdateItemEvent extends BaseEvent {
         this.Item = item;
     }
 }
+export class DropdownOptionClickEvent {
+    constructor(text) {
+        this.Text = text;
+        this.Cancel = false;
+    }
+}

package/dist/generic/Item.types.d.ts

@@ -24,14 +24,14 @@ export declare class TreeItem extends Item {
  * Report Categories, Query Categories, etc.
  */
 export declare class Folder {
-    ID: number;
-    ParentFolderID?: number | null;
+    ID: string;
+    ParentFolderID?: string | null;
     Name: string;
     Description: string | null;
-    constructor(id: number, folderName: string);
+    constructor(id: string, folderName: string);
 }
 export declare class TreeFolder extends Folder {
-    EntityID: number;
-    constructor(entityID: number, id: number, folderName: string);
+    EntityID: string;
+    constructor(entityID: string, id: string, folderName: string);
 }
 //# sourceMappingURL=Item.types.d.ts.map

package/dist/lib/app-view/application-view.component.d.ts

@@ -17,7 +17,7 @@ export declare class ApplicationViewComponent extends BaseBrowserComponent imple
     private cdr;
     entityRowRef: Element | undefined;
     viewPropertiesDialog: UserViewPropertiesDialogComponent;
-    categoryEntityID: number;
+    categoryEntityID: string;
     currentlySelectedAppEntity: EntityEntity | undefined;
     AppEntitySelectionDialogVisible: boolean;
     AllAppEntities: EntityEntity[];
@@ -25,6 +25,9 @@ export declare class ApplicationViewComponent extends BaseBrowserComponent imple
     UnselectedAppEntities: EntityEntity[];
     app: ApplicationInfo | undefined;
     userApp: UserApplicationEntity | undefined;
+    extraDropdownOptions: {
+        text: string;
+    }[];
     constructor(router: Router, route: ActivatedRoute, location: Location, sharedService: SharedService, cdr: ChangeDetectorRef);
     ngOnInit(): Promise<void>;
     IsEntitySelected(entity: EntityEntity): boolean;
@@ -48,7 +51,6 @@ export declare class ApplicationViewComponent extends BaseBrowserComponent imple
     }): Promise<void>;
     GoToApps(event: Event): Promise<void>;
     GoHome(event: Event): Promise<void>;
-    sortAppEntites(entities: EntityEntity[]): EntityEntity[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ApplicationViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ApplicationViewComponent, "mj-application-view", never, { "categoryEntityID": { "alias": "categoryEntityID"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/app-view/application-view.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"application-view.component.d.ts","sourceRoot":"","sources":["../../../src/lib/app-view/application-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,EAAwB,MAAM,eAAe,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,qBAAqB,EAA0C,eAAe,EAAc,MAAM,sBAAsB,CAAC;AAClI,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAA+B,kBAAkB,EAAkB,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC7K,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAU,IAAI,EAAY,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAC;AAC5F,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;AAEvF,qBAKa,wBAAyB,SAAQ,oBAAqB,YAAW,MAAM;IAenE,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,QAAQ;IAAY,OAAO,CAAC,aAAa;IAAiB,OAAO,CAAC,GAAG;IAdzH,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oBAAoB,EAAG,iCAAiC,CAAC;IAEtE,gBAAgB,EAAG,MAAM,CAAC;IAEnC,0BAA0B,EAAE,YAAY,GAAG,SAAS,CAAC;IAErD,+BAA+B,EAAE,OAAO,CAAS;IACjD,cAAc,EAAE,YAAY,EAAE,CAAM;IACpC,mBAAmB,EAAE,YAAY,EAAE,CAAM;IACzC,qBAAqB,EAAE,YAAY,EAAE,CAAM;IAC3C,GAAG,EAAE,eAAe,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;gBAE7B,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,QAAQ,EAAE,QAAQ,EAAU,aAAa,EAAE,aAAa,EAAU,GAAG,EAAE,iBAAiB;IAM9J,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAkFxB,gBAAgB,CAAC,MAAM,EAAE,YAAY;IAMrC,4BAA4B;IAKtB,gCAAgC,CAAC,IAAI,EAAE,OAAO;IA8DpD,wBAAwB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAStC,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC;IAqC9E,WAAW,CAAC,IAAI,EAAE,IAAI;IAc7B,eAAe,CAAC,IAAI,EAAE,qBAAqB;IAO3C,iBAAiB,CAAC,GAAG,EAAE,kBAAkB;IAYzC,OAAO,CAAC,qBAAqB;IAqB7B,OAAO,CAAC,WAAW;IAKZ,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI/C,aAAa,CAAC,KAAK,EAAE,kBAAkB;IAW1B,QAAQ,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IAWrD,2BAA2B,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAcvJ,QAAQ,CAAC,KAAK,EAAE,KAAK;IAKrB,MAAM,CAAC,KAAK,EAAE,KAAK;IAMzB,cAAc,CAAC,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE;yCA5U/C,wBAAwB;2CAAxB,wBAAwB;CAuVpC"}
+{"version":3,"file":"application-view.component.d.ts","sourceRoot":"","sources":["../../../src/lib/app-view/application-view.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAoB,MAAM,EAAwB,MAAM,eAAe,CAAC;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,qBAAqB,EAA0C,eAAe,EAAc,MAAM,sBAAsB,CAAC;AAClI,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAA+B,kBAAkB,EAAkB,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAC7K,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAU,IAAI,EAAY,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,yCAAyC,CAAC;AAC5F,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;AAEvF,qBAKa,wBAAyB,SAAQ,oBAAqB,YAAW,MAAM;IAkBnE,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,QAAQ;IAAY,OAAO,CAAC,aAAa;IAAiB,OAAO,CAAC,GAAG;IAjBzH,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,oBAAoB,EAAG,iCAAiC,CAAC;IAEtE,gBAAgB,EAAG,MAAM,CAAC;IAEnC,0BAA0B,EAAE,YAAY,GAAG,SAAS,CAAC;IAErD,+BAA+B,EAAE,OAAO,CAAS;IACjD,cAAc,EAAE,YAAY,EAAE,CAAM;IACpC,mBAAmB,EAAE,YAAY,EAAE,CAAM;IACzC,qBAAqB,EAAE,YAAY,EAAE,CAAM;IAC3C,GAAG,EAAE,eAAe,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,oBAAoB,EAAG;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,EAAE,CAE5C;gBAEmB,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,QAAQ,EAAE,QAAQ,EAAU,aAAa,EAAE,aAAa,EAAU,GAAG,EAAE,iBAAiB;IAM9J,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAyFxB,gBAAgB,CAAC,MAAM,EAAE,YAAY;IAMrC,4BAA4B;IAKtB,gCAAgC,CAAC,IAAI,EAAE,OAAO;IAgEpD,wBAAwB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAStC,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC;IAqC9E,WAAW,CAAC,IAAI,EAAE,IAAI;IAc7B,eAAe,CAAC,IAAI,EAAE,qBAAqB;IAO3C,iBAAiB,CAAC,GAAG,EAAE,kBAAkB;IAYzC,OAAO,CAAC,qBAAqB;IAqB7B,OAAO,CAAC,WAAW;IAKZ,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI/C,aAAa,CAAC,KAAK,EAAE,kBAAkB;IAW1B,QAAQ,CAAC,KAAK,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC;IAWrD,2BAA2B,CAAC,IAAI,EAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,sBAAsB,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAcvJ,QAAQ,CAAC,KAAK,EAAE,KAAK;IAKrB,MAAM,CAAC,KAAK,EAAE,KAAK;yCAlVhB,wBAAwB;2CAAxB,wBAAwB;CAuVpC"}

package/dist/lib/app-view/application-view.component.js

@@ -73,10 +73,10 @@ function ApplicationViewComponent_div_0_Conditional_26_div_0_Template(rf, ctx) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("items", ctx_r1.items)("categoryEntityID", ctx_r1.categoryEntityID)("title", ctx_r1.pageTitle)("CategoryEntityName", ctx_r1.categoryEntityName)("selectedFolderID", ctx_r1.selectedFolderID)("showLoader", ctx_r1.showLoader)("viewingResource", false)("displayAsGrid", ctx_r1.displayAsGrid);
+    i0.ɵɵproperty("items", ctx_r1.items)("categoryEntityID", ctx_r1.categoryEntityID)("title", ctx_r1.pageTitle)("extraDropdownOptions", ctx_r1.extraDropdownOptions)("CategoryEntityName", ctx_r1.categoryEntityName)("selectedFolderID", ctx_r1.selectedFolderID)("showLoader", ctx_r1.showLoader)("viewingResource", false)("displayAsGrid", ctx_r1.displayAsGrid);
 } }
 function ApplicationViewComponent_div_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Conditional_26_div_0_Template, 2, 8, "div", 25);
+    i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Conditional_26_div_0_Template, 2, 9, "div", 25);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngIf", ctx_r1.SelectedAppEntities.length > 0);
@@ -145,6 +145,9 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
         this.AllAppEntities = [];
         this.SelectedAppEntities = [];
         this.UnselectedAppEntities = [];
+        this.extraDropdownOptions = [
+            { text: 'View' }
+        ];
         this.categoryEntityName = "User View Categories";
         this.itemEntityName = "User Views";
     }
@@ -169,24 +172,31 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                     // next up we need to find the UserApplication record based on the app and the current user
                     const userAppResult = yield rv.RunView({
                         EntityName: "User Applications",
-                        ExtraFilter: `UserID=${md.CurrentUser.ID} AND ApplicationID=${this.app.ID}`,
+                        ExtraFilter: `UserID='${md.CurrentUser.ID}' AND ApplicationID='${this.app.ID}'`,
                         ResultType: 'entity_object'
                     });
                     if (!userAppResult || userAppResult.Success === false || userAppResult.Results.length === 0)
                         throw new Error('User Application Record for current user and selected application not found');
                     this.userApp = userAppResult.Results[0];
-                    const matches = this.app.ApplicationEntities.map(ae => md.Entities.find(e => e.ID === ae.EntityID)).filter(e => e); // filter out null entries
+                    const matches = this.app.ApplicationEntities
+                        .map(ae => md.Entities.find(e => e.ID === ae.EntityID))
+                        .filter(e => e) // filter out null entries  
+                        .sort((a, b) => {
+                        if (!a || !b) {
+                            return 0;
+                        }
+                        return a.Name.localeCompare(b.Name);
+                    }); // sort by name
                     // store the entire list of POSSIBLE app entities in this list
                     this.AllAppEntities = matches; // we filter out null above so this cast is safe;
                     const userAppEntities = yield rv.RunView({
                         EntityName: 'User Application Entities',
                         ResultType: 'entity_object',
-                        ExtraFilter: `UserApplicationID = ${this.userApp.ID}`,
-                        OrderBy: 'Sequence'
+                        ExtraFilter: `UserApplicationID = '${this.userApp.ID}'`,
+                        OrderBy: 'Sequence, Entity'
                     });
                     if (userAppEntities && userAppEntities.Success) {
-                        this.SelectedAppEntities = this.AllAppEntities.filter(e => userAppEntities.Results.some(uae => uae.EntityID === e.ID));
-                        this.SelectedAppEntities = this.sortAppEntites(this.SelectedAppEntities);
+                        this.SelectedAppEntities = userAppEntities.Results.map(uae => this.AllAppEntities.find(ae => uae.EntityID === ae.ID)).filter(val => val); // now we have our selected app entities and they're sorted properly
                         this.UnselectedAppEntities = this.AllAppEntities.filter(e => !this.SelectedAppEntities.some(sa => sa.ID === e.ID));
                         // special case - if we have NO user app entities and the application has entities that are marked as DefaultForNewUser=1 we will add them now
                         const defaultEntities = this.app.ApplicationEntities.filter(a => a.DefaultForNewUser);
@@ -241,7 +251,7 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                 const userAppEntities = yield rv.RunView({
                     EntityName: 'User Application Entities',
                     ResultType: 'entity_object',
-                    ExtraFilter: `UserApplicationID = ${this.userApp.ID}`,
+                    ExtraFilter: `UserApplicationID = '${this.userApp.ID}'`,
                     OrderBy: 'Sequence'
                 });
                 // userAppEntities.results is the current DB state, we need to now compare it to the SelectedAppEntities array
@@ -254,15 +264,17 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                     const e = this.SelectedAppEntities[index];
                     const existing = existingUserAppEntities.find(uae => uae.EntityID === e.ID);
                     if (existing) {
-                        existing.Sequence = index;
-                        userAppEntitiesToSave.push(existing);
+                        if (existing.Sequence !== index) {
+                            existing.Sequence = index;
+                            userAppEntitiesToSave.push(existing);
+                        }
                     }
                     else {
                         // this is a new app entity that the user has selected
                         const newApp = yield md.GetEntityObject("User Application Entities");
                         newApp.UserApplicationID = this.userApp.ID;
-                        newApp.EntityID = e.ID;
                         newApp.Sequence = index;
+                        newApp.EntityID = e.ID;
                         userAppEntitiesToSave.push(newApp);
                     }
                 }
@@ -312,7 +324,7 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
             this.showLoader = true;
             this.currentlySelectedAppEntity = entity;
             if (this.selectedFolderID) {
-                let viewResult = yield _super.RunView.call(this, this.categoryEntityName, `ID=${this.selectedFolderID}`);
+                let viewResult = yield _super.RunView.call(this, this.categoryEntityName, `ID='${this.selectedFolderID}'`);
                 if (viewResult.length > 0) {
                     this.pageTitle = viewResult[0].Name;
                 }
@@ -321,10 +333,10 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                 this.pageTitle = this.currentlySelectedAppEntity.Name;
             }
             const md = new Metadata();
-            const parentFolderIDFilter = this.selectedFolderID ? `ParentID=${this.selectedFolderID}` : 'ParentID IS NULL';
-            const categoryFilter = `UserID=${md.CurrentUser.ID} AND EntityID=${this.currentlySelectedAppEntity.ID} AND ` + parentFolderIDFilter;
-            const categoryIDFilter = this.selectedFolderID ? `CategoryID=${this.selectedFolderID}` : 'CategoryID IS NULL';
-            const userViewFilter = `UserID = ${md.CurrentUser.ID} AND EntityID = ${this.currentlySelectedAppEntity.ID} AND ` + categoryIDFilter;
+            const parentFolderIDFilter = this.selectedFolderID ? `ParentID='${this.selectedFolderID}'` : 'ParentID IS NULL';
+            const categoryFilter = `UserID='${md.CurrentUser.ID}' AND EntityID='${this.currentlySelectedAppEntity.ID}' AND ` + parentFolderIDFilter;
+            const categoryIDFilter = this.selectedFolderID ? `CategoryID='${this.selectedFolderID}'` : 'CategoryID IS NULL';
+            const userViewFilter = `UserID = '${md.CurrentUser.ID}' AND EntityID='${this.currentlySelectedAppEntity.ID}' AND ` + categoryIDFilter;
             yield _super.LoadData.call(this, {
                 sortItemsAfterLoad: true,
                 categoryItemFilter: categoryFilter,
@@ -438,20 +450,6 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
             this.router.navigate(['home']);
         });
     }
-    sortAppEntites(entities) {
-        entities.sort(function (a, b) {
-            const aName = a.Name.toLowerCase();
-            const bName = b.Name.toLowerCase();
-            if (aName < bName) {
-                return -1;
-            }
-            if (aName > bName) {
-                return 1;
-            }
-            return 0;
-        });
-        return entities;
-    }
 }
 ApplicationViewComponent.ɵfac = function ApplicationViewComponent_Factory(t) { return new (t || ApplicationViewComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Location), i0.ɵɵdirectiveInject(i3.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 ApplicationViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationViewComponent, selectors: [["mj-application-view"]], viewQuery: function ApplicationViewComponent_Query(rf, ctx) { if (rf & 1) {
@@ -461,14 +459,14 @@ ApplicationViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ap
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityRowRef = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewPropertiesDialog = _t.first);
-    } }, inputs: { categoryEntityID: "categoryEntityID" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["entityRow", ""], ["userViewDialog", ""], ["class", "app-container", 4, "ngIf"], [1, "app-container"], [1, "card-header-entity", "cloumn"], [1, "header-wrap"], [1, "title-icon"], [1, "title-wrap"], [1, "title-wrap-inner"], [1, "breadcrumb", 3, "click"], [1, "breadcrumb-separator"], [1, "fa-solid", "fa-chevron-right"], [1, "breadcrumb-end"], [1, "config-button"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-gear"], ["EntityName", "Entities", "DisplayField", "Name", "DisplayIconField", "Icon", 3, "DialogClosed", "AvailableRecords", "SelectedRecords", "UnselectedRecords", "DialogVisible"], [1, "row", 2, "max-width", "100%"], [1, "col-xs-12", "col-sm-6", "example-col"], ["kendoButton", "", "fillMode", "flat", 3, "toggleable", "selected", "click", 4, "ngFor", "ngForOf"], [1, "main-area", "margin-top-neg-20"], [3, "dialogClosed", "ShowPropertiesButton"], [3, "ngClass"], ["kendoButton", "", "fillMode", "flat", 3, "click", "toggleable", "selected"], [3, "click"], ["class", "main-area margin-top-neg-20", 4, "ngIf"], ["iconName", "aggregateFields", "addText", "Create New View", "ItemEntityName", "User Views", "resourceName", "View", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "viewModeChangeEvent", "BeforeAddItemEvent", "BeforeUpdateItemEvent", "items", "categoryEntityID", "title", "CategoryEntityName", "selectedFolderID", "showLoader", "viewingResource", "displayAsGrid"]], template: function ApplicationViewComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { categoryEntityID: "categoryEntityID" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["entityRow", ""], ["userViewDialog", ""], ["class", "app-container", 4, "ngIf"], [1, "app-container"], [1, "card-header-entity", "cloumn"], [1, "header-wrap"], [1, "title-icon"], [1, "title-wrap"], [1, "title-wrap-inner"], [1, "breadcrumb", 3, "click"], [1, "breadcrumb-separator"], [1, "fa-solid", "fa-chevron-right"], [1, "breadcrumb-end"], [1, "config-button"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-gear"], ["EntityName", "Entities", "DisplayField", "Name", "DisplayIconField", "Icon", 3, "DialogClosed", "AvailableRecords", "SelectedRecords", "UnselectedRecords", "DialogVisible"], [1, "row", 2, "max-width", "100%"], [1, "col-xs-12", "col-sm-6", "example-col"], ["kendoButton", "", "fillMode", "flat", 3, "toggleable", "selected", "click", 4, "ngFor", "ngForOf"], [1, "main-area", "margin-top-neg-20"], [3, "dialogClosed", "ShowPropertiesButton"], [3, "ngClass"], ["kendoButton", "", "fillMode", "flat", 3, "click", "toggleable", "selected"], [3, "click"], ["class", "main-area margin-top-neg-20", 4, "ngIf"], ["iconName", "aggregateFields", "addText", "Create New View", "ItemEntityName", "User Views", "resourceName", "View", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "viewModeChangeEvent", "BeforeAddItemEvent", "BeforeUpdateItemEvent", "items", "categoryEntityID", "title", "extraDropdownOptions", "CategoryEntityName", "selectedFolderID", "showLoader", "viewingResource", "displayAsGrid"]], template: function ApplicationViewComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Template, 29, 10, "div", 2);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.app);
     } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i4.LoaderComponent, i5.ButtonComponent, i6.UserViewPropertiesDialogComponent, i7.RecordSelectorDialogComponent, i8.GenericBrowserListComponent], styles: [".app-container[_ngcontent-%COMP%] {\n     padding: 15px;\n}\n  \n.entity-list[_ngcontent-%COMP%] {\n     width: 500px;\n}\n.favorites-list[_ngcontent-%COMP%] {\n     width: 400px;\n}\n\n.cloumn[_ngcontent-%COMP%] {\n     flex-direction: column;\n}\n.example-col[_ngcontent-%COMP%] {\n     overflow-x: auto;\n}\n.example-col[_ngcontent-%COMP%]   .k-selected[_ngcontent-%COMP%]  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20[_ngcontent-%COMP%] {\n     margin-top: -20px;\n     padding: 0px !important\n}\n\n.header-wrap[_ngcontent-%COMP%] {\n     display: flex;\n     justify-content: space-between;\n     align-items: center;\n     margin-bottom: 10px;\n     width: 100%;\n}\n\n.title-wrap[_ngcontent-%COMP%] {\n     flex-grow: 1;\n     font-size: 24px;\n}\n.title-wrap-inner[_ngcontent-%COMP%] {\n     display: block;\n}\n\n.breadcrumb[_ngcontent-%COMP%] {\n     color: darkblue;\n     cursor: pointer;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n\n.breadcrumb-end[_ngcontent-%COMP%] {\n     display: inline;\n     margin-left: 5px;\n}\n\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n     font-size: 14px;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n.home-icon[_ngcontent-%COMP%] {\n     margin-right: 5px;\n     font-size: 18px;\n     vertical-align: middle;\n}\n  \n.title-icon[_ngcontent-%COMP%] {\n     font-size: 32px;\n     margin-right: 15px;\n}\n\n.config-button[_ngcontent-%COMP%] {\n     display: flex;\n     align-items: center;\n}\n\n.button-icon[_ngcontent-%COMP%] {\n     margin-right: 5px;\n     font-size: 16px;\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(ApplicationViewComponent, [{
         type: Component,
-        args: [{ selector: 'mj-application-view', template: "<div class=\"app-container\" *ngIf=\"this.app\">\n    <div class=\"card-header-entity cloumn\">\n        <div class=\"header-wrap\"> \n            @if (this.app.Icon && this.app.Icon.length > 0) {\n                <div class=\"title-icon\">\n                    <span [ngClass]=\"this.app.Icon\"></span>\n                </div>    \n            }\n            <div class=\"title-wrap\">\n                <div class=\"title-wrap-inner\">\n                    <span class=\"breadcrumb\" (click)=\"GoHome($event)\">Home</span>  \n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span  class=\"breadcrumb\" (click)=\"GoToApps($event)\">Applications</span>\n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span class=\"breadcrumb-end\">{{this.app.Name}}</span>\n                </div>\n            </div>\n            <div class=\"config-button\">\n                <button kendoButton (click)=\"ShowAppEntitySelectionDialog()\"><span class=\"fa-solid fa-gear\"></span></button>\n                <mj-record-selector-dialog  \n                                            EntityName=\"Entities\"\n                                            [AvailableRecords]=\"AllAppEntities\" \n                                            [SelectedRecords]=\"SelectedAppEntities\" \n                                            [UnselectedRecords]=\"UnselectedAppEntities\"\n                                            [DialogVisible]=\"AppEntitySelectionDialogVisible\"\n                                            DisplayField=\"Name\"\n                                            DisplayIconField=\"Icon\"\n                                            (DialogClosed)=\"OnAppEntitySelectionDialogClosed($event)\"\n                >\n                </mj-record-selector-dialog>\n            </div>\n        </div>        \n        <div class=\"row\" #entityRow style=\"max-width: 100%;\">\n            <div class=\"col-xs-12 col-sm-6 example-col\">\n                <button\n                    *ngFor=\"let item of SelectedAppEntities\"\n                    kendoButton\n                    fillMode=\"flat\"\n                    [toggleable]=\"true\"\n                    [selected]=\"IsEntitySelected(item)\"\n                    (click)=\"onAppEntityButtonClicked(item)\"\n                >\n                    <span>\n                        @if (item.Icon && item.Icon.length > 0) {\n                            <span [ngClass]=\"item.Icon + ' button-icon'\" ></span>\n                        }\n                        {{item.Name}}\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n    @if (SelectedAppEntities.length === 0 && !showLoader) {\n        <div (click)=\"ShowAppEntitySelectionDialog()\">\n            <span class=\"fa-solid fa-gear\"></span>\n            Click Here to Select Entities\n        </div>\n    }\n    @if(showLoader) {\n        <kendo-loader></kendo-loader>\n    }\n    @else {\n        <div class=\"main-area margin-top-neg-20\" *ngIf=\"SelectedAppEntities.length > 0\">\n            <app-generic-browser-list \n                iconName=\"aggregateFields\" \n                [items]=\"items\"\n                [categoryEntityID]=\"categoryEntityID\"\n                addText=\"Create New View\"\n                ItemEntityName=\"User Views\"\n                resourceName=\"View\"\n                [title]=\"pageTitle\"\n                [CategoryEntityName]=\"categoryEntityName\"\n                (itemClickEvent)=\"onItemClick($event)\" \n                [selectedFolderID]=\"selectedFolderID\"\n                [showLoader]=\"showLoader\"\n                [viewingResource]=false\n                [displayAsGrid]=\"displayAsGrid\"\n                (AfterAddFolderEvent)=\"onEvent($event)\"\n                (AfterAddItemEvent)=\"onEvent($event)\"\n                (AfterDeleteItemEvent)=\"onEvent($event)\"\n                (AfterDeleteFolderEvent)=\"onEvent($event)\"\n                (viewModeChangeEvent)=\"onViewModeChange($event)\"\n                (BeforeAddItemEvent)=\"createNewView($event)\"\n                (BeforeUpdateItemEvent)=\"editView($event)\"\n            />\n        </div>\n    }\n\n    <mj-user-view-properties-dialog #userViewDialog [ShowPropertiesButton]=\"false\"(dialogClosed)=\"OnViewPropertiesDialogClose($event)\"></mj-user-view-properties-dialog>\n</div>\n", styles: [".app-container {\n     padding: 15px;\n}\n  \n.entity-list {\n     width: 500px;\n}\n.favorites-list {\n     width: 400px;\n}\n\n.cloumn {\n     flex-direction: column;\n}\n.example-col {\n     overflow-x: auto;\n}\n.example-col .k-selected  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20 {\n     margin-top: -20px;\n     padding: 0px !important\n}\n\n.header-wrap {\n     display: flex;\n     justify-content: space-between;\n     align-items: center;\n     margin-bottom: 10px;\n     width: 100%;\n}\n\n.title-wrap {\n     flex-grow: 1;\n     font-size: 24px;\n}\n.title-wrap-inner {\n     display: block;\n}\n\n.breadcrumb {\n     color: darkblue;\n     cursor: pointer;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n\n.breadcrumb-end {\n     display: inline;\n     margin-left: 5px;\n}\n\n\n.breadcrumb-separator {\n     font-size: 14px;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n.home-icon {\n     margin-right: 5px;\n     font-size: 18px;\n     vertical-align: middle;\n}\n  \n.title-icon {\n     font-size: 32px;\n     margin-right: 15px;\n}\n\n.config-button {\n     display: flex;\n     align-items: center;\n}\n\n.button-icon {\n     margin-right: 5px;\n     font-size: 16px;\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+        args: [{ selector: 'mj-application-view', template: "<div class=\"app-container\" *ngIf=\"this.app\">\n    <div class=\"card-header-entity cloumn\">\n        <div class=\"header-wrap\"> \n            @if (this.app.Icon && this.app.Icon.length > 0) {\n                <div class=\"title-icon\">\n                    <span [ngClass]=\"this.app.Icon\"></span>\n                </div>    \n            }\n            <div class=\"title-wrap\">\n                <div class=\"title-wrap-inner\">\n                    <span class=\"breadcrumb\" (click)=\"GoHome($event)\">Home</span>  \n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span  class=\"breadcrumb\" (click)=\"GoToApps($event)\">Applications</span>\n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span class=\"breadcrumb-end\">{{this.app.Name}}</span>\n                </div>\n            </div>\n            <div class=\"config-button\">\n                <button kendoButton (click)=\"ShowAppEntitySelectionDialog()\"><span class=\"fa-solid fa-gear\"></span></button>\n                <mj-record-selector-dialog  \n                                            EntityName=\"Entities\"\n                                            [AvailableRecords]=\"AllAppEntities\" \n                                            [SelectedRecords]=\"SelectedAppEntities\" \n                                            [UnselectedRecords]=\"UnselectedAppEntities\"\n                                            [DialogVisible]=\"AppEntitySelectionDialogVisible\"\n                                            DisplayField=\"Name\"\n                                            DisplayIconField=\"Icon\"\n                                            (DialogClosed)=\"OnAppEntitySelectionDialogClosed($event)\"\n                >\n                </mj-record-selector-dialog>\n            </div>\n        </div>        \n        <div class=\"row\" #entityRow style=\"max-width: 100%;\">\n            <div class=\"col-xs-12 col-sm-6 example-col\">\n                <button\n                    *ngFor=\"let item of SelectedAppEntities\"\n                    kendoButton\n                    fillMode=\"flat\"\n                    [toggleable]=\"true\"\n                    [selected]=\"IsEntitySelected(item)\"\n                    (click)=\"onAppEntityButtonClicked(item)\"\n                >\n                    <span>\n                        @if (item.Icon && item.Icon.length > 0) {\n                            <span [ngClass]=\"item.Icon + ' button-icon'\" ></span>\n                        }\n                        {{item.Name}}\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n    @if (SelectedAppEntities.length === 0 && !showLoader) {\n        <div (click)=\"ShowAppEntitySelectionDialog()\">\n            <span class=\"fa-solid fa-gear\"></span>\n            Click Here to Select Entities\n        </div>\n    }\n    @if(showLoader) {\n        <kendo-loader></kendo-loader>\n    }\n    @else {\n        <div class=\"main-area margin-top-neg-20\" *ngIf=\"SelectedAppEntities.length > 0\">\n            <app-generic-browser-list \n                iconName=\"aggregateFields\" \n                [items]=\"items\"\n                [categoryEntityID]=\"categoryEntityID\"\n                addText=\"Create New View\"\n                ItemEntityName=\"User Views\"\n                resourceName=\"View\"\n                [title]=\"pageTitle\"\n                [extraDropdownOptions]=\"extraDropdownOptions\"\n                [CategoryEntityName]=\"categoryEntityName\"\n                (itemClickEvent)=\"onItemClick($event)\" \n                [selectedFolderID]=\"selectedFolderID\"\n                [showLoader]=\"showLoader\"\n                [viewingResource]=false\n                [displayAsGrid]=\"displayAsGrid\"\n                (AfterAddFolderEvent)=\"onEvent($event)\"\n                (AfterAddItemEvent)=\"onEvent($event)\"\n                (AfterDeleteItemEvent)=\"onEvent($event)\"\n                (AfterDeleteFolderEvent)=\"onEvent($event)\"\n                (viewModeChangeEvent)=\"onViewModeChange($event)\"\n                (BeforeAddItemEvent)=\"createNewView($event)\"\n                (BeforeUpdateItemEvent)=\"editView($event)\"\n            />\n        </div>\n    }\n\n    <mj-user-view-properties-dialog #userViewDialog [ShowPropertiesButton]=\"false\"(dialogClosed)=\"OnViewPropertiesDialogClose($event)\"></mj-user-view-properties-dialog>\n</div>\n", styles: [".app-container {\n     padding: 15px;\n}\n  \n.entity-list {\n     width: 500px;\n}\n.favorites-list {\n     width: 400px;\n}\n\n.cloumn {\n     flex-direction: column;\n}\n.example-col {\n     overflow-x: auto;\n}\n.example-col .k-selected  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20 {\n     margin-top: -20px;\n     padding: 0px !important\n}\n\n.header-wrap {\n     display: flex;\n     justify-content: space-between;\n     align-items: center;\n     margin-bottom: 10px;\n     width: 100%;\n}\n\n.title-wrap {\n     flex-grow: 1;\n     font-size: 24px;\n}\n.title-wrap-inner {\n     display: block;\n}\n\n.breadcrumb {\n     color: darkblue;\n     cursor: pointer;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n\n.breadcrumb-end {\n     display: inline;\n     margin-left: 5px;\n}\n\n\n.breadcrumb-separator {\n     font-size: 14px;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n.home-icon {\n     margin-right: 5px;\n     font-size: 18px;\n     vertical-align: middle;\n}\n  \n.title-icon {\n     font-size: 32px;\n     margin-right: 15px;\n}\n\n.config-button {\n     display: flex;\n     align-items: center;\n}\n\n.button-icon {\n     margin-right: 5px;\n     font-size: 16px;\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.Router }, { type: i1.ActivatedRoute }, { type: i2.Location }, { type: i3.SharedService }, { type: i0.ChangeDetectorRef }], { entityRowRef: [{
             type: ViewChild,
             args: ['entityRow']

package/dist/lib/base-browser-component/base-browser-component.d.ts

@@ -1,7 +1,8 @@
 import { Folder, Item, ItemType } from "../../generic/Item.types";
 import { Router, Params, ActivatedRoute } from '@angular/router';
 import { BaseEvent } from "../../generic/Events.types";
-export declare class BaseBrowserComponent {
+import { BaseNavigationComponent } from "@memberjunction/ng-shared";
+export declare class BaseBrowserComponent extends BaseNavigationComponent {
     showLoader: boolean;
     items: Item[];
     folders: Folder[];

package/dist/lib/base-browser-component/base-browser-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-browser-component.d.ts","sourceRoot":"","sources":["../../../src/lib/base-browser-component/base-browser-component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAyD,MAAM,4BAA4B,CAAC;AAE9G,qBAAa,oBAAoB;IACtB,UAAU,EAAE,OAAO,CAAS;IAC5B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,SAAS,EAAE,MAAM,CAAM;IAE9B,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAM;IAChC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAM;IACjC,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAM;IACzC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAM;IACtC,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAM;IAC1C,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAU;IACpC,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAQ/C,IAAW,aAAa,IAAI,OAAO,CAAqC;IAExE,SAAS,CAAC,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI;IAM/E,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAkBrD,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;cAOvC,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAkChE,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE;cAY1B,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAmB5F,SAAS,CAAC,yBAAyB,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE;IAUlF,SAAS,CAAC,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE;IAa3D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAe7D,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAa/B,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAGlD;AAED,MAAM,MAAM,cAAc,GAAG;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA"}
+{"version":3,"file":"base-browser-component.d.ts","sourceRoot":"","sources":["../../../src/lib/base-browser-component/base-browser-component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,SAAS,EAAyD,MAAM,4BAA4B,CAAC;AAC9G,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,qBAAa,oBAAqB,SAAQ,uBAAuB;IACtD,UAAU,EAAE,OAAO,CAAS;IAC5B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,GAAG,EAAE,CAAC;IAClB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,SAAS,EAAE,MAAM,CAAM;IAE9B,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAM;IAChC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAM;IACjC,SAAS,CAAC,iBAAiB,EAAE,MAAM,CAAM;IACzC,SAAS,CAAC,cAAc,EAAE,MAAM,CAAM;IACtC,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAM;IAC1C,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAU;IACpC,SAAS,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;;IAS/C,IAAW,aAAa,IAAI,OAAO,CAAqC;IAExE,SAAS,CAAC,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI;IAM/E,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC;IAkBrD,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;cAOvC,QAAQ,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAkChE,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE;cAY1B,OAAO,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAmB5F,SAAS,CAAC,yBAAyB,CAAC,UAAU,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE;IAUlF,SAAS,CAAC,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE;IAa3D,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAe7D,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAa/B,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAGlD;AAED,MAAM,MAAM,cAAc,GAAG;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA"}

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

@@ -10,8 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { LogStatus, Metadata, RunView } from "@memberjunction/core";
 import { Folder, Item, ItemType } from "../../generic/Item.types";
 import { EventTypes } from "../../generic/Events.types";
-export class BaseBrowserComponent {
+import { BaseNavigationComponent } from "@memberjunction/ng-shared";
+export class BaseBrowserComponent extends BaseNavigationComponent {
     constructor() {
+        super();
         this.showLoader = false;
         this.selectedFolderID = null;
         this.pageTitle = '';
@@ -35,11 +37,11 @@ export class BaseBrowserComponent {
     buildFiltersAndLoadData() {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
-            let categoryFilter = this.selectedFolderID ? `CategoryID = ${this.selectedFolderID}` : `CategoryID IS NULL`;
-            let resourceFilter = `UserID = ${md.CurrentUser.ID} AND ${categoryFilter}`;
+            let categoryFilter = this.selectedFolderID ? `CategoryID = '${this.selectedFolderID}'` : `CategoryID IS NULL`;
+            let resourceFilter = `UserID = '${md.CurrentUser.ID}' AND ${categoryFilter}`;
             //filter for the folders
-            let resourceCategoryFilter = this.selectedFolderID ? `ParentID = ${this.selectedFolderID}` : `ParentID IS NULL`;
-            resourceCategoryFilter += ` AND UserID = ${md.CurrentUser.ID}`;
+            let resourceCategoryFilter = this.selectedFolderID ? `ParentID = '${this.selectedFolderID}'` : `ParentID IS NULL`;
+            resourceCategoryFilter += ` AND UserID = '${md.CurrentUser.ID}'`;
             LogStatus("resourceFilter: " + resourceFilter + " category filter: " + resourceCategoryFilter);
             yield this.LoadData({
                 sortItemsAfterLoad: true,

package/dist/lib/dashboard-browser-component/dashboard-browser.component.d.ts

@@ -8,6 +8,9 @@ export declare class DashboardBrowserComponent extends BaseBrowserComponent {
     private router;
     private route;
     private sharedService;
+    extraDropdownOptions: {
+        text: string;
+    }[];
     constructor(router: Router, route: ActivatedRoute, sharedService: SharedService);
     ngOnInit(): Promise<void>;
     itemClick(item: Item): void;

package/dist/lib/dashboard-browser-component/dashboard-browser.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-browser.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dashboard-browser-component/dashboard-browser.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAExF,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;AAEnE,qBAMa,yBAA0B,SAAQ,oBAAoB;IAErD,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,aAAa;gBAApE,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,aAAa,EAAE,aAAa;IAajG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAQxB,SAAS,CAAC,IAAI,EAAE,IAAI;IAWpB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI;yCAlCvD,yBAAyB;2CAAzB,yBAAyB;CA0CrC"}
+{"version":3,"file":"dashboard-browser.component.d.ts","sourceRoot":"","sources":["../../../src/lib/dashboard-browser-component/dashboard-browser.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAA2B,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAExF,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;AAGnE,qBAMa,yBAA0B,SAAQ,oBAAoB;IAKrD,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,aAAa;IAJjF,oBAAoB,EAAG;QAAC,IAAI,EAAE,MAAM,CAAA;KAAC,EAAE,CAE5C;gBAEkB,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,aAAa,EAAE,aAAa;IAajG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAQxB,SAAS,CAAC,IAAI,EAAE,IAAI;IAWpB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI;yCArCvD,yBAAyB;2CAAzB,yBAAyB;CA6CrC"}

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

@@ -1,3 +1,9 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 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) {
@@ -8,18 +14,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component } from '@angular/core';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import { BaseBrowserComponent } from '../base-browser-component/base-browser-component';
+import { RegisterClass } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@memberjunction/ng-shared";
 import * as i3 from "../generic-browser-list/generic-browser-list.component";
-export class DashboardBrowserComponent extends BaseBrowserComponent {
+let DashboardBrowserComponent = class DashboardBrowserComponent extends BaseBrowserComponent {
     constructor(router, route, sharedService) {
         var _a;
         super();
         this.router = router;
         this.route = route;
         this.sharedService = sharedService;
+        this.extraDropdownOptions = [
+            { text: 'View' }
+        ];
         this.pageName = "Dashboards";
         this.routeName = "dashboards";
         this.routeNameSingular = "dashboard";
@@ -54,17 +65,21 @@ export class DashboardBrowserComponent extends BaseBrowserComponent {
         let dashboard = item.Data;
         this.router.navigate(['resource', this.routeNameSingular, dashboard.ID], { queryParams: { edit: true } });
     }
-}
+};
 DashboardBrowserComponent.ɵfac = function DashboardBrowserComponent_Factory(t) { return new (t || DashboardBrowserComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
-DashboardBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["app-dashboard-browser"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 4, consts: [["title", "Dashboards", "itemType", "dashboard", "iconName", "aggregateFields", "addText", "Create New Dashboard", "ItemEntityName", "Dashboards", "resourceName", "Dashboard", "CategoryEntityName", "Dashboard Categories", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "BeforeUpdateItemEvent", "viewModeChangeEvent", "items", "selectedFolderID", "showLoader", "displayAsGrid"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
+DashboardBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardBrowserComponent, selectors: [["app-dashboard-browser"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 5, consts: [["title", "Dashboards", "itemType", "dashboard", "iconName", "aggregateFields", "addText", "Create New Dashboard", "ItemEntityName", "Dashboards", "resourceName", "Dashboard", "CategoryEntityName", "Dashboard Categories", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "BeforeUpdateItemEvent", "viewModeChangeEvent", "items", "extraDropdownOptions", "selectedFolderID", "showLoader", "displayAsGrid"]], template: function DashboardBrowserComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "app-generic-browser-list", 0);
         i0.ɵɵlistener("itemClickEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_itemClickEvent_0_listener($event) { return ctx.itemClick($event); })("AfterAddFolderEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_AfterAddFolderEvent_0_listener($event) { return ctx.onEvent($event); })("AfterAddItemEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_AfterAddItemEvent_0_listener($event) { return ctx.onEvent($event); })("AfterDeleteItemEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_AfterDeleteItemEvent_0_listener($event) { return ctx.onEvent($event); })("AfterDeleteFolderEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_AfterDeleteFolderEvent_0_listener($event) { return ctx.onEvent($event); })("BeforeUpdateItemEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_BeforeUpdateItemEvent_0_listener($event) { return ctx.onBeforeUpdateItemEvent($event); })("viewModeChangeEvent", function DashboardBrowserComponent_Template_app_generic_browser_list_viewModeChangeEvent_0_listener($event) { return ctx.onViewModeChange($event); });
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("items", ctx.items)("selectedFolderID", ctx.selectedFolderID)("showLoader", ctx.showLoader)("displayAsGrid", ctx.displayAsGrid);
+        i0.ɵɵproperty("items", ctx.items)("extraDropdownOptions", ctx.extraDropdownOptions)("selectedFolderID", ctx.selectedFolderID)("showLoader", ctx.showLoader)("displayAsGrid", ctx.displayAsGrid);
     } }, dependencies: [i3.GenericBrowserListComponent], styles: [".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}"] });
+DashboardBrowserComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Dashboards')
+], DashboardBrowserComponent);
+export { DashboardBrowserComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserComponent, [{
         type: Component,
-        args: [{ selector: 'app-dashboard-browser', template: "<app-generic-browser-list \n    title=\"Dashboards\" \n    itemType=\"dashboard\" \n    iconName=\"aggregateFields\" \n    [items]=\"items\" \n    addText=\"Create New Dashboard\"\n    ItemEntityName=\"Dashboards\"\n    resourceName=\"Dashboard\"\n    CategoryEntityName=\"Dashboard Categories\"\n    (itemClickEvent)=\"itemClick($event)\" \n    (AfterAddFolderEvent)=\"onEvent($event)\"\n    (AfterAddItemEvent)=\"onEvent($event)\"\n    (AfterDeleteItemEvent)=\"onEvent($event)\"\n    (AfterDeleteFolderEvent)=\"onEvent($event)\"\n    (BeforeUpdateItemEvent)=\"onBeforeUpdateItemEvent($event)\"\n    [selectedFolderID]=\"selectedFolderID\"\n    [showLoader]=\"showLoader\"\n    [displayAsGrid]=\"displayAsGrid\"\n    (viewModeChangeEvent)=\"onViewModeChange($event)\"\n/>\n", styles: ["\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-dashboard-browser', template: "<app-generic-browser-list \n    title=\"Dashboards\" \n    itemType=\"dashboard\" \n    iconName=\"aggregateFields\" \n    [items]=\"items\" \n    [extraDropdownOptions]=\"extraDropdownOptions\"\n    addText=\"Create New Dashboard\"\n    ItemEntityName=\"Dashboards\"\n    resourceName=\"Dashboard\"\n    CategoryEntityName=\"Dashboard Categories\"\n    (itemClickEvent)=\"itemClick($event)\" \n    (AfterAddFolderEvent)=\"onEvent($event)\"\n    (AfterAddItemEvent)=\"onEvent($event)\"\n    (AfterDeleteItemEvent)=\"onEvent($event)\"\n    (AfterDeleteFolderEvent)=\"onEvent($event)\"\n    (BeforeUpdateItemEvent)=\"onBeforeUpdateItemEvent($event)\"\n    [selectedFolderID]=\"selectedFolderID\"\n    [showLoader]=\"showLoader\"\n    [displayAsGrid]=\"displayAsGrid\"\n    (viewModeChangeEvent)=\"onViewModeChange($event)\"\n/>\n", styles: ["\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.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserComponent, { className: "DashboardBrowserComponent", filePath: "src/lib/dashboard-browser-component/dashboard-browser.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardBrowserComponent, { className: "DashboardBrowserComponent", filePath: "src/lib/dashboard-browser-component/dashboard-browser.component.ts", lineNumber: 16 }); })();