@memberjunction/ng-simple-record-list 1.3.3 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -107,7 +107,7 @@ function SimpleRecordListComponent_Conditional_3_Template(rf, ctx) { if (rf & 1)
107
107
  function SimpleRecordListComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
108
108
  const _r28 = i0.ɵɵgetCurrentView();
109
109
  i0.ɵɵelementStart(0, "mj-entity-form-dialog", 14, 15);
110
- i0.ɵɵlistener("close", function SimpleRecordListComponent_Conditional_4_Template_mj_entity_form_dialog_close_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.onEditOrNewRecordFormClosed($event)); });
110
+ i0.ɵɵlistener("DialogClosed", function SimpleRecordListComponent_Conditional_4_Template_mj_entity_form_dialog_DialogClosed_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.onEditOrNewRecordFormClosed($event)); });
111
111
  i0.ɵɵelementEnd();
112
112
  } if (rf & 2) {
113
113
  const ctx_r3 = i0.ɵɵnextContext();
@@ -305,7 +305,7 @@ export class SimpleRecordListComponent {
305
305
  }
306
306
  }
307
307
  SimpleRecordListComponent.ɵfac = function SimpleRecordListComponent_Factory(t) { return new (t || SimpleRecordListComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
308
- 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: 6, vars: 4, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", ""], ["Mode", "section", 3, "Record", "SectionName", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [3, "title", "width", "height"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "grid"], [4, "ngFor", "ngForOf"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"], ["class", "fa-solid fa-pen-to-square icon"], ["class", "fa-solid fa-trash-can icon"], [1, "fa-solid", "fa-pen-to-square", "icon", 3, "click"], [1, "fa-solid", "fa-trash-can", "icon", 3, "click"], ["Mode", "section", 3, "Record", "SectionName", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "close"], ["entityForm", ""], [3, "title", "width", "height", "close"], ["kendoButton", "", "themeColor", "primary", 3, "click"]], template: function SimpleRecordListComponent_Template(rf, ctx) { if (rf & 1) {
308
+ 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: 6, vars: 4, consts: [["mjFillContainer", "", 1, "wrapper"], ["kendoButton", ""], ["Mode", "section", 3, "Record", "SectionName", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height"], [3, "title", "width", "height"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "grid"], [4, "ngFor", "ngForOf"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"], ["class", "fa-solid fa-pen-to-square icon"], ["class", "fa-solid fa-trash-can icon"], [1, "fa-solid", "fa-pen-to-square", "icon", 3, "click"], [1, "fa-solid", "fa-trash-can", "icon", 3, "click"], ["Mode", "section", 3, "Record", "SectionName", "Visible", "AutoRevertOnCancel", "HandleSave", "Width", "Height", "DialogClosed"], ["entityForm", ""], [3, "title", "width", "height", "close"], ["kendoButton", "", "themeColor", "primary", 3, "click"]], template: function SimpleRecordListComponent_Template(rf, ctx) { if (rf & 1) {
309
309
  i0.ɵɵelementStart(0, "div", 0);
310
310
  i0.ɵɵtemplate(1, SimpleRecordListComponent_Conditional_1_Template, 3, 0, "button", 1)(2, SimpleRecordListComponent_Conditional_2_Template, 2, 0, "div")(3, SimpleRecordListComponent_Conditional_3_Template, 6, 2);
311
311
  i0.ɵɵelementEnd();
@@ -319,10 +319,10 @@ SimpleRecordListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: S
319
319
  i0.ɵɵconditional(4, ctx.AllowNew || ctx.AllowEdit ? 4 : -1);
320
320
  i0.ɵɵadvance();
321
321
  i0.ɵɵconditional(5, ctx.deleteRecordDialogVisible && ctx.AllowDelete ? 5 : -1);
322
- } }, dependencies: [i2.NgForOf, i3.DialogComponent, i3.DialogActionsComponent, i4.FillContainer, i5.ButtonComponent, i6.EntityFormDialog, i7.LoaderComponent], styles: ["button[_ngcontent-%COMP%] {\n margin-left: 5px;\n margin-top: 5px;\n width: 125px;\n}\n\n.wrapper[_ngcontent-%COMP%] {\n padding-right: 10px;\n}\n\n\n\ntable[_ngcontent-%COMP%] {\n margin-left: 5px;\n margin-top: 10px;\n margin-right: 5px;\n border-collapse: collapse; \n\n width: 100%;\n}\n \ntable[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: #f2f2f2; \n\n color: black; \n\n font-weight: bold; \n\n text-align: left;\n}\n\n\n\ntable[_ngcontent-%COMP%] th[_ngcontent-%COMP%], table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n height: 36px; \n\n padding: 0 8px; \n\n}\n\n\n\ntable[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child {\n display: flex; \n\n justify-content: space-between; \n\n align-items: center; \n\n padding-right: 8px; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child span[_ngcontent-%COMP%]:first-child {\n border: none; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child span[_ngcontent-%COMP%]:last-child {\n border: none; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child .icon[_ngcontent-%COMP%] {\n margin-left: 10px; \n\n cursor: pointer; \n\n}\n\ntable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\ntable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: #e7f4ff; \n\n}"] });
322
+ } }, dependencies: [i2.NgForOf, i3.DialogComponent, i3.DialogActionsComponent, i4.FillContainer, i5.ButtonComponent, i6.EntityFormDialogComponent, i7.LoaderComponent], styles: ["button[_ngcontent-%COMP%] {\n margin-left: 5px;\n margin-top: 5px;\n width: 125px;\n}\n\n.wrapper[_ngcontent-%COMP%] {\n padding-right: 10px;\n}\n\n\n\ntable[_ngcontent-%COMP%] {\n margin-left: 5px;\n margin-top: 10px;\n margin-right: 5px;\n border-collapse: collapse; \n\n width: 100%;\n}\n \ntable[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background-color: #f2f2f2; \n\n color: black; \n\n font-weight: bold; \n\n text-align: left;\n}\n\n\n\ntable[_ngcontent-%COMP%] th[_ngcontent-%COMP%], table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n height: 36px; \n\n padding: 0 8px; \n\n}\n\n\n\ntable[_ngcontent-%COMP%] td[_ngcontent-%COMP%]:first-child {\n display: flex; \n\n justify-content: space-between; \n\n align-items: center; \n\n padding-right: 8px; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child span[_ngcontent-%COMP%]:first-child {\n border: none; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child span[_ngcontent-%COMP%]:last-child {\n border: none; \n\n}\n\n\n\ntd[_ngcontent-%COMP%]:first-child .icon[_ngcontent-%COMP%] {\n margin-left: 10px; \n\n cursor: pointer; \n\n}\n\ntable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\ntable[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background-color: #e7f4ff; \n\n}"] });
323
323
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SimpleRecordListComponent, [{
324
324
  type: Component,
325
- args: [{ selector: 'mj-simple-record-list', template: "<div mjFillContainer class=\"wrapper\">\n @if(AllowNew) {\n <button kendoButton (click)=\"createNewRecord()\"><span class=\"fa-solid fa-plus\"></span> New</button>\n }\n @if(isLoading) {\n <div>\n <kendo-loader></kendo-loader>\n </div>\n }\n @else {\n <table class=\"grid\">\n <thead>\n <tr>\n <th *ngFor=\"let c of Columns\">\n {{ c }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let r of records\" (click)=\"selectRecord(undefined, r)\">\n <td *ngFor=\"let c of Columns; let i = index\">\n <span>{{ r.Get(c) }}</span>\n @if(i === 0 && (AllowDelete || AllowEdit)) {\n <span>\n @if (AllowEdit) {\n <span class=\"fa-solid fa-pen-to-square icon\" (click)=\"editRecord($event, r)\"></span>\n }\n @if (AllowDelete) {\n <span class=\"fa-solid fa-trash-can icon\" (click)=\"deleteRecord($event, r)\"></span>\n }\n </span> \n }\n </td>\n </tr>\n </tbody>\n </table> \n }\n</div>\n \n@if(AllowNew || AllowEdit) {\n<mj-entity-form-dialog #entityForm \n [Record]=\"editOrNewRecord\" \n [SectionName]=\"EditSectionName\"\n Mode=\"section\" \n [Visible]=\"showEditOrNewRecordForm\" \n [AutoRevertOnCancel]=\"true\"\n [HandleSave]=\"true\"\n [Width]=\"550\"\n [Height]=\"450\"\n (close)=\"onEditOrNewRecordFormClosed($event)\">\n</mj-entity-form-dialog>\n}\n\n@if(deleteRecordDialogVisible && AllowDelete) {\n<kendo-dialog\n [title]=\"'Delete ' + EntityName + '?'\" \n [width]=\"450\"\n [height]=\"200\"\n (close)=\"closeDeleteDialog('No')\" >\n <div>\n Are you sure you want to delete '{{getRecordName(deleteRecordItem!)}}'?\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeDeleteDialog('Yes')\" themeColor=\"primary\">Yes</button>\n <button kendoButton (click)=\"closeDeleteDialog('No')\">No</button>\n </kendo-dialog-actions>\n</kendo-dialog>\n}\n", styles: ["button {\n margin-left: 5px;\n margin-top: 5px;\n width: 125px;\n}\n\n.wrapper {\n padding-right: 10px;\n}\n\n/* Style for the whole table */\ntable {\n margin-left: 5px;\n margin-top: 10px;\n margin-right: 5px;\n border-collapse: collapse; /* Ensures border collapse for a cleaner look */\n width: 100%;\n}\n \ntable th {\n background-color: #f2f2f2; /* Light gray background for headers */\n color: black; /* Black text color for headers */\n font-weight: bold; /* Bold font weight for headers */\n text-align: left;\n}\n\n/* Style for all table cells */\ntable th, table td {\n height: 36px; /* Fixed height for all rows */\n padding: 0 8px; /* Add some padding inside cells */\n}\n\n/* Style for the first column cells */\ntable td:first-child {\n display: flex; /* Make the cell a flex container */\n justify-content: space-between; /* Space out the text and icons */\n align-items: center; /* Center items vertically */\n padding-right: 8px; /* Ensure there is some padding on the right */\n}\n\n/* Style for the text span within the first column */\ntd:first-child span:first-child {\n border: none; /* Ensures no border is applied to the span */\n}\n\n/* Style for the icons container span within the first column */\ntd:first-child span:last-child {\n border: none; /* Ensures no border is applied to the span */\n}\n\n/* Style for the icons within the first column */\ntd:first-child .icon {\n margin-left: 10px; /* Space between icons if needed */\n cursor: pointer; /* Change cursor to pointer on hover */\n}\n\ntable tr {\n cursor: pointer;\n}\n\ntable tr:hover {\n background-color: #e7f4ff; /* Light blue for even rows */\n}\n "] }]
325
+ args: [{ selector: 'mj-simple-record-list', template: "<div mjFillContainer class=\"wrapper\">\n @if(AllowNew) {\n <button kendoButton (click)=\"createNewRecord()\"><span class=\"fa-solid fa-plus\"></span> New</button>\n }\n @if(isLoading) {\n <div>\n <kendo-loader></kendo-loader>\n </div>\n }\n @else {\n <table class=\"grid\">\n <thead>\n <tr>\n <th *ngFor=\"let c of Columns\">\n {{ c }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let r of records\" (click)=\"selectRecord(undefined, r)\">\n <td *ngFor=\"let c of Columns; let i = index\">\n <span>{{ r.Get(c) }}</span>\n @if(i === 0 && (AllowDelete || AllowEdit)) {\n <span>\n @if (AllowEdit) {\n <span class=\"fa-solid fa-pen-to-square icon\" (click)=\"editRecord($event, r)\"></span>\n }\n @if (AllowDelete) {\n <span class=\"fa-solid fa-trash-can icon\" (click)=\"deleteRecord($event, r)\"></span>\n }\n </span> \n }\n </td>\n </tr>\n </tbody>\n </table> \n }\n</div>\n \n@if(AllowNew || AllowEdit) {\n<mj-entity-form-dialog #entityForm \n [Record]=\"editOrNewRecord\" \n [SectionName]=\"EditSectionName\"\n Mode=\"section\" \n [Visible]=\"showEditOrNewRecordForm\" \n [AutoRevertOnCancel]=\"true\"\n [HandleSave]=\"true\"\n [Width]=\"550\"\n [Height]=\"450\"\n (DialogClosed)=\"onEditOrNewRecordFormClosed($event)\">\n</mj-entity-form-dialog>\n}\n\n@if(deleteRecordDialogVisible && AllowDelete) {\n<kendo-dialog\n [title]=\"'Delete ' + EntityName + '?'\" \n [width]=\"450\"\n [height]=\"200\"\n (close)=\"closeDeleteDialog('No')\" >\n <div>\n Are you sure you want to delete '{{getRecordName(deleteRecordItem!)}}'?\n </div>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"closeDeleteDialog('Yes')\" themeColor=\"primary\">Yes</button>\n <button kendoButton (click)=\"closeDeleteDialog('No')\">No</button>\n </kendo-dialog-actions>\n</kendo-dialog>\n}\n", styles: ["button {\n margin-left: 5px;\n margin-top: 5px;\n width: 125px;\n}\n\n.wrapper {\n padding-right: 10px;\n}\n\n/* Style for the whole table */\ntable {\n margin-left: 5px;\n margin-top: 10px;\n margin-right: 5px;\n border-collapse: collapse; /* Ensures border collapse for a cleaner look */\n width: 100%;\n}\n \ntable th {\n background-color: #f2f2f2; /* Light gray background for headers */\n color: black; /* Black text color for headers */\n font-weight: bold; /* Bold font weight for headers */\n text-align: left;\n}\n\n/* Style for all table cells */\ntable th, table td {\n height: 36px; /* Fixed height for all rows */\n padding: 0 8px; /* Add some padding inside cells */\n}\n\n/* Style for the first column cells */\ntable td:first-child {\n display: flex; /* Make the cell a flex container */\n justify-content: space-between; /* Space out the text and icons */\n align-items: center; /* Center items vertically */\n padding-right: 8px; /* Ensure there is some padding on the right */\n}\n\n/* Style for the text span within the first column */\ntd:first-child span:first-child {\n border: none; /* Ensures no border is applied to the span */\n}\n\n/* Style for the icons container span within the first column */\ntd:first-child span:last-child {\n border: none; /* Ensures no border is applied to the span */\n}\n\n/* Style for the icons within the first column */\ntd:first-child .icon {\n margin-left: 10px; /* Space between icons if needed */\n cursor: pointer; /* Change cursor to pointer on hover */\n}\n\ntable tr {\n cursor: pointer;\n}\n\ntable tr:hover {\n background-color: #e7f4ff; /* Light blue for even rows */\n}\n "] }]
326
326
  }], () => [{ type: i1.Router }], { EntityName: [{
327
327
  type: Input
328
328
  }], Columns: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-simple-record-list",
3
- "version": "1.3.3",
3
+ "version": "1.4.1",
4
4
  "description": "MemberJunction: Very simple and reusable Angular component for displaying, editing, creating and deleting records in any entity",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -25,12 +25,12 @@
25
25
  "@angular/router": "~17.2.2"
26
26
  },
27
27
  "dependencies": {
28
- "@memberjunction/core-entities": "~1.3.3",
29
- "@memberjunction/global": "~1.3.3",
30
- "@memberjunction/core": "~1.3.3",
31
- "@memberjunction/ng-container-directives": "~1.3.3",
32
- "@memberjunction/ng-shared": "~1.3.3",
33
- "@memberjunction/ng-entity-form-dialog": "~1.3.3",
28
+ "@memberjunction/core-entities": "~1.4.1",
29
+ "@memberjunction/global": "~1.4.1",
30
+ "@memberjunction/core": "~1.4.1",
31
+ "@memberjunction/ng-container-directives": "~1.4.1",
32
+ "@memberjunction/ng-shared": "~1.4.1",
33
+ "@memberjunction/ng-entity-form-dialog": "~1.4.1",
34
34
  "@progress/kendo-angular-buttons": "~15.1.0",
35
35
  "@progress/kendo-angular-dialog": "~15.1.0",
36
36
  "@progress/kendo-angular-layout": "~15.1.0",