@memberjunction/ng-explorer-settings 0.9.10 → 0.9.11

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

@@ -0,0 +1,324 @@
+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, EventEmitter, Output } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import { SharedService, kendoSVGIcon } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@memberjunction/ng-container-directives";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@memberjunction/ng-entity-form-dialog";
+import * as i8 from "@progress/kendo-angular-indicators";
+function RecordListComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+function RecordListComponent_table_4_th_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "th");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", c_r6, " ");
+} }
+function RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 12);
+    i0.ɵɵlistener("click", function RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_1_Template_kendo_svgicon_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const r_r7 = i0.ɵɵnextContext(3).$implicit; const ctx_r14 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r14.editRecord($event, r_r7)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r12 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("icon", ctx_r12.kendoSVGIcon("pencil"));
+} }
+function RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_2_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-svgicon", 12);
+    i0.ɵɵlistener("click", function RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_2_Template_kendo_svgicon_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const r_r7 = i0.ɵɵnextContext(3).$implicit; const ctx_r17 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r17.deleteRecord($event, r_r7)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r13 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("icon", ctx_r13.kendoSVGIcon("trash"));
+} }
+function RecordListComponent_table_4_tr_5_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtemplate(1, RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 11)(2, RecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_2_Template, 1, 1, "kendo-svgicon", 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r11 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r11.AllowEdit);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r11.AllowEdit);
+} }
+function RecordListComponent_table_4_tr_5_td_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td")(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, RecordListComponent_table_4_tr_5_td_1_span_3_Template, 3, 2, "span", 2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r9 = ctx.$implicit;
+    const i_r10 = ctx.index;
+    const r_r7 = i0.ɵɵnextContext().$implicit;
+    const ctx_r8 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(r_r7.Get(c_r9));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", i_r10 === 0 && (ctx_r8.AllowDelete || ctx_r8.AllowEdit));
+} }
+function RecordListComponent_table_4_tr_5_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 10);
+    i0.ɵɵlistener("click", function RecordListComponent_table_4_tr_5_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r22); const r_r7 = restoredCtx.$implicit; const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.selectRecord(undefined, r_r7)); });
+    i0.ɵɵtemplate(1, RecordListComponent_table_4_tr_5_td_1_Template, 4, 2, "td", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r5 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r5.Columns);
+} }
+function RecordListComponent_table_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 7)(1, "thead")(2, "tr");
+    i0.ɵɵtemplate(3, RecordListComponent_table_4_th_3_Template, 2, 1, "th", 8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, RecordListComponent_table_4_tr_5_Template, 2, 1, "tr", 9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r1.Columns);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.records);
+} }
+function RecordListComponent_kendo_dialog_7_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 13);
+    i0.ɵɵlistener("close", function RecordListComponent_kendo_dialog_7_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r23 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r23.closeDeleteDialog("No")); });
+    i0.ɵɵelementStart(1, "div");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-dialog-actions")(4, "button", 14);
+    i0.ɵɵlistener("click", function RecordListComponent_kendo_dialog_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r24); const ctx_r25 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r25.closeDeleteDialog("Yes")); });
+    i0.ɵɵtext(5, "Yes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 1);
+    i0.ɵɵlistener("click", function RecordListComponent_kendo_dialog_7_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r24); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.closeDeleteDialog("No")); });
+    i0.ɵɵtext(7, "No");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "Delete " + ctx_r3.EntityName + "?")("width", 450)("height", 200);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Are you sure you want to delete '", ctx_r3.getRecordName(ctx_r3.deleteRecordItem), "'? ");
+} }
+export class RecordListComponent {
+    constructor(router) {
+        this.router = router;
+        this.EntityName = '';
+        this.Columns = [];
+        this.SortBy = '';
+        this.AllowDelete = true;
+        this.AllowNew = true;
+        this.AllowEdit = true;
+        /**
+         * If AllowEdit or AllowNew is true, this is the section name to display for editing a new or existing record.
+         */
+        this.EditSectionName = 'details';
+        this.RecordSelected = new EventEmitter();
+        this.RecordEdited = new EventEmitter();
+        this.RecordCreated = new EventEmitter();
+        this.isLoading = false;
+        this.records = [];
+        this.kendoSVGIcon = kendoSVGIcon;
+        this.deleteRecordDialogVisible = false;
+        this.showEditOrNewRecordForm = false;
+        this.recordMode = 'new';
+    }
+    ngOnInit() {
+        this.Refresh();
+    }
+    Refresh() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isLoading = true;
+            const md = new Metadata();
+            if (this.Columns.length === 0) {
+                // populate this by default by taking all columns if entity has < 10 columns, otherwise include columns that have DefaultInView=1, and if we have no columns with DefaultInView=1, then include the first 10 columns
+                const e = md.Entities.find(e => e.Name === this.EntityName);
+                if (e) {
+                    if (e.Fields.length < 10)
+                        this.Columns = e.Fields.map(f => f.Name);
+                    else {
+                        const defaultInViewColumns = e.Fields.filter(c => c.DefaultInView);
+                        if (defaultInViewColumns.length > 0)
+                            this.Columns = defaultInViewColumns.map(f => f.Name);
+                        else
+                            this.Columns = e.Fields.slice(0, 10).map(f => f.Name);
+                    }
+                }
+            }
+            const rv = new RunView();
+            const result = yield rv.RunView({
+                EntityName: this.EntityName,
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.records = result.Results;
+                if (this.SortBy && this.SortBy.trim().length > 0) {
+                    this.records.sort((a, b) => a.Get(this.SortBy).localeCompare(b.Get(this.SortBy)));
+                }
+            }
+            else {
+                throw new Error("Error loading records: " + result.ErrorMessage);
+            }
+            this.isLoading = false;
+        });
+    }
+    selectRecord(event, r) {
+        if (event)
+            event.stopPropagation(); // prevent row from getting click
+        this.RecordSelected.emit(r);
+    }
+    deleteRecord(event, r) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // confirm with the user first
+            this.deleteRecordItem = r;
+            this.deleteRecordDialogVisible = true;
+            if (event)
+                event.stopPropagation(); // prevent row from getting click
+        });
+    }
+    closeDeleteDialog(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // if the user confirms, delete the record
+            this.deleteRecordDialogVisible = false;
+            if (result === 'Yes') {
+                if (!(yield this.deleteRecordItem.Delete())) {
+                    // show an error message
+                    SharedService.Instance.CreateSimpleNotification('Error deleting record', 'error', 3000);
+                }
+                else
+                    this.Refresh(); // refresh the list
+            }
+            this.deleteRecordItem = null;
+        });
+    }
+    createNewRecord() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // attempt to create a new record and if success, navigate to the new record
+            const md = new Metadata();
+            this.editOrNewRecord = yield md.GetEntityObject(this.EntityName);
+            if (this.editOrNewRecord) {
+                this.editOrNewRecord.NewRecord();
+                this.recordMode = 'new';
+                this.showEditOrNewRecordForm = true;
+            }
+        });
+    }
+    editRecord(event, r) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.editOrNewRecord = r;
+            this.recordMode = 'edit';
+            this.showEditOrNewRecordForm = true;
+            if (event)
+                event.stopPropagation(); // prevent row from getting click
+        });
+    }
+    onEditOrNewRecordFormClosed(result) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showEditOrNewRecordForm = false;
+            if (result === 'Save') {
+                // the dialog already saved the record, just check to make sure it was saved and if so, navigate
+                if (this.editOrNewRecord.IsSaved) {
+                    if (this.recordMode === 'edit')
+                        this.RecordEdited.emit(this.editOrNewRecord);
+                    else
+                        this.RecordCreated.emit(this.editOrNewRecord);
+                    // refresh our grid now
+                    yield this.Refresh();
+                }
+                else
+                    throw new Error('Record was not saved');
+            }
+        });
+    }
+    getRecordName(r) {
+        // check to see if we have any columns in the entity that have IsNameField = 1, the fall back from there is to look for a column named "Name", and if that doesn't work we return the primary key(s)
+        const md = new Metadata();
+        const e = md.Entities.find(e => e.Name === this.EntityName);
+        if (!e)
+            throw new Error('Entity not found: ' + this.EntityName);
+        const nameField = e.Fields.find(c => c.IsNameField);
+        if (nameField)
+            return r.Get(nameField.Name);
+        else {
+            const nameField = e.Fields.find(c => c.Name === 'Name');
+            if (nameField)
+                return r.Get("Name");
+            else {
+                // iterate through all primary keys and form a comma separated list
+                const pkString = r.PrimaryKeys.map(pk => r.Get(pk.Name)).join(', ');
+                return "Record: " + pkString;
+            }
+        }
+    }
+}
+RecordListComponent.ɵfac = function RecordListComponent_Factory(t) { return new (t || RecordListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+RecordListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordListComponent, selectors: [["mj-record-list"]], inputs: { EntityName: "EntityName", Columns: "Columns", SortBy: "SortBy", AllowDelete: "AllowDelete", AllowNew: "AllowNew", AllowEdit: "AllowEdit", EditSectionName: "EditSectionName" }, outputs: { RecordSelected: "RecordSelected", RecordEdited: "RecordEdited", RecordCreated: "RecordCreated" }, decls: 8, vars: 10, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", "", 3, "click"], [4, "ngIf"], ["class", "grid", 4, "ngIf"], ["Mode", "section", 3, "Record", "SectionName", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "close"], ["entityForm", ""], [3, "title", "width", "height", "close", 4, "ngIf"], [1, "grid"], [4, "ngFor", "ngForOf"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"], ["class", "icon", 3, "icon", "click", 4, "ngIf"], [1, "icon", 3, "icon", "click"], [3, "title", "width", "height", "close"], ["kendoButton", "", "themeColor", "primary", 3, "click"]], template: function RecordListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+        i0.ɵɵlistener("click", function RecordListComponent_Template_button_click_1_listener() { return ctx.createNewRecord(); });
+        i0.ɵɵtext(2, "New Record");
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(3, RecordListComponent_div_3_Template, 2, 0, "div", 2)(4, RecordListComponent_table_4_Template, 6, 2, "table", 3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(5, "mj-entity-form-dialog", 4, 5);
+        i0.ɵɵlistener("close", function RecordListComponent_Template_mj_entity_form_dialog_close_5_listener($event) { return ctx.onEditOrNewRecordFormClosed($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(7, RecordListComponent_kendo_dialog_7_Template, 8, 4, "kendo-dialog", 6);
+    } if (rf & 2) {
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", ctx.isLoading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.isLoading);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("Record", ctx.editOrNewRecord)("SectionName", ctx.EditSectionName)("Visible", ctx.showEditOrNewRecordForm)("AutoRevertOnCancel", true)("HandleSave", true)("Width", 550)("Height", 450);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.deleteRecordDialogVisible && ctx.deleteRecord);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.DialogComponent, i3.DialogActionsComponent, i4.FillContainer, i5.ButtonComponent, i6.SVGIconComponent, i7.EntityFormDialog, i8.LoaderComponent], styles: ["button[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n.wrapper[_ngcontent-%COMP%] {\r\n    padding-right: 10px;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%] {\r\n    margin-left: 5px;\r\n    margin-top: 10px;\r\n    margin-right: 5px;\r\n    border-collapse: collapse; \n\r\n    width: 100%;\r\n}\r\n \r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\r\n    background-color: #f2f2f2; \n\r\n    color: black; \n\r\n    font-weight: bold; \n\r\n    text-align: left;\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\r\n    height: 36px; \n\r\n    padding: 0 8px; \n\r\n}\r\n\r\n\n\r\ntable[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {\r\n    display: flex; \n\r\n    justify-content: space-between; \n\r\n    align-items: center; \n\r\n    padding-right: 8px; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   span[_ngcontent-%COMP%]:first-child {\r\n    border: none; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   span[_ngcontent-%COMP%]:last-child {\r\n    border: none; \n\r\n}\r\n\r\n\n\r\ntd[_ngcontent-%COMP%]:first-child   .icon[_ngcontent-%COMP%] {\r\n    margin-left: 10px; \n\r\n    cursor: pointer; \n\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\r\n    cursor: pointer;\r\n}\r\n\r\ntable[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\r\n    background-color: #e7f4ff; \n\r\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordListComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-record-list', template: "<div mjFillContainer class=\"wrapper\">\r\n    <button kendoButton (click)=\"createNewRecord()\">New Record</button>\r\n    <div *ngIf=\"isLoading\"><kendo-loader></kendo-loader></div>\r\n    <table *ngIf=\"!isLoading\" class=\"grid\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let c of Columns\">\r\n                    {{ c }}\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let r of records\" (click)=\"selectRecord(undefined, r)\">\r\n                <td *ngFor=\"let c of Columns; let i = index\">\r\n                    <span>{{ r.Get(c) }}</span>\r\n                    <span *ngIf=\"i === 0 && (this.AllowDelete || this.AllowEdit)\">\r\n                        <kendo-svgicon *ngIf=\"this.AllowEdit\" class='icon' [icon]=\"kendoSVGIcon('pencil')\" (click)=\"editRecord($event, r)\"></kendo-svgicon> \r\n                        <kendo-svgicon *ngIf=\"this.AllowEdit\" class='icon' [icon]=\"kendoSVGIcon('trash')\" (click)=\"deleteRecord($event, r)\"></kendo-svgicon>\r\n                    </span>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n \r\n<mj-entity-form-dialog #entityForm \r\n    [Record]=\"editOrNewRecord\" \r\n    [SectionName]=\"EditSectionName\"\r\n    Mode=\"section\" \r\n    [Visible]=\"showEditOrNewRecordForm\" \r\n    [AutoRevertOnCancel]=\"true\"\r\n    [HandleSave]=\"true\"\r\n    [Width]=\"550\"\r\n    [Height]=\"450\"\r\n    (close)=\"onEditOrNewRecordFormClosed($event)\">\r\n</mj-entity-form-dialog>\r\n\r\n<kendo-dialog\r\n        *ngIf=\"deleteRecordDialogVisible && deleteRecord\" \r\n        [title]=\"'Delete ' + EntityName + '?'\" \r\n        [width]=\"450\"\r\n        [height]=\"200\"\r\n        (close)=\"closeDeleteDialog('No')\" >\r\n    <div>\r\n        Are you sure you want to delete '{{getRecordName(deleteRecordItem!)}}'?\r\n    </div>\r\n    <kendo-dialog-actions>\r\n        <button kendoButton (click)=\"closeDeleteDialog('Yes')\"  themeColor=\"primary\">Yes</button>\r\n        <button kendoButton (click)=\"closeDeleteDialog('No')\">No</button>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>", styles: ["button {\r\n    margin-left: 5px;\r\n    margin-top: 5px;\r\n    width: 125px;\r\n}\r\n\r\n.wrapper {\r\n    padding-right: 10px;\r\n}\r\n\r\n/* Style for the whole table */\r\ntable {\r\n    margin-left: 5px;\r\n    margin-top: 10px;\r\n    margin-right: 5px;\r\n    border-collapse: collapse; /* Ensures border collapse for a cleaner look */\r\n    width: 100%;\r\n}\r\n \r\ntable th {\r\n    background-color: #f2f2f2; /* Light gray background for headers */\r\n    color: black; /* Black text color for headers */\r\n    font-weight: bold; /* Bold font weight for headers */\r\n    text-align: left;\r\n}\r\n\r\n/* Style for all table cells */\r\ntable th, table td {\r\n    height: 36px; /* Fixed height for all rows */\r\n    padding: 0 8px; /* Add some padding inside cells */\r\n}\r\n\r\n/* Style for the first column cells */\r\ntable td:first-child {\r\n    display: flex; /* Make the cell a flex container */\r\n    justify-content: space-between; /* Space out the text and icons */\r\n    align-items: center; /* Center items vertically */\r\n    padding-right: 8px; /* Ensure there is some padding on the right */\r\n}\r\n\r\n/* Style for the text span within the first column */\r\ntd:first-child span:first-child {\r\n    border: none; /* Ensures no border is applied to the span */\r\n}\r\n\r\n/* Style for the icons container span within the first column */\r\ntd:first-child span:last-child {\r\n    border: none; /* Ensures no border is applied to the span */\r\n}\r\n\r\n/* Style for the icons within the first column */\r\ntd:first-child .icon {\r\n    margin-left: 10px; /* Space between icons if needed */\r\n    cursor: pointer; /* Change cursor to pointer on hover */\r\n}\r\n\r\ntable tr {\r\n    cursor: pointer;\r\n}\r\n\r\ntable tr:hover {\r\n    background-color: #e7f4ff; /* Light blue for even rows */\r\n}\r\n "] }]
+    }], () => [{ type: i1.Router }], { EntityName: [{
+            type: Input
+        }], Columns: [{
+            type: Input
+        }], SortBy: [{
+            type: Input
+        }], AllowDelete: [{
+            type: Input
+        }], AllowNew: [{
+            type: Input
+        }], AllowEdit: [{
+            type: Input
+        }], EditSectionName: [{
+            type: Input
+        }], RecordSelected: [{
+            type: Output
+        }], RecordEdited: [{
+            type: Output
+        }], RecordCreated: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordListComponent, { className: "RecordListComponent", filePath: "src\\lib\\record-list\\record-list.component.ts", lineNumber: 13 }); })();

package/dist/lib/roles-list/roles-list.component.d.ts

@@ -1,4 +1,5 @@
 import { OnInit } from '@angular/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
 import { RoleEntity } from '@memberjunction/core-entities';
 import { Router } from '@angular/router';
 import * as i0 from "@angular/core";
@@ -6,10 +7,19 @@ export declare class RolesListComponent implements OnInit {
     private router;
     isLoading: boolean;
     roles: RoleEntity[];
+    kendoSVGIcon: typeof kendoSVGIcon;
     constructor(router: Router);
     ngOnInit(): void;
     Refresh(): Promise<void>;
-    selectRole(r: RoleEntity): void;
+    selectRole(event: MouseEvent | undefined, r: RoleEntity): void;
+    deleteRoleDialogVisible: boolean;
+    deleteRoleRecord: RoleEntity | null;
+    deleteRole(event: MouseEvent, r: RoleEntity): Promise<void>;
+    closeDeleteRoleDialog(result: 'Yes' | 'No'): Promise<void>;
+    newRoleRecord: RoleEntity;
+    showNewRoleForm: boolean;
+    createNewRole(): Promise<void>;
+    onNewRoleFormClosed(result: 'Save' | 'Cancel'): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RolesListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RolesListComponent, "mj-roles-list", never, {}, {}, never, never, false, never>;
 }

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

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

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

@@ -1,17 +1,21 @@
 import { OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { BaseEntity } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare class SettingsComponent implements OnInit {
     private router;
     private activatedRoute;
-    currentItem: 'EntityPermissions' | 'Users' | 'Roles' | 'Role';
+    currentItem: 'EntityPermissions' | 'Users' | 'User' | 'Roles' | 'Role';
     baseRoute: string;
     selectedRoleName: string;
-    selectItem(item: 'EntityPermissions' | 'Users' | 'Roles' | 'Role', changeRoute?: boolean): void;
+    selectedUserID: number;
+    selectItem(item: 'EntityPermissions' | 'Users' | 'User' | 'Roles' | 'Role', changeRoute?: boolean): void;
     changeRoute(subPath: string): void;
     constructor(router: Router, activatedRoute: ActivatedRoute);
     ngOnInit(): void;
     updateComponentStateBasedOnPath(): void;
+    selectRole(r: BaseEntity): void;
+    selectUser(r: BaseEntity): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SettingsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SettingsComponent, "mj-settings", never, {}, {}, never, never, false, never>;
 }