@memberjunction/ng-explorer-settings 0.9.2 → 0.9.7

package/dist/lib/module.d.ts

@@ -1,17 +1,20 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./single-role/single-role.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-grid";
-import * as i4 from "@angular/forms";
-import * as i5 from "@progress/kendo-angular-dialog";
-import * as i6 from "@progress/kendo-angular-excel-export";
-import * as i7 from "@memberjunction/ng-compare-records";
-import * as i8 from "@memberjunction/ng-container-directives";
-import * as i9 from "@progress/kendo-angular-buttons";
-import * as i10 from "@progress/kendo-angular-icons";
-import * as i11 from "@progress/kendo-angular-dropdowns";
+import * as i2 from "./settings/settings.component";
+import * as i3 from "./roles-list/roles-list.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-grid";
+import * as i6 from "@angular/forms";
+import * as i7 from "@progress/kendo-angular-dialog";
+import * as i8 from "@progress/kendo-angular-excel-export";
+import * as i9 from "@memberjunction/ng-compare-records";
+import * as i10 from "@memberjunction/ng-container-directives";
+import * as i11 from "@progress/kendo-angular-buttons";
+import * as i12 from "@progress/kendo-angular-icons";
+import * as i13 from "@progress/kendo-angular-dropdowns";
+import * as i14 from "@memberjunction/ng-entity-permissions";
 export declare class ExplorerSettingsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerSettingsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SingleRoleComponent], [typeof i2.CommonModule, typeof i3.GridModule, typeof i4.FormsModule, typeof i5.DialogsModule, typeof i6.ExcelExportModule, typeof i7.CompareRecordsModule, typeof i8.ContainerDirectivesModule, typeof i9.ButtonsModule, typeof i10.IconsModule, typeof i11.DropDownsModule], [typeof i1.SingleRoleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.RolesListComponent], [typeof i4.CommonModule, typeof i5.GridModule, typeof i6.FormsModule, typeof i7.DialogsModule, typeof i8.ExcelExportModule, typeof i9.CompareRecordsModule, typeof i10.ContainerDirectivesModule, typeof i11.ButtonsModule, typeof i12.IconsModule, typeof i13.DropDownsModule, typeof i14.EntityPermissionsModule], [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.RolesListComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ExplorerSettingsModule>;
 }

package/dist/lib/module.js

@@ -11,6 +11,9 @@ import { ContainerDirectivesModule } from '@memberjunction/ng-container-directiv
 import { FormsModule } from '@angular/forms';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { SingleRoleComponent } from './single-role/single-role.component';
+import { SettingsComponent } from './settings/settings.component';
+import { RolesListComponent } from './roles-list/roles-list.component';
+import { EntityPermissionsModule } from '@memberjunction/ng-entity-permissions';
 import * as i0 from "@angular/core";
 export class ExplorerSettingsModule {
 }
@@ -25,12 +28,15 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
         ContainerDirectivesModule,
         ButtonsModule,
         IconsModule,
-        DropDownsModule] });
+        DropDownsModule,
+        EntityPermissionsModule] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExplorerSettingsModule, [{
         type: NgModule,
         args: [{
                 declarations: [
-                    SingleRoleComponent
+                    SingleRoleComponent,
+                    SettingsComponent,
+                    RolesListComponent
                 ],
                 imports: [
                     CommonModule,
@@ -42,14 +48,19 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
                     ContainerDirectivesModule,
                     ButtonsModule,
                     IconsModule,
-                    DropDownsModule
+                    DropDownsModule,
+                    EntityPermissionsModule
                 ],
                 exports: [
-                    SingleRoleComponent
+                    SingleRoleComponent,
+                    SettingsComponent,
+                    RolesListComponent
                 ]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ExplorerSettingsModule, { declarations: [SingleRoleComponent], imports: [CommonModule,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ExplorerSettingsModule, { declarations: [SingleRoleComponent,
+        SettingsComponent,
+        RolesListComponent], imports: [CommonModule,
         GridModule,
         FormsModule,
         DialogsModule,
@@ -58,4 +69,7 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
         ContainerDirectivesModule,
         ButtonsModule,
         IconsModule,
-        DropDownsModule], exports: [SingleRoleComponent] }); })();
+        DropDownsModule,
+        EntityPermissionsModule], exports: [SingleRoleComponent,
+        SettingsComponent,
+        RolesListComponent] }); })();

package/dist/lib/roles-list/roles-list.component.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { RoleEntity } from '@memberjunction/core-entities';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class RolesListComponent implements OnInit {
+    private router;
+    isLoading: boolean;
+    roles: RoleEntity[];
+    constructor(router: Router);
+    ngOnInit(): void;
+    Refresh(): Promise<void>;
+    selectRole(r: RoleEntity): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RolesListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RolesListComponent, "mj-roles-list", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/roles-list/roles-list.component.js

@@ -0,0 +1,102 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-container-directives";
+function RolesListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵelementEnd();
+} }
+function RolesListComponent_table_2_tr_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 5);
+    i0.ɵɵlistener("click", function RolesListComponent_table_2_tr_8_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const r_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.selectRole(r_r3)); });
+    i0.ɵɵelementStart(1, "td");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const r_r3 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(r_r3.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(r_r3.Description);
+} }
+function RolesListComponent_table_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 3)(1, "thead")(2, "tr")(3, "th");
+    i0.ɵɵtext(4, "Role");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "th");
+    i0.ɵɵtext(6, "Description");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "tbody");
+    i0.ɵɵtemplate(8, RolesListComponent_table_2_tr_8_Template, 5, 2, "tr", 4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngForOf", ctx_r1.roles);
+} }
+export class RolesListComponent {
+    constructor(router) {
+        this.router = router;
+        this.isLoading = false;
+        this.roles = [];
+    }
+    ngOnInit() {
+        this.Refresh();
+    }
+    Refresh() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const startTime = new Date().getTime();
+            this.isLoading = true;
+            const md = new Metadata();
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: 'Roles',
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.roles = result.Results;
+                this.roles.sort((a, b) => a.Name.localeCompare(b.Name));
+            }
+            else {
+                throw new Error("Error loading roles: " + result.ErrorMessage);
+            }
+            this.isLoading = false;
+        });
+    }
+    selectRole(r) {
+        // change the route to point to the /settings/role/{r.Name} route
+        this.router.navigate(['/settings/role', r.Name]);
+    }
+}
+RolesListComponent.ɵfac = function RolesListComponent_Factory(t) { return new (t || RolesListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+RolesListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RolesListComponent, selectors: [["mj-roles-list"]], decls: 3, vars: 2, consts: [["mjFillContainer", ""], [4, "ngIf"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"]], template: function RolesListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, RolesListComponent_div_1_Template, 2, 0, "div", 1)(2, RolesListComponent_table_2_Template, 9, 1, "table", 2);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.isLoading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.isLoading);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.FillContainer], styles: ["\n\r\ntable[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse; \n\r\n}\r\n\r\nbutton[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n \r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    background-color: #f2f2f2; \n\r\n    color: black; \n\r\n    font-weight: bold; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    border: 1px solid gray; \n\r\n    height: 36px; \n\r\n    text-align: center;\r\n    padding: 0 8px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    width: 150px; \n\r\n    text-align: left;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\r\n    width: 100px; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\r\n    cursor: pointer;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\r\n    background-color: white; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\r\n    background-color: #e7f4ff; \n\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RolesListComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-roles-list', template: "<div mjFillContainer>\r\n    <div *ngIf=\"isLoading\">Loading...</div>\r\n    <table *ngIf=\"!isLoading\" class=\"grid\">\r\n        <thead>\r\n            <tr>\r\n            <th>Role</th>\r\n            <th>Description</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of roles\" (click)=\"selectRole(r)\">\r\n                <td>{{ r.Name }}</td>\r\n                <td>{{ r.Description }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n ", styles: ["/* Style for the whole table */\r\ntable {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\r\n}\r\n\r\nbutton {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n \r\ntable th {\r\n    background-color: #f2f2f2; /* Light gray background for headers */\r\n    color: black; /* Black text color for headers */\r\n    font-weight: bold; /* Bold font weight for headers */\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    border: 1px solid gray; /* Gray border for cells */\r\n    height: 36px; /* Fixed height for all rows */\r\n    text-align: center;\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Specific styles for the first column */\r\ntable th:first-child, table td:first-child {\r\n    width: 150px; /* Set width for the first column */\r\n    text-align: left;\r\n}\r\n\r\n/* Specific styles for the \"Can\" columns */\r\ntable th:not(:first-child), table td:not(:first-child) {\r\n    width: 100px; /* Set width for \"Can\" columns */\r\n}\r\n\r\ntable tr {\r\n    cursor: pointer;\r\n}\r\n\r\n/* Alternating row background colors */\r\ntable tr:nth-child(odd) {\r\n    background-color: white; /* Light color for odd rows */\r\n}\r\n\r\ntable tr:nth-child(even) {\r\n    background-color: #e7f4ff; /* Light blue for even rows */\r\n}\r\n"] }]
+    }], () => [{ type: i1.Router }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RolesListComponent, { className: "RolesListComponent", filePath: "src\\lib\\roles-list\\roles-list.component.ts", lineNumber: 15 }); })();

package/dist/lib/settings/settings.component.d.ts

@@ -0,0 +1,17 @@
+import { OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class SettingsComponent implements OnInit {
+    private router;
+    private activatedRoute;
+    currentItem: 'EntityPermissions' | 'Users' | 'Roles' | 'Role';
+    baseRoute: string;
+    selectedRoleName: string;
+    selectItem(item: 'EntityPermissions' | 'Users' | 'Roles' | 'Role', changeRoute?: boolean): void;
+    changeRoute(subPath: string): void;
+    constructor(router: Router, activatedRoute: ActivatedRoute);
+    ngOnInit(): void;
+    updateComponentStateBasedOnPath(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SettingsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SettingsComponent, "mj-settings", never, {}, {}, never, never, false, never>;
+}

package/dist/lib/settings/settings.component.js

@@ -0,0 +1,148 @@
+import { Component } from '@angular/core';
+import { NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@memberjunction/ng-entity-permissions";
+import * as i4 from "../single-role/single-role.component";
+import * as i5 from "../roles-list/roles-list.component";
+function SettingsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "mj-entity-permissions-selector-with-grid");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtext(1, " Users Component Goes Here ");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "mj-roles-list");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "mj-single-role", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("RoleName", ctx_r3.selectedRoleName);
+} }
+export class SettingsComponent {
+    selectItem(item, changeRoute = true) {
+        this.currentItem = item;
+        if (changeRoute)
+            this.changeRoute(item.toLowerCase());
+    }
+    changeRoute(subPath) {
+        // Constructs a navigation path relative to the /settings base route
+        this.router.navigate([this.baseRoute, subPath]);
+    }
+    constructor(router, activatedRoute) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.currentItem = 'EntityPermissions';
+        this.baseRoute = '/settings';
+        this.selectedRoleName = '';
+    }
+    ngOnInit() {
+        // manually update the first time
+        this.updateComponentStateBasedOnPath();
+        // Listen to changes in the route
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            this.updateComponentStateBasedOnPath();
+        });
+        //     this.activatedRoute.url.subscribe(urlSegments => {
+        //       const fullPath = window.location.pathname + window.location.search;
+        //       // Split the fullPath into segments and query string as needed
+        //       const [path, queryString] = fullPath.split('?');
+        //       const segments = path.split('/').filter(segment => segment.length > 0);
+        //       // Your logic to handle the segments and query string
+        //       const firstSegment = segments.length > 1 ? segments[1] : '';
+        //         switch (firstSegment.trim().toLowerCase()) {
+        //         case 'entitypermissions':
+        //           this.selectItem('EntityPermissions', false);
+        //           break;
+        //         case 'users':
+        //           this.selectItem('Users', false);
+        //           break;
+        //         case 'roles':
+        //             this.selectItem('Roles', false);
+        //             break;
+        //         case 'role':
+        //             this.selectedRoleName = segments.length > 2 ? segments[2] : '';
+        //             this.selectItem('Role', false);
+        //             break;
+        //         default:
+        //           break;
+        //       }
+        //     });
+    }
+    updateComponentStateBasedOnPath() {
+        // On each navigation end, access the current URL from window.location
+        const fullPath = window.location.pathname + window.location.search;
+        // Split the fullPath into segments and query string as needed
+        const [path, queryString] = fullPath.split('?');
+        const segments = path.split('/').filter(segment => segment.length > 0);
+        // Place your switch-case logic here
+        const firstSegment = segments.length > 1 ? segments[1] : '';
+        switch (firstSegment.trim().toLowerCase()) {
+            case 'entitypermissions':
+                this.selectItem('EntityPermissions', false);
+                break;
+            case 'users':
+                this.selectItem('Users', false);
+                break;
+            case 'roles':
+                this.selectItem('Roles', false);
+                break;
+            case 'role':
+                this.selectedRoleName = segments.length > 2 ? segments[2] : '';
+                this.selectItem('Role', false);
+                break;
+            default:
+                break;
+        }
+    }
+}
+SettingsComponent.ɵfac = function SettingsComponent_Factory(t) { return new (t || SettingsComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute)); };
+SettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], decls: 13, vars: 10, consts: [[1, "container"], [1, "options-container"], [1, "option-item", 3, "click"], [1, "display-container"], [4, "ngIf"], [3, "RoleName"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+        i0.ɵɵlistener("click", function SettingsComponent_Template_div_click_2_listener() { return ctx.selectItem("Users"); });
+        i0.ɵɵtext(3, "Users");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "div", 2);
+        i0.ɵɵlistener("click", function SettingsComponent_Template_div_click_4_listener() { return ctx.selectItem("Roles"); });
+        i0.ɵɵtext(5, "Roles");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div", 2);
+        i0.ɵɵlistener("click", function SettingsComponent_Template_div_click_6_listener() { return ctx.selectItem("EntityPermissions"); });
+        i0.ɵɵtext(7, "Entity Permissions");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(8, "div", 3);
+        i0.ɵɵtemplate(9, SettingsComponent_div_9_Template, 2, 0, "div", 4)(10, SettingsComponent_div_10_Template, 2, 0, "div", 4)(11, SettingsComponent_div_11_Template, 2, 0, "div", 4)(12, SettingsComponent_div_12_Template, 2, 1, "div", 4);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("selected", ctx.currentItem === "Users");
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("selected", ctx.currentItem === "Roles" || ctx.currentItem === "Role");
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("selected", ctx.currentItem === "EntityPermissions");
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "EntityPermissions");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "Users");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "Roles");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "Role");
+    } }, dependencies: [i2.NgIf, i3.EntityPermissionsSelectorWithGridComponent, i4.SingleRoleComponent, i5.RolesListComponent], styles: [".container[_ngcontent-%COMP%] {\r\n    display: flex;\r\n  }\r\n  \r\n  .options-container[_ngcontent-%COMP%] {\r\n    flex: 0 0 150px;\r\n    padding: 10px;\r\n  }\r\n  \r\n  .option-item[_ngcontent-%COMP%] {\r\n    cursor: pointer;\r\n    margin-bottom: 10px; \n\r\n    padding: 5px 10px; \n\r\n    border-radius: 4px; \n\r\n  }\r\n  \r\n  .display-container[_ngcontent-%COMP%] {\r\n    flex: 1;\r\n    padding: 10px;\r\n  }\r\n\r\n  .selected[_ngcontent-%COMP%] {\r\n    background-color: #007bff; \n\r\n    color: white; \n\r\n    padding: 5px 10px; \n\r\n    border-radius: 4px; \n\r\n  }"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-settings', template: "<div class=\"container\">\r\n    <!-- Options container -->\r\n    <div class=\"options-container\">\r\n        <div class=\"option-item\" [class.selected]=\"currentItem === 'Users'\"  (click)=\"selectItem('Users')\">Users</div>\r\n        <div class=\"option-item\" [class.selected]=\"currentItem === 'Roles' || currentItem === 'Role'\"  (click)=\"selectItem('Roles')\">Roles</div>\r\n        <div class=\"option-item\" [class.selected]=\"currentItem === 'EntityPermissions'\"  (click)=\"selectItem('EntityPermissions')\">Entity Permissions</div>\r\n    </div>\r\n\r\n    <!-- Display container -->\r\n    <div class=\"display-container\">\r\n        <div *ngIf=\"currentItem === 'EntityPermissions'\">\r\n            <mj-entity-permissions-selector-with-grid></mj-entity-permissions-selector-with-grid>\r\n        </div>\r\n        <div *ngIf=\"currentItem === 'Users'\">\r\n            Users Component Goes Here\r\n        </div>\r\n        <div *ngIf=\"currentItem === 'Roles'\">\r\n            <mj-roles-list></mj-roles-list>\r\n        </div>\r\n        <div *ngIf=\"currentItem === 'Role'\">\r\n            <mj-single-role [RoleName]=\"selectedRoleName\"></mj-single-role>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".container {\r\n    display: flex;\r\n  }\r\n  \r\n  .options-container {\r\n    flex: 0 0 150px;\r\n    padding: 10px;\r\n  }\r\n  \r\n  .option-item {\r\n    cursor: pointer;\r\n    margin-bottom: 10px; /* Adds space between the options for better readability */\r\n    padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\r\n    border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\r\n  }\r\n  \r\n  .display-container {\r\n    flex: 1;\r\n    padding: 10px;\r\n  }\r\n\r\n  .selected {\r\n    background-color: #007bff; /* A blue background for selected item */\r\n    color: white; /* White text color for better contrast */\r\n    padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\r\n    border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\r\n  }\r\n  "] }]
+    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src\\lib\\settings\\settings.component.ts", lineNumber: 10 }); })();

package/dist/lib/single-role/single-role.component.js

@@ -242,7 +242,7 @@ SingleRoleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleR
     } }, dependencies: [i1.NgForOf, i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.FillContainer, i4.ButtonComponent], styles: ["\n\r\ntable[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse; \n\r\n}\r\n\r\nbutton[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n \r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    background-color: #f2f2f2; \n\r\n    color: black; \n\r\n    font-weight: bold; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    border: 1px solid gray; \n\r\n    height: 36px; \n\r\n    text-align: center;\r\n    padding: 0 8px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    width: 150px; \n\r\n    text-align: left;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\r\n    width: 100px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\r\n    background-color: white; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\r\n    background-color: #e7f4ff; \n\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleRoleComponent, [{
         type: Component,
-        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer>\r\n    <!-- We are going to do a simple custom grid here because Kendo Grid is way too much for this and doesn't show checkboxes even when not editing, this is cleaner and simpler -->\r\n    <!-- Assuming your component's selector is 'app-permissions-grid' -->\r\n    <div *ngIf=\"isLoading\">Loading...</div>\r\n    <button *ngIf=\"NumDirty > 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\r\n    <span>{{this.RoleName}}</span>\r\n    <table *ngIf=\"!isLoading\" class=\"grid\">\r\n        <thead>\r\n            <tr>\r\n            <th>User</th>\r\n            <th>In Role</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let ur of userRoles\">\r\n                <td>{{ ur.User }}</td>\r\n                <td (click)=\"flipState($event, ur, true)\">\r\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"ur.Selected\" (click)=\"flipState($event, ur, false)\">\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n ", styles: ["/* Style for the whole table */\r\ntable {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\r\n}\r\n\r\nbutton {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n \r\ntable th {\r\n    background-color: #f2f2f2; /* Light gray background for headers */\r\n    color: black; /* Black text color for headers */\r\n    font-weight: bold; /* Bold font weight for headers */\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    border: 1px solid gray; /* Gray border for cells */\r\n    height: 36px; /* Fixed height for all rows */\r\n    text-align: center;\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Specific styles for the first column */\r\ntable th:first-child, table td:first-child {\r\n    width: 150px; /* Set width for the first column */\r\n    text-align: left;\r\n}\r\n\r\n/* Specific styles for the \"Can\" columns */\r\ntable th:not(:first-child), table td:not(:first-child) {\r\n    width: 100px; /* Set width for \"Can\" columns */\r\n}\r\n\r\n/* Alternating row background colors */\r\ntable tr:nth-child(odd) {\r\n    background-color: white; /* Light color for odd rows */\r\n}\r\n\r\ntable tr:nth-child(even) {\r\n    background-color: #e7f4ff; /* Light blue for even rows */\r\n}\r\n"] }]
+        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer>\r\n    <div *ngIf=\"isLoading\">Loading...</div>\r\n    <button *ngIf=\"NumDirty > 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\r\n    <span>{{this.RoleName}}</span>\r\n    <table *ngIf=\"!isLoading\" class=\"grid\">\r\n        <thead>\r\n            <tr>\r\n            <th>User</th>\r\n            <th>In Role</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let ur of userRoles\">\r\n                <td>{{ ur.User }}</td>\r\n                <td (click)=\"flipState($event, ur, true)\">\r\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"ur.Selected\" (click)=\"flipState($event, ur, false)\">\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n ", styles: ["/* Style for the whole table */\r\ntable {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\r\n}\r\n\r\nbutton {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n \r\ntable th {\r\n    background-color: #f2f2f2; /* Light gray background for headers */\r\n    color: black; /* Black text color for headers */\r\n    font-weight: bold; /* Bold font weight for headers */\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    border: 1px solid gray; /* Gray border for cells */\r\n    height: 36px; /* Fixed height for all rows */\r\n    text-align: center;\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Specific styles for the first column */\r\ntable th:first-child, table td:first-child {\r\n    width: 150px; /* Set width for the first column */\r\n    text-align: left;\r\n}\r\n\r\n/* Specific styles for the \"Can\" columns */\r\ntable th:not(:first-child), table td:not(:first-child) {\r\n    width: 100px; /* Set width for \"Can\" columns */\r\n}\r\n\r\n/* Alternating row background colors */\r\ntable tr:nth-child(odd) {\r\n    background-color: white; /* Light color for odd rows */\r\n}\r\n\r\ntable tr:nth-child(even) {\r\n    background-color: #e7f4ff; /* Light blue for even rows */\r\n}\r\n"] }]
     }], () => [], { RoleName: [{
             type: Input
         }], BottomMargin: [{

package/dist/public-api.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/single-role/single-role.component';
+export * from './lib/settings/settings.component';
+export * from './lib/roles-list/roles-list.component';
 export * from './lib/module';

package/dist/public-api.js

@@ -2,4 +2,6 @@
  * Public API Surface
  */
 export * from './lib/single-role/single-role.component';
+export * from './lib/settings/settings.component';
+export * from './lib/roles-list/roles-list.component';
 export * from './lib/module';

package/package.json

@@ -1,40 +1,43 @@
 {
-  "name": "@memberjunction/ng-explorer-settings",
-  "version": "0.9.2",
-  "description": "MemberJunction: Reusable Angular components for the settings section of the MJ Explorer App",
-  "main": "./dist/public-api.js",
-  "typings": "./dist/public-api.d.ts",
-  "files": [
-    "/dist"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "ngc"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@angular/compiler": "~17.2.2",
-    "@angular/compiler-cli": "~17.2.2"
-  },
-  "peerDependencies": {
-    "@angular/common": "~17.2.2",
-    "@angular/core": "~17.2.2",
-    "@angular/forms": "~17.2.2",
-    "@angular/router": "~17.2.2"
-  },
-  "dependencies": {
-    "@memberjunction/core-entities": "^0.9.156",
-    "@memberjunction/global": "^0.9.153",
-    "@memberjunction/core": "^0.9.172",
-    "@memberjunction/ng-container-directives": "^0.9.136",
-    "@memberjunction/ng-shared": "^0.9.25",
-    "@progress/kendo-angular-dropdowns": "~15.1.0",
-    "@progress/kendo-angular-grid": "~15.1.0",
-    "@progress/kendo-angular-buttons": "~15.1.0",
-    "@progress/kendo-angular-dialog": "~15.1.0",
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
+    "name":  "@memberjunction/ng-explorer-settings",
+    "version":  "0.9.7",
+    "description":  "MemberJunction: Reusable Angular components for the settings section of the MJ Explorer App",
+    "main":  "./dist/public-api.js",
+    "typings":  "./dist/public-api.d.ts",
+    "files":  [
+                  "/dist"
+              ],
+    "scripts":  {
+                    "test":  "echo \"Error: no test specified\" \u0026\u0026 exit 1",
+                    "build":  "ngc"
+                },
+    "keywords":  [
+
+                 ],
+    "author":  "",
+    "license":  "ISC",
+    "devDependencies":  {
+                            "@angular/compiler":  "~17.2.2",
+                            "@angular/compiler-cli":  "~17.2.2"
+                        },
+    "peerDependencies":  {
+                             "@angular/common":  "~17.2.2",
+                             "@angular/core":  "~17.2.2",
+                             "@angular/forms":  "~17.2.2",
+                             "@angular/router":  "~17.2.2"
+                         },
+    "dependencies":  {
+                         "@memberjunction/core-entities":  "^0.9.162",
+                         "@memberjunction/global":  "^0.9.158",
+                         "@memberjunction/core":  "^0.9.177",
+                         "@memberjunction/ng-container-directives":  "^0.9.140",
+                         "@memberjunction/ng-shared":  "^0.9.30",
+                         "@memberjunction/ng-entity-permissions":  "^0.9.7",
+                         "@progress/kendo-angular-dropdowns":  "~15.1.0",
+                         "@progress/kendo-angular-grid":  "~15.1.0",
+                         "@progress/kendo-angular-buttons":  "~15.1.0",
+                         "@progress/kendo-angular-dialog":  "~15.1.0",
+                         "tslib":  "^2.3.0"
+                     },
+    "sideEffects":  false
 }