@memberjunction/ng-simple-record-list 0.9.2

package/dist/lib/module.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./simple-record-list/simple-record-list.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@memberjunction/ng-container-directives";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "@progress/kendo-angular-dropdowns";
+import * as i9 from "@memberjunction/ng-entity-form-dialog";
+import * as i10 from "@progress/kendo-angular-indicators";
+export declare class SimpleRecordListModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleRecordListModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SimpleRecordListModule, [typeof i1.SimpleRecordListComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.DialogsModule, typeof i5.ContainerDirectivesModule, typeof i6.ButtonsModule, typeof i7.IconsModule, typeof i8.DropDownsModule, typeof i4.DialogsModule, typeof i9.EntityFormDialogModule, typeof i10.IndicatorsModule], [typeof i1.SimpleRecordListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SimpleRecordListModule>;
+}

package/dist/lib/module.js

@@ -0,0 +1,62 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+// Kendo UI Angular imports
+import { DialogsModule } from "@progress/kendo-angular-dialog";
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+// MJ
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import { EntityFormDialogModule } from '@memberjunction/ng-entity-form-dialog';
+// LOCAL
+import { SimpleRecordListComponent } from './simple-record-list/simple-record-list.component';
+import * as i0 from "@angular/core";
+export class SimpleRecordListModule {
+}
+SimpleRecordListModule.ɵfac = function SimpleRecordListModule_Factory(t) { return new (t || SimpleRecordListModule)(); };
+SimpleRecordListModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: SimpleRecordListModule });
+SimpleRecordListModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        DialogsModule,
+        ContainerDirectivesModule,
+        ButtonsModule,
+        IconsModule,
+        DropDownsModule,
+        DialogsModule,
+        EntityFormDialogModule,
+        IndicatorsModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SimpleRecordListModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    SimpleRecordListComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    DialogsModule,
+                    ContainerDirectivesModule,
+                    ButtonsModule,
+                    IconsModule,
+                    DropDownsModule,
+                    DialogsModule,
+                    EntityFormDialogModule,
+                    IndicatorsModule
+                ],
+                exports: [
+                    SimpleRecordListComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(SimpleRecordListModule, { declarations: [SimpleRecordListComponent], imports: [CommonModule,
+        FormsModule,
+        DialogsModule,
+        ContainerDirectivesModule,
+        ButtonsModule,
+        IconsModule,
+        DropDownsModule,
+        DialogsModule,
+        EntityFormDialogModule,
+        IndicatorsModule], exports: [SimpleRecordListComponent] }); })();

package/dist/lib/simple-record-list/simple-record-list.component.d.ts

@@ -0,0 +1,41 @@
+import { OnInit, EventEmitter } from '@angular/core';
+import { BaseEntity } from '@memberjunction/core';
+import { kendoSVGIcon } from '@memberjunction/ng-shared';
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+export declare class SimpleRecordListComponent implements OnInit {
+    private router;
+    EntityName: string;
+    Columns: string[];
+    SortBy: string;
+    AllowDelete: boolean;
+    AllowNew: boolean;
+    AllowEdit: boolean;
+    /**
+     * If AllowEdit or AllowNew is true, this is the section name to display for editing a new or existing record.
+     */
+    EditSectionName: string;
+    RecordSelected: EventEmitter<BaseEntity>;
+    RecordEdited: EventEmitter<BaseEntity>;
+    RecordCreated: EventEmitter<BaseEntity>;
+    isLoading: boolean;
+    records: BaseEntity[];
+    kendoSVGIcon: typeof kendoSVGIcon;
+    constructor(router: Router);
+    ngOnInit(): void;
+    Refresh(): Promise<void>;
+    selectRecord(event: MouseEvent | undefined, r: BaseEntity): void;
+    deleteRecordDialogVisible: boolean;
+    deleteRecordItem: BaseEntity | null;
+    deleteRecord(event: MouseEvent, r: BaseEntity): Promise<void>;
+    closeDeleteDialog(result: 'Yes' | 'No'): Promise<void>;
+    editOrNewRecord: BaseEntity;
+    showEditOrNewRecordForm: boolean;
+    recordMode: 'new' | 'edit';
+    createNewRecord(): Promise<void>;
+    editRecord(event: MouseEvent, r: BaseEntity): Promise<void>;
+    onEditOrNewRecordFormClosed(result: 'Save' | 'Cancel'): Promise<void>;
+    getRecordName(r: BaseEntity): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleRecordListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleRecordListComponent, "mj-simple-record-list", never, { "EntityName": { "alias": "EntityName"; "required": false; }; "Columns": { "alias": "Columns"; "required": false; }; "SortBy": { "alias": "SortBy"; "required": false; }; "AllowDelete": { "alias": "AllowDelete"; "required": false; }; "AllowNew": { "alias": "AllowNew"; "required": false; }; "AllowEdit": { "alias": "AllowEdit"; "required": false; }; "EditSectionName": { "alias": "EditSectionName"; "required": false; }; }, { "RecordSelected": "RecordSelected"; "RecordEdited": "RecordEdited"; "RecordCreated": "RecordCreated"; }, never, never, false, never>;
+}

package/dist/lib/simple-record-list/simple-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 SimpleRecordListComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "kendo-loader");
+    i0.ɵɵelementEnd();
+} }
+function SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent_table_4_tr_5_td_1_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtemplate(1, SimpleRecordListComponent_table_4_tr_5_td_1_span_3_kendo_svgicon_1_Template, 1, 1, "kendo-svgicon", 11)(2, SimpleRecordListComponent_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 SimpleRecordListComponent_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, SimpleRecordListComponent_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 SimpleRecordListComponent_table_4_tr_5_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 10);
+    i0.ɵɵlistener("click", function SimpleRecordListComponent_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, SimpleRecordListComponent_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 SimpleRecordListComponent_table_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "table", 7)(1, "thead")(2, "tr");
+    i0.ɵɵtemplate(3, SimpleRecordListComponent_table_4_th_3_Template, 2, 1, "th", 8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "tbody");
+    i0.ɵɵtemplate(5, SimpleRecordListComponent_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 SimpleRecordListComponent_kendo_dialog_7_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 13);
+    i0.ɵɵlistener("close", function SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent_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 SimpleRecordListComponent {
+    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;
+            }
+        }
+    }
+}
+SimpleRecordListComponent.ɵfac = function SimpleRecordListComponent_Factory(t) { return new (t || SimpleRecordListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
+SimpleRecordListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SimpleRecordListComponent, selectors: [["mj-simple-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 SimpleRecordListComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
+        i0.ɵɵlistener("click", function SimpleRecordListComponent_Template_button_click_1_listener() { return ctx.createNewRecord(); });
+        i0.ɵɵtext(2, "New Record");
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(3, SimpleRecordListComponent_div_3_Template, 2, 0, "div", 2)(4, SimpleRecordListComponent_table_4_Template, 6, 2, "table", 3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(5, "mj-entity-form-dialog", 4, 5);
+        i0.ɵɵlistener("close", function SimpleRecordListComponent_Template_mj_entity_form_dialog_close_5_listener($event) { return ctx.onEditOrNewRecordFormClosed($event); });
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(7, SimpleRecordListComponent_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(SimpleRecordListComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-simple-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(SimpleRecordListComponent, { className: "SimpleRecordListComponent", filePath: "src\\lib\\simple-record-list\\simple-record-list.component.ts", lineNumber: 13 }); })();

package/dist/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/simple-record-list/simple-record-list.component';
+export * from './lib/module';

package/dist/public-api.js

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface
+ */
+export * from './lib/simple-record-list/simple-record-list.component';
+export * from './lib/module';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@memberjunction/ng-simple-record-list",
+  "version": "0.9.2",
+  "description": "MemberJunction: Very simple and reusable Angular component for displaying, editing, creating and deleting records in any entity",
+  "main": "./dist/public-api.js",
+  "typings": "./dist/public-api.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "ngc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "~17.2.2",
+    "@angular/compiler-cli": "~17.2.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "~17.2.2",
+    "@angular/core": "~17.2.2",
+    "@angular/forms": "~17.2.2",
+    "@angular/router": "~17.2.2"
+  },
+  "dependencies": {
+    "@memberjunction/core-entities": "^0.9.166",
+    "@memberjunction/global": "^0.9.156",
+    "@memberjunction/core": "^0.9.177",
+    "@memberjunction/ng-container-directives": "^0.9.141",
+    "@memberjunction/ng-shared": "^0.9.34",
+    "@memberjunction/ng-entity-form-dialog": "^0.9.2",
+    "@progress/kendo-angular-buttons": "~15.1.0",
+    "@progress/kendo-angular-dialog": "~15.1.0",
+    "@progress/kendo-angular-layout": "~15.1.0",
+    "@progress/kendo-angular-indicators": "~15.1.0",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}