@memberjunction/ng-explorer-settings 0.9.11 → 0.9.13

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

@@ -0,0 +1,51 @@
+import { OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { ApplicationEntity, ApplicationEntityEntity, EntityEntity } from '@memberjunction/core-entities';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class ApplicationEntityEntity_Ext extends ApplicationEntityEntity {
+    private _selected;
+    get Selected(): boolean;
+    set Selected(value: boolean);
+    private _applicationName;
+    get SavedApplicationName(): string;
+    set SavedApplicationName(value: string);
+    private _entityID;
+    get SavedEntityID(): number;
+    set SavedEntityID(value: number);
+}
+export declare class ApplicationEntitiesGridComponent implements OnInit, OnChanges {
+    private router;
+    /**
+     * The name of the application we are working with, required if Mode is 'Applications'
+     */
+    ApplicationName: string;
+    /**
+     * The ID of the entity we are working with, required if Mode is 'Entities'
+     */
+    EntityID: number;
+    isLoading: boolean;
+    rows: ApplicationEntityEntity_Ext[];
+    Mode: 'Applications' | 'Entities';
+    /**
+     * The role record we are working with, required if Mode is 'Appliations'
+     */
+    ApplicationRecord: ApplicationEntity | null;
+    /**
+     * The user record we are working with, required if Mode is 'Entities'
+     */
+    EntityRecord: EntityEntity | null;
+    kendoSVGIcon: typeof kendoSVGIcon;
+    constructor(router: Router);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    Refresh(): Promise<void>;
+    save(): Promise<void>;
+    cancelEdit(): void;
+    flipAll(): void;
+    get NumDirty(): number;
+    protected IsReallyDirty(ae: ApplicationEntityEntity_Ext): boolean;
+    flipState($event: MouseEvent | undefined, ur: ApplicationEntityEntity_Ext, flipState: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ApplicationEntitiesGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ApplicationEntitiesGridComponent, "mj-application-entities-grid", never, { "ApplicationName": { "alias": "ApplicationName"; "required": false; }; "EntityID": { "alias": "EntityID"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "ApplicationRecord": { "alias": "ApplicationRecord"; "required": false; }; "EntityRecord": { "alias": "EntityRecord"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,348 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { BaseEntity, Metadata, RunView } from '@memberjunction/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { ApplicationEntityEntity } from '@memberjunction/core-entities';
+import { RegisterClass } from '@memberjunction/global';
+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 ApplicationEntitiesGridComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+function ApplicationEntitiesGridComponent_div_1_table_5_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Entity");
+    i0.ɵɵelementEnd();
+} }
+function ApplicationEntitiesGridComponent_div_1_table_5_th_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1, "Application");
+    i0.ɵɵelementEnd();
+} }
+function ApplicationEntitiesGridComponent_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 r_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(r_r6.Entity);
+} }
+function ApplicationEntitiesGridComponent_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 r_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(r_r6.Application);
+} }
+function ApplicationEntitiesGridComponent_div_1_table_5_tr_8_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, ApplicationEntitiesGridComponent_div_1_table_5_tr_8_td_1_Template, 2, 1, "td", 0)(2, ApplicationEntitiesGridComponent_div_1_table_5_tr_8_td_2_Template, 2, 1, "td", 0);
+    i0.ɵɵelementStart(3, "td", 6);
+    i0.ɵɵlistener("click", function ApplicationEntitiesGridComponent_div_1_table_5_tr_8_Template_td_click_3_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const r_r6 = restoredCtx.$implicit; const ctx_r11 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r11.flipState($event, r_r6, true)); });
+    i0.ɵɵelementStart(4, "input", 8);
+    i0.ɵɵtwoWayListener("ngModelChange", function ApplicationEntitiesGridComponent_div_1_table_5_tr_8_Template_input_ngModelChange_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const r_r6 = restoredCtx.$implicit; i0.ɵɵtwoWayBindingSet(r_r6.Selected, $event) || (r_r6.Selected = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("click", function ApplicationEntitiesGridComponent_div_1_table_5_tr_8_Template_input_click_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r12); const r_r6 = restoredCtx.$implicit; const ctx_r14 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r14.flipState($event, r_r6, false)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const r_r6 = ctx.$implicit;
+    const ctx_r5 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r5.Mode === "Applications");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r5.Mode === "Entities");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", r_r6.Selected);
+} }
+function ApplicationEntitiesGridComponent_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, ApplicationEntitiesGridComponent_div_1_table_5_th_3_Template, 2, 0, "th", 0)(4, ApplicationEntitiesGridComponent_div_1_table_5_th_4_Template, 2, 0, "th", 0);
+    i0.ɵɵelementStart(5, "th", 6);
+    i0.ɵɵlistener("click", function ApplicationEntitiesGridComponent_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 Application");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "tbody");
+    i0.ɵɵtemplate(8, ApplicationEntitiesGridComponent_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 === "Applications");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.Mode === "Entities");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r2.rows);
+} }
+function ApplicationEntitiesGridComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "button", 3);
+    i0.ɵɵlistener("click", function ApplicationEntitiesGridComponent_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.save()); });
+    i0.ɵɵtext(2, "Save");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 3);
+    i0.ɵɵlistener("click", function ApplicationEntitiesGridComponent_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, ApplicationEntitiesGridComponent_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);
+} }
+let ApplicationEntityEntity_Ext = class ApplicationEntityEntity_Ext extends ApplicationEntityEntity {
+    constructor() {
+        super(...arguments);
+        this._selected = false;
+        this._applicationName = '';
+        this._entityID = 0;
+    }
+    get Selected() {
+        return this._selected;
+    }
+    set Selected(value) {
+        this._selected = value;
+    }
+    get SavedApplicationName() {
+        return this._applicationName;
+    }
+    set SavedApplicationName(value) {
+        this._applicationName = value;
+    }
+    get SavedEntityID() {
+        return this._entityID;
+    }
+    set SavedEntityID(value) {
+        this._entityID = value;
+    }
+};
+ApplicationEntityEntity_Ext = __decorate([
+    RegisterClass(BaseEntity, 'Application Entities', 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
+], ApplicationEntityEntity_Ext);
+export { ApplicationEntityEntity_Ext };
+export class ApplicationEntitiesGridComponent {
+    constructor(router) {
+        this.router = router;
+        this.isLoading = false;
+        this.rows = [];
+        this.Mode = 'Applications';
+        /**
+         * The role record we are working with, required if Mode is 'Appliations'
+         */
+        this.ApplicationRecord = null;
+        /**
+         * The user record we are working with, required if Mode is 'Entities'
+         */
+        this.EntityRecord = 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 === 'Applications')
+                if (!this.ApplicationName || this.ApplicationName.length === 0 || !this.ApplicationRecord)
+                    throw new Error("ApplicationName and ApplicationRecord are required when Mode is 'Applications'");
+            if (this.Mode === 'Entities')
+                if (!this.EntityID || !this.EntityRecord)
+                    throw new Error("EntityID and EntityRecord are required when Mode is 'Entities'");
+            const md = new Metadata();
+            this.isLoading = true;
+            const rv = new RunView();
+            const filter = this.Mode === 'Applications' ? `Application='${this.ApplicationName}'` : `EntityID=${this.EntityID}`;
+            const result = yield rv.RunView({
+                EntityName: 'Application Entities',
+                ExtraFilter: filter,
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                // we have all of the saved records now
+                const existing = result.Results;
+                existing.forEach(ae => {
+                    ae.Selected = true; // flip this on for all records that come from the DB
+                    ae.SavedEntityID = ae.EntityID; // stash this in an extra property so we can later set it if we have a delete operation
+                    ae.SavedApplicationName = ae.Application; // stash this in an extra property so we can later set it if we have a delete operation
+                });
+                if (this.Mode === 'Applications') {
+                    const entitiesToAdd = md.Entities.filter(e => !existing.some(ee => ee.EntityID === e.ID));
+                    for (const e of entitiesToAdd) {
+                        const ae = yield md.GetEntityObject('Application Entities');
+                        ae.NewRecord();
+                        ae.Sequence = 1000; // default value, isn't used anywhere 
+                        ae.ApplicationName = this.ApplicationName;
+                        ae.Set('Application', this.ApplicationName); // use weak typing to get around the readonly property
+                        ae.SavedApplicationName = this.ApplicationName; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.EntityID = e.ID;
+                        ae.SavedEntityID = e.ID; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.Set('Entity', e.Name); // use weak typing to get around the readonly property
+                        existing.push(ae);
+                    }
+                    // finally sort the array
+                    this.rows = existing.sort((a, b) => a.Entity.localeCompare(b.Entity));
+                }
+                else {
+                    // for the mode of Entities, we want to bring in all of the possible applications and then add any that are not in the existing array
+                    const appsToAdd = md.Applications.filter(a => !existing.some(e => e.Application === a.Name));
+                    for (const a of appsToAdd) {
+                        const ae = yield md.GetEntityObject('Application Entities');
+                        ae.NewRecord();
+                        ae.Sequence = 1000; // default value, isn't used anywhere 
+                        ae.ApplicationName = a.Name;
+                        ae.Set('Application', a.Name); // use weak typing to get around the readonly property
+                        ae.SavedApplicationName = a.Name; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.EntityID = this.EntityID;
+                        ae.SavedEntityID = this.EntityID; // stash this in an extra property so we can later set it if we have a delete operation
+                        ae.Set('Entity', this.EntityRecord.Name); // use weak typing to get around the readonly property
+                        existing.push(ae);
+                    }
+                    // finally sort the array
+                    this.rows = existing.sort((a, b) => a.Application.localeCompare(b.Application));
+                }
+            }
+            else {
+                throw new Error("Error loading application entities: " + result.ErrorMessage);
+            }
+            this.isLoading = false;
+        });
+    }
+    save() {
+        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.rows.forEach(r => {
+                if (this.IsReallyDirty(r)) {
+                    r.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 (r.Selected)
+                        r.Save();
+                    else
+                        r.Delete();
+                }
+            });
+            if (itemCount > 0) {
+                if (yield tg.Submit()) {
+                    // for any items in the above that were deleted, we would have had the ApplicationName/Application and Entity property wiped out so we need to go check to see if we have a null ID and if so, copy the values back in
+                    this.rows.forEach(r => {
+                        if (r.Application === null || r.ApplicationName === null) {
+                            r.Set('Application', r.SavedApplicationName); // get around the read-only property
+                            r.ApplicationName = r.SavedApplicationName;
+                        }
+                        if (r.Entity === null || r.EntityID === null) {
+                            r.EntityID = r.SavedEntityID; // get around the read-only property
+                            const e = md.Entities.find(ee => ee.ID === r.SavedEntityID);
+                            r.Set('Entity', e === null || e === void 0 ? void 0 : e.Name); // get around the read-only property
+                        }
+                    });
+                }
+            }
+        });
+    }
+    cancelEdit() {
+        if (this.NumDirty > 0) {
+            // go through and revert each permission that is REALLY dirty
+            this.rows.forEach(r => {
+                if (this.IsReallyDirty(r)) {
+                    r.Selected = !r.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.rows.forEach(r => {
+            if (r.Selected)
+                onCount++;
+            else
+                offCount++;
+        });
+        const value = offCount > onCount;
+        // now set the permission for each permission record
+        for (const r of this.rows) {
+            r.Selected = value;
+            this.flipState(undefined, r, false); // call this function but tell it to NOT actually flip the permission, just to fire the event
+        }
+    }
+    get NumDirty() {
+        return this.rows.filter(r => this.IsReallyDirty(r)).length;
+    }
+    IsReallyDirty(ae) {
+        // logic is simple, if we are in the database, but the checkbox is not checked (or vice versa), then we are dirty
+        if (ae.Selected && ae.ID > 0)
+            return false; // if we are in the database and the checkbox is checked, we are not dirty
+        else if (!ae.Selected && ae.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 (ae.Selected)
+            return true; // if we are NOT in the database and the checkbox is checked, we are dirty because we'd have to be added
+        else
+            return false;
+    }
+    flipState($event, ur, flipState) {
+        if (flipState)
+            ur.Selected = !ur.Selected;
+        else if ($event)
+            $event.stopPropagation();
+    }
+}
+ApplicationEntitiesGridComponent.ɵfac = function ApplicationEntitiesGridComponent_Factory(t) { return new (t || ApplicationEntitiesGridComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+ApplicationEntitiesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationEntitiesGridComponent, selectors: [["mj-application-entities-grid"]], inputs: { ApplicationName: "ApplicationName", EntityID: "EntityID", Mode: "Mode", ApplicationRecord: "ApplicationRecord", EntityRecord: "EntityRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[4, "ngIf"], ["class", "content", 4, "ngIf"], [1, "content"], ["kendoButton", "", 3, "disabled", "click"], ["class", "grid", 4, "ngIf"], [1, "grid"], [3, "click"], [4, "ngFor", "ngForOf"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel", "ngModelChange", "click"]], template: function ApplicationEntitiesGridComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, ApplicationEntitiesGridComponent_div_0_Template, 2, 0, "div", 0)(1, ApplicationEntitiesGridComponent_div_1_Template, 6, 3, "div", 1);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", ctx.isLoading);
+        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    min-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(ApplicationEntitiesGridComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-application-entities-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)=\"save()\">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 === 'Applications'\">Entity</th>\r\n                <th *ngIf=\"Mode === 'Entities'\">Application</th>\r\n                <th (click)=\"flipAll()\">In Application</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of rows\">\r\n                <td *ngIf=\"Mode === 'Applications'\">{{ r.Entity }}</td>\r\n                <td *ngIf=\"Mode === 'Entities'\">{{ r.Application }}</td>\r\n                <td (click)=\"flipState($event, r, true)\">\r\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"r.Selected\" (click)=\"flipState($event, r, 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    min-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 }], { ApplicationName: [{
+            type: Input
+        }], EntityID: [{
+            type: Input
+        }], Mode: [{
+            type: Input
+        }], ApplicationRecord: [{
+            type: Input
+        }], EntityRecord: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationEntitiesGridComponent, { className: "ApplicationEntitiesGridComponent", filePath: "src\\lib\\application-entities-grid\\application-entities-grid.component.ts", lineNumber: 45 }); })();

package/dist/lib/module.d.ts

@@ -3,24 +3,26 @@ import * as i1 from "./single-role/single-role.component";
 import * as i2 from "./settings/settings.component";
 import * as i3 from "./user-roles-grid/user-roles-grid.component";
 import * as i4 from "./single-user/single-user.component";
-import * as i5 from "@angular/common";
-import * as i6 from "@progress/kendo-angular-grid";
-import * as i7 from "@angular/forms";
-import * as i8 from "@progress/kendo-angular-dialog";
-import * as i9 from "@progress/kendo-angular-excel-export";
-import * as i10 from "@memberjunction/ng-compare-records";
-import * as i11 from "@memberjunction/ng-container-directives";
-import * as i12 from "@progress/kendo-angular-buttons";
-import * as i13 from "@progress/kendo-angular-icons";
-import * as i14 from "@progress/kendo-angular-dropdowns";
-import * as i15 from "@memberjunction/ng-entity-permissions";
-import * as i16 from "@progress/kendo-angular-layout";
-import * as i17 from "@memberjunction/ng-entity-form-dialog";
-import * as i18 from "@progress/kendo-angular-indicators";
-import * as i19 from "@memberjunction/ng-user-view-grid";
-import * as i20 from "@memberjunction/ng-simple-record-list";
+import * as i5 from "./single-application/single-application.component";
+import * as i6 from "./application-entities-grid/application-entities-grid.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-grid";
+import * as i9 from "@angular/forms";
+import * as i10 from "@progress/kendo-angular-dialog";
+import * as i11 from "@progress/kendo-angular-excel-export";
+import * as i12 from "@memberjunction/ng-compare-records";
+import * as i13 from "@memberjunction/ng-container-directives";
+import * as i14 from "@progress/kendo-angular-buttons";
+import * as i15 from "@progress/kendo-angular-icons";
+import * as i16 from "@progress/kendo-angular-dropdowns";
+import * as i17 from "@memberjunction/ng-entity-permissions";
+import * as i18 from "@progress/kendo-angular-layout";
+import * as i19 from "@memberjunction/ng-entity-form-dialog";
+import * as i20 from "@progress/kendo-angular-indicators";
+import * as i21 from "@memberjunction/ng-user-view-grid";
+import * as i22 from "@memberjunction/ng-simple-record-list";
 export declare class ExplorerSettingsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerSettingsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.UserRolesGridComponent, typeof i4.SingleUserComponent], [typeof i5.CommonModule, typeof i6.GridModule, typeof i7.FormsModule, typeof i8.DialogsModule, typeof i9.ExcelExportModule, typeof i10.CompareRecordsModule, typeof i11.ContainerDirectivesModule, typeof i12.ButtonsModule, typeof i13.IconsModule, typeof i14.DropDownsModule, typeof i15.EntityPermissionsModule, typeof i16.TabStripModule, typeof i8.DialogsModule, typeof i17.EntityFormDialogModule, typeof i18.IndicatorsModule, typeof i19.UserViewGridModule, typeof i20.SimpleRecordListModule], [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.UserRolesGridComponent, typeof i4.SingleUserComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ExplorerSettingsModule, [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.UserRolesGridComponent, typeof i4.SingleUserComponent, typeof i5.SingleApplicationComponent, typeof i6.ApplicationEntitiesGridComponent], [typeof i7.CommonModule, typeof i8.GridModule, typeof i9.FormsModule, typeof i10.DialogsModule, typeof i11.ExcelExportModule, typeof i12.CompareRecordsModule, typeof i13.ContainerDirectivesModule, typeof i14.ButtonsModule, typeof i15.IconsModule, typeof i16.DropDownsModule, typeof i17.EntityPermissionsModule, typeof i18.TabStripModule, typeof i10.DialogsModule, typeof i19.EntityFormDialogModule, typeof i20.IndicatorsModule, typeof i21.UserViewGridModule, typeof i22.SimpleRecordListModule], [typeof i1.SingleRoleComponent, typeof i2.SettingsComponent, typeof i3.UserRolesGridComponent, typeof i4.SingleUserComponent, typeof i5.SingleApplicationComponent, typeof i6.ApplicationEntitiesGridComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ExplorerSettingsModule>;
 }

package/dist/lib/module.js

@@ -20,6 +20,8 @@ import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { SingleUserComponent } from './single-user/single-user.component';
 import { UserViewGridModule } from '@memberjunction/ng-user-view-grid';
 import { SimpleRecordListModule } from '@memberjunction/ng-simple-record-list';
+import { SingleApplicationComponent } from './single-application/single-application.component';
+import { ApplicationEntitiesGridComponent } from './application-entities-grid/application-entities-grid.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@memberjunction/ng-container-directives";
@@ -56,7 +58,9 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
                     SingleRoleComponent,
                     SettingsComponent,
                     UserRolesGridComponent,
-                    SingleUserComponent
+                    SingleUserComponent,
+                    SingleApplicationComponent,
+                    ApplicationEntitiesGridComponent
                 ],
                 imports: [
                     CommonModule,
@@ -81,14 +85,18 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
                     SingleRoleComponent,
                     SettingsComponent,
                     UserRolesGridComponent,
-                    SingleUserComponent
+                    SingleUserComponent,
+                    SingleApplicationComponent,
+                    ApplicationEntitiesGridComponent
                 ]
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ExplorerSettingsModule, { declarations: [SingleRoleComponent,
         SettingsComponent,
         UserRolesGridComponent,
-        SingleUserComponent], imports: [CommonModule,
+        SingleUserComponent,
+        SingleApplicationComponent,
+        ApplicationEntitiesGridComponent], imports: [CommonModule,
         GridModule,
         FormsModule,
         DialogsModule,
@@ -107,5 +115,7 @@ ExplorerSettingsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [C
         SimpleRecordListModule], exports: [SingleRoleComponent,
         SettingsComponent,
         UserRolesGridComponent,
-        SingleUserComponent] }); })();
+        SingleUserComponent,
+        SingleApplicationComponent,
+        ApplicationEntitiesGridComponent] }); })();
 i0.ɵɵsetComponentScope(SingleRoleComponent, [i1.NgIf, i2.FillContainer, i3.SVGIconComponent, i4.EntityPermissionsGridComponent, i5.TabStripComponent, i5.TabStripTabComponent, i5.TabContentDirective, i6.EntityFormDialog, i7.LoaderComponent, UserRolesGridComponent], []);

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

@@ -2,20 +2,40 @@ 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' | 'User' | 'Roles' | 'Role';
+    currentItem: SettingsItem;
     baseRoute: string;
     selectedRoleName: string;
     selectedUserID: number;
-    selectItem(item: 'EntityPermissions' | 'Users' | 'User' | 'Roles' | 'Role', changeRoute?: boolean): void;
+    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

@@ -9,52 +9,97 @@ 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";
-function SettingsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+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();
 } }
 const _c0 = () => ["Name", "Email", "IsActive", "Type"];
-function SettingsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "mj-simple-record-list", 5);
-    i0.ɵɵlistener("RecordSelected", function SettingsComponent_div_10_Template_mj_simple_record_list_RecordSelected_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r5 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r5.selectUser($event)); });
+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_11_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "mj-single-user", 6);
+    i0.ɵɵelement(1, "mj-single-user", 7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("UserID", ctx_r2.selectedUserID);
+    i0.ɵɵproperty("UserID", ctx_r3.selectedUserID);
 } }
 const _c1 = () => ["Name", "Description"];
-function SettingsComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "mj-simple-record-list", 7);
-    i0.ɵɵlistener("RecordSelected", function SettingsComponent_div_12_Template_mj_simple_record_list_RecordSelected_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.selectRole($event)); });
+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_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    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_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_13_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "mj-single-role", 8);
+    i0.ɵɵelement(1, "mj-single-application", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
+    const ctx_r7 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("RoleName", ctx_r4.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());
     }
@@ -65,10 +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
@@ -87,61 +139,64 @@ export class SettingsComponent {
         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);
-                break;
-            case 'user':
-                this.selectedUserID = segments.length > 2 ? parseInt(segments[2]) : 0;
-                this.selectItem('User', false);
+                this.selectItem(SettingsItem.Role, false);
                 break;
             default:
                 break;
         }
     }
+    selectApplication(a) {
+        this.selectRoute('/settings/application', a.Name);
+    }
     selectRole(r) {
-        // change the route to point to the /settings/role/{r.Name} route
-        this.router.navigate(['/settings/role', r.Name]);
+        this.selectRoute('/settings/role', r.Name);
     }
     selectUser(r) {
-        // change the route to point to the /settings/user/{r.ID} route
-        this.router.navigate(['/settings/user', r.ID]);
+        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: 14, vars: 13, consts: [["mjFillContainer", "", 1, "container", 3, "fillWidth", "bottomMargin"], [1, "options-container"], [1, "option-item", 3, "click"], [1, "display-container"], [4, "ngIf"], ["EntityName", "Users", "SortBy", "Name", 3, "Columns", "RecordSelected"], [3, "UserID"], ["EntityName", "Roles", "SortBy", "Name", 3, "Columns", "RecordSelected"], [3, "RoleName"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-        i0.ɵɵlistener("click", function SettingsComponent_Template_div_click_2_listener() { return ctx.selectItem("Users"); });
-        i0.ɵɵtext(3, "Users");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "div", 2);
-        i0.ɵɵlistener("click", function SettingsComponent_Template_div_click_4_listener() { return ctx.selectItem("Roles"); });
-        i0.ɵɵtext(5, "Roles");
+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(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, 2, "div", 4)(11, SettingsComponent_div_11_Template, 2, 1, "div", 4)(12, SettingsComponent_div_12_Template, 2, 2, "div", 4)(13, SettingsComponent_div_13_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.ɵɵadvance(2);
-        i0.ɵɵclassProp("selected", ctx.currentItem === "Roles" || ctx.currentItem === "Role");
+        i0.ɵɵproperty("ngForOf", ctx.options);
         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");
@@ -151,9 +206,13 @@ SettingsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsC
         i0.ɵɵproperty("ngIf", ctx.currentItem === "Roles");
         i0.ɵɵadvance();
         i0.ɵɵproperty("ngIf", ctx.currentItem === "Role");
-    } }, dependencies: [i2.NgIf, i3.FillContainer, i4.EntityPermissionsSelectorWithGridComponent, i5.SimpleRecordListComponent, i6.SingleRoleComponent, i7.SingleUserComponent], 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}"] });
+        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\" mjFillContainer [fillWidth]=\"false\" [bottomMargin]=\"5\">\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            <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        <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    </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"] }]
+        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: 12 }); })();
+(() => { (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>;
+}

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.js

@@ -148,8 +148,8 @@ export class SingleRoleComponent {
     }
     Refresh() {
         return __awaiter(this, void 0, void 0, function* () {
+            this.isLoading = true;
             const md = new Metadata();
-            this.RoleRecord = yield md.GetEntityObject('Roles');
             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
@@ -158,7 +158,9 @@ export class SingleRoleComponent {
                 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;
         });
     }
     EditRecord() {

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

@@ -302,10 +302,10 @@ UserRolesGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: User
         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}"] });
+    } }, 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    min-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"] }]
+        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    min-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: [{

package/dist/public-api.d.ts

@@ -2,4 +2,6 @@ export * from './lib/single-role/single-role.component';
 export * from './lib/settings/settings.component';
 export * from './lib/user-roles-grid/user-roles-grid.component';
 export * from './lib/single-user/single-user.component';
+export * from './lib/single-application/single-application.component';
+export * from './lib/application-entities-grid/application-entities-grid.component';
 export * from './lib/module';

package/dist/public-api.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-explorer-settings",
-  "version": "0.9.11",
+  "version": "0.9.13",
   "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,16 +25,16 @@
     "@angular/router": "~17.2.2"
   },
   "dependencies": {
-    "@memberjunction/core-entities": "^0.9.166",
+    "@memberjunction/core-entities": "^0.9.167",
     "@memberjunction/global": "^0.9.156",
     "@memberjunction/core": "^0.9.177",
     "@memberjunction/ng-container-directives": "^0.9.141",
-    "@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",
+    "@memberjunction/ng-shared": "^0.9.35",
+    "@memberjunction/ng-entity-permissions": "^0.9.12",
+    "@memberjunction/ng-base-forms": "^0.9.4",
+    "@memberjunction/ng-entity-form-dialog": "^0.9.4",
+    "@memberjunction/ng-user-view-grid": "^0.9.218",
+    "@memberjunction/ng-simple-record-list": "^0.9.4",
     "@progress/kendo-angular-dropdowns": "~15.1.0",
     "@progress/kendo-angular-grid": "~15.1.0",
     "@progress/kendo-angular-buttons": "~15.1.0",