npm - @memberjunction/ng-record-changes - Versions diffs - 0.9.54 → 0.9.64 - Mend

@memberjunction/ng-record-changes 0.9.54 → 0.9.64

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.

Files changed (7) hide show

package/dist/lib/ng-record-changes.component.d.ts +32 -32
package/dist/lib/ng-record-changes.component.js +215 -215
package/dist/lib/ng-record-changes.module.d.ts +17 -17
package/dist/lib/ng-record-changes.module.js +64 -64
package/dist/public-api.d.ts +2 -2
package/dist/public-api.js +5 -5
package/package.json +10 -10

package/dist/lib/ng-record-changes.component.d.ts CHANGED Viewed

@@ -1,32 +1,32 @@
-import { EventEmitter, OnInit, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { SortDescriptor } from '@progress/kendo-data-query';
-import { BaseEntity } from '@memberjunction/core';
-import * as i0 from "@angular/core";
-export declare class RecordChangesComponent implements OnInit, AfterViewInit, OnDestroy {
-    private sanitizer;
-    private renderer;
-    showloader: boolean;
-    dialogClosed: EventEmitter<any>;
-    record: BaseEntity;
-    wrapper: ElementRef;
-    viewData: any;
-    visibleColumns: any;
-    sortSettings: SortDescriptor[];
-    constructor(sanitizer: DomSanitizer, renderer: Renderer2);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    LoadRecordChanges(primaryKeyValue: any, appName: string, entityName: string): Promise<void>;
-    prepareColumns(): void;
-    closePropertiesDialog(): void;
-    FormatColumnValue(col: any, value: any, dataItem: any, maxLength?: number, trailingChars?: string): any;
-    protected fieldMarkup(fieldName: string): string;
-    protected valueMarkup(changeInfo: {
-        field: string;
-        oldValue: any;
-        newValue: any;
-    }, isOldValue: boolean): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RecordChangesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RecordChangesComponent, "mj-record-changes", never, { "record": "record"; }, { "dialogClosed": "dialogClosed"; }, never, never, false, never>;
-}
+import { EventEmitter, OnInit, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { SortDescriptor } from '@progress/kendo-data-query';
+import { BaseEntity } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export declare class RecordChangesComponent implements OnInit, AfterViewInit, OnDestroy {
+    private sanitizer;
+    private renderer;
+    showloader: boolean;
+    dialogClosed: EventEmitter<any>;
+    record: BaseEntity;
+    wrapper: ElementRef;
+    viewData: any;
+    visibleColumns: any;
+    sortSettings: SortDescriptor[];
+    constructor(sanitizer: DomSanitizer, renderer: Renderer2);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    LoadRecordChanges(primaryKeyValue: any, appName: string, entityName: string): Promise<void>;
+    prepareColumns(): void;
+    closePropertiesDialog(): void;
+    FormatColumnValue(col: any, value: any, dataItem: any, maxLength?: number, trailingChars?: string): any;
+    protected fieldMarkup(fieldName: string): string;
+    protected valueMarkup(changeInfo: {
+        field: string;
+        oldValue: any;
+        newValue: any;
+    }, isOldValue: boolean): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RecordChangesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RecordChangesComponent, "mj-record-changes", never, { "record": { "alias": "record"; "required": false; }; }, { "dialogClosed": "dialogClosed"; }, never, never, false, never>;
+}

package/dist/lib/ng-record-changes.component.js CHANGED Viewed

@@ -1,215 +1,215 @@
-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, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { EntityFieldTSType, LogError, RunView } from '@memberjunction/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/platform-browser";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-grid";
-import * as i4 from "@progress/kendo-angular-dialog";
-import * as i5 from "@progress/kendo-angular-indicators";
-const _c0 = ["recordChangesWrapper"];
-function RecordChangesComponent_kendo_loader_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 5);
-} }
-function RecordChangesComponent_div_5_kendo_grid_column_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 13);
-} if (rf & 2) {
-    const dataItem_r8 = ctx.$implicit;
-    const item_r5 = i0.ɵɵnextContext().$implicit;
-    const ctx_r7 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r7.FormatColumnValue(item_r5, dataItem_r8[item_r5.field], dataItem_r8), i0.ɵɵsanitizeHtml);
-} }
-const _c1 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
-function RecordChangesComponent_div_5_kendo_grid_column_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-column", 11);
-    i0.ɵɵtemplate(1, RecordChangesComponent_div_5_kendo_grid_column_4_ng_template_1_Template, 1, 1, "ng-template", 12);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    i0.ɵɵpropertyInterpolate("field", item_r5.field);
-    i0.ɵɵpropertyInterpolate("title", item_r5.title);
-    i0.ɵɵproperty("width", item_r5.width)("headerStyle", i0.ɵɵpureFunction0(4, _c1));
-} }
-function RecordChangesComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6, 7)(2, "div", 8)(3, "kendo-grid", 9);
-    i0.ɵɵtemplate(4, RecordChangesComponent_div_5_kendo_grid_column_4_Template, 2, 5, "kendo-grid-column", 10);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("kendoGridBinding", ctx_r2.viewData)("pageSize", 100)("sortable", true)("sort", ctx_r2.sortSettings)("loading", ctx_r2.showloader)("resizable", true)("navigable", true);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r2.visibleColumns);
-} }
-export class RecordChangesComponent {
-    constructor(sanitizer, renderer) {
-        this.sanitizer = sanitizer;
-        this.renderer = renderer;
-        this.showloader = false;
-        this.dialogClosed = new EventEmitter();
-        this.viewData = [];
-        this.visibleColumns = [];
-        this.sortSettings = [
-            {
-                field: "ChangedAt",
-                dir: "desc",
-            },
-        ];
-    }
-    ngOnInit() {
-        if (this.record) {
-            this.showloader = true;
-            this.LoadRecordChanges(this.record.PrimaryKey.Value, '', this.record.EntityInfo.Name);
-            this.prepareColumns();
-        }
-    }
-    ngAfterViewInit() {
-        // Move the wrapper to the body when the component is initialized
-        if (this.renderer && this.wrapper && this.wrapper.nativeElement)
-            this.renderer.appendChild(document.body, this.wrapper.nativeElement);
-    }
-    ngOnDestroy() {
-        // Remove the wrapper from the body when the component is destroyed
-        if (this.renderer && this.wrapper && this.wrapper.nativeElement)
-            this.renderer.removeChild(document.body, this.wrapper.nativeElement);
-    }
-    LoadRecordChanges(primaryKeyValue, appName, entityName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Perform any necessary actions with the ViewID, such as fetching data
-            if (primaryKeyValue && entityName) {
-                const rv = new RunView();
-                const response = yield rv.RunView({ EntityName: "Record Changes", ExtraFilter: `Entity='${entityName}' AND RecordID='${primaryKeyValue}'` });
-                if (response.Success) {
-                    this.viewData = response.Results;
-                    this.showloader = false;
-                }
-                else {
-                    LogError(response.ErrorMessage);
-                    this.showloader = false;
-                }
-            }
-        });
-    }
-    prepareColumns() {
-        this.visibleColumns = [{
-                field: 'ChangedAt',
-                title: 'Date',
-                type: 'datetime',
-                width: 175,
-            },
-            {
-                field: 'ChangesDescription',
-                title: 'Changes',
-                type: 'description',
-            }];
-    }
-    closePropertiesDialog() {
-        this.dialogClosed.emit();
-    }
-    FormatColumnValue(col, value, dataItem, maxLength = 0, trailingChars = "...") {
-        if (value === null)
-            return null;
-        try {
-            switch (col.type.toLowerCase()) {
-                case 'datetime':
-                    let utcDate = new Date(value); // UTC date
-                    // Calculate the local timezone offset and adjust the date
-                    const localDate = new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000);
-                    return new Intl.DateTimeFormat('en-US', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        hour12: true,
-                    }).format(localDate);
-                case 'int':
-                    return new Intl.NumberFormat(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value);
-                case 'description':
-                    // while the database stores a description, it is easier to use the ChangesJSON field to get the structured data and then generate our HTML
-                    const json = JSON.parse(dataItem.ChangesJSON);
-                    if (!json)
-                        return value;
-                    else {
-                        const fields = Object.keys(json); // each field that was changed is a key in the JSON object
-                        let formattedDescription = '<div>';
-                        for (let i = 0; i < fields.length; i++) {
-                            const changeInfo = json[fields[i]];
-                            const field = this.record.EntityInfo.Fields.find((f) => { var _a; return f.Name.trim().toLowerCase() === ((_a = changeInfo.field) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()); });
-                            let innerDescription = "";
-                            if (field) {
-                                // we have field metadata, so we can use that
-                                if (field.TSType === EntityFieldTSType.Boolean) {
-                                    // for boolean fields, it is cleaner to just show new value, no need to show old value as it is always the opposite
-                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} set to ${this.valueMarkup(changeInfo, false)}`;
-                                }
-                                else {
-                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} changed from ${this.valueMarkup(changeInfo, true)} to ${this.valueMarkup(changeInfo, false)}`;
-                                }
-                            }
-                            else {
-                                // we don't have field metadata - this could happen if a field was removed or renamed after a record change was recorded in the database, so just use what we have
-                                innerDescription = `${this.fieldMarkup(changeInfo.field)} changed from ${this.valueMarkup(changeInfo, true)}} to ${this.valueMarkup(changeInfo, false)}`;
-                            }
-                            formattedDescription += `<div>${innerDescription}</div>`;
-                        }
-                        formattedDescription += '</div>';
-                        return this.sanitizer.bypassSecurityTrustHtml(formattedDescription);
-                    }
-                default:
-                    return value;
-            }
-        }
-        catch (e) {
-            LogError(e);
-            return value;
-        }
-    }
-    fieldMarkup(fieldName) {
-        return `<b>${fieldName}</b>`;
-    }
-    valueMarkup(changeInfo, isOldValue) {
-        return `<span style="color: ${isOldValue ? 'darkgray' : 'blue'};">${isOldValue ? changeInfo.oldValue : changeInfo.newValue}</span>`;
-    }
-}
-RecordChangesComponent.ɵfac = function RecordChangesComponent_Factory(t) { return new (t || RecordChangesComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2)); };
-RecordChangesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], viewQuery: function RecordChangesComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wrapper = _t.first);
-    } }, inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, decls: 6, vars: 7, consts: [["recordChangesWrapper", ""], [1, "k-overlay"], ["title", "Record Changes", 1, "kendo-window-custom", 3, "width", "height", "minHeight", "minWidth", "resizable", "close"], ["type", "converging-spinner", 4, "ngIf"], ["class", "k-d-flex k-flex-col k-justify-content-between k-h-full", 4, "ngIf"], ["type", "converging-spinner"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full"], ["dialogContainer", ""], [1, "kendo-grid-container"], ["scrollable", "virtual", 3, "kendoGridBinding", "pageSize", "sortable", "sort", "loading", "resizable", "navigable"], [3, "field", "title", "width", "headerStyle", 4, "ngFor", "ngForOf"], [3, "field", "title", "width", "headerStyle"], ["kendoGridCellTemplate", ""], [3, "innerHTML"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", null, 0);
-        i0.ɵɵelement(2, "div", 1);
-        i0.ɵɵelementStart(3, "kendo-window", 2);
-        i0.ɵɵlistener("close", function RecordChangesComponent_Template_kendo_window_close_3_listener() { return ctx.closePropertiesDialog(); });
-        i0.ɵɵtemplate(4, RecordChangesComponent_kendo_loader_4_Template, 1, 0, "kendo-loader", 3);
-        i0.ɵɵtemplate(5, RecordChangesComponent_div_5_Template, 5, 8, "div", 4);
-        i0.ɵɵelementEnd()();
-    } if (rf & 2) {
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("width", 700)("height", 525)("minHeight", 300)("minWidth", 400)("resizable", true);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.showloader);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx.showloader);
-    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.WindowComponent, i5.LoaderComponent] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesComponent, [{
-        type: Component,
-        args: [{ selector: 'mj-record-changes', template: "<div #recordChangesWrapper>\r\n    <div class=\"k-overlay\"></div>\r\n    <kendo-window \r\n        class=\"kendo-window-custom\"\r\n        [width]=\"700\"\r\n        [height]=\"525\"\r\n        [minHeight]=\"300\"\r\n        [minWidth]=\"400\"\r\n        [resizable]=\"true\"\r\n        title=\"Record Changes\"\r\n        (close)=\"closePropertiesDialog()\"\r\n    >\r\n        <kendo-loader *ngIf=\"showloader\" type=\"converging-spinner\" ></kendo-loader>\r\n        <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\" #dialogContainer *ngIf=\"!showloader\">\r\n            <div class=\"kendo-grid-container\">\r\n                <kendo-grid \r\n                    [kendoGridBinding]=\"viewData\" \r\n                    scrollable=\"virtual\" \r\n                    [pageSize]=\"100\" \r\n                    [sortable]=\"true\"\r\n                    [sort]=\"sortSettings\" \r\n                    [loading]=\"showloader\" \r\n                    [resizable]=\"true\" \r\n                    [navigable]=\"true\"\r\n                >\r\n                    <kendo-grid-column \r\n                        *ngFor=\"let item of visibleColumns; let i = index\" \r\n                        field=\"{{item.field}}\"\r\n                        title=\"{{item.title}}\" \r\n                        [width]=\"item.width\"\r\n                        [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\"\r\n                    >\r\n                        <ng-template kendoGridCellTemplate let-dataItem>\r\n                            <span [innerHTML]=\"FormatColumnValue(item, dataItem[item.field], dataItem)\"></span>\r\n                        </ng-template>\r\n                    </kendo-grid-column>\r\n                </kendo-grid>\r\n            </div>\r\n        </div>\r\n    </kendo-window>\r\n</div>" }]
-    }], function () { return [{ type: i1.DomSanitizer }, { type: i0.Renderer2 }]; }, { dialogClosed: [{
-            type: Output
-        }], record: [{
-            type: Input
-        }], wrapper: [{
-            type: ViewChild,
-            args: ['recordChangesWrapper', { static: true }]
-        }] }); })();
+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, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { EntityFieldTSType, LogError, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-grid";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-indicators";
+const _c0 = ["recordChangesWrapper"];
+function RecordChangesComponent_kendo_loader_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 5);
+} }
+function RecordChangesComponent_div_5_kendo_grid_column_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 13);
+} if (rf & 2) {
+    const dataItem_r8 = ctx.$implicit;
+    const item_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r7 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHTML", ctx_r7.FormatColumnValue(item_r5, dataItem_r8[item_r5.field], dataItem_r8), i0.ɵɵsanitizeHtml);
+} }
+const _c1 = () => ({ "font-weight": "bold", "background-color": "#a9c2af" });
+function RecordChangesComponent_div_5_kendo_grid_column_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-grid-column", 11);
+    i0.ɵɵtemplate(1, RecordChangesComponent_div_5_kendo_grid_column_4_ng_template_1_Template, 1, 1, "ng-template", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r5 = ctx.$implicit;
+    i0.ɵɵpropertyInterpolate("field", item_r5.field);
+    i0.ɵɵpropertyInterpolate("title", item_r5.title);
+    i0.ɵɵproperty("width", item_r5.width)("headerStyle", i0.ɵɵpureFunction0(4, _c1));
+} }
+function RecordChangesComponent_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6, 7)(2, "div", 8)(3, "kendo-grid", 9);
+    i0.ɵɵtemplate(4, RecordChangesComponent_div_5_kendo_grid_column_4_Template, 2, 5, "kendo-grid-column", 10);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("kendoGridBinding", ctx_r2.viewData)("pageSize", 100)("sortable", true)("sort", ctx_r2.sortSettings)("loading", ctx_r2.showloader)("resizable", true)("navigable", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.visibleColumns);
+} }
+export class RecordChangesComponent {
+    constructor(sanitizer, renderer) {
+        this.sanitizer = sanitizer;
+        this.renderer = renderer;
+        this.showloader = false;
+        this.dialogClosed = new EventEmitter();
+        this.viewData = [];
+        this.visibleColumns = [];
+        this.sortSettings = [
+            {
+                field: "ChangedAt",
+                dir: "desc",
+            },
+        ];
+    }
+    ngOnInit() {
+        if (this.record) {
+            this.showloader = true;
+            this.LoadRecordChanges(this.record.PrimaryKey.Value, '', this.record.EntityInfo.Name);
+            this.prepareColumns();
+        }
+    }
+    ngAfterViewInit() {
+        // Move the wrapper to the body when the component is initialized
+        if (this.renderer && this.wrapper && this.wrapper.nativeElement)
+            this.renderer.appendChild(document.body, this.wrapper.nativeElement);
+    }
+    ngOnDestroy() {
+        // Remove the wrapper from the body when the component is destroyed
+        if (this.renderer && this.wrapper && this.wrapper.nativeElement)
+            this.renderer.removeChild(document.body, this.wrapper.nativeElement);
+    }
+    LoadRecordChanges(primaryKeyValue, appName, entityName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Perform any necessary actions with the ViewID, such as fetching data
+            if (primaryKeyValue && entityName) {
+                const rv = new RunView();
+                const response = yield rv.RunView({ EntityName: "Record Changes", ExtraFilter: `Entity='${entityName}' AND RecordID='${primaryKeyValue}'` });
+                if (response.Success) {
+                    this.viewData = response.Results;
+                    this.showloader = false;
+                }
+                else {
+                    LogError(response.ErrorMessage);
+                    this.showloader = false;
+                }
+            }
+        });
+    }
+    prepareColumns() {
+        this.visibleColumns = [{
+                field: 'ChangedAt',
+                title: 'Date',
+                type: 'datetime',
+                width: 175,
+            },
+            {
+                field: 'ChangesDescription',
+                title: 'Changes',
+                type: 'description',
+            }];
+    }
+    closePropertiesDialog() {
+        this.dialogClosed.emit();
+    }
+    FormatColumnValue(col, value, dataItem, maxLength = 0, trailingChars = "...") {
+        if (value === null)
+            return null;
+        try {
+            switch (col.type.toLowerCase()) {
+                case 'datetime':
+                    let utcDate = new Date(value); // UTC date
+                    // Calculate the local timezone offset and adjust the date
+                    const localDate = new Date(utcDate.getTime() - utcDate.getTimezoneOffset() * 60000);
+                    return new Intl.DateTimeFormat('en-US', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        hour: 'numeric',
+                        minute: 'numeric',
+                        hour12: true,
+                    }).format(localDate);
+                case 'int':
+                    return new Intl.NumberFormat(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value);
+                case 'description':
+                    // while the database stores a description, it is easier to use the ChangesJSON field to get the structured data and then generate our HTML
+                    const json = JSON.parse(dataItem.ChangesJSON);
+                    if (!json)
+                        return value;
+                    else {
+                        const fields = Object.keys(json); // each field that was changed is a key in the JSON object
+                        let formattedDescription = '<div>';
+                        for (let i = 0; i < fields.length; i++) {
+                            const changeInfo = json[fields[i]];
+                            const field = this.record.EntityInfo.Fields.find((f) => { var _a; return f.Name.trim().toLowerCase() === ((_a = changeInfo.field) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()); });
+                            let innerDescription = "";
+                            if (field) {
+                                // we have field metadata, so we can use that
+                                if (field.TSType === EntityFieldTSType.Boolean) {
+                                    // for boolean fields, it is cleaner to just show new value, no need to show old value as it is always the opposite
+                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} set to ${this.valueMarkup(changeInfo, false)}`;
+                                }
+                                else {
+                                    innerDescription = `${this.fieldMarkup(field.DisplayNameOrName)} changed from ${this.valueMarkup(changeInfo, true)} to ${this.valueMarkup(changeInfo, false)}`;
+                                }
+                            }
+                            else {
+                                // we don't have field metadata - this could happen if a field was removed or renamed after a record change was recorded in the database, so just use what we have
+                                innerDescription = `${this.fieldMarkup(changeInfo.field)} changed from ${this.valueMarkup(changeInfo, true)}} to ${this.valueMarkup(changeInfo, false)}`;
+                            }
+                            formattedDescription += `<div>${innerDescription}</div>`;
+                        }
+                        formattedDescription += '</div>';
+                        return this.sanitizer.bypassSecurityTrustHtml(formattedDescription);
+                    }
+                default:
+                    return value;
+            }
+        }
+        catch (e) {
+            LogError(e);
+            return value;
+        }
+    }
+    fieldMarkup(fieldName) {
+        return `<b>${fieldName}</b>`;
+    }
+    valueMarkup(changeInfo, isOldValue) {
+        return `<span style="color: ${isOldValue ? 'darkgray' : 'blue'};">${isOldValue ? changeInfo.oldValue : changeInfo.newValue}</span>`;
+    }
+}
+RecordChangesComponent.ɵfac = function RecordChangesComponent_Factory(t) { return new (t || RecordChangesComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2)); };
+RecordChangesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordChangesComponent, selectors: [["mj-record-changes"]], viewQuery: function RecordChangesComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.wrapper = _t.first);
+    } }, inputs: { record: "record" }, outputs: { dialogClosed: "dialogClosed" }, decls: 6, vars: 7, consts: [["recordChangesWrapper", ""], [1, "k-overlay"], ["title", "Record Changes", 1, "kendo-window-custom", 3, "width", "height", "minHeight", "minWidth", "resizable", "close"], ["type", "converging-spinner", 4, "ngIf"], ["class", "k-d-flex k-flex-col k-justify-content-between k-h-full", 4, "ngIf"], ["type", "converging-spinner"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full"], ["dialogContainer", ""], [1, "kendo-grid-container"], ["scrollable", "virtual", 3, "kendoGridBinding", "pageSize", "sortable", "sort", "loading", "resizable", "navigable"], [3, "field", "title", "width", "headerStyle", 4, "ngFor", "ngForOf"], [3, "field", "title", "width", "headerStyle"], ["kendoGridCellTemplate", ""], [3, "innerHTML"]], template: function RecordChangesComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", null, 0);
+        i0.ɵɵelement(2, "div", 1);
+        i0.ɵɵelementStart(3, "kendo-window", 2);
+        i0.ɵɵlistener("close", function RecordChangesComponent_Template_kendo_window_close_3_listener() { return ctx.closePropertiesDialog(); });
+        i0.ɵɵtemplate(4, RecordChangesComponent_kendo_loader_4_Template, 1, 0, "kendo-loader", 3)(5, RecordChangesComponent_div_5_Template, 5, 8, "div", 4);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("width", 700)("height", 525)("minHeight", 300)("minWidth", 400)("resizable", true);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.showloader);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", !ctx.showloader);
+    } }, dependencies: [i2.NgForOf, i2.NgIf, i3.GridComponent, i3.DataBindingDirective, i3.ColumnComponent, i3.CellTemplateDirective, i4.WindowComponent, i5.LoaderComponent] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-record-changes', template: "<div #recordChangesWrapper>\r\n    <div class=\"k-overlay\"></div>\r\n    <kendo-window \r\n        class=\"kendo-window-custom\"\r\n        [width]=\"700\"\r\n        [height]=\"525\"\r\n        [minHeight]=\"300\"\r\n        [minWidth]=\"400\"\r\n        [resizable]=\"true\"\r\n        title=\"Record Changes\"\r\n        (close)=\"closePropertiesDialog()\"\r\n    >\r\n        <kendo-loader *ngIf=\"showloader\" type=\"converging-spinner\" ></kendo-loader>\r\n        <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\" #dialogContainer *ngIf=\"!showloader\">\r\n            <div class=\"kendo-grid-container\">\r\n                <kendo-grid \r\n                    [kendoGridBinding]=\"viewData\" \r\n                    scrollable=\"virtual\" \r\n                    [pageSize]=\"100\" \r\n                    [sortable]=\"true\"\r\n                    [sort]=\"sortSettings\" \r\n                    [loading]=\"showloader\" \r\n                    [resizable]=\"true\" \r\n                    [navigable]=\"true\"\r\n                >\r\n                    <kendo-grid-column \r\n                        *ngFor=\"let item of visibleColumns; let i = index\" \r\n                        field=\"{{item.field}}\"\r\n                        title=\"{{item.title}}\" \r\n                        [width]=\"item.width\"\r\n                        [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\"\r\n                    >\r\n                        <ng-template kendoGridCellTemplate let-dataItem>\r\n                            <span [innerHTML]=\"FormatColumnValue(item, dataItem[item.field], dataItem)\"></span>\r\n                        </ng-template>\r\n                    </kendo-grid-column>\r\n                </kendo-grid>\r\n            </div>\r\n        </div>\r\n    </kendo-window>\r\n</div>" }]
+    }], () => [{ type: i1.DomSanitizer }, { type: i0.Renderer2 }], { dialogClosed: [{
+            type: Output
+        }], record: [{
+            type: Input
+        }], wrapper: [{
+            type: ViewChild,
+            args: ['recordChangesWrapper', { static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordChangesComponent, { className: "RecordChangesComponent", filePath: "src\\lib\\ng-record-changes.component.ts", lineNumber: 11 }); })();

package/dist/lib/ng-record-changes.module.d.ts CHANGED Viewed

@@ -1,17 +1,17 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./ng-record-changes.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@angular/router";
-import * as i5 from "@progress/kendo-angular-grid";
-import * as i6 from "@progress/kendo-angular-dialog";
-import * as i7 from "@progress/kendo-angular-excel-export";
-import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "@memberjunction/ng-compare-records";
-import * as i10 from "@memberjunction/ng-container-directives";
-import * as i11 from "@progress/kendo-angular-indicators";
-export declare class RecordChangesModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<RecordChangesModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RecordChangesModule, [typeof i1.RecordChangesComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.RouterModule, typeof i5.GridModule, typeof i6.DialogsModule, typeof i7.ExcelExportModule, typeof i8.ButtonsModule, typeof i9.CompareRecordsModule, typeof i10.ContainerDirectivesModule, typeof i11.IndicatorsModule], [typeof i1.RecordChangesComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<RecordChangesModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./ng-record-changes.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/router";
+import * as i5 from "@progress/kendo-angular-grid";
+import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-excel-export";
+import * as i8 from "@progress/kendo-angular-buttons";
+import * as i9 from "@memberjunction/ng-compare-records";
+import * as i10 from "@memberjunction/ng-container-directives";
+import * as i11 from "@progress/kendo-angular-indicators";
+export declare class RecordChangesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RecordChangesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RecordChangesModule, [typeof i1.RecordChangesComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.RouterModule, typeof i5.GridModule, typeof i6.DialogsModule, typeof i7.ExcelExportModule, typeof i8.ButtonsModule, typeof i9.CompareRecordsModule, typeof i10.ContainerDirectivesModule, typeof i11.IndicatorsModule], [typeof i1.RecordChangesComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RecordChangesModule>;
+}

package/dist/lib/ng-record-changes.module.js CHANGED Viewed

@@ -1,64 +1,64 @@
-import { NgModule } from '@angular/core';
-import { RecordChangesComponent } from './ng-record-changes.component';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-// Kendo UI Angular imports
-import { GridModule } from '@progress/kendo-angular-grid';
-import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
-import { DialogsModule } from "@progress/kendo-angular-dialog";
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import { IndicatorsModule } from '@progress/kendo-angular-indicators';
-import { CompareRecordsModule } from '@memberjunction/ng-compare-records';
-import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
-import * as i0 from "@angular/core";
-export class RecordChangesModule {
-}
-RecordChangesModule.ɵfac = function RecordChangesModule_Factory(t) { return new (t || RecordChangesModule)(); };
-RecordChangesModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: RecordChangesModule });
-RecordChangesModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule,
-        GridModule,
-        DialogsModule,
-        ExcelExportModule,
-        ButtonsModule,
-        CompareRecordsModule,
-        ContainerDirectivesModule,
-        IndicatorsModule] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesModule, [{
-        type: NgModule,
-        args: [{
-                declarations: [
-                    RecordChangesComponent
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    RouterModule,
-                    GridModule,
-                    DialogsModule,
-                    ExcelExportModule,
-                    ButtonsModule,
-                    CompareRecordsModule,
-                    ContainerDirectivesModule,
-                    IndicatorsModule
-                ],
-                exports: [
-                    RecordChangesComponent
-                ]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(RecordChangesModule, { declarations: [RecordChangesComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule,
-        GridModule,
-        DialogsModule,
-        ExcelExportModule,
-        ButtonsModule,
-        CompareRecordsModule,
-        ContainerDirectivesModule,
-        IndicatorsModule], exports: [RecordChangesComponent] }); })();
+import { NgModule } from '@angular/core';
+import { RecordChangesComponent } from './ng-record-changes.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+// Kendo UI Angular imports
+import { GridModule } from '@progress/kendo-angular-grid';
+import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
+import { DialogsModule } from "@progress/kendo-angular-dialog";
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IndicatorsModule } from '@progress/kendo-angular-indicators';
+import { CompareRecordsModule } from '@memberjunction/ng-compare-records';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import * as i0 from "@angular/core";
+export class RecordChangesModule {
+}
+RecordChangesModule.ɵfac = function RecordChangesModule_Factory(t) { return new (t || RecordChangesModule)(); };
+RecordChangesModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: RecordChangesModule });
+RecordChangesModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        GridModule,
+        DialogsModule,
+        ExcelExportModule,
+        ButtonsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordChangesModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    RecordChangesComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule,
+                    GridModule,
+                    DialogsModule,
+                    ExcelExportModule,
+                    ButtonsModule,
+                    CompareRecordsModule,
+                    ContainerDirectivesModule,
+                    IndicatorsModule
+                ],
+                exports: [
+                    RecordChangesComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(RecordChangesModule, { declarations: [RecordChangesComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        GridModule,
+        DialogsModule,
+        ExcelExportModule,
+        ButtonsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        IndicatorsModule], exports: [RecordChangesComponent] }); })();

package/dist/public-api.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export * from './lib/ng-record-changes.component';
-export * from './lib/ng-record-changes.module';
+export * from './lib/ng-record-changes.component';
+export * from './lib/ng-record-changes.module';

package/dist/public-api.js CHANGED Viewed

@@ -1,5 +1,5 @@
-/*
- * Public API Surface of ng-user-view-grid
- */
-export * from './lib/ng-record-changes.component';
-export * from './lib/ng-record-changes.module';
+/*
+ * Public API Surface of ng-user-view-grid
+ */
+export * from './lib/ng-record-changes.component';
+export * from './lib/ng-record-changes.module';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-record-changes",
-  "version": "0.9.54",
+  "version": "0.9.64",
   "description": "MemberJunction: Angular pop-up window and grid to show changes made to a specific individual record",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -15,19 +15,19 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@angular/compiler": "^15.2.0",
-    "@angular/compiler-cli": "^15.2.0"
+    "@angular/compiler": "^17.1.2",
+    "@angular/compiler-cli": "^17.1.2"
   },
   "peerDependencies": {
-    "@angular/common": "^15.2.0",
-    "@angular/core": "^15.2.0",
-    "@angular/forms": "^15.2.0",
-    "@angular/router": "^15.2.0",
-    "@progress/kendo-angular-grid": "^12.1.0"
+    "@angular/common": "^17.1.2",
+    "@angular/core": "^17.1.2",
+    "@angular/forms": "^17.1.2",
+    "@angular/router": "^17.1.2",
+    "@progress/kendo-angular-grid": "^15.0.1"
   },
   "dependencies": {
-    "@memberjunction/core": "^0.9.116",
-    "@memberjunction/global": "^0.9.108",
+    "@memberjunction/core": "^0.9.134",
+    "@memberjunction/global": "^0.9.123",
     "@memberjunction/ng-compare-records": "^0.9.69",
     "@memberjunction/ng-container-directives": "^0.9.45",
     "tslib": "^2.3.0"