@memberjunction/ng-explorer-settings 1.8.1 → 2.1.1

package/dist/lib/application-entities-grid/application-entities-grid.component.d.ts

@@ -6,23 +6,23 @@ export declare class ApplicationEntityEntity_Ext extends ApplicationEntityEntity
     private _selected;
     get Selected(): boolean;
     set Selected(value: boolean);
-    private _applicationName;
-    get SavedApplicationName(): string;
-    set SavedApplicationName(value: string);
+    private _applicationID;
+    get SavedApplicationID(): string;
+    set SavedApplicationID(value: string);
     private _entityID;
-    get SavedEntityID(): number;
-    set SavedEntityID(value: number);
+    get SavedEntityID(): string;
+    set SavedEntityID(value: string);
 }
 export declare class ApplicationEntitiesGridComponent implements OnInit, OnChanges {
     private router;
     /**
      * The name of the application we are working with, required if Mode is 'Applications'
      */
-    ApplicationName: string;
+    ApplicationID: string;
     /**
      * The ID of the entity we are working with, required if Mode is 'Entities'
      */
-    EntityID: number;
+    EntityID: string;
     isLoading: boolean;
     rows: ApplicationEntityEntity_Ext[];
     Mode: 'Applications' | 'Entities';
@@ -45,5 +45,5 @@ export declare class ApplicationEntitiesGridComponent implements OnInit, OnChang
     protected IsReallyDirty(ae: ApplicationEntityEntity_Ext): boolean;
     flipState($event: MouseEvent | undefined, ur: ApplicationEntityEntity_Ext, flipState: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ApplicationEntitiesGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ApplicationEntitiesGridComponent, "mj-application-entities-grid", never, { "ApplicationName": { "alias": "ApplicationName"; "required": false; }; "EntityID": { "alias": "EntityID"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "ApplicationRecord": { "alias": "ApplicationRecord"; "required": false; }; "EntityRecord": { "alias": "EntityRecord"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ApplicationEntitiesGridComponent, "mj-application-entities-grid", never, { "ApplicationID": { "alias": "ApplicationID"; "required": false; }; "EntityID": { "alias": "EntityID"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "ApplicationRecord": { "alias": "ApplicationRecord"; "required": false; }; "EntityRecord": { "alias": "EntityRecord"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/application-entities-grid/application-entities-grid.component.js

@@ -121,8 +121,8 @@ let ApplicationEntityEntity_Ext = class ApplicationEntityEntity_Ext extends Appl
     constructor() {
         super(...arguments);
         this._selected = false;
-        this._applicationName = '';
-        this._entityID = 0;
+        this._applicationID = '';
+        this._entityID = "";
     }
     get Selected() {
         return this._selected;
@@ -130,11 +130,11 @@ let ApplicationEntityEntity_Ext = class ApplicationEntityEntity_Ext extends Appl
     set Selected(value) {
         this._selected = value;
     }
-    get SavedApplicationName() {
-        return this._applicationName;
+    get SavedApplicationID() {
+        return this._applicationID;
     }
-    set SavedApplicationName(value) {
-        this._applicationName = value;
+    set SavedApplicationID(value) {
+        this._applicationID = value;
     }
     get SavedEntityID() {
         return this._entityID;
@@ -171,16 +171,17 @@ export class ApplicationEntitiesGridComponent {
     }
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             if (this.Mode === 'Applications')
-                if (!this.ApplicationName || this.ApplicationName.length === 0 || !this.ApplicationRecord)
-                    throw new Error("ApplicationName and ApplicationRecord are required when Mode is 'Applications'");
+                if (!this.ApplicationID || this.ApplicationID.length === 0 || !this.ApplicationRecord)
+                    throw new Error("ApplicationID and ApplicationRecord are required when Mode is 'Applications'");
             if (this.Mode === 'Entities')
                 if (!this.EntityID || !this.EntityRecord)
                     throw new Error("EntityID and EntityRecord are required when Mode is 'Entities'");
             const md = new Metadata();
             this.isLoading = true;
             const rv = new RunView();
-            const filter = this.Mode === 'Applications' ? `Application='${this.ApplicationName}'` : `EntityID=${this.EntityID}`;
+            const filter = this.Mode === 'Applications' ? `ApplicationID='${this.ApplicationID}'` : `EntityID='${this.EntityID}'`;
             const result = yield rv.RunView({
                 EntityName: 'Application Entities',
                 ExtraFilter: filter,
@@ -192,7 +193,7 @@ export class ApplicationEntitiesGridComponent {
                 existing.forEach(ae => {
                     ae.Selected = true; // flip this on for all records that come from the DB
                     ae.SavedEntityID = ae.EntityID; // stash this in an extra property so we can later set it if we have a delete operation
-                    ae.SavedApplicationName = ae.Application; // stash this in an extra property so we can later set it if we have a delete operation
+                    ae.SavedApplicationID = ae.ApplicationID; // stash this in an extra property so we can later set it if we have a delete operation
                 });
                 if (this.Mode === 'Applications') {
                     const entitiesToAdd = md.Entities.filter(e => !existing.some(ee => ee.EntityID === e.ID));
@@ -201,9 +202,9 @@ export class ApplicationEntitiesGridComponent {
                         ae.NewRecord();
                         ae.Sequence = 1000; // default value, isn't used anywhere 
                         ae.DefaultForNewUser = false; // not used anywhere
-                        ae.ApplicationName = this.ApplicationName;
-                        ae.Set('Application', this.ApplicationName); // use weak typing to get around the readonly property
-                        ae.SavedApplicationName = this.ApplicationName; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.ApplicationID = this.ApplicationID;
+                        ae.Set('Application', (_a = this.ApplicationRecord) === null || _a === void 0 ? void 0 : _a.Name); // use weak typing to get around the readonly property
+                        ae.SavedApplicationID = this.ApplicationID; // stash this in an extra property so we can later set it if we have a delete operation
                         ae.EntityID = e.ID;
                         ae.SavedEntityID = e.ID; // stash this in an extra property so we can later set it if we have a delete operation
                         ae.Set('Entity', e.Name); // use weak typing to get around the readonly property
@@ -219,12 +220,12 @@ export class ApplicationEntitiesGridComponent {
                         const ae = yield md.GetEntityObject('Application Entities');
                         ae.NewRecord();
                         ae.Sequence = 1000; // default value, isn't used anywhere 
-                        ae.ApplicationName = a.Name;
+                        ae.ApplicationID = a.ID;
                         ae.Set('Application', a.Name); // use weak typing to get around the readonly property
-                        ae.SavedApplicationName = a.Name; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.SavedApplicationID = a.ID; // stash this in an extra property so we can later set it if we have a delete operation
                         ae.EntityID = this.EntityID;
                         ae.SavedEntityID = this.EntityID; // stash this in an extra property so we can later set it if we have a delete operation
-                        ae.Set('Entity', this.EntityRecord.Name); // use weak typing to get around the readonly property
+                        ae.Set('Entity', (_b = this.EntityRecord) === null || _b === void 0 ? void 0 : _b.Name); // use weak typing to get around the readonly property
                         existing.push(ae);
                     }
                     // finally sort the array
@@ -260,9 +261,10 @@ export class ApplicationEntitiesGridComponent {
                 if (yield tg.Submit()) {
                     // for any items in the above that were deleted, we would have had the ApplicationName/Application and Entity property wiped out so we need to go check to see if we have a null ID and if so, copy the values back in
                     this.rows.forEach(r => {
-                        if (r.Application === null || r.ApplicationName === null) {
-                            r.Set('Application', r.SavedApplicationName); // get around the read-only property
-                            r.ApplicationName = r.SavedApplicationName;
+                        if (r.Application === null || r.ApplicationID === null) {
+                            const a = md.Applications.find(aa => aa.ID === r.SavedApplicationID);
+                            r.Set('Application', a === null || a === void 0 ? void 0 : a.Name); // get around the read-only property
+                            r.ApplicationID = r.SavedApplicationID;
                         }
                         if (r.Entity === null || r.EntityID === null) {
                             r.EntityID = r.SavedEntityID; // get around the read-only property
@@ -306,9 +308,9 @@ export class ApplicationEntitiesGridComponent {
     }
     IsReallyDirty(ae) {
         // logic is simple, if we are in the database, but the checkbox is not checked (or vice versa), then we are dirty
-        if (ae.Selected && ae.ID > 0)
+        if (ae.Selected && ae.IsSaved)
             return false; // if we are in the database and the checkbox is checked, we are not dirty
-        else if (!ae.Selected && ae.ID > 0)
+        else if (!ae.Selected && ae.IsSaved)
             return true; // if we are in the database and the checkbox is not checked, we are dirty because we'd have to be removed
         else if (ae.Selected)
             return true; // if we are NOT in the database and the checkbox is checked, we are dirty because we'd have to be added
@@ -323,7 +325,7 @@ export class ApplicationEntitiesGridComponent {
     }
 }
 ApplicationEntitiesGridComponent.ɵfac = function ApplicationEntitiesGridComponent_Factory(t) { return new (t || ApplicationEntitiesGridComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
-ApplicationEntitiesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationEntitiesGridComponent, selectors: [["mj-application-entities-grid"]], inputs: { ApplicationName: "ApplicationName", EntityID: "EntityID", Mode: "Mode", ApplicationRecord: "ApplicationRecord", EntityRecord: "EntityRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["class", "content", 4, "ngIf"], [1, "content"], ["kendoButton", "", 3, "click", "disabled"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "click", "ngModel"]], template: function ApplicationEntitiesGridComponent_Template(rf, ctx) { if (rf & 1) {
+ApplicationEntitiesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationEntitiesGridComponent, selectors: [["mj-application-entities-grid"]], inputs: { ApplicationID: "ApplicationID", EntityID: "EntityID", Mode: "Mode", ApplicationRecord: "ApplicationRecord", EntityRecord: "EntityRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["class", "content", 4, "ngIf"], [1, "content"], ["kendoButton", "", 3, "click", "disabled"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "click", "ngModel"]], template: function ApplicationEntitiesGridComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, ApplicationEntitiesGridComponent_div_0_Template, 2, 0, "div", 0)(1, ApplicationEntitiesGridComponent_div_1_Template, 6, 3, "div", 1);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.isLoading);
@@ -333,7 +335,7 @@ ApplicationEntitiesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationEntitiesGridComponent, [{
         type: Component,
         args: [{ selector: 'mj-application-entities-grid', template: "<div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\n<div class=\"content\" *ngIf=\"!isLoading\">\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"save()\">Save</button>\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"cancelEdit()\">Cancel</button>\n    <table *ngIf=\"!isLoading\" class=\"grid\">\n        <thead>\n            <tr>\n                <th *ngIf=\"Mode === 'Applications'\">Entity</th>\n                <th *ngIf=\"Mode === 'Entities'\">Application</th>\n                <th (click)=\"flipAll()\">In Application</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let r of rows\">\n                <td *ngIf=\"Mode === 'Applications'\">{{ r.Entity }}</td>\n                <td *ngIf=\"Mode === 'Entities'\">{{ r.Application }}</td>\n                <td (click)=\"flipState($event, r, true)\">\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"r.Selected\" (click)=\"flipState($event, r, false)\">\n                </td>\n            </tr>\n        </tbody>\n    </table>            \n</div>", styles: ["button {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n/* Styles for the table with the 'grid' class */\n.grid {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse;\n}\n\n/* Styles for th elements within the table with the 'grid' class */\n.grid th {\n    background-color: #f2f2f2;\n    color: black;\n    font-weight: bold;\n    text-align: center;\n    border: 1px solid gray;\n    padding: 0 8px;\n    cursor: pointer;\n}\n\n/* Styles for td elements within the table with the 'grid' class */\n.grid td {\n    border: 1px solid gray;\n    height: 36px;\n    text-align: center;\n    padding: 0 8px;\n}\n\n/* Styles for the first child th and td within the table with the 'grid' class */\n.grid th:first-child,\n.grid td:first-child {\n    min-width: 150px;\n    text-align: left;\n}\n\n/* Styles for non-first-child th and td elements within the table with the 'grid' class */\n.grid th:not(:first-child),\n.grid td:not(:first-child) {\n    width: 100px;\n}\n\n/* Alternating row background colors for the table with the 'grid' class */\n.grid tr:nth-child(odd) {\n    background-color: white;\n}\n\n.grid tr:nth-child(even) {\n    background-color: #e7f4ff;\n}\n\n"] }]
-    }], () => [{ type: i1.Router }], { ApplicationName: [{
+    }], () => [{ type: i1.Router }], { ApplicationID: [{
             type: Input
         }], EntityID: [{
             type: Input

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

@@ -1,6 +1,7 @@
 import { OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BaseEntity } from '@memberjunction/core';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 export declare enum SettingsItem {
     EntityPermissions = "EntityPermissions",
@@ -11,14 +12,15 @@ export declare enum SettingsItem {
     Applications = "Applications",
     Application = "Application"
 }
-export declare class SettingsComponent implements OnInit {
+export declare class SettingsComponent extends BaseNavigationComponent implements OnInit {
     private router;
     private activatedRoute;
     currentItem: SettingsItem;
     baseRoute: string;
-    selectedRoleName: string;
-    selectedUserID: number;
+    selectedRoleID: string;
+    selectedUserID: string;
     selectedApplicationName: string;
+    selectedApplicationID: string;
     options: {
         label: string;
         value: SettingsItem;
@@ -30,7 +32,7 @@ export declare class SettingsComponent implements OnInit {
     updateComponentStateBasedOnPath(): void;
     selectApplication(a: BaseEntity): void;
     selectRole(r: BaseEntity): void;
-    selectUser(r: BaseEntity): void;
+    selectUser(u: BaseEntity): void;
     selectRoute(route: string, value: any): void;
     leftNavItemSelected(option: {
         label: string;

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

@@ -1,5 +1,14 @@
+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;
+};
 import { Component } from '@angular/core';
 import { NavigationEnd } from '@angular/router';
+import { Metadata } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import { filter } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
@@ -54,7 +63,7 @@ function SettingsComponent_Case_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-single-role", 7);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("RoleName", ctx_r2.selectedRoleName);
+    i0.ɵɵproperty("RoleID", ctx_r2.selectedRoleID);
 } }
 function SettingsComponent_Case_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -68,7 +77,7 @@ function SettingsComponent_Case_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-single-application", 9);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ApplicationName", ctx_r2.selectedApplicationName);
+    i0.ɵɵproperty("ApplicationID", ctx_r2.selectedApplicationID);
 } }
 export var SettingsItem;
 (function (SettingsItem) {
@@ -80,7 +89,7 @@ export var SettingsItem;
     SettingsItem["Applications"] = "Applications";
     SettingsItem["Application"] = "Application";
 })(SettingsItem || (SettingsItem = {}));
-export class SettingsComponent {
+let SettingsComponent = class SettingsComponent extends BaseNavigationComponent {
     selectItem(item, changeRoute = true) {
         if (typeof item === 'string')
             this.currentItem = SettingsItem[item];
@@ -94,13 +103,15 @@ export class SettingsComponent {
         this.router.navigate([this.baseRoute, subPath]);
     }
     constructor(router, activatedRoute) {
+        super();
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.currentItem = SettingsItem.Users;
         this.baseRoute = '/settings';
-        this.selectedRoleName = '';
-        this.selectedUserID = 0;
+        this.selectedRoleID = '';
+        this.selectedUserID = "";
         this.selectedApplicationName = '';
+        this.selectedApplicationID = '';
         this.options = [
             { label: 'Users', value: SettingsItem.Users },
             { label: 'Roles', value: SettingsItem.Roles },
@@ -117,6 +128,7 @@ export class SettingsComponent {
         });
     }
     updateComponentStateBasedOnPath() {
+        var _a, _b;
         // 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
@@ -132,20 +144,22 @@ export class SettingsComponent {
                 break;
             case 'application':
                 this.selectedApplicationName = segments.length > 2 ? segments[2] : '';
+                const md = new Metadata();
+                this.selectedApplicationID = (_b = (_a = md.Applications.find(a => a.Name === this.selectedApplicationName)) === null || _a === void 0 ? void 0 : _a.ID) !== null && _b !== void 0 ? _b : '';
                 this.selectItem(SettingsItem.Application, false);
                 break;
             case 'users':
                 this.selectItem(SettingsItem.Users, false);
                 break;
             case 'user':
-                this.selectedUserID = segments.length > 2 ? parseInt(segments[2]) : 0;
+                this.selectedUserID = segments.length > 2 ? segments[2] : "";
                 this.selectItem(SettingsItem.User, false);
                 break;
             case 'roles':
                 this.selectItem(SettingsItem.Roles, false);
                 break;
             case 'role':
-                this.selectedRoleName = segments.length > 2 ? segments[2] : '';
+                this.selectedRoleID = segments.length > 2 ? segments[2] : '';
                 this.selectItem(SettingsItem.Role, false);
                 break;
             default:
@@ -156,10 +170,10 @@ export class SettingsComponent {
         this.selectRoute('/settings/application', a.Name);
     }
     selectRole(r) {
-        this.selectRoute('/settings/role', r.Name);
+        this.selectRoute('/settings/role', r.ID);
     }
-    selectUser(r) {
-        this.selectRoute('/settings/user', r.ID);
+    selectUser(u) {
+        this.selectRoute('/settings/user', u.ID);
     }
     selectRoute(route, value) {
         this.router.navigate([route, value]);
@@ -169,9 +183,9 @@ export class SettingsComponent {
         // for example for Application/Applications we want to match so the left nav item is highlighted
         return option.value === this.currentItem || option.value === this.currentItem + 's';
     }
-}
+};
 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: 11, vars: 6, consts: [["mjFillContainer", "", 1, "container", 3, "bottomMargin", "rightMargin"], ["mjFillContainer", "", 1, "options-container", 3, "fillWidth"], ["class", "option-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], ["mjFillContainer", "", 1, "display-container", 3, "fillWidth"], ["EntityName", "Users", "SortBy", "Name", 3, "Columns"], [3, "UserID"], ["EntityName", "Roles", "SortBy", "Name", 3, "Columns"], ["mjFillContainer", "", 3, "RoleName"], ["EntityName", "Applications", "SortBy", "Name", 3, "Columns"], [3, "ApplicationName"], [1, "option-item", 3, "click"], ["EntityName", "Users", "SortBy", "Name", 3, "RecordSelected", "Columns"], ["EntityName", "Roles", "SortBy", "Name", 3, "RecordSelected", "Columns"], ["EntityName", "Applications", "SortBy", "Name", 3, "RecordSelected", "Columns"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
+SettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 6, consts: [["mjFillContainer", "", 1, "container", 3, "bottomMargin", "rightMargin"], ["mjFillContainer", "", 1, "options-container", 3, "fillWidth"], ["class", "option-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], ["mjFillContainer", "", 1, "display-container", 3, "fillWidth"], ["EntityName", "Users", "SortBy", "Name", 3, "Columns"], [3, "UserID"], ["EntityName", "Roles", "SortBy", "Name", 3, "Columns"], ["mjFillContainer", "", 3, "RoleID"], ["EntityName", "Applications", "SortBy", "Name", 3, "Columns"], [3, "ApplicationID"], [1, "option-item", 3, "click"], ["EntityName", "Users", "SortBy", "Name", 3, "RecordSelected", "Columns"], ["EntityName", "Roles", "SortBy", "Name", 3, "RecordSelected", "Columns"], ["EntityName", "Applications", "SortBy", "Name", 3, "RecordSelected", "Columns"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
         i0.ɵɵtemplate(2, SettingsComponent_div_2_Template, 2, 3, "div", 2);
         i0.ɵɵelementEnd();
@@ -190,8 +204,12 @@ SettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsC
         i0.ɵɵadvance();
         i0.ɵɵconditional((tmp_5_0 = ctx.currentItem) === "EntityPermissions" ? 4 : tmp_5_0 === "Users" ? 5 : tmp_5_0 === "User" ? 6 : tmp_5_0 === "Roles" ? 7 : tmp_5_0 === "Role" ? 8 : tmp_5_0 === "Applications" ? 9 : tmp_5_0 === "Application" ? 10 : -1);
     } }, dependencies: [i2.NgForOf, i3.FillContainer, i4.EntityPermissionsSelectorWithGridComponent, i5.SimpleRecordListComponent, i6.SingleRoleComponent, i7.SingleUserComponent, i8.SingleApplicationComponent], styles: [".container[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  overflow: hidden;  \n}\n\n.options-container[_ngcontent-%COMP%] {\n  float: left; \n\n  width: 150px; \n\n  flex: 0 0 150px;\n  padding: 10px;\n  border-right: solid 1px lightgray;\n  box-sizing: border-box; \n\n}\n\n.option-item[_ngcontent-%COMP%] {\n  cursor: pointer;\n  margin-bottom: 10px; \n\n  padding: 5px 10px; \n\n  border-radius: 4px; \n\n}\n\n.display-container[_ngcontent-%COMP%] {\n  display: block; \n\n  margin-left: 160px; \n\n  padding: 10px;\n  box-sizing: border-box; \n\n}\n\n.selected[_ngcontent-%COMP%] {\n  background-color: #007bff; \n\n  color: white; \n\n  padding: 5px 10px; \n\n  border-radius: 4px; \n\n}"] });
+SettingsComponent = __decorate([
+    RegisterClass(BaseNavigationComponent, 'Settings')
+], SettingsComponent);
+export { SettingsComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-settings', template: "<div class=\"container\" mjFillContainer [bottomMargin]=\"5\" [rightMargin]=\"0\">\n    <!-- Options container -->\n    <div class=\"options-container\" mjFillContainer [fillWidth]=\"false\">\n        <div *ngFor=\"let o of options\"\n            class=\"option-item\"\n            [class.selected]=\"leftNavItemSelected(o)\"\n            (click)=\"selectItem(o.value)\"\n        >{{o.label}}</div>\n    </div>\n\n    <!-- Display container -->\n    <div class=\"display-container\" mjFillContainer [fillWidth]=\"false\">\n        <!-- <mj-join-grid\n            RowsEntityName=\"Entities\"\n            RowsEntityDisplayField=\"Name\"\n            RowsEntityDataSource=\"FullEntity\"\n            RowsExtraFilter=\"SchemaName <> '__mj' AND (Name like 'a%' or Name like 'p%')\"\n            RowsOrderBy=\"Name\"\n            ColumnsEntityName=\"Actions\"\n            ColumnsEntityDisplayField=\"Name\"\n            ColumnsEntityDataSource= \"FullEntity\"\n            ColumnsMode=\"Entity\"\n            ColumnsExtraFilter=\"Name like 'v%' or Name like 'd%' or Name like 'test%'\"\n            ColumnsOrderBy=\"Name\"\n            JoinEntityName=\"Entity Actions\"\n            JoinEntityRowForeignKey=\"EntityID\"\n            JoinEntityColumnForeignKey=\"ActionID\"\n            CheckBoxValueMode=\"RecordExists\"\n            \n            style=\"height: 750px; width: 800px;\"\n        >\n\n        </mj-join-grid> -->\n        @switch (currentItem) {\n            @case ('EntityPermissions') {\n                <mj-entity-permissions-selector-with-grid></mj-entity-permissions-selector-with-grid>\n            }\n            @case ('Users') {\n                <mj-simple-record-list\n                    EntityName=\"Users\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Email', 'IsActive', 'Type']\"\n                    (RecordSelected)=\"selectUser($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('User') {\n                <mj-single-user [UserID]=\"selectedUserID\"></mj-single-user>\n            }\n            @case ('Roles') {\n                <mj-simple-record-list\n                    EntityName=\"Roles\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectRole($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Role') {\n                <mj-single-role [RoleName]=\"selectedRoleName\" mjFillContainer></mj-single-role>\n            }\n            @case ('Applications') {\n                <mj-simple-record-list\n                    EntityName=\"Applications\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectApplication($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Application') {\n                <mj-single-application [ApplicationName]=\"selectedApplicationName\"></mj-single-application>\n            }\n        }\n    </div>\n</div>", styles: [".container {\n  display: block;\n  width: 100%;\n  overflow: hidden;  \n}\n\n.options-container {\n  float: left; /* Float to the left */\n  width: 150px; /* Fixed width as specified */\n  flex: 0 0 150px;\n  padding: 10px;\n  border-right: solid 1px lightgray;\n  box-sizing: border-box; /* Ensures padding is included in the width */\n}\n\n.option-item {\n  cursor: pointer;\n  margin-bottom: 10px; /* Adds space between the options for better readability */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\n\n.display-container {\n  display: block; /* Ensures it's treated as a block-level element */\n  margin-left: 160px; /* Width of the options-container plus its padding */\n  padding: 10px;\n  box-sizing: border-box; /* Ensures padding doesn't add to the width */\n}\n\n.selected {\n  background-color: #007bff; /* A blue background for selected item */\n  color: white; /* White text color for better contrast */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\n"] }]
+        args: [{ selector: 'mj-settings', template: "<div class=\"container\" mjFillContainer [bottomMargin]=\"5\" [rightMargin]=\"0\">\n    <!-- Options container -->\n    <div class=\"options-container\" mjFillContainer [fillWidth]=\"false\">\n        <div *ngFor=\"let o of options\"\n            class=\"option-item\"\n            [class.selected]=\"leftNavItemSelected(o)\"\n            (click)=\"selectItem(o.value)\"\n        >{{o.label}}</div>\n    </div>\n\n    <!-- Display container -->\n    <div class=\"display-container\" mjFillContainer [fillWidth]=\"false\">\n        <!-- <mj-join-grid\n            RowsEntityName=\"Entities\"\n            RowsEntityDisplayField=\"Name\"\n            RowsEntityDataSource=\"FullEntity\"\n            RowsExtraFilter=\"SchemaName <> '__mj' AND (Name like 'a%' or Name like 'p%')\"\n            RowsOrderBy=\"Name\"\n            ColumnsEntityName=\"Actions\"\n            ColumnsEntityDisplayField=\"Name\"\n            ColumnsEntityDataSource= \"FullEntity\"\n            ColumnsMode=\"Entity\"\n            ColumnsExtraFilter=\"Name like 'v%' or Name like 'd%' or Name like 'test%'\"\n            ColumnsOrderBy=\"Name\"\n            JoinEntityName=\"Entity Actions\"\n            JoinEntityRowForeignKey=\"EntityID\"\n            JoinEntityColumnForeignKey=\"ActionID\"\n            CheckBoxValueMode=\"RecordExists\"\n            \n            style=\"height: 750px; width: 800px;\"\n        >\n\n        </mj-join-grid> -->\n        @switch (currentItem) {\n            @case ('EntityPermissions') {\n                <mj-entity-permissions-selector-with-grid></mj-entity-permissions-selector-with-grid>\n            }\n            @case ('Users') {\n                <mj-simple-record-list\n                    EntityName=\"Users\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Email', 'IsActive', 'Type']\"\n                    (RecordSelected)=\"selectUser($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('User') {\n                <mj-single-user [UserID]=\"selectedUserID\"></mj-single-user>\n            }\n            @case ('Roles') {\n                <mj-simple-record-list\n                    EntityName=\"Roles\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectRole($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Role') {\n                <mj-single-role [RoleID]=\"selectedRoleID\" mjFillContainer></mj-single-role>\n            }\n            @case ('Applications') {\n                <mj-simple-record-list\n                    EntityName=\"Applications\"\n                    SortBy=\"Name\"\n                    [Columns]=\"['Name', 'Description']\"\n                    (RecordSelected)=\"selectApplication($event)\"\n                ></mj-simple-record-list>\n            }\n            @case ('Application') {\n                <mj-single-application [ApplicationID]=\"selectedApplicationID\"></mj-single-application>\n            }\n        }\n    </div>\n</div>", styles: [".container {\n  display: block;\n  width: 100%;\n  overflow: hidden;  \n}\n\n.options-container {\n  float: left; /* Float to the left */\n  width: 150px; /* Fixed width as specified */\n  flex: 0 0 150px;\n  padding: 10px;\n  border-right: solid 1px lightgray;\n  box-sizing: border-box; /* Ensures padding is included in the width */\n}\n\n.option-item {\n  cursor: pointer;\n  margin-bottom: 10px; /* Adds space between the options for better readability */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\n\n.display-container {\n  display: block; /* Ensures it's treated as a block-level element */\n  margin-left: 160px; /* Width of the options-container plus its padding */\n  padding: 10px;\n  box-sizing: border-box; /* Ensures padding doesn't add to the width */\n}\n\n.selected {\n  background-color: #007bff; /* A blue background for selected item */\n  color: white; /* White text color for better contrast */\n  padding: 5px 10px; /* Optional: Adds some padding for a better visual appearance */\n  border-radius: 4px; /* Optional: Adds rounded corners for a more polished look */\n}\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: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 25 }); })();

package/dist/lib/single-application/single-application.component.d.ts

@@ -4,7 +4,7 @@ import { EntityFormDialogComponent } from '@memberjunction/ng-entity-form-dialog
 import * as i0 from "@angular/core";
 export declare class SingleApplicationComponent implements OnInit {
     private cdRef;
-    ApplicationName: string;
+    ApplicationID: string;
     entityFormComponent: EntityFormDialogComponent;
     gridHeight: number;
     isLoading: boolean;
@@ -16,5 +16,5 @@ export declare class SingleApplicationComponent implements OnInit {
     EditRecord(): Promise<void>;
     onEntityFormClosed(result: 'Save' | 'Cancel'): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SingleApplicationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SingleApplicationComponent, "mj-single-application", never, { "ApplicationName": { "alias": "ApplicationName"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleApplicationComponent, "mj-single-application", never, { "ApplicationID": { "alias": "ApplicationID"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -24,7 +24,7 @@ function SingleApplicationComponent_Conditional_2_mj_application_entities_grid_1
     i0.ɵɵelement(0, "mj-application-entities-grid", 8);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ApplicationName", ctx_r2.ApplicationName)("ApplicationRecord", ctx_r2.Record);
+    i0.ɵɵproperty("ApplicationID", ctx_r2.ApplicationID)("ApplicationRecord", ctx_r2.Record);
 } }
 function SingleApplicationComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -57,7 +57,7 @@ function SingleApplicationComponent_Conditional_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("TabSelected", true);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.ApplicationName && ctx_r2.Record);
+    i0.ɵɵproperty("ngIf", ctx_r2.ApplicationID && ctx_r2.Record);
 } }
 export class SingleApplicationComponent {
     constructor(cdRef) {
@@ -72,16 +72,16 @@ export class SingleApplicationComponent {
     }
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.ApplicationName && this.ApplicationName.length > 0) {
+            if (this.ApplicationID && this.ApplicationID.length > 0) {
                 this.isLoading = true;
                 const md = new Metadata();
-                let a = md.Applications.find(a => a.Name === this.ApplicationName);
+                let a = md.Applications.find(a => a.ID === this.ApplicationID);
                 if (!a) {
                     // sometime we are creating a new role, so attempt to refresh our metadata
                     yield md.Refresh();
-                    a = md.Applications.find(aa => aa.Name === this.ApplicationName);
+                    a = md.Applications.find(aa => aa.ID === this.ApplicationID);
                     if (!a)
-                        throw new Error(`Application ${this.ApplicationName} not found`);
+                        throw new Error(`Application ID: ${this.ApplicationID} not found`);
                 }
                 this.Record = yield md.GetEntityObject('Applications');
                 yield this.Record.Load(a.ID);
@@ -107,7 +107,7 @@ SingleApplicationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormComponent = _t.first);
-    } }, inputs: { ApplicationName: "ApplicationName" }, decls: 5, vars: 8, consts: [["entityForm", ""], ["mjFillContainer", ""], ["SectionName", "details", "Mode", "section", 3, "DialogClosed", "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [1, "info-table"], ["scope", "row"], [1, "edit-icon", "fa-solid", "fa-pen-to-square", 3, "click"], [3, "TabSelected"], ["Mode", "Applications", 3, "ApplicationName", "ApplicationRecord", 4, "ngIf"], ["Mode", "Applications", 3, "ApplicationName", "ApplicationRecord"]], template: function SingleApplicationComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { ApplicationID: "ApplicationID" }, decls: 5, vars: 8, consts: [["entityForm", ""], ["mjFillContainer", ""], ["SectionName", "details", "Mode", "section", 3, "DialogClosed", "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [1, "info-table"], ["scope", "row"], [1, "edit-icon", "fa-solid", "fa-pen-to-square", 3, "click"], [3, "TabSelected"], ["Mode", "Applications", 3, "ApplicationID", "ApplicationRecord", 4, "ngIf"], ["Mode", "Applications", 3, "ApplicationID", "ApplicationRecord"]], template: function SingleApplicationComponent_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 1);
         i0.ɵɵtemplate(1, SingleApplicationComponent_Conditional_1_Template, 1, 0, "kendo-loader")(2, SingleApplicationComponent_Conditional_2_Template, 18, 4);
@@ -125,8 +125,8 @@ SingleApplicationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i1.NgIf, i2.FillContainer, i3.MJTabStripComponent, i3.MJTabBodyComponent, i3.MJTabComponent, i4.EntityFormDialogComponent, i5.LoaderComponent, i6.ApplicationEntitiesGridComponent], styles: ["button[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.name[_ngcontent-%COMP%] {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.info-table[_ngcontent-%COMP%] {\n    width: 100%; \n\n    border-collapse: collapse; \n\n    margin-bottom: 10px;\n}\n\n.info-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    width: 150px; \n\n    font-weight: bold; \n\n    text-align: left; \n\n    padding: 8px; \n\n    border: none; \n\n    background-color: transparent; \n\n}\n\n.info-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    text-align: left; \n\n    padding: 8px; \n\n    border: none; \n\n    background-color: transparent; \n\n    overflow: hidden; \n\n    text-overflow: ellipsis; \n\n}\n\n\n\n.edit-icon[_ngcontent-%COMP%] {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; \n\n}\n\n.edit-icon[_ngcontent-%COMP%]:hover {\n    fill: #007bff; \n\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleApplicationComponent, [{
         type: Component,
-        args: [{ selector: 'mj-single-application', template: "<div mjFillContainer>\n    @if(isLoading) {\n        <kendo-loader></kendo-loader>\n    }\n    @if(!isLoading && Record) {\n        <table class=\"info-table\">\n            <tbody>\n                <tr>\n                    <th scope=\"row\">Application</th>\n                    <td>{{Record.Name}}\n                        <span class=\"edit-icon fa-solid fa-pen-to-square\" (click)=\"EditRecord()\"></span>\n                    </td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Description</th>\n                    <td>{{Record.Description}}</td>\n                </tr>\n            </tbody>\n        </table>         \n        <mj-tabstrip mjFillContainer>\n            <mj-tab [TabSelected]=\"true\">\n                Entities\n            </mj-tab>\n            <mj-tab-body>\n                <mj-application-entities-grid *ngIf=\"ApplicationName && Record\" Mode=\"Applications\" [ApplicationName]=\"ApplicationName\" [ApplicationRecord]=\"Record\"></mj-application-entities-grid>\n            </mj-tab-body>\n        </mj-tabstrip>\n    }\n</div>\n\n\n<mj-entity-form-dialog #entityForm \n    [Record]=\"Record\" \n    SectionName=\"details\" \n    Mode=\"section\" \n    [Visible]=\"showEntityEditingForm\" \n    [AutoRevertOnCancel]=\"true\"\n    [HandleSave]=\"true\"\n    [Width]=\"550\"\n    [Height]=\"450\"\n    (DialogClosed)=\"onEntityFormClosed($event)\">\n</mj-entity-form-dialog>\n", styles: ["button {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.name {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.info-table {\n    width: 100%; /* Take up the full width of the container */\n    border-collapse: collapse; /* For a cleaner look */\n    margin-bottom: 10px;\n}\n\n.info-table th {\n    width: 150px; /* Adjust this fixed width as needed */\n    font-weight: bold; /* Make header labels bold */\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n}\n\n.info-table td {\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n    overflow: hidden; /* Prevents content from overflowing */\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\n}\n\n/* Style for SVG icon */\n.edit-icon {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; /* Changes the cursor to a pointer */\n}\n\n.edit-icon:hover {\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { ApplicationName: [{
+        args: [{ selector: 'mj-single-application', template: "<div mjFillContainer>\n    @if(isLoading) {\n        <kendo-loader></kendo-loader>\n    }\n    @if(!isLoading && Record) {\n        <table class=\"info-table\">\n            <tbody>\n                <tr>\n                    <th scope=\"row\">Application</th>\n                    <td>{{Record.Name}}\n                        <span class=\"edit-icon fa-solid fa-pen-to-square\" (click)=\"EditRecord()\"></span>\n                    </td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Description</th>\n                    <td>{{Record.Description}}</td>\n                </tr>\n            </tbody>\n        </table>         \n        <mj-tabstrip mjFillContainer>\n            <mj-tab [TabSelected]=\"true\">\n                Entities\n            </mj-tab>\n            <mj-tab-body>\n                <mj-application-entities-grid *ngIf=\"ApplicationID && Record\" Mode=\"Applications\" [ApplicationID]=\"ApplicationID\" [ApplicationRecord]=\"Record\"></mj-application-entities-grid>\n            </mj-tab-body>\n        </mj-tabstrip>\n    }\n</div>\n\n\n<mj-entity-form-dialog #entityForm \n    [Record]=\"Record\" \n    SectionName=\"details\" \n    Mode=\"section\" \n    [Visible]=\"showEntityEditingForm\" \n    [AutoRevertOnCancel]=\"true\"\n    [HandleSave]=\"true\"\n    [Width]=\"550\"\n    [Height]=\"450\"\n    (DialogClosed)=\"onEntityFormClosed($event)\">\n</mj-entity-form-dialog>\n", styles: ["button {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.name {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.info-table {\n    width: 100%; /* Take up the full width of the container */\n    border-collapse: collapse; /* For a cleaner look */\n    margin-bottom: 10px;\n}\n\n.info-table th {\n    width: 150px; /* Adjust this fixed width as needed */\n    font-weight: bold; /* Make header labels bold */\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n}\n\n.info-table td {\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n    overflow: hidden; /* Prevents content from overflowing */\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\n}\n\n/* Style for SVG icon */\n.edit-icon {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; /* Changes the cursor to a pointer */\n}\n\n.edit-icon:hover {\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { ApplicationID: [{
             type: Input
         }], entityFormComponent: [{
             type: ViewChild,

package/dist/lib/single-role/single-role.component.d.ts

@@ -10,15 +10,15 @@ export declare class UserRoleEntity_Ext extends UserRoleEntity {
     get SavedUserName(): string;
     set SavedUserName(value: string);
     private _userID;
-    get SavedUserID(): number;
-    set SavedUserID(value: number);
-    private _savedRoleName;
-    get SavedRoleName(): string;
-    set SavedRoleName(value: string);
+    get SavedUserID(): string;
+    set SavedUserID(value: string);
+    private _savedRoleID;
+    get SavedRoleID(): string;
+    set SavedRoleID(value: string);
 }
 export declare class SingleRoleComponent implements OnInit {
     private cdRef;
-    RoleName: string;
+    RoleID: string;
     entityFormComponent: EntityFormDialogComponent;
     gridHeight: number;
     isLoading: boolean;
@@ -30,5 +30,5 @@ export declare class SingleRoleComponent implements OnInit {
     EditRecord(): Promise<void>;
     onEntityFormClosed(result: 'Save' | 'Cancel'): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SingleRoleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SingleRoleComponent, "mj-single-role", never, { "RoleName": { "alias": "RoleName"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleRoleComponent, "mj-single-role", never, { "RoleID": { "alias": "RoleID"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -81,7 +81,7 @@ function SingleRoleComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("bottomMargin", 150);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("RoleName", ctx_r2.RoleName)("RoleRecord", ctx_r2.RoleRecord);
+    i0.ɵɵproperty("RoleID", ctx_r2.RoleID)("RoleRecord", ctx_r2.RoleRecord);
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngIf", ctx_r2.RoleRecord && ctx_r2.RoleRecord.Name);
 } }
@@ -90,8 +90,8 @@ let UserRoleEntity_Ext = class UserRoleEntity_Ext extends UserRoleEntity {
         super(...arguments);
         this._selected = false;
         this._userName = '';
-        this._userID = 0;
-        this._savedRoleName = '';
+        this._userID = "";
+        this._savedRoleID = '';
     }
     get Selected() {
         return this._selected;
@@ -111,11 +111,11 @@ let UserRoleEntity_Ext = class UserRoleEntity_Ext extends UserRoleEntity {
     set SavedUserID(value) {
         this._userID = value;
     }
-    get SavedRoleName() {
-        return this._savedRoleName;
+    get SavedRoleID() {
+        return this._savedRoleID;
     }
-    set SavedRoleName(value) {
-        this._savedRoleName = value;
+    set SavedRoleID(value) {
+        this._savedRoleID = value;
     }
 };
 UserRoleEntity_Ext = __decorate([
@@ -137,13 +137,13 @@ export class SingleRoleComponent {
         return __awaiter(this, void 0, void 0, function* () {
             this.isLoading = true;
             const md = new Metadata();
-            let r = md.Roles.find(r => r.Name === this.RoleName);
+            let r = md.Roles.find(r => r.ID === this.RoleID);
             if (!r) {
                 // sometime we are creating a new role, so attempt to refresh our metadata
                 yield md.Refresh();
-                r = md.Roles.find(r => r.Name === this.RoleName);
+                r = md.Roles.find(r => r.ID === this.RoleID);
                 if (!r)
-                    throw new Error(`Role ${this.RoleName} not found`);
+                    throw new Error(`Role ${this.RoleID} not found`);
             }
             this.RoleRecord = yield md.GetEntityObject('Roles');
             yield this.RoleRecord.Load(r.ID);
@@ -168,7 +168,7 @@ SingleRoleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleR
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormComponent = _t.first);
-    } }, inputs: { RoleName: "RoleName" }, decls: 5, vars: 8, consts: [["entityForm", ""], ["mjFillContainer", "", 1, "wrapper"], ["SectionName", "details", "Mode", "section", 3, "DialogClosed", "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [1, "role-info-table"], ["scope", "row"], [1, "fa-solid", "fa-pen-to-square", 3, "click"], ["mjFillContainer", "", 3, "bottomMargin"], ["Mode", "Roles", 3, "RoleName", "RoleRecord"], ["Mode", "Role", "mjFillContainer", "", 3, "RoleName", 4, "ngIf"], ["Mode", "Role", "mjFillContainer", "", 3, "RoleName"]], template: function SingleRoleComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { RoleID: "RoleID" }, decls: 5, vars: 8, consts: [["entityForm", ""], ["mjFillContainer", "", 1, "wrapper"], ["SectionName", "details", "Mode", "section", 3, "DialogClosed", "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [1, "role-info-table"], ["scope", "row"], [1, "fa-solid", "fa-pen-to-square", 3, "click"], ["mjFillContainer", "", 3, "bottomMargin"], ["Mode", "Roles", 3, "RoleID", "RoleRecord"], ["Mode", "Role", "mjFillContainer", "", 3, "RoleName", 4, "ngIf"], ["Mode", "Role", "mjFillContainer", "", 3, "RoleName"]], template: function SingleRoleComponent_Template(rf, ctx) { if (rf & 1) {
         const _r1 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 1);
         i0.ɵɵtemplate(1, SingleRoleComponent_Conditional_1_Template, 1, 0, "kendo-loader")(2, SingleRoleComponent_Conditional_2_Template, 32, 8);
@@ -186,8 +186,8 @@ SingleRoleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleR
     } }, styles: [".wrapper[_ngcontent-%COMP%] {\n    display: block;\n}\n\nbutton[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.role-name[_ngcontent-%COMP%] {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.role-info-table[_ngcontent-%COMP%] {\n    width: 100%; \n\n    border-collapse: collapse; \n\n    margin-bottom: 10px;\n}\n\n.role-info-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    width: 150px; \n\n    font-weight: bold; \n\n    text-align: left; \n\n    padding: 8px; \n\n    border: none; \n\n    background-color: transparent; \n\n}\n\n.role-info-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    text-align: left; \n\n    padding: 8px; \n\n    border: none; \n\n    background-color: transparent; \n\n    overflow: hidden; \n\n    text-overflow: ellipsis; \n\n}\n\n\n\n.edit-icon[_ngcontent-%COMP%] {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; \n\n}\n\n.edit-icon[_ngcontent-%COMP%]:hover {\n    fill: #007bff; \n\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleRoleComponent, [{
         type: Component,
-        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer class=\"wrapper\">\n    @if(isLoading) {\n        <kendo-loader></kendo-loader>        \n    }\n    @if(!isLoading && RoleRecord) {\n        <table class=\"role-info-table\">\n            <tbody>\n                <tr>\n                    <th scope=\"row\">Role</th>\n                    <td>\n                        {{RoleRecord.Name}}\n                        <span class=\"fa-solid fa-pen-to-square\" (click)=\"EditRecord()\"></span>\n                    </td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Description</th>\n                    <td>{{RoleRecord.Description}}</td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Directory ID</th>\n                    <td>{{RoleRecord.DirectoryID}}</td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">SQL Name</th>\n                    <td>{{RoleRecord.SQLName}}</td>\n                </tr>\n            </tbody>\n        </table>         \n\n        <mj-tabstrip mjFillContainer [bottomMargin]=\"150\">\n            <mj-tab>\n                Users\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-roles-grid Mode=\"Roles\" [RoleName]=\"RoleName\" [RoleRecord]=\"RoleRecord\"></mj-user-roles-grid>\n            </mj-tab-body>\n\n            <mj-tab>\n                Entity Permissions\n            </mj-tab>\n            <mj-tab-body>\n                <mj-entity-permissions-grid *ngIf=\"RoleRecord && RoleRecord.Name\" Mode=\"Role\" [RoleName]=\"RoleRecord.Name\" mjFillContainer></mj-entity-permissions-grid>\n            </mj-tab-body>\n        </mj-tabstrip>\n    }\n</div>\n \n<mj-entity-form-dialog #entityForm \n        [Record]=\"RoleRecord\" \n        SectionName=\"details\" \n        Mode=\"section\" \n        [Visible]=\"showEntityEditingForm\" \n        [AutoRevertOnCancel]=\"true\"\n        [HandleSave]=\"true\"\n        [Width]=\"550\"\n        [Height]=\"450\"\n        (DialogClosed)=\"onEntityFormClosed($event)\">\n</mj-entity-form-dialog>\n", styles: [".wrapper {\n    display: block;\n}\n\nbutton {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.role-name {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.role-info-table {\n    width: 100%; /* Take up the full width of the container */\n    border-collapse: collapse; /* For a cleaner look */\n    margin-bottom: 10px;\n}\n\n.role-info-table th {\n    width: 150px; /* Adjust this fixed width as needed */\n    font-weight: bold; /* Make header labels bold */\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n}\n\n.role-info-table td {\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n    overflow: hidden; /* Prevents content from overflowing */\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\n}\n\n/* Style for SVG icon */\n.edit-icon {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; /* Changes the cursor to a pointer */\n}\n\n.edit-icon:hover {\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\n}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { RoleName: [{
+        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer class=\"wrapper\">\n    @if(isLoading) {\n        <kendo-loader></kendo-loader>        \n    }\n    @if(!isLoading && RoleRecord) {\n        <table class=\"role-info-table\">\n            <tbody>\n                <tr>\n                    <th scope=\"row\">Role</th>\n                    <td>\n                        {{RoleRecord.Name}}\n                        <span class=\"fa-solid fa-pen-to-square\" (click)=\"EditRecord()\"></span>\n                    </td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Description</th>\n                    <td>{{RoleRecord.Description}}</td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">Directory ID</th>\n                    <td>{{RoleRecord.DirectoryID}}</td>\n                </tr>\n                <tr>\n                    <th scope=\"row\">SQL Name</th>\n                    <td>{{RoleRecord.SQLName}}</td>\n                </tr>\n            </tbody>\n        </table>         \n\n        <mj-tabstrip mjFillContainer [bottomMargin]=\"150\">\n            <mj-tab>\n                Users\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-roles-grid Mode=\"Roles\" [RoleID]=\"RoleID\" [RoleRecord]=\"RoleRecord\"></mj-user-roles-grid>\n            </mj-tab-body>\n\n            <mj-tab>\n                Entity Permissions\n            </mj-tab>\n            <mj-tab-body>\n                <mj-entity-permissions-grid *ngIf=\"RoleRecord && RoleRecord.Name\" Mode=\"Role\" [RoleName]=\"RoleRecord.Name\" mjFillContainer></mj-entity-permissions-grid>\n            </mj-tab-body>\n        </mj-tabstrip>\n    }\n</div>\n \n<mj-entity-form-dialog #entityForm \n        [Record]=\"RoleRecord\" \n        SectionName=\"details\" \n        Mode=\"section\" \n        [Visible]=\"showEntityEditingForm\" \n        [AutoRevertOnCancel]=\"true\"\n        [HandleSave]=\"true\"\n        [Width]=\"550\"\n        [Height]=\"450\"\n        (DialogClosed)=\"onEntityFormClosed($event)\">\n</mj-entity-form-dialog>\n", styles: [".wrapper {\n    display: block;\n}\n\nbutton {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.role-name {\n    font-weight: bold;\n    font-size: 20px;\n    margin-left: 5px;\n    margin-top: 5px;\n}\n\n.role-info-table {\n    width: 100%; /* Take up the full width of the container */\n    border-collapse: collapse; /* For a cleaner look */\n    margin-bottom: 10px;\n}\n\n.role-info-table th {\n    width: 150px; /* Adjust this fixed width as needed */\n    font-weight: bold; /* Make header labels bold */\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n}\n\n.role-info-table td {\n    text-align: left; /* Align text to the left */\n    padding: 8px; /* Add some padding for spacing */\n    border: none; /* Removes the borders */\n    background-color: transparent; /* Removes any background color */\n    overflow: hidden; /* Prevents content from overflowing */\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\n}\n\n/* Style for SVG icon */\n.edit-icon {\n    margin-left: 20px; \n    vertical-align: middle;;\n    cursor: pointer; /* Changes the cursor to a pointer */\n}\n\n.edit-icon:hover {\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { RoleID: [{
             type: Input
         }], entityFormComponent: [{
             type: ViewChild,

package/dist/lib/single-user/single-user.component.d.ts

@@ -5,7 +5,7 @@ import { EntityFormDialogComponent } from '@memberjunction/ng-entity-form-dialog
 import * as i0 from "@angular/core";
 export declare class SingleUserComponent implements OnInit {
     private cdRef;
-    UserID: number;
+    UserID: string;
     entityFormComponent: EntityFormDialogComponent;
     gridHeight: number;
     isLoading: boolean;

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

@@ -123,13 +123,13 @@ export class SingleUserComponent {
     }
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.UserID > 0) {
+            if (this.UserID && this.UserID.length > 0) {
                 const md = new Metadata();
                 this.UserRecord = yield md.GetEntityObject('Users');
                 yield this.UserRecord.Load(this.UserID);
                 this.UserViewsParams = {
                     EntityName: 'User Views',
-                    ExtraFilter: `UserID = ${this.UserID}`,
+                    ExtraFilter: `UserID = '${this.UserID}'`,
                 };
             }
         });

package/dist/lib/user-roles-grid/user-roles-grid.component.d.ts

@@ -8,11 +8,11 @@ export declare class UserRolesGridComponent implements OnInit, OnChanges {
     /**
      * The name of the role we are working with, required if Mode is 'Roles'
      */
-    RoleName: string;
+    RoleID: string;
     /**
      * The ID of the user we are working with, required if Mode is 'Users'
      */
-    UserID: number;
+    UserID: string;
     isLoading: boolean;
     userRoles: UserRoleEntity_Ext[];
     Mode: 'Users' | 'Roles';
@@ -25,9 +25,11 @@ export declare class UserRolesGridComponent implements OnInit, OnChanges {
      */
     UserRecord: UserEntity | null;
     constructor(router: Router);
+    get RoleName(): string;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     Refresh(): Promise<void>;
+    getRoleName(roleID: string): string;
     saveUserRoles(): Promise<void>;
     cancelEdit(): void;
     flipAll(): void;
@@ -35,5 +37,5 @@ export declare class UserRolesGridComponent implements OnInit, OnChanges {
     protected IsReallyDirty(ur: UserRoleEntity_Ext): boolean;
     flipState($event: MouseEvent | undefined, ur: UserRoleEntity_Ext, flipState: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UserRolesGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UserRolesGridComponent, "mj-user-roles-grid", never, { "RoleName": { "alias": "RoleName"; "required": false; }; "UserID": { "alias": "UserID"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "RoleRecord": { "alias": "RoleRecord"; "required": false; }; "UserRecord": { "alias": "UserRecord"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserRolesGridComponent, "mj-user-roles-grid", never, { "RoleID": { "alias": "RoleID"; "required": false; }; "UserID": { "alias": "UserID"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "RoleRecord": { "alias": "RoleRecord"; "required": false; }; "UserRecord": { "alias": "UserRecord"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/lib/user-roles-grid/user-roles-grid.component.js

@@ -45,8 +45,9 @@ function UserRolesGridComponent_div_1_table_5_tr_8_td_2_Template(rf, ctx) { if (
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ur_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ur_r5.RoleName);
+    i0.ɵɵtextInterpolate(ctx_r1.getRoleName(ur_r5.RoleID));
 } }
 function UserRolesGridComponent_div_1_table_5_tr_8_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -124,6 +125,11 @@ export class UserRolesGridComponent {
          */
         this.UserRecord = null;
     }
+    get RoleName() {
+        const md = new Metadata();
+        const role = md.Roles.find(r => r.ID === this.RoleID);
+        return role ? role.Name : '';
+    }
     ngOnInit() {
         this.Refresh();
     }
@@ -134,15 +140,15 @@ export class UserRolesGridComponent {
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.Mode === 'Roles')
-                if (!this.RoleName || this.RoleName.length === 0 || !this.RoleRecord)
-                    throw new Error("RoleName and RoleRecord are required when Mode is 'Roles'");
+                if (!this.RoleID || this.RoleID.length === 0 || !this.RoleRecord)
+                    throw new Error("RoleID and RoleRecord are required when Mode is 'Roles'");
             if (this.Mode === 'Users')
                 if (!this.UserID || !this.UserRecord)
                     throw new Error("UserID and UserRecord are required when Mode is 'Users'");
             const md = new Metadata();
             this.isLoading = true;
             const rv = new RunView();
-            const filter = this.Mode === 'Roles' ? `RoleName='${this.RoleName}'` : `UserID=${this.UserID}`;
+            const filter = this.Mode === 'Roles' ? `RoleID='${this.RoleID}'` : `UserID='${this.UserID}'`;
             const result = yield rv.RunView({
                 EntityName: 'User Roles',
                 ExtraFilter: filter,
@@ -158,7 +164,7 @@ export class UserRolesGridComponent {
                     ur.Selected = true; // flip this on for all records that come from the DB
                     ur.SavedUserID = ur.UserID; // stash this in an extra property so we can later set it if we have a delete operation
                     ur.SavedUserName = ur.User; // stash this in an extra property so we can later set it if we have a delete operation
-                    ur.SavedRoleName = ur.RoleName; // stash this in an extra property so we can later set it if we have a delete operation
+                    ur.SavedRoleID = ur.RoleID; // stash this in an extra property so we can later set it if we have a delete operation
                 });
                 if (this.Mode === 'Roles') {
                     // for the mode of Roles, we want to bring in all of the possible users and then add any that are not in the existingUserRoles array
@@ -173,8 +179,8 @@ export class UserRolesGridComponent {
                         for (const u of usersNotInRole) {
                             const ur = yield md.GetEntityObject('User Roles');
                             ur.NewRecord();
-                            ur.RoleName = this.RoleName;
-                            ur.SavedRoleName = this.RoleName; // stash this in an extra property so we can later set it if we have a delete operation
+                            ur.RoleID = this.RoleID;
+                            ur.SavedRoleID = this.RoleID; // stash this in an extra property so we can later set it if we have a delete operation
                             ur.UserID = u.ID;
                             ur.Set('User', u.Name); // use weak typing to get around the readonly property
                             ur.SavedUserName = u.Name; // stash this in an extra property so we can later set it if we have a delete operation
@@ -189,21 +195,21 @@ export class UserRolesGridComponent {
                 else {
                     // for the mode of Users, we want to bring in all of the possible roles and then add any that are not in the existingUserRoles array
                     const roles = md.Roles;
-                    const rolesNotInUser = roles.filter(r => !existingUserRoles.some(p => p.RoleName === r.Name));
+                    const rolesNotInUser = roles.filter(r => !existingUserRoles.some(p => p.RoleID === r.ID));
                     for (const r of rolesNotInUser) {
                         const ur = yield md.GetEntityObject('User Roles');
                         ur.NewRecord();
-                        ur.RoleName = r.Name;
+                        ur.RoleID = r.ID;
                         ur.UserID = this.UserID;
                         ur.Set('User', this.UserRecord.Name); // use weak typing to get around the readonly property
                         ur.SavedUserName = this.UserRecord.Name; // stash this in an extra property so we can later set it if we have a delete operation
                         ur.SavedUserID = this.UserID; // stash this in an extra property so we can later set it if we have a delete operation
-                        ur.SavedRoleName = r.Name; // stash this in an extra property so we can later set it if we have a delete operation
+                        ur.SavedRoleID = r.ID; // stash this in an extra property so we can later set it if we have a delete operation
                         ur.Selected = false;
                         existingUserRoles.push(ur);
                     }
                     // finally sort the array
-                    this.userRoles = existingUserRoles.sort((a, b) => a.RoleName.localeCompare(b.RoleName));
+                    this.userRoles = existingUserRoles;
                 }
             }
             else {
@@ -212,6 +218,11 @@ export class UserRolesGridComponent {
             this.isLoading = false;
         });
     }
+    getRoleName(roleID) {
+        const md = new Metadata();
+        const role = md.Roles.find(r => r.ID === roleID);
+        return role ? role.Name : '';
+    }
     saveUserRoles() {
         return __awaiter(this, void 0, void 0, function* () {
             // iterate through each permisison and for the ones that are dirty, add to transaction group then commit at once
@@ -238,7 +249,7 @@ export class UserRolesGridComponent {
                         if (ur.User === null) {
                             ur.Set('User', ur.SavedUserName); // get around the read-only property
                             ur.UserID = ur.SavedUserID;
-                            ur.RoleName = this.Mode === 'Roles' ? this.RoleName : ur.SavedRoleName;
+                            ur.RoleID = this.Mode === 'Roles' ? this.RoleID : ur.SavedRoleID;
                         }
                     });
                 }
@@ -277,9 +288,9 @@ export class UserRolesGridComponent {
     }
     IsReallyDirty(ur) {
         // logic is simple, if we are in the database, but the checkbox is not checked (or vice versa), then we are dirty
-        if (ur.Selected && ur.ID > 0)
+        if (ur.Selected && ur.IsSaved)
             return false; // if we are in the database and the checkbox is checked, we are not dirty
-        else if (!ur.Selected && ur.ID > 0)
+        else if (!ur.Selected && ur.IsSaved)
             return true; // if we are in the database and the checkbox is not checked, we are dirty because we'd have to be removed
         else if (ur.Selected)
             return true; // if we are NOT in the database and the checkbox is checked, we are dirty because we'd have to be added
@@ -294,7 +305,7 @@ export class UserRolesGridComponent {
     }
 }
 UserRolesGridComponent.ɵfac = function UserRolesGridComponent_Factory(t) { return new (t || UserRolesGridComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
-UserRolesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserRolesGridComponent, selectors: [["mj-user-roles-grid"]], inputs: { RoleName: "RoleName", UserID: "UserID", Mode: "Mode", RoleRecord: "RoleRecord", UserRecord: "UserRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["class", "content", 4, "ngIf"], [1, "content"], ["kendoButton", "", 3, "click", "disabled"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "click", "ngModel"]], template: function UserRolesGridComponent_Template(rf, ctx) { if (rf & 1) {
+UserRolesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserRolesGridComponent, selectors: [["mj-user-roles-grid"]], inputs: { RoleID: "RoleID", UserID: "UserID", Mode: "Mode", RoleRecord: "RoleRecord", UserRecord: "UserRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["class", "content", 4, "ngIf"], [1, "content"], ["kendoButton", "", 3, "click", "disabled"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "click", "ngModel"]], template: function UserRolesGridComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵtemplate(0, UserRolesGridComponent_div_0_Template, 2, 0, "div", 0)(1, UserRolesGridComponent_div_1_Template, 6, 3, "div", 1);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.isLoading);
@@ -303,8 +314,8 @@ UserRolesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: User
     } }, dependencies: [i2.NgForOf, i2.NgIf, i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.ButtonComponent, i5.LoaderComponent], styles: ["button[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n\n\n.grid[_ngcontent-%COMP%] {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse;\n}\n\n\n\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background-color: #f2f2f2;\n    color: black;\n    font-weight: bold;\n    text-align: center;\n    border: 1px solid gray;\n    padding: 0 8px;\n    cursor: pointer;\n}\n\n\n\n.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    border: 1px solid gray;\n    height: 36px;\n    text-align: center;\n    padding: 0 8px;\n}\n\n\n\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, \n.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\n    min-width: 150px;\n    text-align: left;\n}\n\n\n\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), \n.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\n    width: 100px;\n}\n\n\n\n.grid[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\n    background-color: white;\n}\n\n.grid[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\n    background-color: #e7f4ff;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserRolesGridComponent, [{
         type: Component,
-        args: [{ selector: 'mj-user-roles-grid', template: "<div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\n<div class=\"content\" *ngIf=\"!isLoading\">\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"cancelEdit()\">Cancel</button>\n    <table *ngIf=\"!isLoading\" class=\"grid\">\n        <thead>\n            <tr>\n                <th *ngIf=\"Mode === 'Roles'\">User</th>\n                <th *ngIf=\"Mode === 'Users'\">Role</th>\n                <th (click)=\"flipAll()\">In Role</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let ur of userRoles\">\n                <td *ngIf=\"Mode === 'Roles'\">{{ ur.User }}</td>\n                <td *ngIf=\"Mode === 'Users'\">{{ ur.RoleName }}</td>\n                <td (click)=\"flipState($event, ur, true)\">\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"ur.Selected\" (click)=\"flipState($event, ur, false)\">\n                </td>\n            </tr>\n        </tbody>\n    </table>            \n</div>", styles: ["button {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n/* Styles for the table with the 'grid' class */\n.grid {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse;\n}\n\n/* Styles for th elements within the table with the 'grid' class */\n.grid th {\n    background-color: #f2f2f2;\n    color: black;\n    font-weight: bold;\n    text-align: center;\n    border: 1px solid gray;\n    padding: 0 8px;\n    cursor: pointer;\n}\n\n/* Styles for td elements within the table with the 'grid' class */\n.grid td {\n    border: 1px solid gray;\n    height: 36px;\n    text-align: center;\n    padding: 0 8px;\n}\n\n/* Styles for the first child th and td within the table with the 'grid' class */\n.grid th:first-child,\n.grid td:first-child {\n    min-width: 150px;\n    text-align: left;\n}\n\n/* Styles for non-first-child th and td elements within the table with the 'grid' class */\n.grid th:not(:first-child),\n.grid td:not(:first-child) {\n    width: 100px;\n}\n\n/* Alternating row background colors for the table with the 'grid' class */\n.grid tr:nth-child(odd) {\n    background-color: white;\n}\n\n.grid tr:nth-child(even) {\n    background-color: #e7f4ff;\n}\n\n"] }]
-    }], () => [{ type: i1.Router }], { RoleName: [{
+        args: [{ selector: 'mj-user-roles-grid', template: "<div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\n<div class=\"content\" *ngIf=\"!isLoading\">\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"cancelEdit()\">Cancel</button>\n    <table *ngIf=\"!isLoading\" class=\"grid\">\n        <thead>\n            <tr>\n                <th *ngIf=\"Mode === 'Roles'\">User</th>\n                <th *ngIf=\"Mode === 'Users'\">Role</th>\n                <th (click)=\"flipAll()\">In Role</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr *ngFor=\"let ur of userRoles\">\n                <td *ngIf=\"Mode === 'Roles'\">{{ ur.User }}</td>\n                <td *ngIf=\"Mode === 'Users'\">{{ getRoleName(ur.RoleID) }}</td>\n                <td (click)=\"flipState($event, ur, true)\">\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"ur.Selected\" (click)=\"flipState($event, ur, false)\">\n                </td>\n            </tr>\n        </tbody>\n    </table>            \n</div>", styles: ["button {\n    margin-left: 5px;\n    margin-top: 5px;\n    width: 125px;\n}\n\n/* Styles for the table with the 'grid' class */\n.grid {\n    margin-left: 5px;\n    margin-top: 5px;\n    border-collapse: collapse;\n}\n\n/* Styles for th elements within the table with the 'grid' class */\n.grid th {\n    background-color: #f2f2f2;\n    color: black;\n    font-weight: bold;\n    text-align: center;\n    border: 1px solid gray;\n    padding: 0 8px;\n    cursor: pointer;\n}\n\n/* Styles for td elements within the table with the 'grid' class */\n.grid td {\n    border: 1px solid gray;\n    height: 36px;\n    text-align: center;\n    padding: 0 8px;\n}\n\n/* Styles for the first child th and td within the table with the 'grid' class */\n.grid th:first-child,\n.grid td:first-child {\n    min-width: 150px;\n    text-align: left;\n}\n\n/* Styles for non-first-child th and td elements within the table with the 'grid' class */\n.grid th:not(:first-child),\n.grid td:not(:first-child) {\n    width: 100px;\n}\n\n/* Alternating row background colors for the table with the 'grid' class */\n.grid tr:nth-child(odd) {\n    background-color: white;\n}\n\n.grid tr:nth-child(even) {\n    background-color: #e7f4ff;\n}\n\n"] }]
+    }], () => [{ type: i1.Router }], { RoleID: [{
             type: Input
         }], UserID: [{
             type: Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-settings",
-  "version": "1.8.1",
+  "version": "2.1.1",
   "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",
@@ -25,17 +25,17 @@
     "@angular/router": "18.0.2"
   },
   "dependencies": {
-    "@memberjunction/core-entities": "1.8.1",
-    "@memberjunction/global": "1.8.1",
-    "@memberjunction/core": "1.8.1",
-    "@memberjunction/ng-container-directives": "1.8.1",
-    "@memberjunction/ng-shared": "1.8.1",
-    "@memberjunction/ng-entity-permissions": "1.8.1",
-    "@memberjunction/ng-base-forms": "1.8.1",
-    "@memberjunction/ng-entity-form-dialog": "1.8.1",
-    "@memberjunction/ng-user-view-grid": "1.8.1",
-    "@memberjunction/ng-simple-record-list": "1.8.1",
-    "@memberjunction/ng-tabstrip": "1.8.1",
+    "@memberjunction/core-entities": "2.1.1",
+    "@memberjunction/global": "2.1.1",
+    "@memberjunction/core": "2.1.1",
+    "@memberjunction/ng-container-directives": "2.1.1",
+    "@memberjunction/ng-shared": "2.1.1",
+    "@memberjunction/ng-entity-permissions": "2.1.1",
+    "@memberjunction/ng-base-forms": "2.1.1",
+    "@memberjunction/ng-entity-form-dialog": "2.1.1",
+    "@memberjunction/ng-user-view-grid": "2.1.1",
+    "@memberjunction/ng-simple-record-list": "2.1.1",
+    "@memberjunction/ng-tabstrip": "2.1.1",
     "@progress/kendo-angular-dropdowns": "16.2.0",
     "@progress/kendo-angular-grid": "16.2.0",
     "@progress/kendo-angular-buttons": "16.2.0",