@memberjunction/ng-explorer-settings 0.9.10 → 0.9.13

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

@@ -0,0 +1,144 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Input, ViewChild } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-container-directives";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@progress/kendo-angular-layout";
+import * as i5 from "@memberjunction/ng-entity-form-dialog";
+import * as i6 from "@progress/kendo-angular-indicators";
+import * as i7 from "../application-entities-grid/application-entities-grid.component";
+const _c0 = ["entityForm"];
+function SingleApplicationComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+function SingleApplicationComponent_div_2_ng_template_16_mj_application_entities_grid_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-application-entities-grid", 11);
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ApplicationName", ctx_r4.ApplicationName)("ApplicationRecord", ctx_r4.Record);
+} }
+function SingleApplicationComponent_div_2_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SingleApplicationComponent_div_2_ng_template_16_mj_application_entities_grid_0_Template, 1, 2, "mj-application-entities-grid", 10);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngIf", ctx_r3.ApplicationName && ctx_r3.Record);
+} }
+function SingleApplicationComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "table", 4)(2, "tbody")(3, "tr")(4, "th", 5);
+    i0.ɵɵtext(5, "Application");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "td");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(8, "kendo-svgicon", 6);
+    i0.ɵɵlistener("click", function SingleApplicationComponent_div_2_Template_kendo_svgicon_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.EditRecord()); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "tr")(10, "th", 5);
+    i0.ɵɵtext(11, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "td");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(14, "kendo-tabstrip", 7)(15, "kendo-tabstrip-tab", 8);
+    i0.ɵɵtemplate(16, SingleApplicationComponent_div_2_ng_template_16_Template, 1, 1, "ng-template", 9);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.Record.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("icon", ctx_r1.kendoSVGIcon("pencil"));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.Record.Description);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("keepTabContent", true)("animate", false);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("selected", true);
+} }
+export class SingleApplicationComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.gridHeight = 750;
+        this.isLoading = false;
+        this.Record = null;
+        this.kendoSVGIcon = kendoSVGIcon;
+        this.showEntityEditingForm = false;
+    }
+    ngOnInit() {
+        this.Refresh();
+    }
+    Refresh() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.ApplicationName && this.ApplicationName.length > 0) {
+                this.isLoading = true;
+                const md = new Metadata();
+                let a = md.Applications.find(a => a.Name === this.ApplicationName);
+                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);
+                    if (!a)
+                        throw new Error(`Application ${this.ApplicationName} not found`);
+                }
+                this.Record = yield md.GetEntityObject('Applications');
+                yield this.Record.Load(a.ID);
+            }
+            this.isLoading = false;
+        });
+    }
+    EditRecord() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // show the dialog
+            this.showEntityEditingForm = true;
+        });
+    }
+    onEntityFormClosed(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showEntityEditingForm = false;
+        });
+    }
+}
+SingleApplicationComponent.ɵfac = function SingleApplicationComponent_Factory(t) { return new (t || SingleApplicationComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+SingleApplicationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleApplicationComponent, selectors: [["mj-single-application"]], viewQuery: function SingleApplicationComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormComponent = _t.first);
+    } }, inputs: { ApplicationName: "ApplicationName" }, decls: 5, vars: 8, consts: [["mjFillContainer", ""], [4, "ngIf"], ["SectionName", "details", "Mode", "section", 3, "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "close"], ["entityForm", ""], [1, "info-table"], ["scope", "row"], [1, "edit-icon", 3, "icon", "click"], [3, "keepTabContent", "animate"], ["title", "Entities", 3, "selected"], ["kendoTabContent", ""], ["Mode", "Applications", 3, "ApplicationName", "ApplicationRecord", 4, "ngIf"], ["Mode", "Applications", 3, "ApplicationName", "ApplicationRecord"]], template: function SingleApplicationComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0);
+        i0.ɵɵtemplate(1, SingleApplicationComponent_div_1_Template, 2, 0, "div", 1)(2, SingleApplicationComponent_div_2_Template, 17, 6, "div", 1);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "mj-entity-form-dialog", 2, 3);
+        i0.ɵɵlistener("close", function SingleApplicationComponent_Template_mj_entity_form_dialog_close_3_listener($event) { return ctx.onEntityFormClosed($event); });
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.isLoading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.Record);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("Record", ctx.Record)("Visible", ctx.showEntityEditingForm)("AutoRevertOnCancel", true)("HandleSave", true)("Width", 550)("Height", 450);
+    } }, dependencies: [i1.NgIf, i2.FillContainer, i3.SVGIconComponent, i4.TabStripComponent, i4.TabStripTabComponent, i4.TabContentDirective, i5.EntityFormDialog, i6.LoaderComponent, i7.ApplicationEntitiesGridComponent], styles: ["button[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n\r\n\r\n.name[_ngcontent-%COMP%] {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.info-table[_ngcontent-%COMP%] {\r\n    width: 100%; \n\r\n    border-collapse: collapse; \n\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.info-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    width: 150px; \n\r\n    font-weight: bold; \n\r\n    text-align: left; \n\r\n    padding: 8px; \n\r\n    border: none; \n\r\n    background-color: transparent; \n\r\n}\r\n\r\n.info-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    text-align: left; \n\r\n    padding: 8px; \n\r\n    border: none; \n\r\n    background-color: transparent; \n\r\n    overflow: hidden; \n\r\n    text-overflow: ellipsis; \n\r\n}\r\n\r\n\n\r\n.edit-icon[_ngcontent-%COMP%] {\r\n    margin-left: 20px; \r\n    vertical-align: middle;;\r\n    cursor: pointer; \n\r\n}\r\n\r\n.edit-icon[_ngcontent-%COMP%]:hover {\r\n    fill: #007bff; \n\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleApplicationComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-single-application', template: "<div mjFillContainer>\r\n    <div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\r\n    <div *ngIf=\"!isLoading && Record\">\r\n        <table class=\"info-table\">\r\n            <tbody>\r\n                <tr>\r\n                    <th scope=\"row\">Application</th>\r\n                    <td>{{Record.Name}}<kendo-svgicon class='edit-icon' [icon]=\"kendoSVGIcon('pencil')\" (click)=\"EditRecord()\"></kendo-svgicon></td>\r\n                </tr>\r\n                <tr>\r\n                    <th scope=\"row\">Description</th>\r\n                    <td>{{Record.Description}}</td>\r\n                </tr>\r\n            </tbody>\r\n        </table>         \r\n        <kendo-tabstrip\r\n            [keepTabContent]=\"true\"\r\n            [animate]=\"false\" \r\n            >    \r\n            <kendo-tabstrip-tab title=\"Entities\" [selected]=\"true\">\r\n                <ng-template kendoTabContent>\r\n                    <mj-application-entities-grid *ngIf=\"ApplicationName && Record\" Mode=\"Applications\" [ApplicationName]=\"ApplicationName\" [ApplicationRecord]=\"Record\"></mj-application-entities-grid>\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    </div>\r\n</div>\r\n\r\n\r\n<mj-entity-form-dialog #entityForm \r\n    [Record]=\"Record\" \r\n    SectionName=\"details\" \r\n    Mode=\"section\" \r\n    [Visible]=\"showEntityEditingForm\" \r\n    [AutoRevertOnCancel]=\"true\"\r\n    [HandleSave]=\"true\"\r\n    [Width]=\"550\"\r\n    [Height]=\"450\"\r\n    (close)=\"onEntityFormClosed($event)\">\r\n</mj-entity-form-dialog>\r\n", styles: ["button {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n\r\n\r\n.name {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.info-table {\r\n    width: 100%; /* Take up the full width of the container */\r\n    border-collapse: collapse; /* For a cleaner look */\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.info-table th {\r\n    width: 150px; /* Adjust this fixed width as needed */\r\n    font-weight: bold; /* Make header labels bold */\r\n    text-align: left; /* Align text to the left */\r\n    padding: 8px; /* Add some padding for spacing */\r\n    border: none; /* Removes the borders */\r\n    background-color: transparent; /* Removes any background color */\r\n}\r\n\r\n.info-table td {\r\n    text-align: left; /* Align text to the left */\r\n    padding: 8px; /* Add some padding for spacing */\r\n    border: none; /* Removes the borders */\r\n    background-color: transparent; /* Removes any background color */\r\n    overflow: hidden; /* Prevents content from overflowing */\r\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\r\n}\r\n\r\n/* Style for SVG icon */\r\n.edit-icon {\r\n    margin-left: 20px; \r\n    vertical-align: middle;;\r\n    cursor: pointer; /* Changes the cursor to a pointer */\r\n}\r\n\r\n.edit-icon:hover {\r\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\r\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { ApplicationName: [{
+            type: Input
+        }], entityFormComponent: [{
+            type: ViewChild,
+            args: ['entityForm']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleApplicationComponent, { className: "SingleApplicationComponent", filePath: "src\\lib\\single-application\\single-application.component.ts", lineNumber: 14 }); })();

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

@@ -1,6 +1,7 @@
-import { OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { OnInit, ChangeDetectorRef } from '@angular/core';
 import { kendoSVGIcon } from '@memberjunction/ng-shared';
-import { UserRoleEntity } from '@memberjunction/core-entities';
+import { RoleEntity, UserRoleEntity } from '@memberjunction/core-entities';
+import { EntityFormDialog } from '@memberjunction/ng-entity-form-dialog';
 import * as i0 from "@angular/core";
 export declare class UserRoleEntity_Ext extends UserRoleEntity {
     private _selected;
@@ -12,22 +13,24 @@ export declare class UserRoleEntity_Ext extends UserRoleEntity {
     private _userID;
     get SavedUserID(): number;
     set SavedUserID(value: number);
+    private _savedRoleName;
+    get SavedRoleName(): string;
+    set SavedRoleName(value: string);
 }
-export declare class SingleRoleComponent implements OnInit, OnChanges {
+export declare class SingleRoleComponent implements OnInit {
+    private cdRef;
     RoleName: string;
-    BottomMargin: number;
-    userRoles: UserRoleEntity_Ext[];
+    entityFormComponent: EntityFormDialog;
     gridHeight: number;
     isLoading: boolean;
+    RoleRecord: RoleEntity | null;
     kendoSVGIcon: typeof kendoSVGIcon;
-    constructor();
+    showEntityEditingForm: boolean;
+    constructor(cdRef: ChangeDetectorRef);
     ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    Refresh(): Promise<void>;
-    saveUserRoles(): Promise<void>;
-    get NumDirty(): number;
-    protected IsReallyDirty(ur: UserRoleEntity_Ext): boolean;
-    flipState($event: MouseEvent, ur: UserRoleEntity_Ext, flipState: boolean): void;
+    protected Refresh(): Promise<void>;
+    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; }; "BottomMargin": { "alias": "BottomMargin"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleRoleComponent, "mj-single-role", never, { "RoleName": { "alias": "RoleName"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -13,88 +13,89 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Component, Input } from '@angular/core';
-import { BaseEntity, Metadata, RunView } from '@memberjunction/core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { BaseEntity, Metadata } from '@memberjunction/core';
 import { kendoSVGIcon } from '@memberjunction/ng-shared';
 import { UserRoleEntity } from '@memberjunction/core-entities';
 import { RegisterClass } from '@memberjunction/global';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-container-directives";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@memberjunction/ng-entity-permissions";
-import * as i6 from "@progress/kendo-angular-layout";
+const _c0 = ["entityForm"];
 function SingleRoleComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵelement(1, "kendo-loader");
     i0.ɵɵelementEnd();
 } }
-function SingleRoleComponent_ng_template_4_table_5_tr_8_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td");
-    i0.ɵɵtext(2);
+function SingleRoleComponent_div_2_ng_template_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-user-roles-grid", 11);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("RoleName", ctx_r3.RoleName)("RoleRecord", ctx_r3.RoleRecord);
+} }
+function SingleRoleComponent_div_2_ng_template_28_mj_entity_permissions_grid_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-entity-permissions-grid", 14);
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("RoleName", ctx_r5.RoleRecord.Name);
+} }
+function SingleRoleComponent_div_2_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, SingleRoleComponent_div_2_ng_template_28_mj_entity_permissions_grid_1_Template, 1, 1, "mj-entity-permissions-grid", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 12);
-    i0.ɵɵlistener("click", function SingleRoleComponent_ng_template_4_table_5_tr_8_Template_td_click_3_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const ur_r5 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r6.flipState($event, ur_r5, true)); });
-    i0.ɵɵelementStart(4, "input", 13);
-    i0.ɵɵtwoWayListener("ngModelChange", function SingleRoleComponent_ng_template_4_table_5_tr_8_Template_input_ngModelChange_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const ur_r5 = restoredCtx.$implicit; i0.ɵɵtwoWayBindingSet(ur_r5.Selected, $event) || (ur_r5.Selected = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("click", function SingleRoleComponent_ng_template_4_table_5_tr_8_Template_input_click_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r7); const ur_r5 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r9.flipState($event, ur_r5, false)); });
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ur_r5 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ur_r5.User);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ur_r5.Selected);
+    const ctx_r4 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r4.RoleRecord && ctx_r4.RoleRecord.Name);
 } }
-function SingleRoleComponent_ng_template_4_table_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "table", 10)(1, "thead")(2, "tr")(3, "th");
-    i0.ɵɵtext(4, "User");
+function SingleRoleComponent_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "table", 4)(2, "tbody")(3, "tr")(4, "th", 5);
+    i0.ɵɵtext(5, "Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "th");
-    i0.ɵɵtext(6, "In Role");
+    i0.ɵɵelementStart(6, "td");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(8, "kendo-svgicon", 6);
+    i0.ɵɵlistener("click", function SingleRoleComponent_div_2_Template_kendo_svgicon_click_8_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.EditRecord()); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "tbody");
-    i0.ɵɵtemplate(8, SingleRoleComponent_ng_template_4_table_5_tr_8_Template, 5, 2, "tr", 11);
+    i0.ɵɵelementStart(9, "tr")(10, "th", 5);
+    i0.ɵɵtext(11, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "td");
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngForOf", ctx_r3.userRoles);
-} }
-function SingleRoleComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
-    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(14, "tr")(15, "th", 5);
+    i0.ɵɵtext(16, "Directory ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 8);
-    i0.ɵɵlistener("click", function SingleRoleComponent_ng_template_4_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.saveUserRoles()); });
-    i0.ɵɵtext(4, "Save");
+    i0.ɵɵelementStart(17, "td");
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "tr")(20, "th", 5);
+    i0.ɵɵtext(21, "SQL Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, SingleRoleComponent_ng_template_4_table_5_Template, 9, 1, "table", 9);
+    i0.ɵɵelementStart(22, "td");
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(24, "kendo-tabstrip", 7)(25, "kendo-tabstrip-tab", 8);
+    i0.ɵɵtemplate(26, SingleRoleComponent_div_2_ng_template_26_Template, 1, 2, "ng-template", 9);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "kendo-tabstrip-tab", 10);
+    i0.ɵɵtemplate(28, SingleRoleComponent_div_2_ng_template_28_Template, 2, 1, "ng-template", 9);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("Role: ", ctx_r1.RoleName, "");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.RoleRecord.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r1.NumDirty === 0);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading);
-} }
-function SingleRoleComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "mj-entity-permissions-grid", 14);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("Role: ", ctx_r2.RoleName, "");
+    i0.ɵɵproperty("icon", ctx_r1.kendoSVGIcon("pencil"));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.RoleRecord.Description);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.RoleRecord.DirectoryID);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.RoleRecord.SQLName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("keepTabContent", true)("animate", false);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("RoleName", ctx_r2.RoleName);
+    i0.ɵɵproperty("selected", true);
 } }
 let UserRoleEntity_Ext = class UserRoleEntity_Ext extends UserRoleEntity {
     constructor() {
@@ -102,6 +103,7 @@ let UserRoleEntity_Ext = class UserRoleEntity_Ext extends UserRoleEntity {
         this._selected = false;
         this._userName = '';
         this._userID = 0;
+        this._savedRoleName = '';
     }
     get Selected() {
         return this._selected;
@@ -121,158 +123,86 @@ let UserRoleEntity_Ext = class UserRoleEntity_Ext extends UserRoleEntity {
     set SavedUserID(value) {
         this._userID = value;
     }
+    get SavedRoleName() {
+        return this._savedRoleName;
+    }
+    set SavedRoleName(value) {
+        this._savedRoleName = value;
+    }
 };
 UserRoleEntity_Ext = __decorate([
     RegisterClass(BaseEntity, 'User Roles', 10) // register this with a high priority so we are used here, we just need to extend it to add a property as a flag to know if it's in the database or not
 ], UserRoleEntity_Ext);
 export { UserRoleEntity_Ext };
 export class SingleRoleComponent {
-    constructor() {
-        this.BottomMargin = 0;
-        this.userRoles = [];
+    constructor(cdRef) {
+        this.cdRef = cdRef;
         this.gridHeight = 750;
         this.isLoading = false;
+        this.RoleRecord = null;
         this.kendoSVGIcon = kendoSVGIcon;
+        this.showEntityEditingForm = false;
     }
     ngOnInit() {
         this.Refresh();
     }
-    ngOnChanges(changes) {
-        if (changes.EntityName && !changes.EntityName.isFirstChange()) {
-            // If EntityName has changed and it's not the first change (initialization)
-            this.Refresh();
-        }
-    }
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.RoleName && this.RoleName.length > 0) {
-                const startTime = new Date().getTime();
-                this.isLoading = true;
-                const md = new Metadata();
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'User Roles',
-                    ExtraFilter: `RoleName='${this.RoleName}'`,
-                    ResultType: 'entity_object'
-                });
-                if (result.Success) {
-                    // we have all of the saved permissions now
-                    // the post-process we need to do now is to see if there are any roles that don't have any existing permissions and if so, we need to create 
-                    // new permission records for them. We won't actually consider those "Dirty" and save those unless the user actually selects one or more
-                    // to turn on, we are just doing this to make the grid easy to manage from the user perspective.
-                    const existingUserRoles = result.Results;
-                    existingUserRoles.forEach(ur => {
-                        ur.Selected = true;
-                        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
-                    }); // flip this on for all records that come from the DB
-                    const userResult = yield rv.RunView({
-                        EntityName: 'Users',
-                        ExtraFilter: 'IsActive=1',
-                        ResultType: 'entity_object'
-                    });
-                    if (userResult.Success) {
-                        const users = userResult.Results;
-                        const usersNotInRole = users.filter(u => !existingUserRoles.some(p => p.UserID === u.ID));
-                        for (const u of usersNotInRole) {
-                            const ur = yield md.GetEntityObject('User Roles');
-                            ur.NewRecord();
-                            ur.RoleName = this.RoleName;
-                            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
-                            ur.SavedUserID = u.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);
-                        }
-                    }
-                    this.userRoles = existingUserRoles.sort((a, b) => a.User.localeCompare(b.User));
-                }
-                else {
-                    throw new Error("Error loading user roles: " + result.ErrorMessage);
-                }
-                this.isLoading = false;
+            this.isLoading = true;
+            const md = new Metadata();
+            let r = md.Roles.find(r => r.Name === this.RoleName);
+            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);
+                if (!r)
+                    throw new Error(`Role ${this.RoleName} not found`);
             }
+            this.RoleRecord = yield md.GetEntityObject('Roles');
+            yield this.RoleRecord.Load(r.ID);
+            this.isLoading = false;
         });
     }
-    saveUserRoles() {
+    EditRecord() {
         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
-            const md = new Metadata();
-            const tg = yield md.CreateTransactionGroup();
-            let itemCount = 0;
-            this.userRoles.forEach(ur => {
-                if (this.IsReallyDirty(ur)) {
-                    ur.TransactionGroup = tg;
-                    itemCount++;
-                    // now, we have to determine if we are going to save the record or delete it
-                    // if ur.Selected === false and we are in the database, we need to delete
-                    // otherwise, we need to save
-                    if (ur.Selected)
-                        ur.Save();
-                    else
-                        ur.Delete();
-                }
-            });
-            if (itemCount > 0) {
-                if (yield tg.Submit()) {
-                    // for any items in the above that were deleted, we would have had the User property wiped out so we need to go check to see if we have a null ID and if so, copy the UserName back into the User property
-                    this.userRoles.forEach(ur => {
-                        if (ur.User === null) {
-                            ur.Set('User', ur.SavedUserName); // get around the read-only property
-                            ur.UserID = ur.SavedUserID;
-                            ur.RoleName = this.RoleName;
-                        }
-                    });
-                }
-            }
+            // show the dialog
+            this.showEntityEditingForm = true;
         });
     }
-    get NumDirty() {
-        return this.userRoles.filter(ur => this.IsReallyDirty(ur)).length;
-    }
-    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)
-            return false; // if we are in the database and the checkbox is checked, we are not dirty
-        else if (!ur.Selected && ur.ID > 0)
-            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
-        else
-            return false;
-    }
-    flipState($event, ur, flipState) {
-        if (flipState)
-            ur.Selected = !ur.Selected;
-        else
-            $event.stopPropagation();
+    onEntityFormClosed(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showEntityEditingForm = false;
+        });
     }
 }
-SingleRoleComponent.ɵfac = function SingleRoleComponent_Factory(t) { return new (t || SingleRoleComponent)(); };
-SingleRoleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleRoleComponent, selectors: [["mj-single-role"]], inputs: { RoleName: "RoleName", BottomMargin: "BottomMargin" }, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 4, consts: [["mjFillContainer", ""], [4, "ngIf"], [3, "keepTabContent", "animate"], ["title", "Users", 3, "selected"], ["kendoTabContent", ""], ["title", "Entity Permissions"], [1, "content"], [1, "role-name"], ["kendoButton", "", 3, "disabled", "click"], ["class", "grid", 4, "ngIf"], [1, "grid"], [4, "ngFor", "ngForOf"], [3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel", "ngModelChange", "click"], ["Mode", "Role", 3, "RoleName"]], template: function SingleRoleComponent_Template(rf, ctx) { if (rf & 1) {
+SingleRoleComponent.ɵfac = function SingleRoleComponent_Factory(t) { return new (t || SingleRoleComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+SingleRoleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleRoleComponent, selectors: [["mj-single-role"]], viewQuery: function SingleRoleComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityFormComponent = _t.first);
+    } }, inputs: { RoleName: "RoleName" }, decls: 5, vars: 8, consts: [["mjFillContainer", ""], [4, "ngIf"], ["SectionName", "details", "Mode", "section", 3, "Record", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "close"], ["entityForm", ""], [1, "role-info-table"], ["scope", "row"], [1, "edit-icon", 3, "icon", "click"], [3, "keepTabContent", "animate"], ["title", "Users", 3, "selected"], ["kendoTabContent", ""], ["title", "Entity Permissions"], ["Mode", "Roles", 3, "RoleName", "RoleRecord"], [1, "content"], ["Mode", "Role", 3, "RoleName", 4, "ngIf"], ["Mode", "Role", 3, "RoleName"]], template: function SingleRoleComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵtemplate(1, SingleRoleComponent_div_1_Template, 2, 0, "div", 1);
-        i0.ɵɵelementStart(2, "kendo-tabstrip", 2)(3, "kendo-tabstrip-tab", 3);
-        i0.ɵɵtemplate(4, SingleRoleComponent_ng_template_4_Template, 6, 3, "ng-template", 4);
+        i0.ɵɵtemplate(1, SingleRoleComponent_div_1_Template, 2, 0, "div", 1)(2, SingleRoleComponent_div_2_Template, 29, 8, "div", 1);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "mj-entity-form-dialog", 2, 3);
+        i0.ɵɵlistener("close", function SingleRoleComponent_Template_mj_entity_form_dialog_close_3_listener($event) { return ctx.onEntityFormClosed($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(5, "kendo-tabstrip-tab", 5);
-        i0.ɵɵtemplate(6, SingleRoleComponent_ng_template_6_Template, 4, 2, "ng-template", 4);
-        i0.ɵɵelementEnd()()();
     } if (rf & 2) {
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.isLoading);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("keepTabContent", true)("animate", false);
+        i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.RoleRecord);
         i0.ɵɵadvance();
-        i0.ɵɵproperty("selected", true);
-    } }, dependencies: [i1.NgForOf, i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.FillContainer, i4.ButtonComponent, i5.EntityPermissionsGridComponent, i6.TabStripComponent, i6.TabStripTabComponent, i6.TabContentDirective], 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    width: 125px;\r\n}\r\n \r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    background-color: #f2f2f2; \n\r\n    color: black; \n\r\n    font-weight: bold; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    border: 1px solid gray; \n\r\n    height: 36px; \n\r\n    text-align: center;\r\n    padding: 0 8px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    width: 150px; \n\r\n    text-align: left;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\r\n    width: 100px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\r\n    background-color: white; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\r\n    background-color: #e7f4ff; \n\r\n}\r\n\r\n.role-name[_ngcontent-%COMP%] {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}"] });
+        i0.ɵɵproperty("Record", ctx.RoleRecord)("Visible", ctx.showEntityEditingForm)("AutoRevertOnCancel", true)("HandleSave", true)("Width", 550)("Height", 450);
+    } }, styles: ["button[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n\r\n\r\n.role-name[_ngcontent-%COMP%] {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.role-info-table[_ngcontent-%COMP%] {\r\n    width: 100%; \n\r\n    border-collapse: collapse; \n\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.role-info-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    width: 150px; \n\r\n    font-weight: bold; \n\r\n    text-align: left; \n\r\n    padding: 8px; \n\r\n    border: none; \n\r\n    background-color: transparent; \n\r\n}\r\n\r\n.role-info-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    text-align: left; \n\r\n    padding: 8px; \n\r\n    border: none; \n\r\n    background-color: transparent; \n\r\n    overflow: hidden; \n\r\n    text-overflow: ellipsis; \n\r\n}\r\n\r\n\n\r\n.edit-icon[_ngcontent-%COMP%] {\r\n    margin-left: 20px; \r\n    vertical-align: middle;;\r\n    cursor: pointer; \n\r\n}\r\n\r\n.edit-icon[_ngcontent-%COMP%]:hover {\r\n    fill: #007bff; \n\r\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleRoleComponent, [{
         type: Component,
-        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer>\r\n    <div *ngIf=\"isLoading\">Loading...</div>\r\n    <kendo-tabstrip\r\n        [keepTabContent]=\"true\"\r\n        [animate]=\"false\"\r\n        >    \r\n        <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\">\r\n            <ng-template kendoTabContent>\r\n              <div class=\"content\">\r\n                <div class=\"role-name\">Role: {{this.RoleName}}</div>\r\n                <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\r\n                <table *ngIf=\"!isLoading\" class=\"grid\">\r\n                    <thead>\r\n                        <tr>\r\n                        <th>User</th>\r\n                        <th>In Role</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr *ngFor=\"let ur of userRoles\">\r\n                            <td>{{ ur.User }}</td>\r\n                            <td (click)=\"flipState($event, ur, true)\">\r\n                                <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"ur.Selected\" (click)=\"flipState($event, ur, false)\">\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>            \r\n              </div>\r\n            </ng-template>\r\n        </kendo-tabstrip-tab>\r\n        <kendo-tabstrip-tab title=\"Entity Permissions\">\r\n            <ng-template kendoTabContent>\r\n                <div class=\"content\">\r\n                    <div class=\"role-name\">Role: {{this.RoleName}}</div>\r\n                    <mj-entity-permissions-grid Mode=\"Role\" [RoleName]=\"this.RoleName\" ></mj-entity-permissions-grid>\r\n                </div>\r\n              </ng-template>\r\n          </kendo-tabstrip-tab>\r\n    </kendo-tabstrip>\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    width: 125px;\r\n}\r\n \r\ntable th {\r\n    background-color: #f2f2f2; /* Light gray background for headers */\r\n    color: black; /* Black text color for headers */\r\n    font-weight: bold; /* Bold font weight for headers */\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    border: 1px solid gray; /* Gray border for cells */\r\n    height: 36px; /* Fixed height for all rows */\r\n    text-align: center;\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Specific styles for the first column */\r\ntable th:first-child, table td:first-child {\r\n    width: 150px; /* Set width for the first column */\r\n    text-align: left;\r\n}\r\n\r\n/* Specific styles for the \"Can\" columns */\r\ntable th:not(:first-child), table td:not(:first-child) {\r\n    width: 100px; /* Set width for \"Can\" columns */\r\n}\r\n\r\n/* Alternating row background colors */\r\ntable tr:nth-child(odd) {\r\n    background-color: white; /* Light color for odd rows */\r\n}\r\n\r\ntable tr:nth-child(even) {\r\n    background-color: #e7f4ff; /* Light blue for even rows */\r\n}\r\n\r\n.role-name {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}"] }]
-    }], () => [], { RoleName: [{
-            type: Input
-        }], BottomMargin: [{
+        args: [{ selector: 'mj-single-role', template: "<div mjFillContainer>\r\n    <div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\r\n    <div *ngIf=\"!isLoading && RoleRecord\">\r\n        <table class=\"role-info-table\">\r\n            <tbody>\r\n                <tr>\r\n                    <th scope=\"row\">Role</th>\r\n                    <td>{{RoleRecord.Name}}<kendo-svgicon class='edit-icon' [icon]=\"kendoSVGIcon('pencil')\" (click)=\"EditRecord()\"></kendo-svgicon></td>\r\n                </tr>\r\n                <tr>\r\n                    <th scope=\"row\">Description</th>\r\n                    <td>{{RoleRecord.Description}}</td>\r\n                </tr>\r\n                <tr>\r\n                    <th scope=\"row\">Directory ID</th>\r\n                    <td>{{RoleRecord.DirectoryID}}</td>\r\n                </tr>\r\n                <tr>\r\n                    <th scope=\"row\">SQL Name</th>\r\n                    <td>{{RoleRecord.SQLName}}</td>\r\n                </tr>\r\n            </tbody>\r\n        </table>         \r\n        <kendo-tabstrip\r\n            [keepTabContent]=\"true\"\r\n            [animate]=\"false\" \r\n            >    \r\n            <kendo-tabstrip-tab title=\"Users\" [selected]=\"true\">\r\n                <ng-template kendoTabContent>\r\n                    <mj-user-roles-grid Mode=\"Roles\" [RoleName]=\"RoleName\" [RoleRecord]=\"RoleRecord\"></mj-user-roles-grid>\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n            <kendo-tabstrip-tab title=\"Entity Permissions\">\r\n                <ng-template kendoTabContent>\r\n                    <div class=\"content\">\r\n                        <mj-entity-permissions-grid *ngIf=\"RoleRecord && RoleRecord.Name\" Mode=\"Role\" [RoleName]=\"RoleRecord.Name\" ></mj-entity-permissions-grid>\r\n                    </div>\r\n                </ng-template>\r\n            </kendo-tabstrip-tab>\r\n        </kendo-tabstrip>\r\n    </div>\r\n</div>\r\n \r\n<mj-entity-form-dialog #entityForm \r\n        [Record]=\"RoleRecord\" \r\n        SectionName=\"details\" \r\n        Mode=\"section\" \r\n        [Visible]=\"showEntityEditingForm\" \r\n        [AutoRevertOnCancel]=\"true\"\r\n        [HandleSave]=\"true\"\r\n        [Width]=\"550\"\r\n        [Height]=\"450\"\r\n        (close)=\"onEntityFormClosed($event)\">\r\n</mj-entity-form-dialog>\r\n", styles: ["button {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n\r\n\r\n.role-name {\r\n    font-weight: bold;\r\n    font-size: 20px;\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n}\r\n\r\n.role-info-table {\r\n    width: 100%; /* Take up the full width of the container */\r\n    border-collapse: collapse; /* For a cleaner look */\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.role-info-table th {\r\n    width: 150px; /* Adjust this fixed width as needed */\r\n    font-weight: bold; /* Make header labels bold */\r\n    text-align: left; /* Align text to the left */\r\n    padding: 8px; /* Add some padding for spacing */\r\n    border: none; /* Removes the borders */\r\n    background-color: transparent; /* Removes any background color */\r\n}\r\n\r\n.role-info-table td {\r\n    text-align: left; /* Align text to the left */\r\n    padding: 8px; /* Add some padding for spacing */\r\n    border: none; /* Removes the borders */\r\n    background-color: transparent; /* Removes any background color */\r\n    overflow: hidden; /* Prevents content from overflowing */\r\n    text-overflow: ellipsis; /* Adds an ellipsis if the text overflows */\r\n}\r\n\r\n/* Style for SVG icon */\r\n.edit-icon {\r\n    margin-left: 20px; \r\n    vertical-align: middle;;\r\n    cursor: pointer; /* Changes the cursor to a pointer */\r\n}\r\n\r\n.edit-icon:hover {\r\n    fill: #007bff; /* Changes the color on hover, set to the color you prefer */\r\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { RoleName: [{
             type: Input
+        }], entityFormComponent: [{
+            type: ViewChild,
+            args: ['entityForm']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleRoleComponent, { className: "SingleRoleComponent", filePath: "src\\lib\\single-role\\single-role.component.ts", lineNumber: 40 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleRoleComponent, { className: "SingleRoleComponent", filePath: "src\\lib\\single-role\\single-role.component.ts", lineNumber: 49 }); })();

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

@@ -0,0 +1,24 @@
+import { OnInit, ChangeDetectorRef } from '@angular/core';
+import { RunViewParams } from '@memberjunction/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { UserEntity } from '@memberjunction/core-entities';
+import { EntityFormDialog } from '@memberjunction/ng-entity-form-dialog';
+import * as i0 from "@angular/core";
+export declare class SingleUserComponent implements OnInit {
+    private cdRef;
+    UserID: number;
+    entityFormComponent: EntityFormDialog;
+    gridHeight: number;
+    isLoading: boolean;
+    UserRecord: UserEntity | null;
+    UserViewsParams: RunViewParams | undefined;
+    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<SingleUserComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleUserComponent, "mj-single-user", never, { "UserID": { "alias": "UserID"; "required": false; }; }, {}, never, never, false, never>;
+}