@memberjunction/ng-explorer-settings 0.9.10 → 0.9.13

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

@@ -9,52 +9,88 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { Component } from '@angular/core';
 import { Metadata, RunView } from '@memberjunction/core';
+import { SharedService, kendoSVGIcon } from '@memberjunction/ng-shared';
 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) {
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@memberjunction/ng-container-directives";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@memberjunction/ng-entity-form-dialog";
+import * as i8 from "@progress/kendo-angular-indicators";
+function RolesListComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵelement(1, "kendo-loader");
     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);
+function RolesListComponent_table_4_tr_8_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 9);
+    i0.ɵɵlistener("click", function RolesListComponent_table_4_tr_8_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const r_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.selectRole(undefined, r_r5)); });
+    i0.ɵɵelementStart(1, "td")(2, "span");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "span")(5, "kendo-svgicon", 10);
+    i0.ɵɵlistener("click", function RolesListComponent_table_4_tr_8_Template_kendo_svgicon_click_5_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const r_r5 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.deleteRole($event, r_r5)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(6, "td")(7, "span");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const r_r3 = ctx.$implicit;
+    const r_r5 = ctx.$implicit;
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(r_r5.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(r_r3.Name);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(r_r3.Description);
+    i0.ɵɵproperty("icon", ctx_r4.kendoSVGIcon("trash"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(r_r5.Description);
 } }
-function RolesListComponent_table_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "table", 3)(1, "thead")(2, "tr")(3, "th");
+function RolesListComponent_table_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 7)(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.ɵɵtemplate(8, RolesListComponent_table_4_tr_8_Template, 9, 3, "tr", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("ngForOf", ctx_r1.roles);
 } }
+function RolesListComponent_kendo_dialog_7_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 11);
+    i0.ɵɵlistener("close", function RolesListComponent_kendo_dialog_7_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.closeDeleteRoleDialog("No")); });
+    i0.ɵɵelementStart(1, "div");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 12);
+    i0.ɵɵlistener("click", function RolesListComponent_kendo_dialog_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.closeDeleteRoleDialog("Yes")); });
+    i0.ɵɵtext(5, "Yes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 1);
+    i0.ɵɵlistener("click", function RolesListComponent_kendo_dialog_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r10); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.closeDeleteRoleDialog("No")); });
+    i0.ɵɵtext(7, "No");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("width", 300)("height", 200);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Are you sure you want to delete the role '", ctx_r3.deleteRoleRecord.Name, "'? ");
+} }
 export class RolesListComponent {
     constructor(router) {
         this.router = router;
         this.isLoading = false;
         this.roles = [];
+        this.kendoSVGIcon = kendoSVGIcon;
+        this.deleteRoleDialogVisible = false;
+        this.showNewRoleForm = false;
     }
     ngOnInit() {
         this.Refresh();
@@ -79,24 +115,87 @@ export class RolesListComponent {
             this.isLoading = false;
         });
     }
-    selectRole(r) {
+    selectRole(event, r) {
+        if (event)
+            event.stopPropagation(); // prevent row from getting click
         // change the route to point to the /settings/role/{r.Name} route
         this.router.navigate(['/settings/role', r.Name]);
     }
+    deleteRole(event, r) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // confirm with the user first
+            this.deleteRoleRecord = r;
+            this.deleteRoleDialogVisible = true;
+            event.stopPropagation(); // prevent row from getting click
+        });
+    }
+    closeDeleteRoleDialog(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // if the user confirms, delete the role
+            this.deleteRoleDialogVisible = false;
+            if (result === 'Yes') {
+                if (!(yield this.deleteRoleRecord.Delete())) {
+                    // show an error message
+                    SharedService.Instance.CreateSimpleNotification('Error deleting role', 'error', 3000);
+                }
+                else
+                    this.Refresh(); // refresh the list
+            }
+            this.deleteRoleRecord = null;
+        });
+    }
+    createNewRole() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // attempt to create a new role and if success, navigate to the new role
+            const md = new Metadata();
+            this.newRoleRecord = yield md.GetEntityObject('Roles');
+            if (this.newRoleRecord) {
+                this.newRoleRecord.NewRecord();
+                this.showNewRoleForm = true;
+            }
+        });
+    }
+    onNewRoleFormClosed(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showNewRoleForm = false;
+            if (result === 'Save') {
+                // the dialog already saved the record, just check to make sure it was saved and if so, navigate
+                if (this.newRoleRecord.ID) {
+                    const md = new Metadata();
+                    // force a refresh since we have a new role
+                    SharedService.Instance.CreateSimpleNotification('Role created successfully, refreshing metadata...', 'info', 3000);
+                    this.router.navigate(['/settings/role', this.newRoleRecord.Name]);
+                }
+                else
+                    throw new Error('New role record was not saved');
+            }
+        });
+    }
 }
 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);
+RolesListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RolesListComponent, selectors: [["mj-roles-list"]], decls: 8, vars: 9, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", "", 3, "click"], [4, "ngIf"], ["class", "grid", 4, "ngIf"], ["SectionName", "details", "Mode", "section", 3, "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "close"], ["entityForm", ""], ["title", "Delete Role?", 3, "width", "height", "close", 4, "ngIf"], [1, "grid"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"], [1, "icon", 3, "icon", "click"], ["title", "Delete Role?", 3, "width", "height", "close"], ["kendoButton", "", "themeColor", "primary", 3, "click"]], template: function RolesListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+        i0.ɵɵlistener("click", function RolesListComponent_Template_button_click_1_listener() { return ctx.createNewRole(); });
+        i0.ɵɵtext(2, "New Role");
         i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(3, RolesListComponent_div_3_Template, 2, 0, "div", 2)(4, RolesListComponent_table_4_Template, 9, 1, "table", 3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(5, "mj-entity-form-dialog", 4, 5);
+        i0.ɵɵlistener("close", function RolesListComponent_Template_mj_entity_form_dialog_close_5_listener($event) { return ctx.onNewRoleFormClosed($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(7, RolesListComponent_kendo_dialog_7_Template, 8, 3, "kendo-dialog", 6);
     } if (rf & 2) {
-        i0.ɵɵadvance();
+        i0.ɵɵadvance(3);
         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}"] });
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("Record", ctx.newRoleRecord)("Visible", ctx.showNewRoleForm)("AutoRevertOnCancel", true)("HandleSave", true)("Width", 550)("Height", 450);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.deleteRoleDialogVisible && ctx.deleteRoleRecord);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.DialogComponent, i3.DialogActionsComponent, i4.FillContainer, i5.ButtonComponent, i6.SVGIconComponent, i7.EntityFormDialog, i8.LoaderComponent], styles: ["button[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n.wrapper[_ngcontent-%COMP%] {\r\n    padding-right: 10px;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 10px;\r\n    margin-right: 5px;\r\n    border-collapse: collapse; \n\r\n    width: 100%;\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    text-align: left;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    height: 36px; \n\r\n    padding: 0 8px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    display: flex; \n\r\n    justify-content: space-between; \n\r\n    align-items: center; \n\r\n    padding-right: 8px; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   span[_ngcontent-%COMP%]:first-child {\r\n    border: none; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   span[_ngcontent-%COMP%]:last-child {\r\n    border: none; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   .icon[_ngcontent-%COMP%] {\r\n    margin-left: 10px; \n\r\n    cursor: pointer; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\r\n    cursor: pointer;\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\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"] }]
+        args: [{ selector: 'mj-roles-list', template: "<div mjFillContainer class=\"wrapper\">\r\n    <button kendoButton (click)=\"createNewRole()\">New Role</button>\r\n    <div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></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(undefined, r)\">\r\n                <td>\r\n                    <span>{{ r.Name }}</span>  \r\n                    <span>\r\n                        <!-- <kendo-svgicon class='icon' [icon]=\"kendoSVGIcon('pencil')\" (click)=\"selectRole($event, r)\"></kendo-svgicon> -->\r\n                        <kendo-svgicon class='icon' [icon]=\"kendoSVGIcon('trash')\" (click)=\"deleteRole($event, r)\"></kendo-svgicon>\r\n                    </span>\r\n                </td>\r\n                <td><span>{{ r.Description }}</span></td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n \r\n<mj-entity-form-dialog #entityForm \r\n    [Record]=\"newRoleRecord\" \r\n    SectionName=\"details\" \r\n    Mode=\"section\" \r\n    [Visible]=\"showNewRoleForm\" \r\n    [AutoRevertOnCancel]=\"true\"\r\n    [HandleSave]=\"true\"\r\n    [Width]=\"550\"\r\n    [Height]=\"450\"\r\n    (close)=\"onNewRoleFormClosed($event)\">\r\n</mj-entity-form-dialog>\r\n\r\n<kendo-dialog\r\n        *ngIf=\"deleteRoleDialogVisible && deleteRoleRecord\" \r\n        title=\"Delete Role?\" \r\n        [width]=\"300\"\r\n        [height]=\"200\"\r\n        (close)=\"closeDeleteRoleDialog('No')\" >\r\n    <div>\r\n        Are you sure you want to delete the role '{{deleteRoleRecord.Name}}'?\r\n    </div>\r\n    <kendo-dialog-actions>\r\n        <button kendoButton (click)=\"closeDeleteRoleDialog('Yes')\"  themeColor=\"primary\">Yes</button>\r\n        <button kendoButton (click)=\"closeDeleteRoleDialog('No')\">No</button>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["button {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n.wrapper {\r\n    padding-right: 10px;\r\n}\r\n\r\n/* Style for the whole table */\r\ntable {\r\n    margin-left: 5px;\r\n    margin-top: 10px;\r\n    margin-right: 5px;\r\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\r\n    width: 100%;\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    text-align: left;\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    height: 36px; /* Fixed height for all rows */\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Style for the first column cells */\r\ntable td:first-child {\r\n    display: flex; /* Make the cell a flex container */\r\n    justify-content: space-between; /* Space out the text and icons */\r\n    align-items: center; /* Center items vertically */\r\n    padding-right: 8px; /* Ensure there is some padding on the right */\r\n}\r\n\r\n/* Style for the text span within the first column */\r\ntd:first-child span:first-child {\r\n    border: none; /* Ensures no border is applied to the span */\r\n}\r\n\r\n/* Style for the icons container span within the first column */\r\ntd:first-child span:last-child {\r\n    border: none; /* Ensures no border is applied to the span */\r\n}\r\n\r\n/* Style for the icons within the first column */\r\ntd:first-child .icon {\r\n    margin-left: 10px; /* Space between icons if needed */\r\n    cursor: pointer; /* Change cursor to pointer on hover */\r\n}\r\n\r\ntable tr {\r\n    cursor: pointer;\r\n}\r\n\r\ntable tr:hover {\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

@@ -1,17 +1,41 @@
 import { OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { BaseEntity } from '@memberjunction/core';
 import * as i0 from "@angular/core";
+export declare enum SettingsItem {
+    EntityPermissions = "EntityPermissions",
+    Users = "Users",
+    User = "User",
+    Roles = "Roles",
+    Role = "Role",
+    Applications = "Applications",
+    Application = "Application"
+}
 export declare class SettingsComponent implements OnInit {
     private router;
     private activatedRoute;
-    currentItem: 'EntityPermissions' | 'Users' | 'Roles' | 'Role';
+    currentItem: SettingsItem;
     baseRoute: string;
     selectedRoleName: string;
-    selectItem(item: 'EntityPermissions' | 'Users' | 'Roles' | 'Role', changeRoute?: boolean): void;
+    selectedUserID: number;
+    selectedApplicationName: string;
+    options: {
+        label: string;
+        value: SettingsItem;
+    }[];
+    selectItem(item: SettingsItem | string, changeRoute?: boolean): void;
     changeRoute(subPath: string): void;
     constructor(router: Router, activatedRoute: ActivatedRoute);
     ngOnInit(): void;
     updateComponentStateBasedOnPath(): void;
+    selectApplication(a: BaseEntity): void;
+    selectRole(r: BaseEntity): void;
+    selectUser(r: BaseEntity): void;
+    selectRoute(route: string, value: any): void;
+    leftNavItemSelected(option: {
+        label: string;
+        value: any;
+    }): boolean;
     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

@@ -4,36 +4,102 @@ 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) {
+import * as i3 from "@memberjunction/ng-container-directives";
+import * as i4 from "@memberjunction/ng-entity-permissions";
+import * as i5 from "@memberjunction/ng-simple-record-list";
+import * as i6 from "../single-role/single-role.component";
+import * as i7 from "../single-user/single-user.component";
+import * as i8 from "../single-application/single-application.component";
+function SettingsComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵlistener("click", function SettingsComponent_div_2_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const o_r8 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.selectItem(o_r8.value)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const o_r8 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("selected", ctx_r0.leftNavItemSelected(o_r8));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(o_r8.label);
+} }
+function SettingsComponent_div_4_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) {
+const _c0 = () => ["Name", "Email", "IsActive", "Type"];
+function SettingsComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mj-simple-record-list", 6);
+    i0.ɵɵlistener("RecordSelected", function SettingsComponent_div_5_Template_mj_simple_record_list_RecordSelected_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.selectUser($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(1, _c0));
+} }
+function SettingsComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtext(1, " Users Component Goes Here ");
+    i0.ɵɵelement(1, "mj-single-user", 7);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("UserID", ctx_r3.selectedUserID);
+} }
+const _c1 = () => ["Name", "Description"];
+function SettingsComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mj-simple-record-list", 8);
+    i0.ɵɵlistener("RecordSelected", function SettingsComponent_div_7_Template_mj_simple_record_list_RecordSelected_1_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.selectRole($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(1, _c1));
 } }
-function SettingsComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "mj-roles-list");
+    i0.ɵɵelement(1, "mj-single-role", 9);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("RoleName", ctx_r5.selectedRoleName);
 } }
-function SettingsComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "mj-simple-record-list", 10);
+    i0.ɵɵlistener("RecordSelected", function SettingsComponent_div_9_Template_mj_simple_record_list_RecordSelected_1_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.selectApplication($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Columns", i0.ɵɵpureFunction0(1, _c1));
+} }
+function SettingsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "mj-single-role", 5);
+    i0.ɵɵelement(1, "mj-single-application", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
+    const ctx_r7 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("RoleName", ctx_r3.selectedRoleName);
+    i0.ɵɵproperty("ApplicationName", ctx_r7.selectedApplicationName);
 } }
+export var SettingsItem;
+(function (SettingsItem) {
+    SettingsItem["EntityPermissions"] = "EntityPermissions";
+    SettingsItem["Users"] = "Users";
+    SettingsItem["User"] = "User";
+    SettingsItem["Roles"] = "Roles";
+    SettingsItem["Role"] = "Role";
+    SettingsItem["Applications"] = "Applications";
+    SettingsItem["Application"] = "Application";
+})(SettingsItem || (SettingsItem = {}));
 export class SettingsComponent {
     selectItem(item, changeRoute = true) {
-        this.currentItem = item;
+        if (typeof item === 'string')
+            this.currentItem = SettingsItem[item];
+        else
+            this.currentItem = item;
         if (changeRoute)
             this.changeRoute(item.toLowerCase());
     }
@@ -44,9 +110,17 @@ export class SettingsComponent {
     constructor(router, activatedRoute) {
         this.router = router;
         this.activatedRoute = activatedRoute;
-        this.currentItem = 'EntityPermissions';
+        this.currentItem = SettingsItem.Users;
         this.baseRoute = '/settings';
         this.selectedRoleName = '';
+        this.selectedUserID = 0;
+        this.selectedApplicationName = '';
+        this.options = [
+            { label: 'Users', value: SettingsItem.Users },
+            { label: 'Roles', value: SettingsItem.Roles },
+            { label: 'Applications', value: SettingsItem.Applications },
+            { label: 'Entity Permissions', value: SettingsItem.EntityPermissions }
+        ];
     }
     ngOnInit() {
         // manually update the first time
@@ -55,31 +129,6 @@ export class SettingsComponent {
         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
@@ -87,62 +136,83 @@ export class SettingsComponent {
         // 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);
+                this.selectItem(SettingsItem.EntityPermissions, false);
+                break;
+            case 'applications':
+                this.selectItem(SettingsItem.Applications, false);
+                break;
+            case 'application':
+                this.selectedApplicationName = segments.length > 2 ? segments[2] : '';
+                this.selectItem(SettingsItem.Application, false);
                 break;
             case 'users':
-                this.selectItem('Users', false);
+                this.selectItem(SettingsItem.Users, false);
+                break;
+            case 'user':
+                this.selectedUserID = segments.length > 2 ? parseInt(segments[2]) : 0;
+                this.selectItem(SettingsItem.User, false);
                 break;
             case 'roles':
-                this.selectItem('Roles', false);
+                this.selectItem(SettingsItem.Roles, false);
                 break;
             case 'role':
                 this.selectedRoleName = segments.length > 2 ? segments[2] : '';
-                this.selectItem('Role', false);
+                this.selectItem(SettingsItem.Role, false);
                 break;
             default:
                 break;
         }
     }
+    selectApplication(a) {
+        this.selectRoute('/settings/application', a.Name);
+    }
+    selectRole(r) {
+        this.selectRoute('/settings/role', r.Name);
+    }
+    selectUser(r) {
+        this.selectRoute('/settings/user', r.ID);
+    }
+    selectRoute(route, value) {
+        this.router.navigate([route, value]);
+    }
+    leftNavItemSelected(option) {
+        // if the currentItem matches it directly or if adding an S to the current item matches it, then return true
+        // 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: 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");
+SettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], decls: 11, vars: 10, consts: [["mjFillContainer", "", 1, "container", 3, "fillWidth", "bottomMargin"], [1, "options-container"], ["class", "option-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "display-container"], [4, "ngIf"], [1, "option-item", 3, "click"], ["EntityName", "Users", "SortBy", "Name", 3, "Columns", "RecordSelected"], [3, "UserID"], ["EntityName", "Roles", "SortBy", "Name", 3, "Columns", "RecordSelected"], [3, "RoleName"], ["EntityName", "Applications", "SortBy", "Name", 3, "Columns", "RecordSelected"], [3, "ApplicationName"]], 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();
-        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.ɵɵelementStart(3, "div", 3);
+        i0.ɵɵtemplate(4, SettingsComponent_div_4_Template, 2, 0, "div", 4)(5, SettingsComponent_div_5_Template, 2, 2, "div", 4)(6, SettingsComponent_div_6_Template, 2, 1, "div", 4)(7, SettingsComponent_div_7_Template, 2, 2, "div", 4)(8, SettingsComponent_div_8_Template, 2, 1, "div", 4)(9, SettingsComponent_div_9_Template, 2, 2, "div", 4)(10, SettingsComponent_div_10_Template, 2, 1, "div", 4);
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
+        i0.ɵɵproperty("fillWidth", false)("bottomMargin", 5);
         i0.ɵɵadvance(2);
-        i0.ɵɵclassProp("selected", ctx.currentItem === "Users");
+        i0.ɵɵproperty("ngForOf", ctx.options);
         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 === "User");
+        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  }"] });
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "Applications");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.currentItem === "Application");
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.FillContainer, i4.EntityPermissionsSelectorWithGridComponent, i5.SimpleRecordListComponent, i6.SingleRoleComponent, i7.SingleUserComponent, i8.SingleApplicationComponent], styles: [".container[_ngcontent-%COMP%] {\r\n  display: flex;\r\n  width: 100%;\r\n  border: solid 1px lightgray;\r\n}\r\n\r\n.options-container[_ngcontent-%COMP%] {\r\n  flex: 0 0 150px;\r\n  padding: 10px;\r\n  border-right: solid 1px lightgray;\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  "] }]
+        args: [{ selector: 'mj-settings', template: "<div class=\"container\" mjFillContainer [fillWidth]=\"false\" [bottomMargin]=\"5\">\r\n    <!-- Options container -->\r\n    <div class=\"options-container\">\r\n        <div *ngFor=\"let o of options\"\r\n            class=\"option-item\"\r\n            [class.selected]=\"leftNavItemSelected(o)\"\r\n            (click)=\"selectItem(o.value)\"\r\n        >{{o.label}}</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\r\n        <div *ngIf=\"currentItem === 'Users'\">\r\n            <mj-simple-record-list\r\n                EntityName=\"Users\"\r\n                SortBy=\"Name\"\r\n                [Columns]=\"['Name', 'Email', 'IsActive', 'Type']\"\r\n                (RecordSelected)=\"selectUser($event)\"\r\n            ></mj-simple-record-list>\r\n        </div>\r\n        <div *ngIf=\"currentItem === 'User'\">\r\n            <mj-single-user [UserID]=\"selectedUserID\"></mj-single-user>\r\n        </div>\r\n\r\n        <div *ngIf=\"currentItem === 'Roles'\">\r\n            <mj-simple-record-list\r\n                EntityName=\"Roles\"\r\n                SortBy=\"Name\"\r\n                [Columns]=\"['Name', 'Description']\"\r\n                (RecordSelected)=\"selectRole($event)\"\r\n            ></mj-simple-record-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\r\n        <div *ngIf=\"currentItem === 'Applications'\">\r\n            <mj-simple-record-list\r\n                EntityName=\"Applications\"\r\n                SortBy=\"Name\"\r\n                [Columns]=\"['Name', 'Description']\"\r\n                (RecordSelected)=\"selectApplication($event)\"\r\n            ></mj-simple-record-list>\r\n        </div>\r\n        <div *ngIf=\"currentItem === 'Application'\">\r\n            <mj-single-application [ApplicationName]=\"selectedApplicationName\"></mj-single-application>\r\n        </div>        \r\n    </div>\r\n</div>", styles: [".container {\r\n  display: flex;\r\n  width: 100%;\r\n  border: solid 1px lightgray;\r\n}\r\n\r\n.options-container {\r\n  flex: 0 0 150px;\r\n  padding: 10px;\r\n  border-right: solid 1px lightgray;\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src\\lib\\settings\\settings.component.ts", lineNumber: 22 }); })();

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

@@ -0,0 +1,22 @@
+import { OnInit, ChangeDetectorRef } from '@angular/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { ApplicationEntity } from '@memberjunction/core-entities';
+import { EntityFormDialog } from '@memberjunction/ng-entity-form-dialog';
+import * as i0 from "@angular/core";
+export declare class SingleApplicationComponent implements OnInit {
+    private cdRef;
+    ApplicationName: string;
+    entityFormComponent: EntityFormDialog;
+    gridHeight: number;
+    isLoading: boolean;
+    Record: ApplicationEntity | null;
+    kendoSVGIcon: typeof kendoSVGIcon;
+    showEntityEditingForm: boolean;
+    constructor(cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    protected Refresh(): Promise<void>;
+    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>;
+}