@memberjunction/ng-deep-diff 5.27.1 → 5.29.0
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.
|
@@ -30,6 +30,7 @@ function DeepDiffDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
|
30
30
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.title, " ");
|
|
31
31
|
i0.ɵɵadvance(2);
|
|
32
32
|
i0.ɵɵproperty("title", ctx_r1.isMaximized ? "Restore" : "Maximize");
|
|
33
|
+
i0.ɵɵattribute("aria-label", ctx_r1.isMaximized ? "Restore" : "Maximize");
|
|
33
34
|
i0.ɵɵadvance();
|
|
34
35
|
i0.ɵɵclassProp("fa-window-maximize", !ctx_r1.isMaximized)("fa-window-restore", ctx_r1.isMaximized);
|
|
35
36
|
i0.ɵɵadvance(4);
|
|
@@ -69,15 +70,15 @@ export class DeepDiffDialogComponent {
|
|
|
69
70
|
this.isMaximized = !this.isMaximized;
|
|
70
71
|
}
|
|
71
72
|
static ɵfac = function DeepDiffDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DeepDiffDialogComponent)(); };
|
|
72
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeepDiffDialogComponent, selectors: [["mj-deep-diff-dialog"]], inputs: { oldValue: "oldValue", newValue: "newValue", title: "title", showSummary: "showSummary", showUnchanged: "showUnchanged", expandAll: "expandAll", maxDepth: "maxDepth", maxStringLength: "maxStringLength", treatNullAsUndefined: "treatNullAsUndefined", visible: "visible", width: "width", height: "height" }, outputs: { visibleChange: "visibleChange", close: "close" }, standalone: false, decls: 1, vars: 1, consts: [[1, "dialog-overlay"], [1, "dialog-overlay", 3, "click"], [1, "dialog-container", 3, "click"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-code-branch"], [1, "dialog-actions"], [1, "dialog-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Close", 1, "dialog-btn", "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"]], template: function DeepDiffDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
73
|
-
i0.ɵɵconditionalCreate(0, DeepDiffDialogComponent_Conditional_0_Template, 13,
|
|
73
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeepDiffDialogComponent, selectors: [["mj-deep-diff-dialog"]], inputs: { oldValue: "oldValue", newValue: "newValue", title: "title", showSummary: "showSummary", showUnchanged: "showUnchanged", expandAll: "expandAll", maxDepth: "maxDepth", maxStringLength: "maxStringLength", treatNullAsUndefined: "treatNullAsUndefined", visible: "visible", width: "width", height: "height" }, outputs: { visibleChange: "visibleChange", close: "close" }, standalone: false, decls: 1, vars: 1, consts: [[1, "dialog-overlay"], [1, "dialog-overlay", 3, "click"], [1, "dialog-container", 3, "click"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-code-branch"], [1, "dialog-actions"], [1, "dialog-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Close", "aria-label", "Close", 1, "dialog-btn", "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"]], template: function DeepDiffDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
74
|
+
i0.ɵɵconditionalCreate(0, DeepDiffDialogComponent_Conditional_0_Template, 13, 20, "div", 0);
|
|
74
75
|
} if (rf & 2) {
|
|
75
76
|
i0.ɵɵconditional(ctx.visible ? 0 : -1);
|
|
76
77
|
} }, dependencies: [i1.DeepDiffComponent], styles: ["\n\n.dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n\n\n.dialog-container[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n max-width: 95vw;\n max-height: 95vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideIn 0.3s ease-out;\n transition: all 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n from {\n transform: translateY(-20px) scale(0.95);\n opacity: 0;\n }\n to {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n background: linear-gradient(135deg, var(--mj-bg-surface) 0%, var(--mj-bg-surface-sunken) 100%);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n flex-shrink: 0;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-xl);\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.dialog-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.dialog-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.dialog-btn.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content[_ngcontent-%COMP%] mj-deep-diff[_ngcontent-%COMP%] {\n height: 100%;\n display: block;\n}\n\n\n\n@media (max-width: 768px) {\n .dialog-container[_ngcontent-%COMP%] {\n width: 95vw !important;\n height: 95vh !important;\n margin: 2.5vh 2.5vw;\n }\n \n .dialog-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .dialog-title[_ngcontent-%COMP%] {\n font-size: var(--mj-text-lg);\n }\n \n .dialog-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n font-size: var(--mj-text-xs);\n }\n}"] });
|
|
77
78
|
}
|
|
78
79
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeepDiffDialogComponent, [{
|
|
79
80
|
type: Component,
|
|
80
|
-
args: [{ standalone: false, selector: 'mj-deep-diff-dialog', template: "@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"closeDialog()\">\n <div \n class=\"dialog-container\" \n [style.width]=\"dialogWidth\" \n [style.height]=\"dialogHeight\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Dialog Header -->\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"dialog-actions\">\n <button class=\"dialog-btn\" (click)=\"toggleMaximize()\" [title]=\"isMaximized ? 'Restore' : 'Maximize'\">\n <i class=\"fa-solid\" [class.fa-window-maximize]=\"!isMaximized\" [class.fa-window-restore]=\"isMaximized\"></i>\n </button>\n <button class=\"dialog-btn close-btn\" (click)=\"closeDialog()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n </div>\n \n <!-- Dialog Content -->\n <div class=\"dialog-content\">\n <mj-deep-diff\n [oldValue]=\"oldValue\"\n [newValue]=\"newValue\"\n [title]=\"''\"\n [showSummary]=\"showSummary\"\n [showUnchanged]=\"showUnchanged\"\n [expandAll]=\"expandAll\"\n [maxDepth]=\"maxDepth\"\n [maxStringLength]=\"maxStringLength\"\n [treatNullAsUndefined]=\"treatNullAsUndefined\">\n </mj-deep-diff>\n </div>\n </div>\n </div>\n}", styles: ["/* Dialog Overlay */\n.dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Dialog Container */\n.dialog-container {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n max-width: 95vw;\n max-height: 95vh;\n overflow: hidden;\n animation: slideIn 0.3s ease-out;\n transition: all 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateY(-20px) scale(0.95);\n opacity: 0;\n }\n to {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n}\n\n/* Dialog Header */\n.dialog-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n background: linear-gradient(135deg, var(--mj-bg-surface) 0%, var(--mj-bg-surface-sunken) 100%);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n flex-shrink: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--mj-text-xl);\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title i {\n color: var(--mj-brand-primary);\n}\n\n.dialog-actions {\n display: flex;\n gap: 8px;\n}\n\n.dialog-btn {\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.dialog-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.dialog-btn.close-btn:hover {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n/* Dialog Content */\n.dialog-content {\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content mj-deep-diff {\n height: 100%;\n display: block;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .dialog-container {\n width: 95vw !important;\n height: 95vh !important;\n margin: 2.5vh 2.5vw;\n }\n \n .dialog-header {\n padding: 16px;\n }\n \n .dialog-title {\n font-size: var(--mj-text-lg);\n }\n \n .dialog-btn {\n width: 32px;\n height: 32px;\n font-size: var(--mj-text-xs);\n }\n}"] }]
|
|
81
|
+
args: [{ standalone: false, selector: 'mj-deep-diff-dialog', template: "@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"closeDialog()\">\n <div \n class=\"dialog-container\" \n [style.width]=\"dialogWidth\" \n [style.height]=\"dialogHeight\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Dialog Header -->\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"dialog-actions\">\n <button class=\"dialog-btn\" (click)=\"toggleMaximize()\" [title]=\"isMaximized ? 'Restore' : 'Maximize'\" [attr.aria-label]=\"isMaximized ? 'Restore' : 'Maximize'\">\n <i class=\"fa-solid\" [class.fa-window-maximize]=\"!isMaximized\" [class.fa-window-restore]=\"isMaximized\"></i>\n </button>\n <button class=\"dialog-btn close-btn\" (click)=\"closeDialog()\" title=\"Close\" aria-label=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n </div>\n \n <!-- Dialog Content -->\n <div class=\"dialog-content\">\n <mj-deep-diff\n [oldValue]=\"oldValue\"\n [newValue]=\"newValue\"\n [title]=\"''\"\n [showSummary]=\"showSummary\"\n [showUnchanged]=\"showUnchanged\"\n [expandAll]=\"expandAll\"\n [maxDepth]=\"maxDepth\"\n [maxStringLength]=\"maxStringLength\"\n [treatNullAsUndefined]=\"treatNullAsUndefined\">\n </mj-deep-diff>\n </div>\n </div>\n </div>\n}", styles: ["/* Dialog Overlay */\n.dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Dialog Container */\n.dialog-container {\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n max-width: 95vw;\n max-height: 95vh;\n overflow: hidden;\n animation: slideIn 0.3s ease-out;\n transition: all 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateY(-20px) scale(0.95);\n opacity: 0;\n }\n to {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n}\n\n/* Dialog Header */\n.dialog-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n background: linear-gradient(135deg, var(--mj-bg-surface) 0%, var(--mj-bg-surface-sunken) 100%);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n flex-shrink: 0;\n}\n\n.dialog-title {\n margin: 0;\n font-size: var(--mj-text-xl);\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.dialog-title i {\n color: var(--mj-brand-primary);\n}\n\n.dialog-actions {\n display: flex;\n gap: 8px;\n}\n\n.dialog-btn {\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.dialog-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.dialog-btn.close-btn:hover {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n color: var(--mj-text-inverse);\n}\n\n/* Dialog Content */\n.dialog-content {\n flex: 1;\n overflow: hidden;\n background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content mj-deep-diff {\n height: 100%;\n display: block;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .dialog-container {\n width: 95vw !important;\n height: 95vh !important;\n margin: 2.5vh 2.5vw;\n }\n \n .dialog-header {\n padding: 16px;\n }\n \n .dialog-title {\n font-size: var(--mj-text-lg);\n }\n \n .dialog-btn {\n width: 32px;\n height: 32px;\n font-size: var(--mj-text-xs);\n }\n}"] }]
|
|
81
82
|
}], null, { oldValue: [{
|
|
82
83
|
type: Input
|
|
83
84
|
}], newValue: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"deep-diff-dialog.component.js","sourceRoot":"","sources":["../../src/lib/deep-diff-dialog.component.ts","../../src/lib/deep-diff-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;;ICCrE,8BAAoD;IAAxB,wLAAS,oBAAa,KAAC;IACjD,8BAIqC;IAAnC,2JAAS,wBAAwB,KAAC;IAIhC,AADF,8BAA2B,YACA;IACvB,uBAAuC;IACvC,YACF;IAAA,iBAAK;IAEH,AADF,8BAA4B,
|
|
1
|
+
{"version":3,"file":"deep-diff-dialog.component.js","sourceRoot":"","sources":["../../src/lib/deep-diff-dialog.component.ts","../../src/lib/deep-diff-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;;ICCrE,8BAAoD;IAAxB,wLAAS,oBAAa,KAAC;IACjD,8BAIqC;IAAnC,2JAAS,wBAAwB,KAAC;IAIhC,AADF,8BAA2B,YACA;IACvB,uBAAuC;IACvC,YACF;IAAA,iBAAK;IAEH,AADF,8BAA4B,gBACoI;IAAnI,2LAAS,uBAAgB,KAAC;IACnD,uBAA0G;IAC5G,iBAAS;IACT,iCAA8F;IAAzD,2LAAS,oBAAa,KAAC;IAC1D,yBAAiC;IAGvC,AADE,AADE,iBAAS,EACL,EACF;IAGN,gCAA4B;IAC1B,oCAUe;IAGrB,AADE,AADE,iBAAM,EACF,EACF;;;IAnCF,cAA2B;IAC3B,AADA,2CAA2B,+BACE;IAOzB,eACF;IADE,6CACF;IAEwD,eAA8C;IAA9C,mEAA8C;;IAC9E,cAAyC;IAAC,AAA1C,yDAAyC,yCAAwC;IAWvG,eAAqB;IAQrB,AADA,AADA,AADA,AADA,AADA,AADA,AADA,AADA,0CAAqB,6BACA,aACT,mCACe,uCACI,+BACR,6BACF,2CACc,qDACU;;ADjCvD;;GAEG;AAOH,MAAM,OAAO,uBAAuB;IACzB,QAAQ,CAAM;IACd,QAAQ,CAAM;IACd,KAAK,GAAW,oBAAoB,CAAC;IACrC,WAAW,GAAY,IAAI,CAAC;IAC5B,aAAa,GAAY,KAAK,CAAC;IAC/B,SAAS,GAAY,KAAK,CAAC;IAC3B,QAAQ,GAAW,EAAE,CAAC;IACtB,eAAe,GAAW,GAAG,CAAC;IAC9B,oBAAoB,GAAY,KAAK,CAAC;IACtC,OAAO,GAAY,KAAK,CAAC;IACzB,KAAK,GAAW,KAAK,CAAC;IACtB,MAAM,GAAW,MAAM,CAAC;IAEvB,aAAa,GAAG,IAAI,YAAY,EAAW,CAAC;IAC5C,KAAK,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEpC,WAAW,GAAY,KAAK,CAAC;IAEpC,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAChD,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACjD,CAAC;IAED,WAAW;QACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;IACvC,CAAC;iHAnCU,uBAAuB;6DAAvB,uBAAuB;YCXpC,2FAAe;;YAAf,sCAwCC;;;iFD7BY,uBAAuB;cANnC,SAAS;6BACI,KAAK,YACP,qBAAqB;;kBAK9B,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAEL,MAAM;;kBACN,MAAM;;kFAfI,uBAAuB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\n\n/**\n * Dialog wrapper component for the deep diff viewer\n */\n@Component({\n standalone: false,\n selector: 'mj-deep-diff-dialog',\n templateUrl: './deep-diff-dialog.component.html',\n styleUrls: ['./deep-diff-dialog.component.css']\n})\nexport class DeepDiffDialogComponent {\n @Input() oldValue: any;\n @Input() newValue: any;\n @Input() title: string = 'Deep Diff Analysis';\n @Input() showSummary: boolean = true;\n @Input() showUnchanged: boolean = false;\n @Input() expandAll: boolean = false;\n @Input() maxDepth: number = 10;\n @Input() maxStringLength: number = 100;\n @Input() treatNullAsUndefined: boolean = false;\n @Input() visible: boolean = false;\n @Input() width: string = '80%';\n @Input() height: string = '80vh';\n \n @Output() visibleChange = new EventEmitter<boolean>();\n @Output() close = new EventEmitter<void>();\n \n public isMaximized: boolean = false;\n\n public get dialogWidth(): string {\n return this.isMaximized ? '95vw' : this.width;\n }\n\n public get dialogHeight(): string {\n return this.isMaximized ? '95vh' : this.height;\n }\n\n closeDialog(): void {\n this.visible = false;\n this.visibleChange.emit(false);\n this.close.emit();\n }\n\n toggleMaximize(): void {\n this.isMaximized = !this.isMaximized;\n }\n}","@if (visible) {\n <div class=\"dialog-overlay\" (click)=\"closeDialog()\">\n <div \n class=\"dialog-container\" \n [style.width]=\"dialogWidth\" \n [style.height]=\"dialogHeight\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Dialog Header -->\n <div class=\"dialog-header\">\n <h2 class=\"dialog-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"dialog-actions\">\n <button class=\"dialog-btn\" (click)=\"toggleMaximize()\" [title]=\"isMaximized ? 'Restore' : 'Maximize'\" [attr.aria-label]=\"isMaximized ? 'Restore' : 'Maximize'\">\n <i class=\"fa-solid\" [class.fa-window-maximize]=\"!isMaximized\" [class.fa-window-restore]=\"isMaximized\"></i>\n </button>\n <button class=\"dialog-btn close-btn\" (click)=\"closeDialog()\" title=\"Close\" aria-label=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n </div>\n \n <!-- Dialog Content -->\n <div class=\"dialog-content\">\n <mj-deep-diff\n [oldValue]=\"oldValue\"\n [newValue]=\"newValue\"\n [title]=\"''\"\n [showSummary]=\"showSummary\"\n [showUnchanged]=\"showUnchanged\"\n [expandAll]=\"expandAll\"\n [maxDepth]=\"maxDepth\"\n [maxStringLength]=\"maxStringLength\"\n [treatNullAsUndefined]=\"treatNullAsUndefined\">\n </mj-deep-diff>\n </div>\n </div>\n </div>\n}"]}
|
|
@@ -111,6 +111,7 @@ function DeepDiffComponent_ng_template_34_Conditional_11_Conditional_8_Template(
|
|
|
111
111
|
const item_r6 = i0.ɵɵnextContext(2).item;
|
|
112
112
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
113
113
|
i0.ɵɵproperty("title", i0.ɵɵinterpolate(ctx_r1.isExpanded(item_r6.path + "_old") ? "Collapse" : "Expand"));
|
|
114
|
+
i0.ɵɵattribute("aria-label", ctx_r1.isExpanded(item_r6.path + "_old") ? "Collapse value" : "Expand value");
|
|
114
115
|
i0.ɵɵadvance();
|
|
115
116
|
i0.ɵɵproperty("ngClass", ctx_r1.isExpanded(item_r6.path + "_old") ? "fa-compress-alt" : "fa-expand-alt");
|
|
116
117
|
} }
|
|
@@ -124,6 +125,7 @@ function DeepDiffComponent_ng_template_34_Conditional_11_Conditional_16_Template
|
|
|
124
125
|
const item_r6 = i0.ɵɵnextContext(2).item;
|
|
125
126
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
126
127
|
i0.ɵɵproperty("title", i0.ɵɵinterpolate(ctx_r1.isExpanded(item_r6.path + "_new") ? "Collapse" : "Expand"));
|
|
128
|
+
i0.ɵɵattribute("aria-label", ctx_r1.isExpanded(item_r6.path + "_new") ? "Collapse value" : "Expand value");
|
|
127
129
|
i0.ɵɵadvance();
|
|
128
130
|
i0.ɵɵproperty("ngClass", ctx_r1.isExpanded(item_r6.path + "_new") ? "fa-compress-alt" : "fa-expand-alt");
|
|
129
131
|
} }
|
|
@@ -139,7 +141,7 @@ function DeepDiffComponent_ng_template_34_Conditional_11_Template(rf, ctx) { if
|
|
|
139
141
|
i0.ɵɵlistener("click", function DeepDiffComponent_ng_template_34_Conditional_11_Template_button_click_6_listener($event) { i0.ɵɵrestoreView(_r7); const item_r6 = i0.ɵɵnextContext().item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyValueToClipboard(item_r6.oldValue, $event)); });
|
|
140
142
|
i0.ɵɵelement(7, "i", 47);
|
|
141
143
|
i0.ɵɵelementEnd();
|
|
142
|
-
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_11_Conditional_8_Template, 2,
|
|
144
|
+
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_11_Conditional_8_Template, 2, 4, "button", 55);
|
|
143
145
|
i0.ɵɵelementEnd();
|
|
144
146
|
i0.ɵɵelementStart(9, "div", 56)(10, "span", 52);
|
|
145
147
|
i0.ɵɵtext(11, "New:");
|
|
@@ -151,7 +153,7 @@ function DeepDiffComponent_ng_template_34_Conditional_11_Template(rf, ctx) { if
|
|
|
151
153
|
i0.ɵɵlistener("click", function DeepDiffComponent_ng_template_34_Conditional_11_Template_button_click_14_listener($event) { i0.ɵɵrestoreView(_r7); const item_r6 = i0.ɵɵnextContext().item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyValueToClipboard(item_r6.newValue, $event)); });
|
|
152
154
|
i0.ɵɵelement(15, "i", 47);
|
|
153
155
|
i0.ɵɵelementEnd();
|
|
154
|
-
i0.ɵɵconditionalCreate(16, DeepDiffComponent_ng_template_34_Conditional_11_Conditional_16_Template, 2,
|
|
156
|
+
i0.ɵɵconditionalCreate(16, DeepDiffComponent_ng_template_34_Conditional_11_Conditional_16_Template, 2, 4, "button", 55);
|
|
155
157
|
i0.ɵɵelementEnd()();
|
|
156
158
|
} if (rf & 2) {
|
|
157
159
|
const item_r6 = i0.ɵɵnextContext().item;
|
|
@@ -175,6 +177,7 @@ function DeepDiffComponent_ng_template_34_Conditional_12_Conditional_8_Template(
|
|
|
175
177
|
const item_r6 = i0.ɵɵnextContext(2).item;
|
|
176
178
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
177
179
|
i0.ɵɵproperty("title", i0.ɵɵinterpolate(ctx_r1.isExpanded(item_r6.path) ? "Collapse" : "Expand"));
|
|
180
|
+
i0.ɵɵattribute("aria-label", ctx_r1.isExpanded(item_r6.path) ? "Collapse value" : "Expand value");
|
|
178
181
|
i0.ɵɵadvance();
|
|
179
182
|
i0.ɵɵproperty("ngClass", ctx_r1.isExpanded(item_r6.path) ? "fa-compress-alt" : "fa-expand-alt");
|
|
180
183
|
} }
|
|
@@ -190,7 +193,7 @@ function DeepDiffComponent_ng_template_34_Conditional_12_Template(rf, ctx) { if
|
|
|
190
193
|
i0.ɵɵlistener("click", function DeepDiffComponent_ng_template_34_Conditional_12_Template_button_click_6_listener($event) { i0.ɵɵrestoreView(_r10); const item_r6 = i0.ɵɵnextContext().item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyValueToClipboard(item_r6.newValue, $event)); });
|
|
191
194
|
i0.ɵɵelement(7, "i", 47);
|
|
192
195
|
i0.ɵɵelementEnd();
|
|
193
|
-
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_12_Conditional_8_Template, 2,
|
|
196
|
+
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_12_Conditional_8_Template, 2, 4, "button", 55);
|
|
194
197
|
i0.ɵɵelementEnd()();
|
|
195
198
|
} if (rf & 2) {
|
|
196
199
|
const item_r6 = i0.ɵɵnextContext().item;
|
|
@@ -210,6 +213,7 @@ function DeepDiffComponent_ng_template_34_Conditional_13_Conditional_8_Template(
|
|
|
210
213
|
const item_r6 = i0.ɵɵnextContext(2).item;
|
|
211
214
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
212
215
|
i0.ɵɵproperty("title", i0.ɵɵinterpolate(ctx_r1.isExpanded(item_r6.path) ? "Collapse" : "Expand"));
|
|
216
|
+
i0.ɵɵattribute("aria-label", ctx_r1.isExpanded(item_r6.path) ? "Collapse value" : "Expand value");
|
|
213
217
|
i0.ɵɵadvance();
|
|
214
218
|
i0.ɵɵproperty("ngClass", ctx_r1.isExpanded(item_r6.path) ? "fa-compress-alt" : "fa-expand-alt");
|
|
215
219
|
} }
|
|
@@ -225,7 +229,7 @@ function DeepDiffComponent_ng_template_34_Conditional_13_Template(rf, ctx) { if
|
|
|
225
229
|
i0.ɵɵlistener("click", function DeepDiffComponent_ng_template_34_Conditional_13_Template_button_click_6_listener($event) { i0.ɵɵrestoreView(_r12); const item_r6 = i0.ɵɵnextContext().item; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyValueToClipboard(item_r6.oldValue, $event)); });
|
|
226
230
|
i0.ɵɵelement(7, "i", 47);
|
|
227
231
|
i0.ɵɵelementEnd();
|
|
228
|
-
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_13_Conditional_8_Template, 2,
|
|
232
|
+
i0.ɵɵconditionalCreate(8, DeepDiffComponent_ng_template_34_Conditional_13_Conditional_8_Template, 2, 4, "button", 55);
|
|
229
233
|
i0.ɵɵelementEnd()();
|
|
230
234
|
} if (rf & 2) {
|
|
231
235
|
const item_r6 = i0.ɵɵnextContext().item;
|
|
@@ -605,7 +609,7 @@ export class DeepDiffComponent {
|
|
|
605
609
|
URL.revokeObjectURL(url);
|
|
606
610
|
}
|
|
607
611
|
static ɵfac = function DeepDiffComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DeepDiffComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
608
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeepDiffComponent, selectors: [["mj-deep-diff"]], inputs: { oldValue: "oldValue", newValue: "newValue", showUnchanged: "showUnchanged", maxDepth: "maxDepth", maxStringLength: "maxStringLength", treatNullAsUndefined: "treatNullAsUndefined", title: "title", showSummary: "showSummary", expandAll: "expandAll", truncateValues: "truncateValues" }, standalone: false, decls: 36, vars: 13, consts: [["diffItem", ""], [1, "deep-diff-container"], [1, "diff-header"], [1, "header-content"], [1, "diff-title"], [1, "fa-solid", "fa-code-branch"], [1, "header-actions"], ["title", "Expand All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Collapse All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-compress"], ["title", "Export Diff", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "diff-summary"], [1, "diff-filters"], [1, "filter-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Filter by path or description...", 1, "filter-input", 3, "ngModelChange", "ngModel"], [1, "filter-types"], [1, "filter-btn", 3, "click"], [1, "filter-btn", "added", 3, "click"], [1, "fa-solid", "fa-plus-circle"], [1, "filter-btn", "removed", 3, "click"], [1, "fa-solid", "fa-minus-circle"], [1, "filter-btn", "modified", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "diff-content"], [1, "empty-state"], [1, "diff-tree"], [1, "summary-item", "added"], [1, "count"], [1, "label"], [1, "summary-item", "removed"], [1, "summary-item", "modified"], [1, "summary-item", "unchanged"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-code-compare", "fa-3x"], [1, "fa-solid", "fa-filter", "fa-3x"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "diff-item"], [1, "item-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "expand-icon", 3, "expanded"], [1, "expand-spacer"], [1, "fa-solid", "type-icon", 3, "ngClass"], [1, "item-path"], [1, "item-description"], ["title", "Copy path", 1, "btn-copy", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "value-details"], [1, "item-children"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "value-row", "old"], [1, "value-label"], [1, "value-content"], ["title", "Copy value", 1, "btn-copy", 3, "click"], [1, "btn-expand-value", 3, "title"], [1, "value-row", "new"], [1, "btn-expand-value", 3, "click", "title"], [1, "fa-solid", 3, "ngClass"]], template: function DeepDiffComponent_Template(rf, ctx) { if (rf & 1) {
|
|
612
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeepDiffComponent, selectors: [["mj-deep-diff"]], inputs: { oldValue: "oldValue", newValue: "newValue", showUnchanged: "showUnchanged", maxDepth: "maxDepth", maxStringLength: "maxStringLength", treatNullAsUndefined: "treatNullAsUndefined", title: "title", showSummary: "showSummary", expandAll: "expandAll", truncateValues: "truncateValues" }, standalone: false, decls: 36, vars: 13, consts: [["diffItem", ""], [1, "deep-diff-container"], [1, "diff-header"], [1, "header-content"], [1, "diff-title"], [1, "fa-solid", "fa-code-branch"], [1, "header-actions"], ["title", "Expand All", "aria-label", "Expand All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Collapse All", "aria-label", "Collapse All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-compress"], ["title", "Export Diff", "aria-label", "Export Diff", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "diff-summary"], [1, "diff-filters"], [1, "filter-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Filter by path or description...", 1, "filter-input", 3, "ngModelChange", "ngModel"], [1, "filter-types"], [1, "filter-btn", 3, "click"], [1, "filter-btn", "added", 3, "click"], [1, "fa-solid", "fa-plus-circle"], [1, "filter-btn", "removed", 3, "click"], [1, "fa-solid", "fa-minus-circle"], [1, "filter-btn", "modified", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "diff-content"], [1, "empty-state"], [1, "diff-tree"], [1, "summary-item", "added"], [1, "count"], [1, "label"], [1, "summary-item", "removed"], [1, "summary-item", "modified"], [1, "summary-item", "unchanged"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-code-compare", "fa-3x"], [1, "fa-solid", "fa-filter", "fa-3x"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "diff-item"], [1, "item-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "expand-icon", 3, "expanded"], [1, "expand-spacer"], [1, "fa-solid", "type-icon", 3, "ngClass"], [1, "item-path"], [1, "item-description"], ["title", "Copy path", "aria-label", "Copy path", 1, "btn-copy", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "value-details"], [1, "item-children"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "value-row", "old"], [1, "value-label"], [1, "value-content"], ["title", "Copy value", "aria-label", "Copy value", 1, "btn-copy", 3, "click"], [1, "btn-expand-value", 3, "title"], [1, "value-row", "new"], [1, "btn-expand-value", 3, "click", "title"], [1, "fa-solid", 3, "ngClass"]], template: function DeepDiffComponent_Template(rf, ctx) { if (rf & 1) {
|
|
609
613
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
610
614
|
i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "h2", 4);
|
|
611
615
|
i0.ɵɵelement(4, "i", 5);
|
|
@@ -676,7 +680,7 @@ export class DeepDiffComponent {
|
|
|
676
680
|
}
|
|
677
681
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeepDiffComponent, [{
|
|
678
682
|
type: Component,
|
|
679
|
-
args: [{ standalone: false, selector: 'mj-deep-diff', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"deep-diff-container\">\n <!-- Header -->\n <div class=\"diff-header\">\n <div class=\"header-content\">\n <h2 class=\"diff-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"expandAllItems()\" title=\"Expand All\">\n <i class=\"fa-solid fa-expand\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"collapseAllItems()\" title=\"Collapse All\">\n <i class=\"fa-solid fa-compress\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"exportDiff()\" title=\"Export Diff\" [disabled]=\"!diffResult\">\n <i class=\"fa-solid fa-download\"></i>\n </button>\n </div>\n </div>\n\n <!-- Summary -->\n @if (showSummary && diffResult) {\n <div class=\"diff-summary\">\n <div class=\"summary-item added\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.added }}</span>\n <span class=\"label\">Added</span>\n </div>\n <div class=\"summary-item removed\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.removed }}</span>\n <span class=\"label\">Removed</span>\n </div>\n <div class=\"summary-item modified\">\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"count\">{{ diffResult.summary.modified }}</span>\n <span class=\"label\">Modified</span>\n </div>\n @if (showUnchanged) {\n <div class=\"summary-item unchanged\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.unchanged }}</span>\n <span class=\"label\">Unchanged</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Filters -->\n <div class=\"diff-filters\">\n <div class=\"filter-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input \n type=\"text\" \n [(ngModel)]=\"filter\" \n placeholder=\"Filter by path or description...\"\n class=\"filter-input\">\n </div>\n <div class=\"filter-types\">\n <button \n class=\"filter-btn\"\n [class.active]=\"filterType === 'all'\"\n (click)=\"filterType = 'all'\">\n All Changes\n </button>\n <button \n class=\"filter-btn added\"\n [class.active]=\"filterType === 'added'\"\n (click)=\"filterType = 'added'\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Added\n </button>\n <button \n class=\"filter-btn removed\"\n [class.active]=\"filterType === 'removed'\"\n (click)=\"filterType = 'removed'\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n Removed\n </button>\n <button \n class=\"filter-btn modified\"\n [class.active]=\"filterType === 'modified'\"\n (click)=\"filterType = 'modified'\">\n <i class=\"fa-solid fa-edit\"></i>\n Modified\n </button>\n </div>\n </div>\n\n <!-- Diff Content -->\n <div class=\"diff-content\">\n @if (!diffResult) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-code-compare fa-3x\"></i>\n <p>No data to compare</p>\n </div>\n } @else if (filteredItems.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-filter fa-3x\"></i>\n <p>No changes match your filter criteria</p>\n </div>\n } @else {\n <div class=\"diff-tree\">\n @for (item of filteredItems; track item.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: item, level: 0 }\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n\n<!-- Recursive Template for Diff Items -->\n<ng-template #diffItem let-item=\"item\" let-level=\"level\">\n <div class=\"diff-item\" [class]=\"getTypeClass(item.type)\" [style.padding-left.px]=\"level * 24\">\n <div class=\"item-header\" (click)=\"toggleItem(item)\">\n @if (item.children.length > 0) {\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"item.isExpanded\"></i>\n } @else {\n <span class=\"expand-spacer\"></span>\n }\n \n <i class=\"fa-solid type-icon\" [ngClass]=\"getIcon(item.type)\"></i>\n \n <span class=\"item-path\">{{ item.path }}</span>\n \n <span class=\"item-description\">{{ item.description }}</span>\n \n <button class=\"btn-copy\" (click)=\"copyToClipboard(item.path); $event.stopPropagation()\" title=\"Copy path\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n\n <!-- Value Details -->\n @if (item.type === 'modified') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Old:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path + '_old') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path + '_old') || isExpanded(item.path + '_old')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_old', $event)\" \n title=\"{{ isExpanded(item.path + '_old') ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_old') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n <div class=\"value-row new\">\n <span class=\"value-label\">New:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path + '_new') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path + '_new') || isExpanded(item.path + '_new')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_new', $event)\"\n title=\"{{ isExpanded(item.path + '_new') ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_new') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'added') {\n <div class=\"value-details\">\n <div class=\"value-row new\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'removed') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Children -->\n @if (item.isExpanded && item.children.length > 0) {\n <div class=\"item-children\">\n @for (child of item.children; track child.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: child, level: level + 1 }\"></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>", styles: ["/* Deep Diff Component Styles */\n.deep-diff-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n/* Header */\n.diff-header {\n background: linear-gradient(135deg, var(--mj-bg-surface) 0%, var(--mj-bg-surface-sunken) 100%);\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.diff-title {\n margin: 0;\n font-size: var(--mj-text-xl);\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.diff-title i {\n color: var(--mj-brand-primary);\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.btn-icon:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.btn-icon:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Summary */\n.diff-summary {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.summary-item:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.summary-item i {\n font-size: var(--mj-text-base);\n}\n\n.summary-item .count {\n font-weight: 600;\n font-size: var(--mj-text-base);\n}\n\n.summary-item .label {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.summary-item.added {\n border-color: var(--mj-status-success-subtle);\n background: var(--mj-status-success-subtle);\n}\n\n.summary-item.added i,\n.summary-item.added .count {\n color: var(--mj-status-success);\n}\n\n.summary-item.removed {\n border-color: var(--mj-status-error-subtle);\n background: var(--mj-status-error-subtle);\n}\n\n.summary-item.removed i,\n.summary-item.removed .count {\n color: var(--mj-status-error);\n}\n\n.summary-item.modified {\n border-color: var(--mj-brand-primary-subtle);\n background: var(--mj-brand-primary-subtle);\n}\n\n.summary-item.modified i,\n.summary-item.modified .count {\n color: var(--mj-brand-primary);\n}\n\n.summary-item.unchanged {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.summary-item.unchanged i,\n.summary-item.unchanged .count {\n color: var(--mj-text-muted);\n}\n\n/* Filters */\n.diff-filters {\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.filter-search {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n\n.filter-search i {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.filter-input {\n width: 100%;\n padding: 8px 12px 8px 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.filter-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.filter-types {\n display: flex;\n gap: 8px;\n}\n\n.filter-btn {\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.filter-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.filter-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-btn.added.active {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n}\n\n.filter-btn.removed.active {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n}\n\n.filter-btn.modified.active {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n/* Content Area */\n.diff-content {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n padding: 16px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 300px;\n color: var(--mj-text-muted);\n gap: 16px;\n}\n\n.empty-state i {\n opacity: 0.2;\n}\n\n.empty-state p {\n margin: 0;\n font-size: var(--mj-text-base);\n}\n\n/* Diff Tree */\n.diff-tree {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n}\n\n.diff-item {\n margin-bottom: 2px;\n transition: all 0.2s ease;\n}\n\n.item-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.item-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n width: 12px;\n flex-shrink: 0;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.expand-spacer {\n width: 12px;\n flex-shrink: 0;\n}\n\n.type-icon {\n font-size: var(--mj-text-sm);\n flex-shrink: 0;\n}\n\n.item-path {\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-right: 8px;\n word-break: break-word;\n}\n\n.item-description {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n flex: 1;\n}\n\n.btn-copy {\n opacity: 0;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n transition: all 0.2s ease;\n font-size: var(--mj-text-xs);\n}\n\n.item-header:hover .btn-copy,\n.value-row:hover .btn-copy {\n opacity: 1;\n}\n\n.btn-copy:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n/* Value row copy button */\n.value-row .btn-copy {\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n/* Type-specific styling */\n.diff-item.added .type-icon {\n color: var(--mj-status-success);\n}\n\n.diff-item.removed .type-icon {\n color: var(--mj-status-error);\n}\n\n.diff-item.modified .type-icon {\n color: var(--mj-brand-primary);\n}\n\n.diff-item.unchanged .type-icon {\n color: var(--mj-text-muted);\n}\n\n/* Value Details */\n.value-details {\n margin: 8px 0 0 44px;\n padding: 12px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n}\n\n.value-row {\n display: flex;\n gap: 12px;\n margin-bottom: 8px;\n align-items: flex-start;\n position: relative;\n}\n\n.value-row:last-child {\n margin-bottom: 0;\n}\n\n.value-label {\n font-weight: 600;\n color: var(--mj-text-secondary);\n min-width: 40px;\n font-size: var(--mj-text-xs);\n padding-top: 2px;\n}\n\n.value-content {\n flex: 1;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-xs);\n line-height: 1.5;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n border: 1px solid var(--mj-border-default);\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.value-row.old .value-content {\n background: var(--mj-status-error-subtle);\n border-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n}\n\n.value-row.new .value-content {\n background: var(--mj-status-success-subtle);\n border-color: var(--mj-status-success-subtle);\n color: var(--mj-status-success);\n}\n\n/* Expand/Collapse Value Button */\n.btn-expand-value {\n background: none;\n border: 1px solid var(--mj-border-default);\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n transition: all 0.2s ease;\n font-size: var(--mj-text-xs);\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.btn-expand-value:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-strong);\n}\n\n.btn-expand-value i {\n font-size: var(--mj-text-xs);\n}\n\n/* Children */\n.item-children {\n margin-top: 2px;\n position: relative;\n}\n\n.item-children::before {\n content: '';\n position: absolute;\n left: 6px;\n top: 0;\n bottom: 0;\n width: 1px;\n background: var(--mj-border-default);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .diff-header {\n padding: 16px;\n }\n\n .header-content {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .diff-filters {\n flex-direction: column;\n align-items: stretch;\n }\n\n .filter-search {\n min-width: 100%;\n }\n\n .filter-types {\n flex-wrap: wrap;\n }\n\n .value-details {\n margin-left: 20px;\n }\n}"] }]
|
|
683
|
+
args: [{ standalone: false, selector: 'mj-deep-diff', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"deep-diff-container\">\n <!-- Header -->\n <div class=\"diff-header\">\n <div class=\"header-content\">\n <h2 class=\"diff-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"expandAllItems()\" title=\"Expand All\" aria-label=\"Expand All\">\n <i class=\"fa-solid fa-expand\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"collapseAllItems()\" title=\"Collapse All\" aria-label=\"Collapse All\">\n <i class=\"fa-solid fa-compress\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"exportDiff()\" title=\"Export Diff\" aria-label=\"Export Diff\" [disabled]=\"!diffResult\">\n <i class=\"fa-solid fa-download\"></i>\n </button>\n </div>\n </div>\n\n <!-- Summary -->\n @if (showSummary && diffResult) {\n <div class=\"diff-summary\">\n <div class=\"summary-item added\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.added }}</span>\n <span class=\"label\">Added</span>\n </div>\n <div class=\"summary-item removed\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.removed }}</span>\n <span class=\"label\">Removed</span>\n </div>\n <div class=\"summary-item modified\">\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"count\">{{ diffResult.summary.modified }}</span>\n <span class=\"label\">Modified</span>\n </div>\n @if (showUnchanged) {\n <div class=\"summary-item unchanged\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.unchanged }}</span>\n <span class=\"label\">Unchanged</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Filters -->\n <div class=\"diff-filters\">\n <div class=\"filter-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input \n type=\"text\" \n [(ngModel)]=\"filter\" \n placeholder=\"Filter by path or description...\"\n class=\"filter-input\">\n </div>\n <div class=\"filter-types\">\n <button \n class=\"filter-btn\"\n [class.active]=\"filterType === 'all'\"\n (click)=\"filterType = 'all'\">\n All Changes\n </button>\n <button \n class=\"filter-btn added\"\n [class.active]=\"filterType === 'added'\"\n (click)=\"filterType = 'added'\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Added\n </button>\n <button \n class=\"filter-btn removed\"\n [class.active]=\"filterType === 'removed'\"\n (click)=\"filterType = 'removed'\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n Removed\n </button>\n <button \n class=\"filter-btn modified\"\n [class.active]=\"filterType === 'modified'\"\n (click)=\"filterType = 'modified'\">\n <i class=\"fa-solid fa-edit\"></i>\n Modified\n </button>\n </div>\n </div>\n\n <!-- Diff Content -->\n <div class=\"diff-content\">\n @if (!diffResult) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-code-compare fa-3x\"></i>\n <p>No data to compare</p>\n </div>\n } @else if (filteredItems.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-filter fa-3x\"></i>\n <p>No changes match your filter criteria</p>\n </div>\n } @else {\n <div class=\"diff-tree\">\n @for (item of filteredItems; track item.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: item, level: 0 }\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n\n<!-- Recursive Template for Diff Items -->\n<ng-template #diffItem let-item=\"item\" let-level=\"level\">\n <div class=\"diff-item\" [class]=\"getTypeClass(item.type)\" [style.padding-left.px]=\"level * 24\">\n <div class=\"item-header\" (click)=\"toggleItem(item)\">\n @if (item.children.length > 0) {\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"item.isExpanded\"></i>\n } @else {\n <span class=\"expand-spacer\"></span>\n }\n \n <i class=\"fa-solid type-icon\" [ngClass]=\"getIcon(item.type)\"></i>\n \n <span class=\"item-path\">{{ item.path }}</span>\n \n <span class=\"item-description\">{{ item.description }}</span>\n \n <button class=\"btn-copy\" (click)=\"copyToClipboard(item.path); $event.stopPropagation()\" title=\"Copy path\" aria-label=\"Copy path\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n\n <!-- Value Details -->\n @if (item.type === 'modified') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Old:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path + '_old') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path + '_old') || isExpanded(item.path + '_old')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_old', $event)\" \n title=\"{{ isExpanded(item.path + '_old') ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path + '_old') ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_old') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n <div class=\"value-row new\">\n <span class=\"value-label\">New:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path + '_new') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path + '_new') || isExpanded(item.path + '_new')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_new', $event)\"\n title=\"{{ isExpanded(item.path + '_new') ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path + '_new') ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_new') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'added') {\n <div class=\"value-details\">\n <div class=\"value-row new\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path) ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'removed') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path) ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Children -->\n @if (item.isExpanded && item.children.length > 0) {\n <div class=\"item-children\">\n @for (child of item.children; track child.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: child, level: level + 1 }\"></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>", styles: ["/* Deep Diff Component Styles */\n.deep-diff-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n/* Header */\n.diff-header {\n background: linear-gradient(135deg, var(--mj-bg-surface) 0%, var(--mj-bg-surface-sunken) 100%);\n padding: 20px;\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n}\n\n.header-content {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.diff-title {\n margin: 0;\n font-size: var(--mj-text-xl);\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.diff-title i {\n color: var(--mj-brand-primary);\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon {\n width: 36px;\n height: 36px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.btn-icon:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.btn-icon:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Summary */\n.diff-summary {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.summary-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-xl);\n font-size: var(--mj-text-sm);\n border: 1px solid var(--mj-border-default);\n transition: all 0.2s ease;\n}\n\n.summary-item:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.summary-item i {\n font-size: var(--mj-text-base);\n}\n\n.summary-item .count {\n font-weight: 600;\n font-size: var(--mj-text-base);\n}\n\n.summary-item .label {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.summary-item.added {\n border-color: var(--mj-status-success-subtle);\n background: var(--mj-status-success-subtle);\n}\n\n.summary-item.added i,\n.summary-item.added .count {\n color: var(--mj-status-success);\n}\n\n.summary-item.removed {\n border-color: var(--mj-status-error-subtle);\n background: var(--mj-status-error-subtle);\n}\n\n.summary-item.removed i,\n.summary-item.removed .count {\n color: var(--mj-status-error);\n}\n\n.summary-item.modified {\n border-color: var(--mj-brand-primary-subtle);\n background: var(--mj-brand-primary-subtle);\n}\n\n.summary-item.modified i,\n.summary-item.modified .count {\n color: var(--mj-brand-primary);\n}\n\n.summary-item.unchanged {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.summary-item.unchanged i,\n.summary-item.unchanged .count {\n color: var(--mj-text-muted);\n}\n\n/* Filters */\n.diff-filters {\n padding: 16px 20px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.filter-search {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n\n.filter-search i {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.filter-input {\n width: 100%;\n padding: 8px 12px 8px 36px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.filter-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.filter-types {\n display: flex;\n gap: 8px;\n}\n\n.filter-btn {\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.filter-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.filter-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-btn.added.active {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n}\n\n.filter-btn.removed.active {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n}\n\n.filter-btn.modified.active {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n/* Content Area */\n.diff-content {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n padding: 16px;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 300px;\n color: var(--mj-text-muted);\n gap: 16px;\n}\n\n.empty-state i {\n opacity: 0.2;\n}\n\n.empty-state p {\n margin: 0;\n font-size: var(--mj-text-base);\n}\n\n/* Diff Tree */\n.diff-tree {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n}\n\n.diff-item {\n margin-bottom: 2px;\n transition: all 0.2s ease;\n}\n\n.item-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.item-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n transition: transform 0.2s ease;\n width: 12px;\n flex-shrink: 0;\n}\n\n.expand-icon.expanded {\n transform: rotate(90deg);\n}\n\n.expand-spacer {\n width: 12px;\n flex-shrink: 0;\n}\n\n.type-icon {\n font-size: var(--mj-text-sm);\n flex-shrink: 0;\n}\n\n.item-path {\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-right: 8px;\n word-break: break-word;\n}\n\n.item-description {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n flex: 1;\n}\n\n.btn-copy {\n opacity: 0;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n transition: all 0.2s ease;\n font-size: var(--mj-text-xs);\n}\n\n.item-header:hover .btn-copy,\n.value-row:hover .btn-copy {\n opacity: 1;\n}\n\n.btn-copy:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n/* Value row copy button */\n.value-row .btn-copy {\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n/* Type-specific styling */\n.diff-item.added .type-icon {\n color: var(--mj-status-success);\n}\n\n.diff-item.removed .type-icon {\n color: var(--mj-status-error);\n}\n\n.diff-item.modified .type-icon {\n color: var(--mj-brand-primary);\n}\n\n.diff-item.unchanged .type-icon {\n color: var(--mj-text-muted);\n}\n\n/* Value Details */\n.value-details {\n margin: 8px 0 0 44px;\n padding: 12px;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n}\n\n.value-row {\n display: flex;\n gap: 12px;\n margin-bottom: 8px;\n align-items: flex-start;\n position: relative;\n}\n\n.value-row:last-child {\n margin-bottom: 0;\n}\n\n.value-label {\n font-weight: 600;\n color: var(--mj-text-secondary);\n min-width: 40px;\n font-size: var(--mj-text-xs);\n padding-top: 2px;\n}\n\n.value-content {\n flex: 1;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-xs);\n line-height: 1.5;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n border: 1px solid var(--mj-border-default);\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.value-row.old .value-content {\n background: var(--mj-status-error-subtle);\n border-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n}\n\n.value-row.new .value-content {\n background: var(--mj-status-success-subtle);\n border-color: var(--mj-status-success-subtle);\n color: var(--mj-status-success);\n}\n\n/* Expand/Collapse Value Button */\n.btn-expand-value {\n background: none;\n border: 1px solid var(--mj-border-default);\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n transition: all 0.2s ease;\n font-size: var(--mj-text-xs);\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.btn-expand-value:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-strong);\n}\n\n.btn-expand-value i {\n font-size: var(--mj-text-xs);\n}\n\n/* Children */\n.item-children {\n margin-top: 2px;\n position: relative;\n}\n\n.item-children::before {\n content: '';\n position: absolute;\n left: 6px;\n top: 0;\n bottom: 0;\n width: 1px;\n background: var(--mj-border-default);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .diff-header {\n padding: 16px;\n }\n\n .header-content {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .diff-filters {\n flex-direction: column;\n align-items: stretch;\n }\n\n .filter-search {\n min-width: 100%;\n }\n\n .filter-types {\n flex-wrap: wrap;\n }\n\n .value-details {\n margin-left: 20px;\n }\n}"] }]
|
|
680
684
|
}], () => [{ type: i0.ChangeDetectorRef }], { oldValue: [{
|
|
681
685
|
type: Input
|
|
682
686
|
}], newValue: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"deep-diff.component.js","sourceRoot":"","sources":["../../src/lib/deep-diff.component.ts","../../src/lib/deep-diff.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\nimport { DeepDiffer, DeepDiffResult, DiffChangeType, DiffChange } from '@memberjunction/global';\n\nexport interface DeepDiffItem extends DiffChange {\n level: number;\n isExpanded: boolean;\n children: DeepDiffItem[];\n parentPath: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-deep-diff',\n templateUrl: './deep-diff.component.html',\n styleUrls: ['./deep-diff.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DeepDiffComponent implements OnInit {\n private _oldValue: any;\n private _newValue: any;\n private _showUnchanged: boolean = false;\n private _maxDepth: number = 10;\n private _maxStringLength: number = 100;\n private _treatNullAsUndefined: boolean = false;\n\n @Input()\n get oldValue(): any {\n return this._oldValue;\n }\n set oldValue(value: any) {\n this._oldValue = value;\n this.generateDiff();\n }\n\n @Input()\n get newValue(): any {\n return this._newValue;\n }\n set newValue(value: any) {\n this._newValue = value;\n this.generateDiff();\n }\n\n @Input()\n get showUnchanged(): boolean {\n return this._showUnchanged;\n }\n set showUnchanged(value: boolean) {\n this._showUnchanged = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get maxDepth(): number {\n return this._maxDepth;\n }\n set maxDepth(value: number) {\n this._maxDepth = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get maxStringLength(): number {\n return this._maxStringLength;\n }\n set maxStringLength(value: number) {\n this._maxStringLength = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get treatNullAsUndefined(): boolean {\n return this._treatNullAsUndefined;\n }\n set treatNullAsUndefined(value: boolean) {\n this._treatNullAsUndefined = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input() title: string = 'Deep Diff Analysis';\n @Input() showSummary: boolean = true;\n @Input() expandAll: boolean = false;\n @Input() truncateValues: boolean = true;\n\n diffResult: DeepDiffResult | null = null;\n diffItems: DeepDiffItem[] = [];\n filter: string = '';\n filterType: 'all' | 'added' | 'removed' | 'modified' | 'unchanged' = 'all';\n expandedValuesMap: { [key: string]: boolean } = {};\n \n private differ: DeepDiffer;\n\n constructor(private cdr: ChangeDetectorRef) {\n this.differ = new DeepDiffer({\n includeUnchanged: false,\n maxDepth: this.maxDepth,\n maxStringLength: this.maxStringLength,\n treatNullAsUndefined: this.treatNullAsUndefined\n });\n }\n\n ngOnInit(): void {\n this.generateDiff();\n }\n\n\n private updateDifferConfig(): void {\n this.differ.updateConfig({\n includeUnchanged: this.showUnchanged,\n maxDepth: this.maxDepth,\n maxStringLength: this.maxStringLength,\n treatNullAsUndefined: this.treatNullAsUndefined\n });\n }\n\n private generateDiff(): void {\n if (this.oldValue === undefined && this.newValue === undefined) {\n this.diffResult = null;\n this.diffItems = [];\n return;\n }\n\n this.diffResult = this.differ.diff(this.oldValue, this.newValue);\n this.diffItems = this.buildHierarchicalItems(this.diffResult.changes);\n \n if (this.expandAll) {\n this.expandAllItems();\n }\n }\n\n private buildHierarchicalItems(changes: DiffChange[]): DeepDiffItem[] {\n const rootItems: DeepDiffItem[] = [];\n const itemMap = new Map<string, DeepDiffItem>();\n\n // Sort by path to ensure parents come before children\n const sortedChanges = [...changes].sort((a, b) => {\n const aDepth = a.path.split('.').length;\n const bDepth = b.path.split('.').length;\n if (aDepth !== bDepth) return aDepth - bDepth;\n return a.path.localeCompare(b.path);\n });\n\n for (const change of sortedChanges) {\n const pathParts = change.path === 'root' ? [] : change.path.split('.');\n const level = pathParts.length;\n const parentPath = pathParts.slice(0, -1).join('.');\n \n const item: DeepDiffItem = {\n ...change,\n level,\n isExpanded: level === 0, // Expand only root level items by default\n children: [],\n parentPath\n };\n\n itemMap.set(change.path, item);\n\n if (parentPath && itemMap.has(parentPath)) {\n itemMap.get(parentPath)!.children.push(item);\n } else {\n rootItems.push(item);\n }\n }\n\n return rootItems;\n }\n\n toggleItem(item: DeepDiffItem): void {\n item.isExpanded = !item.isExpanded;\n this.cdr.markForCheck();\n }\n\n expandAllItems(): void {\n const expand = (items: DeepDiffItem[]) => {\n for (const item of items) {\n item.isExpanded = true;\n if (item.children.length > 0) {\n expand(item.children);\n }\n }\n };\n expand(this.diffItems);\n this.cdr.markForCheck();\n }\n\n collapseAllItems(): void {\n const collapse = (items: DeepDiffItem[]) => {\n for (const item of items) {\n item.isExpanded = false;\n if (item.children.length > 0) {\n collapse(item.children);\n }\n }\n };\n collapse(this.diffItems);\n this.cdr.markForCheck();\n }\n\n get filteredItems(): DeepDiffItem[] {\n if (!this.filter && this.filterType === 'all') {\n return this.diffItems;\n }\n\n const filterFn = (item: DeepDiffItem): boolean => {\n const matchesType = this.filterType === 'all' || \n (this.filterType === 'added' && item.type === DiffChangeType.Added) ||\n (this.filterType === 'removed' && item.type === DiffChangeType.Removed) ||\n (this.filterType === 'modified' && item.type === DiffChangeType.Modified) ||\n (this.filterType === 'unchanged' && item.type === DiffChangeType.Unchanged);\n const matchesText = !this.filter || \n item.path.toLowerCase().includes(this.filter.toLowerCase()) ||\n item.description.toLowerCase().includes(this.filter.toLowerCase());\n \n return matchesType && matchesText;\n };\n\n const filterRecursive = (items: DeepDiffItem[]): DeepDiffItem[] => {\n return items.reduce((acc, item) => {\n const childMatches = filterRecursive(item.children);\n if (filterFn(item) || childMatches.length > 0) {\n acc.push({\n ...item,\n children: childMatches,\n isExpanded: item.isExpanded // Preserve the original expanded state\n });\n }\n return acc;\n }, [] as DeepDiffItem[]);\n };\n\n return filterRecursive(this.diffItems);\n }\n\n getIcon(type: DiffChangeType): string {\n switch (type) {\n case DiffChangeType.Added: return 'fa-plus-circle';\n case DiffChangeType.Removed: return 'fa-minus-circle';\n case DiffChangeType.Modified: return 'fa-edit';\n case DiffChangeType.Unchanged: return 'fa-check-circle';\n default: return 'fa-question-circle';\n }\n }\n\n getTypeClass(type: DiffChangeType): string {\n switch (type) {\n case DiffChangeType.Added: return 'added';\n case DiffChangeType.Removed: return 'removed';\n case DiffChangeType.Modified: return 'modified';\n case DiffChangeType.Unchanged: return 'unchanged';\n default: return '';\n }\n }\n\n formatValue(value: any, path: string): string {\n if (value === undefined) return 'undefined';\n if (value === null) return 'null';\n \n const isExpanded = !!this.expandedValuesMap[path];\n const shouldTruncate = this.truncateValues && !isExpanded;\n \n if (typeof value === 'string') {\n if (shouldTruncate && value.length > this.maxStringLength) {\n return `\"${value.substring(0, this.maxStringLength)}...\"`;\n }\n return `\"${value}\"`;\n }\n \n if (typeof value === 'object') {\n try {\n const json = JSON.stringify(value, null, 2);\n if (shouldTruncate && json.length > 200) {\n // Show a preview for objects\n const preview = JSON.stringify(value).substring(0, 50);\n return `${preview}... (${this.getObjectSize(value)} properties)`;\n }\n return json;\n } catch {\n return String(value);\n }\n }\n \n return String(value);\n }\n \n isValueTruncated(value: any, path: string): boolean {\n if (!this.truncateValues || this.expandedValuesMap[path]) {\n return false;\n }\n \n if (typeof value === 'string') {\n return value.length > this.maxStringLength;\n }\n \n if (typeof value === 'object' && value !== null) {\n try {\n const json = JSON.stringify(value, null, 2);\n return json.length > 200;\n } catch {\n return false;\n }\n }\n \n return false;\n }\n \n toggleValueExpansion(path: string, event: Event): void {\n event.stopPropagation();\n \n // Create a new object to trigger change detection\n this.expandedValuesMap = {\n ...this.expandedValuesMap,\n [path]: !this.expandedValuesMap[path]\n };\n \n // Force change detection\n this.cdr.markForCheck();\n }\n \n private getObjectSize(obj: any): number {\n if (Array.isArray(obj)) {\n return obj.length;\n }\n return Object.keys(obj).length;\n }\n\n copyToClipboard(text: string): void {\n navigator.clipboard.writeText(text).then(() => {\n // Could add a toast notification here\n });\n }\n \n isExpanded(path: string): boolean {\n return !!this.expandedValuesMap[path];\n }\n \n copyValueToClipboard(value: any, event: Event): void {\n event.stopPropagation();\n let textToCopy: string;\n \n if (value === undefined) {\n textToCopy = 'undefined';\n } else if (value === null) {\n textToCopy = 'null';\n } else if (typeof value === 'object') {\n try {\n textToCopy = JSON.stringify(value, null, 2);\n } catch {\n textToCopy = String(value);\n }\n } else {\n textToCopy = String(value);\n }\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n // Could add a toast notification here\n });\n }\n\n exportDiff(): void {\n if (!this.diffResult) return;\n \n const blob = new Blob([JSON.stringify(this.diffResult, null, 2)], \n { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `diff-${new Date().toISOString()}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n}","<div class=\"deep-diff-container\">\n <!-- Header -->\n <div class=\"diff-header\">\n <div class=\"header-content\">\n <h2 class=\"diff-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"expandAllItems()\" title=\"Expand All\">\n <i class=\"fa-solid fa-expand\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"collapseAllItems()\" title=\"Collapse All\">\n <i class=\"fa-solid fa-compress\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"exportDiff()\" title=\"Export Diff\" [disabled]=\"!diffResult\">\n <i class=\"fa-solid fa-download\"></i>\n </button>\n </div>\n </div>\n\n <!-- Summary -->\n @if (showSummary && diffResult) {\n <div class=\"diff-summary\">\n <div class=\"summary-item added\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.added }}</span>\n <span class=\"label\">Added</span>\n </div>\n <div class=\"summary-item removed\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.removed }}</span>\n <span class=\"label\">Removed</span>\n </div>\n <div class=\"summary-item modified\">\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"count\">{{ diffResult.summary.modified }}</span>\n <span class=\"label\">Modified</span>\n </div>\n @if (showUnchanged) {\n <div class=\"summary-item unchanged\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.unchanged }}</span>\n <span class=\"label\">Unchanged</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Filters -->\n <div class=\"diff-filters\">\n <div class=\"filter-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input \n type=\"text\" \n [(ngModel)]=\"filter\" \n placeholder=\"Filter by path or description...\"\n class=\"filter-input\">\n </div>\n <div class=\"filter-types\">\n <button \n class=\"filter-btn\"\n [class.active]=\"filterType === 'all'\"\n (click)=\"filterType = 'all'\">\n All Changes\n </button>\n <button \n class=\"filter-btn added\"\n [class.active]=\"filterType === 'added'\"\n (click)=\"filterType = 'added'\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Added\n </button>\n <button \n class=\"filter-btn removed\"\n [class.active]=\"filterType === 'removed'\"\n (click)=\"filterType = 'removed'\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n Removed\n </button>\n <button \n class=\"filter-btn modified\"\n [class.active]=\"filterType === 'modified'\"\n (click)=\"filterType = 'modified'\">\n <i class=\"fa-solid fa-edit\"></i>\n Modified\n </button>\n </div>\n </div>\n\n <!-- Diff Content -->\n <div class=\"diff-content\">\n @if (!diffResult) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-code-compare fa-3x\"></i>\n <p>No data to compare</p>\n </div>\n } @else if (filteredItems.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-filter fa-3x\"></i>\n <p>No changes match your filter criteria</p>\n </div>\n } @else {\n <div class=\"diff-tree\">\n @for (item of filteredItems; track item.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: item, level: 0 }\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n\n<!-- Recursive Template for Diff Items -->\n<ng-template #diffItem let-item=\"item\" let-level=\"level\">\n <div class=\"diff-item\" [class]=\"getTypeClass(item.type)\" [style.padding-left.px]=\"level * 24\">\n <div class=\"item-header\" (click)=\"toggleItem(item)\">\n @if (item.children.length > 0) {\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"item.isExpanded\"></i>\n } @else {\n <span class=\"expand-spacer\"></span>\n }\n \n <i class=\"fa-solid type-icon\" [ngClass]=\"getIcon(item.type)\"></i>\n \n <span class=\"item-path\">{{ item.path }}</span>\n \n <span class=\"item-description\">{{ item.description }}</span>\n \n <button class=\"btn-copy\" (click)=\"copyToClipboard(item.path); $event.stopPropagation()\" title=\"Copy path\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n\n <!-- Value Details -->\n @if (item.type === 'modified') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Old:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path + '_old') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path + '_old') || isExpanded(item.path + '_old')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_old', $event)\" \n title=\"{{ isExpanded(item.path + '_old') ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_old') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n <div class=\"value-row new\">\n <span class=\"value-label\">New:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path + '_new') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path + '_new') || isExpanded(item.path + '_new')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_new', $event)\"\n title=\"{{ isExpanded(item.path + '_new') ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_new') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'added') {\n <div class=\"value-details\">\n <div class=\"value-row new\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'removed') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Children -->\n @if (item.isExpanded && item.children.length > 0) {\n <div class=\"item-children\">\n @for (child of item.children; track child.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: child, level: level + 1 }\"></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>"]}
|
|
1
|
+
{"version":3,"file":"deep-diff.component.js","sourceRoot":"","sources":["../../src/lib/deep-diff.component.ts","../../src/lib/deep-diff.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';\nimport { DeepDiffer, DeepDiffResult, DiffChangeType, DiffChange } from '@memberjunction/global';\n\nexport interface DeepDiffItem extends DiffChange {\n level: number;\n isExpanded: boolean;\n children: DeepDiffItem[];\n parentPath: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-deep-diff',\n templateUrl: './deep-diff.component.html',\n styleUrls: ['./deep-diff.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DeepDiffComponent implements OnInit {\n private _oldValue: any;\n private _newValue: any;\n private _showUnchanged: boolean = false;\n private _maxDepth: number = 10;\n private _maxStringLength: number = 100;\n private _treatNullAsUndefined: boolean = false;\n\n @Input()\n get oldValue(): any {\n return this._oldValue;\n }\n set oldValue(value: any) {\n this._oldValue = value;\n this.generateDiff();\n }\n\n @Input()\n get newValue(): any {\n return this._newValue;\n }\n set newValue(value: any) {\n this._newValue = value;\n this.generateDiff();\n }\n\n @Input()\n get showUnchanged(): boolean {\n return this._showUnchanged;\n }\n set showUnchanged(value: boolean) {\n this._showUnchanged = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get maxDepth(): number {\n return this._maxDepth;\n }\n set maxDepth(value: number) {\n this._maxDepth = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get maxStringLength(): number {\n return this._maxStringLength;\n }\n set maxStringLength(value: number) {\n this._maxStringLength = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input()\n get treatNullAsUndefined(): boolean {\n return this._treatNullAsUndefined;\n }\n set treatNullAsUndefined(value: boolean) {\n this._treatNullAsUndefined = value;\n this.updateDifferConfig();\n this.generateDiff();\n }\n\n @Input() title: string = 'Deep Diff Analysis';\n @Input() showSummary: boolean = true;\n @Input() expandAll: boolean = false;\n @Input() truncateValues: boolean = true;\n\n diffResult: DeepDiffResult | null = null;\n diffItems: DeepDiffItem[] = [];\n filter: string = '';\n filterType: 'all' | 'added' | 'removed' | 'modified' | 'unchanged' = 'all';\n expandedValuesMap: { [key: string]: boolean } = {};\n \n private differ: DeepDiffer;\n\n constructor(private cdr: ChangeDetectorRef) {\n this.differ = new DeepDiffer({\n includeUnchanged: false,\n maxDepth: this.maxDepth,\n maxStringLength: this.maxStringLength,\n treatNullAsUndefined: this.treatNullAsUndefined\n });\n }\n\n ngOnInit(): void {\n this.generateDiff();\n }\n\n\n private updateDifferConfig(): void {\n this.differ.updateConfig({\n includeUnchanged: this.showUnchanged,\n maxDepth: this.maxDepth,\n maxStringLength: this.maxStringLength,\n treatNullAsUndefined: this.treatNullAsUndefined\n });\n }\n\n private generateDiff(): void {\n if (this.oldValue === undefined && this.newValue === undefined) {\n this.diffResult = null;\n this.diffItems = [];\n return;\n }\n\n this.diffResult = this.differ.diff(this.oldValue, this.newValue);\n this.diffItems = this.buildHierarchicalItems(this.diffResult.changes);\n \n if (this.expandAll) {\n this.expandAllItems();\n }\n }\n\n private buildHierarchicalItems(changes: DiffChange[]): DeepDiffItem[] {\n const rootItems: DeepDiffItem[] = [];\n const itemMap = new Map<string, DeepDiffItem>();\n\n // Sort by path to ensure parents come before children\n const sortedChanges = [...changes].sort((a, b) => {\n const aDepth = a.path.split('.').length;\n const bDepth = b.path.split('.').length;\n if (aDepth !== bDepth) return aDepth - bDepth;\n return a.path.localeCompare(b.path);\n });\n\n for (const change of sortedChanges) {\n const pathParts = change.path === 'root' ? [] : change.path.split('.');\n const level = pathParts.length;\n const parentPath = pathParts.slice(0, -1).join('.');\n \n const item: DeepDiffItem = {\n ...change,\n level,\n isExpanded: level === 0, // Expand only root level items by default\n children: [],\n parentPath\n };\n\n itemMap.set(change.path, item);\n\n if (parentPath && itemMap.has(parentPath)) {\n itemMap.get(parentPath)!.children.push(item);\n } else {\n rootItems.push(item);\n }\n }\n\n return rootItems;\n }\n\n toggleItem(item: DeepDiffItem): void {\n item.isExpanded = !item.isExpanded;\n this.cdr.markForCheck();\n }\n\n expandAllItems(): void {\n const expand = (items: DeepDiffItem[]) => {\n for (const item of items) {\n item.isExpanded = true;\n if (item.children.length > 0) {\n expand(item.children);\n }\n }\n };\n expand(this.diffItems);\n this.cdr.markForCheck();\n }\n\n collapseAllItems(): void {\n const collapse = (items: DeepDiffItem[]) => {\n for (const item of items) {\n item.isExpanded = false;\n if (item.children.length > 0) {\n collapse(item.children);\n }\n }\n };\n collapse(this.diffItems);\n this.cdr.markForCheck();\n }\n\n get filteredItems(): DeepDiffItem[] {\n if (!this.filter && this.filterType === 'all') {\n return this.diffItems;\n }\n\n const filterFn = (item: DeepDiffItem): boolean => {\n const matchesType = this.filterType === 'all' || \n (this.filterType === 'added' && item.type === DiffChangeType.Added) ||\n (this.filterType === 'removed' && item.type === DiffChangeType.Removed) ||\n (this.filterType === 'modified' && item.type === DiffChangeType.Modified) ||\n (this.filterType === 'unchanged' && item.type === DiffChangeType.Unchanged);\n const matchesText = !this.filter || \n item.path.toLowerCase().includes(this.filter.toLowerCase()) ||\n item.description.toLowerCase().includes(this.filter.toLowerCase());\n \n return matchesType && matchesText;\n };\n\n const filterRecursive = (items: DeepDiffItem[]): DeepDiffItem[] => {\n return items.reduce((acc, item) => {\n const childMatches = filterRecursive(item.children);\n if (filterFn(item) || childMatches.length > 0) {\n acc.push({\n ...item,\n children: childMatches,\n isExpanded: item.isExpanded // Preserve the original expanded state\n });\n }\n return acc;\n }, [] as DeepDiffItem[]);\n };\n\n return filterRecursive(this.diffItems);\n }\n\n getIcon(type: DiffChangeType): string {\n switch (type) {\n case DiffChangeType.Added: return 'fa-plus-circle';\n case DiffChangeType.Removed: return 'fa-minus-circle';\n case DiffChangeType.Modified: return 'fa-edit';\n case DiffChangeType.Unchanged: return 'fa-check-circle';\n default: return 'fa-question-circle';\n }\n }\n\n getTypeClass(type: DiffChangeType): string {\n switch (type) {\n case DiffChangeType.Added: return 'added';\n case DiffChangeType.Removed: return 'removed';\n case DiffChangeType.Modified: return 'modified';\n case DiffChangeType.Unchanged: return 'unchanged';\n default: return '';\n }\n }\n\n formatValue(value: any, path: string): string {\n if (value === undefined) return 'undefined';\n if (value === null) return 'null';\n \n const isExpanded = !!this.expandedValuesMap[path];\n const shouldTruncate = this.truncateValues && !isExpanded;\n \n if (typeof value === 'string') {\n if (shouldTruncate && value.length > this.maxStringLength) {\n return `\"${value.substring(0, this.maxStringLength)}...\"`;\n }\n return `\"${value}\"`;\n }\n \n if (typeof value === 'object') {\n try {\n const json = JSON.stringify(value, null, 2);\n if (shouldTruncate && json.length > 200) {\n // Show a preview for objects\n const preview = JSON.stringify(value).substring(0, 50);\n return `${preview}... (${this.getObjectSize(value)} properties)`;\n }\n return json;\n } catch {\n return String(value);\n }\n }\n \n return String(value);\n }\n \n isValueTruncated(value: any, path: string): boolean {\n if (!this.truncateValues || this.expandedValuesMap[path]) {\n return false;\n }\n \n if (typeof value === 'string') {\n return value.length > this.maxStringLength;\n }\n \n if (typeof value === 'object' && value !== null) {\n try {\n const json = JSON.stringify(value, null, 2);\n return json.length > 200;\n } catch {\n return false;\n }\n }\n \n return false;\n }\n \n toggleValueExpansion(path: string, event: Event): void {\n event.stopPropagation();\n \n // Create a new object to trigger change detection\n this.expandedValuesMap = {\n ...this.expandedValuesMap,\n [path]: !this.expandedValuesMap[path]\n };\n \n // Force change detection\n this.cdr.markForCheck();\n }\n \n private getObjectSize(obj: any): number {\n if (Array.isArray(obj)) {\n return obj.length;\n }\n return Object.keys(obj).length;\n }\n\n copyToClipboard(text: string): void {\n navigator.clipboard.writeText(text).then(() => {\n // Could add a toast notification here\n });\n }\n \n isExpanded(path: string): boolean {\n return !!this.expandedValuesMap[path];\n }\n \n copyValueToClipboard(value: any, event: Event): void {\n event.stopPropagation();\n let textToCopy: string;\n \n if (value === undefined) {\n textToCopy = 'undefined';\n } else if (value === null) {\n textToCopy = 'null';\n } else if (typeof value === 'object') {\n try {\n textToCopy = JSON.stringify(value, null, 2);\n } catch {\n textToCopy = String(value);\n }\n } else {\n textToCopy = String(value);\n }\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n // Could add a toast notification here\n });\n }\n\n exportDiff(): void {\n if (!this.diffResult) return;\n \n const blob = new Blob([JSON.stringify(this.diffResult, null, 2)], \n { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `diff-${new Date().toISOString()}.json`;\n a.click();\n URL.revokeObjectURL(url);\n }\n}","<div class=\"deep-diff-container\">\n <!-- Header -->\n <div class=\"diff-header\">\n <div class=\"header-content\">\n <h2 class=\"diff-title\">\n <i class=\"fa-solid fa-code-branch\"></i>\n {{ title }}\n </h2>\n <div class=\"header-actions\">\n <button class=\"btn-icon\" (click)=\"expandAllItems()\" title=\"Expand All\" aria-label=\"Expand All\">\n <i class=\"fa-solid fa-expand\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"collapseAllItems()\" title=\"Collapse All\" aria-label=\"Collapse All\">\n <i class=\"fa-solid fa-compress\"></i>\n </button>\n <button class=\"btn-icon\" (click)=\"exportDiff()\" title=\"Export Diff\" aria-label=\"Export Diff\" [disabled]=\"!diffResult\">\n <i class=\"fa-solid fa-download\"></i>\n </button>\n </div>\n </div>\n\n <!-- Summary -->\n @if (showSummary && diffResult) {\n <div class=\"diff-summary\">\n <div class=\"summary-item added\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.added }}</span>\n <span class=\"label\">Added</span>\n </div>\n <div class=\"summary-item removed\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.removed }}</span>\n <span class=\"label\">Removed</span>\n </div>\n <div class=\"summary-item modified\">\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"count\">{{ diffResult.summary.modified }}</span>\n <span class=\"label\">Modified</span>\n </div>\n @if (showUnchanged) {\n <div class=\"summary-item unchanged\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span class=\"count\">{{ diffResult.summary.unchanged }}</span>\n <span class=\"label\">Unchanged</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Filters -->\n <div class=\"diff-filters\">\n <div class=\"filter-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input \n type=\"text\" \n [(ngModel)]=\"filter\" \n placeholder=\"Filter by path or description...\"\n class=\"filter-input\">\n </div>\n <div class=\"filter-types\">\n <button \n class=\"filter-btn\"\n [class.active]=\"filterType === 'all'\"\n (click)=\"filterType = 'all'\">\n All Changes\n </button>\n <button \n class=\"filter-btn added\"\n [class.active]=\"filterType === 'added'\"\n (click)=\"filterType = 'added'\">\n <i class=\"fa-solid fa-plus-circle\"></i>\n Added\n </button>\n <button \n class=\"filter-btn removed\"\n [class.active]=\"filterType === 'removed'\"\n (click)=\"filterType = 'removed'\">\n <i class=\"fa-solid fa-minus-circle\"></i>\n Removed\n </button>\n <button \n class=\"filter-btn modified\"\n [class.active]=\"filterType === 'modified'\"\n (click)=\"filterType = 'modified'\">\n <i class=\"fa-solid fa-edit\"></i>\n Modified\n </button>\n </div>\n </div>\n\n <!-- Diff Content -->\n <div class=\"diff-content\">\n @if (!diffResult) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-code-compare fa-3x\"></i>\n <p>No data to compare</p>\n </div>\n } @else if (filteredItems.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-filter fa-3x\"></i>\n <p>No changes match your filter criteria</p>\n </div>\n } @else {\n <div class=\"diff-tree\">\n @for (item of filteredItems; track item.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: item, level: 0 }\"></ng-container>\n }\n </div>\n }\n </div>\n</div>\n\n<!-- Recursive Template for Diff Items -->\n<ng-template #diffItem let-item=\"item\" let-level=\"level\">\n <div class=\"diff-item\" [class]=\"getTypeClass(item.type)\" [style.padding-left.px]=\"level * 24\">\n <div class=\"item-header\" (click)=\"toggleItem(item)\">\n @if (item.children.length > 0) {\n <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"item.isExpanded\"></i>\n } @else {\n <span class=\"expand-spacer\"></span>\n }\n \n <i class=\"fa-solid type-icon\" [ngClass]=\"getIcon(item.type)\"></i>\n \n <span class=\"item-path\">{{ item.path }}</span>\n \n <span class=\"item-description\">{{ item.description }}</span>\n \n <button class=\"btn-copy\" (click)=\"copyToClipboard(item.path); $event.stopPropagation()\" title=\"Copy path\" aria-label=\"Copy path\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n </div>\n\n <!-- Value Details -->\n @if (item.type === 'modified') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Old:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path + '_old') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path + '_old') || isExpanded(item.path + '_old')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_old', $event)\" \n title=\"{{ isExpanded(item.path + '_old') ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path + '_old') ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_old') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n <div class=\"value-row new\">\n <span class=\"value-label\">New:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path + '_new') }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path + '_new') || isExpanded(item.path + '_new')) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path + '_new', $event)\"\n title=\"{{ isExpanded(item.path + '_new') ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path + '_new') ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path + '_new') ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'added') {\n <div class=\"value-details\">\n <div class=\"value-row new\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.newValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.newValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.newValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path) ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n } @else if (item.type === 'removed') {\n <div class=\"value-details\">\n <div class=\"value-row old\">\n <span class=\"value-label\">Value:</span>\n <code class=\"value-content\">{{ formatValue(item.oldValue, item.path) }}</code>\n <button class=\"btn-copy\" (click)=\"copyValueToClipboard(item.oldValue, $event)\" title=\"Copy value\" aria-label=\"Copy value\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (isValueTruncated(item.oldValue, item.path) || isExpanded(item.path)) {\n <button class=\"btn-expand-value\" \n (click)=\"toggleValueExpansion(item.path, $event)\"\n title=\"{{ isExpanded(item.path) ? 'Collapse' : 'Expand' }}\"\n [attr.aria-label]=\"isExpanded(item.path) ? 'Collapse value' : 'Expand value'\">\n <i class=\"fa-solid\" \n [ngClass]=\"isExpanded(item.path) ? 'fa-compress-alt' : 'fa-expand-alt'\"></i>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Children -->\n @if (item.isExpanded && item.children.length > 0) {\n <div class=\"item-children\">\n @for (child of item.children; track child.path) {\n <ng-container *ngTemplateOutlet=\"diffItem; context: { item: child, level: level + 1 }\"></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-deep-diff",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.29.0",
|
|
4
4
|
"description": "MemberJunction: Generic Angular component to display the differences between two objects, using the non-visual functionality from the @memberjunction/global package",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@angular/forms": "21.1.3",
|
|
29
|
-
"@memberjunction/core": "5.
|
|
30
|
-
"@memberjunction/global": "5.
|
|
29
|
+
"@memberjunction/core": "5.29.0",
|
|
30
|
+
"@memberjunction/global": "5.29.0",
|
|
31
31
|
"tslib": "^2.8.1"
|
|
32
32
|
},
|
|
33
33
|
"sideEffects": false,
|