@memberjunction/ng-explorer-settings 0.9.9 → 0.9.11

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

@@ -0,0 +1,41 @@
+import { OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { RoleEntity, UserEntity } from '@memberjunction/core-entities';
+import { Router } from '@angular/router';
+import { UserRoleEntity_Ext } from '../single-role/single-role.component';
+import * as i0 from "@angular/core";
+export declare class UserRolesGridComponent implements OnInit, OnChanges {
+    private router;
+    /**
+     * The name of the role we are working with, required if Mode is 'Roles'
+     */
+    RoleName: string;
+    /**
+     * The ID of the user we are working with, required if Mode is 'Users'
+     */
+    UserID: number;
+    isLoading: boolean;
+    userRoles: UserRoleEntity_Ext[];
+    Mode: 'Users' | 'Roles';
+    /**
+     * The role record we are working with, required if Mode is 'Roles'
+     */
+    RoleRecord: RoleEntity | null;
+    /**
+     * The user record we are working with, required if Mode is 'Users'
+     */
+    UserRecord: UserEntity | null;
+    kendoSVGIcon: typeof kendoSVGIcon;
+    constructor(router: Router);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    Refresh(): Promise<void>;
+    saveUserRoles(): Promise<void>;
+    cancelEdit(): void;
+    flipAll(): void;
+    get NumDirty(): number;
+    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>;
+}

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

@@ -0,0 +1,320 @@
+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 } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import { 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 "@angular/forms";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-indicators";
+function UserRolesGridComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+function UserRolesGridComponent_div_1_table_5_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "User");
+    i0.ɵɵelementEnd();
+} }
+function UserRolesGridComponent_div_1_table_5_th_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Role");
+    i0.ɵɵelementEnd();
+} }
+function UserRolesGridComponent_div_1_table_5_tr_8_td_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ur_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ur_r6.User);
+} }
+function UserRolesGridComponent_div_1_table_5_tr_8_td_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ur_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ur_r6.RoleName);
+} }
+function UserRolesGridComponent_div_1_table_5_tr_8_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, UserRolesGridComponent_div_1_table_5_tr_8_td_1_Template, 2, 1, "td", 0)(2, UserRolesGridComponent_div_1_table_5_tr_8_td_2_Template, 2, 1, "td", 0);
+    i0.ɵɵelementStart(3, "td", 6);
+    i0.ɵɵlistener("click", function UserRolesGridComponent_div_1_table_5_tr_8_Template_td_click_3_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const ur_r6 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r11.flipState($event, ur_r6, true)); });
+    i0.ɵɵelementStart(4, "input", 8);
+    i0.ɵɵtwoWayListener("ngModelChange", function UserRolesGridComponent_div_1_table_5_tr_8_Template_input_ngModelChange_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const ur_r6 = restoredCtx.$implicit; i0.ɵɵtwoWayBindingSet(ur_r6.Selected, $event) || (ur_r6.Selected = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("click", function UserRolesGridComponent_div_1_table_5_tr_8_Template_input_click_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const ur_r6 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r14.flipState($event, ur_r6, false)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ur_r6 = ctx.$implicit;
+    const ctx_r5 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r5.Mode === "Roles");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r5.Mode === "Users");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ur_r6.Selected);
+} }
+function UserRolesGridComponent_div_1_table_5_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "table", 5)(1, "thead")(2, "tr");
+    i0.ɵɵtemplate(3, UserRolesGridComponent_div_1_table_5_th_3_Template, 2, 0, "th", 0)(4, UserRolesGridComponent_div_1_table_5_th_4_Template, 2, 0, "th", 0);
+    i0.ɵɵelementStart(5, "th", 6);
+    i0.ɵɵlistener("click", function UserRolesGridComponent_div_1_table_5_Template_th_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r15.flipAll()); });
+    i0.ɵɵtext(6, "In Role");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "tbody");
+    i0.ɵɵtemplate(8, UserRolesGridComponent_div_1_table_5_tr_8_Template, 5, 3, "tr", 7);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.Mode === "Roles");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.Mode === "Users");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r2.userRoles);
+} }
+function UserRolesGridComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "button", 3);
+    i0.ɵɵlistener("click", function UserRolesGridComponent_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.saveUserRoles()); });
+    i0.ɵɵtext(2, "Save");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 3);
+    i0.ɵɵlistener("click", function UserRolesGridComponent_div_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.cancelEdit()); });
+    i0.ɵɵtext(4, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, UserRolesGridComponent_div_1_table_5_Template, 9, 3, "table", 4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.NumDirty === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.NumDirty === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading);
+} }
+export class UserRolesGridComponent {
+    constructor(router) {
+        this.router = router;
+        this.isLoading = false;
+        this.userRoles = [];
+        this.Mode = 'Users';
+        /**
+         * The role record we are working with, required if Mode is 'Roles'
+         */
+        this.RoleRecord = null;
+        /**
+         * The user record we are working with, required if Mode is 'Users'
+         */
+        this.UserRecord = null;
+        this.kendoSVGIcon = kendoSVGIcon;
+    }
+    ngOnInit() {
+        this.Refresh();
+    }
+    ngOnChanges(changes) {
+        if (changes && (changes.RoleRecord || changes.UserRecord))
+            this.Refresh();
+    }
+    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.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 result = yield rv.RunView({
+                EntityName: 'User Roles',
+                ExtraFilter: filter,
+                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; // 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
+                });
+                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
+                    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.SavedRoleName = this.RoleName; // 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
+                            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);
+                        }
+                    }
+                    // finally sort the array
+                    this.userRoles = existingUserRoles.sort((a, b) => a.User.localeCompare(b.User));
+                }
+                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));
+                    for (const r of rolesNotInUser) {
+                        const ur = yield md.GetEntityObject('User Roles');
+                        ur.NewRecord();
+                        ur.RoleName = r.Name;
+                        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.Selected = false;
+                        existingUserRoles.push(ur);
+                    }
+                    // finally sort the array
+                    this.userRoles = existingUserRoles.sort((a, b) => a.RoleName.localeCompare(b.RoleName));
+                }
+            }
+            else {
+                throw new Error("Error loading user roles: " + result.ErrorMessage);
+            }
+            this.isLoading = false;
+        });
+    }
+    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
+            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.Mode === 'Roles' ? this.RoleName : ur.SavedRoleName;
+                        }
+                    });
+                }
+            }
+        });
+    }
+    cancelEdit() {
+        if (this.NumDirty > 0) {
+            // go through and revert each permission that is REALLY dirty
+            this.userRoles.forEach(ur => {
+                if (this.IsReallyDirty(ur)) {
+                    ur.Selected = !ur.Selected; // flip the state so we can revert
+                }
+            });
+        }
+    }
+    flipAll() {
+        // first, figure out what we have the majority of, if we have more ON, then we will flip to OFF, otherwise we will flip to ON
+        let onCount = 0;
+        let offCount = 0;
+        this.userRoles.forEach(ur => {
+            if (ur.Selected)
+                onCount++;
+            else
+                offCount++;
+        });
+        const value = offCount > onCount;
+        // now set the permission for each permission record
+        for (const ur of this.userRoles) {
+            ur.Selected = value;
+            this.flipState(undefined, ur, false); // call this function but tell it to NOT actually flip the permission, just to fire the event
+        }
+    }
+    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 if ($event)
+            $event.stopPropagation();
+    }
+}
+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, "disabled", "click"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel", "ngModelChange", "click"]], 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);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.isLoading);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.CheckboxControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.ButtonComponent, i5.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\n\r\n.grid[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse;\r\n}\r\n\r\n\n\r\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    background-color: #f2f2f2;\r\n    color: black;\r\n    font-weight: bold;\r\n    text-align: center;\r\n    border: 1px solid gray;\r\n    padding: 0 8px;\r\n    cursor: pointer;\r\n}\r\n\r\n\n\r\n.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    border: 1px solid gray;\r\n    height: 36px;\r\n    text-align: center;\r\n    padding: 0 8px;\r\n}\r\n\r\n\n\r\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:first-child, .grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    width: 150px;\r\n    text-align: left;\r\n}\r\n\r\n\n\r\n.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:not(:first-child), .grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:not(:first-child) {\r\n    width: 100px;\r\n}\r\n\r\n\n\r\n.grid[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(odd) {\r\n    background-color: white;\r\n}\r\n\r\n.grid[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\r\n    background-color: #e7f4ff;\r\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>\r\n<div class=\"content\" *ngIf=\"!isLoading\">\r\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"saveUserRoles()\">Save</button>\r\n    <button [disabled]=\"NumDirty === 0\" kendoButton (click)=\"cancelEdit()\">Cancel</button>\r\n    <table *ngIf=\"!isLoading\" class=\"grid\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"Mode === 'Roles'\">User</th>\r\n                <th *ngIf=\"Mode === 'Users'\">Role</th>\r\n                <th (click)=\"flipAll()\">In Role</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let ur of userRoles\">\r\n                <td *ngIf=\"Mode === 'Roles'\">{{ ur.User }}</td>\r\n                <td *ngIf=\"Mode === 'Users'\">{{ ur.RoleName }}</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>", styles: ["button {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n/* Styles for the table with the 'grid' class */\r\n.grid {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    border-collapse: collapse;\r\n}\r\n\r\n/* Styles for th elements within the table with the 'grid' class */\r\n.grid th {\r\n    background-color: #f2f2f2;\r\n    color: black;\r\n    font-weight: bold;\r\n    text-align: center;\r\n    border: 1px solid gray;\r\n    padding: 0 8px;\r\n    cursor: pointer;\r\n}\r\n\r\n/* Styles for td elements within the table with the 'grid' class */\r\n.grid td {\r\n    border: 1px solid gray;\r\n    height: 36px;\r\n    text-align: center;\r\n    padding: 0 8px;\r\n}\r\n\r\n/* Styles for the first child th and td within the table with the 'grid' class */\r\n.grid th:first-child,\r\n.grid td:first-child {\r\n    width: 150px;\r\n    text-align: left;\r\n}\r\n\r\n/* Styles for non-first-child th and td elements within the table with the 'grid' class */\r\n.grid th:not(:first-child),\r\n.grid td:not(:first-child) {\r\n    width: 100px;\r\n}\r\n\r\n/* Alternating row background colors for the table with the 'grid' class */\r\n.grid tr:nth-child(odd) {\r\n    background-color: white;\r\n}\r\n\r\n.grid tr:nth-child(even) {\r\n    background-color: #e7f4ff;\r\n}\r\n\r\n"] }]
+    }], () => [{ type: i1.Router }], { RoleName: [{
+            type: Input
+        }], UserID: [{
+            type: Input
+        }], Mode: [{
+            type: Input
+        }], RoleRecord: [{
+            type: Input
+        }], UserRecord: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserRolesGridComponent, { className: "UserRolesGridComponent", filePath: "src\\lib\\user-roles-grid\\user-roles-grid.component.ts", lineNumber: 16 }); })();

package/dist/public-api.d.ts

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

package/dist/public-api.js

@@ -3,5 +3,6 @@
  */
 export * from './lib/single-role/single-role.component';
 export * from './lib/settings/settings.component';
-export * from './lib/roles-list/roles-list.component';
+export * from './lib/user-roles-grid/user-roles-grid.component';
+export * from './lib/single-user/single-user.component';
 export * from './lib/module';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-settings",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "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,22 @@
     "@angular/router": "~17.2.2"
   },
   "dependencies": {
-    "@memberjunction/core-entities": "^0.9.164",
+    "@memberjunction/core-entities": "^0.9.166",
     "@memberjunction/global": "^0.9.156",
     "@memberjunction/core": "^0.9.177",
     "@memberjunction/ng-container-directives": "^0.9.141",
-    "@memberjunction/ng-shared": "^0.9.32",
-    "@memberjunction/ng-entity-permissions": "^0.9.9",
+    "@memberjunction/ng-shared": "^0.9.34",
+    "@memberjunction/ng-entity-permissions": "^0.9.11",
+    "@memberjunction/ng-base-forms": "^0.9.2",
+    "@memberjunction/ng-entity-form-dialog": "^0.9.2",
+    "@memberjunction/ng-user-view-grid": "^0.9.216",
+    "@memberjunction/ng-simple-record-list": "^0.9.2",
     "@progress/kendo-angular-dropdowns": "~15.1.0",
     "@progress/kendo-angular-grid": "~15.1.0",
     "@progress/kendo-angular-buttons": "~15.1.0",
     "@progress/kendo-angular-dialog": "~15.1.0",
     "@progress/kendo-angular-layout": "~15.1.0",
+    "@progress/kendo-angular-indicators": "~15.1.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false