@memberjunction/ng-deep-diff 5.11.0 → 5.13.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.
|
@@ -73,11 +73,11 @@ export class DeepDiffDialogComponent {
|
|
|
73
73
|
i0.ɵɵconditionalCreate(0, DeepDiffDialogComponent_Conditional_0_Template, 13, 19, "div", 0);
|
|
74
74
|
} if (rf & 2) {
|
|
75
75
|
i0.ɵɵconditional(ctx.visible ? 0 : -1);
|
|
76
|
-
} }, 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:
|
|
76
|
+
} }, 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
77
|
}
|
|
78
78
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeepDiffDialogComponent, [{
|
|
79
79
|
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:
|
|
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
81
|
}], null, { oldValue: [{
|
|
82
82
|
type: Input
|
|
83
83
|
}], newValue: [{
|
|
@@ -672,11 +672,11 @@ export class DeepDiffComponent {
|
|
|
672
672
|
i0.ɵɵclassProp("active", ctx.filterType === "modified");
|
|
673
673
|
i0.ɵɵadvance(4);
|
|
674
674
|
i0.ɵɵconditional(!ctx.diffResult ? 31 : ctx.filteredItems.length === 0 ? 32 : 33);
|
|
675
|
-
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n.deep-diff-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f8f9fa;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.diff-header[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n padding: 20px;\n border-bottom: 1px solid #e0e6ed;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n}\n\n.header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.diff-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.diff-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3498db;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 14px;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\n transform: translateY(-1px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.btn-icon[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: white;\n border-radius: 20px;\n font-size: 14px;\n border: 1px solid #e9ecef;\n transition: all 0.2s ease;\n}\n\n.summary-item[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.summary-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 16px;\n}\n\n.summary-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 13px;\n}\n\n.summary-item.added[_ngcontent-%COMP%] {\n border-color: #d4edda;\n background: #f4fdf6;\n}\n\n.summary-item.added[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.added[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.summary-item.removed[_ngcontent-%COMP%] {\n border-color: #f8d7da;\n background: #fef5f6;\n}\n\n.summary-item.removed[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.removed[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.summary-item.modified[_ngcontent-%COMP%] {\n border-color: #cce5ff;\n background: #f0f7ff;\n}\n\n.summary-item.modified[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.modified[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: #007bff;\n}\n\n.summary-item.unchanged[_ngcontent-%COMP%] {\n border-color: #e2e3e5;\n background: #f8f9fa;\n}\n\n.summary-item.unchanged[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.unchanged[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n\n\n\n.diff-filters[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e9ecef;\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.filter-search[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n\n.filter-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: #6c757d;\n font-size: 14px;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px 8px 36px;\n border: 1px solid #dee2e6;\n border-radius: 8px;\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #3498db;\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n}\n\n.filter-types[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n padding: 6px 14px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #adb5bd;\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n background: #3498db;\n color: white;\n border-color: #3498db;\n}\n\n.filter-btn.added.active[_ngcontent-%COMP%] {\n background: #28a745;\n border-color: #28a745;\n}\n\n.filter-btn.removed.active[_ngcontent-%COMP%] {\n background: #dc3545;\n border-color: #dc3545;\n}\n\n.filter-btn.modified.active[_ngcontent-%COMP%] {\n background: #007bff;\n border-color: #007bff;\n}\n\n\n\n.diff-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: white;\n padding: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 300px;\n color: #6c757d;\n gap: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.2;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n}\n\n\n\n.diff-tree[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n}\n\n.diff-item[_ngcontent-%COMP%] {\n margin-bottom: 2px;\n transition: all 0.2s ease;\n}\n\n.item-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.item-header[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #6c757d;\n transition: transform 0.2s ease;\n width: 12px;\n flex-shrink: 0;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.expand-spacer[_ngcontent-%COMP%] {\n width: 12px;\n flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.item-path[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #2c3e50;\n margin-right: 8px;\n word-break: break-word;\n}\n\n.item-description[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 12px;\n flex: 1;\n}\n\n.btn-copy[_ngcontent-%COMP%] {\n opacity: 0;\n background: none;\n border: none;\n color: #6c757d;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n font-size: 12px;\n}\n\n.item-header[_ngcontent-%COMP%]:hover .btn-copy[_ngcontent-%COMP%], \n.value-row[_ngcontent-%COMP%]:hover .btn-copy[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.btn-copy[_ngcontent-%COMP%]:hover {\n background: #e9ecef;\n color: #495057;\n}\n\n\n\n.value-row[_ngcontent-%COMP%] .btn-copy[_ngcontent-%COMP%] {\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n\n\n.diff-item.added[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: #28a745;\n}\n\n.diff-item.removed[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: #dc3545;\n}\n\n.diff-item.modified[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: #007bff;\n}\n\n.diff-item.unchanged[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: #6c757d;\n}\n\n\n\n.value-details[_ngcontent-%COMP%] {\n margin: 8px 0 0 44px;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n}\n\n.value-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 8px;\n align-items: flex-start;\n position: relative;\n}\n\n.value-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.value-label[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #495057;\n min-width: 40px;\n font-size: 12px;\n padding-top: 2px;\n}\n\n.value-content[_ngcontent-%COMP%] {\n flex: 1;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 12px;\n line-height: 1.5;\n color: #2c3e50;\n background: white;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid #dee2e6;\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.value-row.old[_ngcontent-%COMP%] .value-content[_ngcontent-%COMP%] {\n background: #fef5f6;\n border-color: #f8d7da;\n color: #721c24;\n}\n\n.value-row.new[_ngcontent-%COMP%] .value-content[_ngcontent-%COMP%] {\n background: #f4fdf6;\n border-color: #d4edda;\n color: #155724;\n}\n\n\n\n.btn-expand-value[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid #dee2e6;\n color: #6c757d;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n font-size: 11px;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.btn-expand-value[_ngcontent-%COMP%]:hover {\n background: #e9ecef;\n color: #495057;\n border-color: #adb5bd;\n}\n\n.btn-expand-value[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n\n\n.item-children[_ngcontent-%COMP%] {\n margin-top: 2px;\n position: relative;\n}\n\n.item-children[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 6px;\n top: 0;\n bottom: 0;\n width: 1px;\n background: #e9ecef;\n}\n\n\n\n@media (max-width: 768px) {\n .diff-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .diff-filters[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n\n .filter-search[_ngcontent-%COMP%] {\n min-width: 100%;\n }\n\n .filter-types[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .value-details[_ngcontent-%COMP%] {\n margin-left: 20px;\n }\n}"], changeDetection: 0 });
|
|
675
|
+
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["\n\n.deep-diff-container[_ngcontent-%COMP%] {\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\n\n.diff-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.diff-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.diff-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.btn-icon[_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.btn-icon[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n}\n\n.summary-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.summary-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n}\n\n.summary-item[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: var(--mj-text-base);\n}\n\n.summary-item[_ngcontent-%COMP%] .label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.summary-item.added[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success-subtle);\n background: var(--mj-status-success-subtle);\n}\n\n.summary-item.added[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.added[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.summary-item.removed[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error-subtle);\n background: var(--mj-status-error-subtle);\n}\n\n.summary-item.removed[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.removed[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.summary-item.modified[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary-subtle);\n background: var(--mj-brand-primary-subtle);\n}\n\n.summary-item.modified[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.modified[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.summary-item.unchanged[_ngcontent-%COMP%] {\n border-color: var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.summary-item.unchanged[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.summary-item.unchanged[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n\n\n.diff-filters[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n\n.filter-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n border-color: var(--mj-status-success);\n}\n\n.filter-btn.removed.active[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n border-color: var(--mj-status-error);\n}\n\n.filter-btn.modified.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary);\n}\n\n\n\n.diff-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n padding: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n opacity: 0.2;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n}\n\n\n\n.diff-tree[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n}\n\n.diff-item[_ngcontent-%COMP%] {\n margin-bottom: 2px;\n transition: all 0.2s ease;\n}\n\n.item-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n transform: rotate(90deg);\n}\n\n.expand-spacer[_ngcontent-%COMP%] {\n width: 12px;\n flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n flex-shrink: 0;\n}\n\n.item-path[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-right: 8px;\n word-break: break-word;\n}\n\n.item-description[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n flex: 1;\n}\n\n.btn-copy[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover .btn-copy[_ngcontent-%COMP%], \n.value-row[_ngcontent-%COMP%]:hover .btn-copy[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.btn-copy[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n\n\n.value-row[_ngcontent-%COMP%] .btn-copy[_ngcontent-%COMP%] {\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n\n\n.diff-item.added[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.diff-item.removed[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.diff-item.modified[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.diff-item.unchanged[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n\n\n.value-details[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 8px;\n align-items: flex-start;\n position: relative;\n}\n\n.value-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.value-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .value-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] .value-content[_ngcontent-%COMP%] {\n background: var(--mj-status-success-subtle);\n border-color: var(--mj-status-success-subtle);\n color: var(--mj-status-success);\n}\n\n\n\n.btn-expand-value[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n\n\n.item-children[_ngcontent-%COMP%] {\n margin-top: 2px;\n position: relative;\n}\n\n.item-children[_ngcontent-%COMP%]::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\n\n@media (max-width: 768px) {\n .diff-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .header-content[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n }\n\n .diff-filters[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n\n .filter-search[_ngcontent-%COMP%] {\n min-width: 100%;\n }\n\n .filter-types[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .value-details[_ngcontent-%COMP%] {\n margin-left: 20px;\n }\n}"], changeDetection: 0 });
|
|
676
676
|
}
|
|
677
677
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeepDiffComponent, [{
|
|
678
678
|
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: #f8f9fa;\n border-radius: 12px;\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, #ffffff 0%, #f8f9fa 100%);\n padding: 20px;\n border-bottom: 1px solid #e0e6ed;\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: 20px;\n font-weight: 600;\n color: #2c3e50;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.diff-title i {\n color: #3498db;\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 #dee2e6;\n background: white;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #6c757d;\n font-size: 14px;\n}\n\n.btn-icon:hover:not(:disabled) {\n background: #f8f9fa;\n border-color: #adb5bd;\n color: #495057;\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: white;\n border-radius: 20px;\n font-size: 14px;\n border: 1px solid #e9ecef;\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: 16px;\n}\n\n.summary-item .count {\n font-weight: 600;\n font-size: 16px;\n}\n\n.summary-item .label {\n color: #6c757d;\n font-size: 13px;\n}\n\n.summary-item.added {\n border-color: #d4edda;\n background: #f4fdf6;\n}\n\n.summary-item.added i,\n.summary-item.added .count {\n color: #28a745;\n}\n\n.summary-item.removed {\n border-color: #f8d7da;\n background: #fef5f6;\n}\n\n.summary-item.removed i,\n.summary-item.removed .count {\n color: #dc3545;\n}\n\n.summary-item.modified {\n border-color: #cce5ff;\n background: #f0f7ff;\n}\n\n.summary-item.modified i,\n.summary-item.modified .count {\n color: #007bff;\n}\n\n.summary-item.unchanged {\n border-color: #e2e3e5;\n background: #f8f9fa;\n}\n\n.summary-item.unchanged i,\n.summary-item.unchanged .count {\n color: #6c757d;\n}\n\n/* Filters */\n.diff-filters {\n padding: 16px 20px;\n background: white;\n border-bottom: 1px solid #e9ecef;\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: #6c757d;\n font-size: 14px;\n}\n\n.filter-input {\n width: 100%;\n padding: 8px 12px 8px 36px;\n border: 1px solid #dee2e6;\n border-radius: 8px;\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.filter-input:focus {\n outline: none;\n border-color: #3498db;\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);\n}\n\n.filter-types {\n display: flex;\n gap: 8px;\n}\n\n.filter-btn {\n padding: 6px 14px;\n border: 1px solid #dee2e6;\n background: white;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #495057;\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: #f8f9fa;\n border-color: #adb5bd;\n}\n\n.filter-btn.active {\n background: #3498db;\n color: white;\n border-color: #3498db;\n}\n\n.filter-btn.added.active {\n background: #28a745;\n border-color: #28a745;\n}\n\n.filter-btn.removed.active {\n background: #dc3545;\n border-color: #dc3545;\n}\n\n.filter-btn.modified.active {\n background: #007bff;\n border-color: #007bff;\n}\n\n/* Content Area */\n.diff-content {\n flex: 1;\n overflow-y: auto;\n background: white;\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: #6c757d;\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: 16px;\n}\n\n/* Diff Tree */\n.diff-tree {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\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: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.item-header:hover {\n background: #f8f9fa;\n}\n\n.expand-icon {\n font-size: 10px;\n color: #6c757d;\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: 14px;\n flex-shrink: 0;\n}\n\n.item-path {\n font-weight: 600;\n color: #2c3e50;\n margin-right: 8px;\n word-break: break-word;\n}\n\n.item-description {\n color: #6c757d;\n font-size: 12px;\n flex: 1;\n}\n\n.btn-copy {\n opacity: 0;\n background: none;\n border: none;\n color: #6c757d;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n font-size: 12px;\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: #e9ecef;\n color: #495057;\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: #28a745;\n}\n\n.diff-item.removed .type-icon {\n color: #dc3545;\n}\n\n.diff-item.modified .type-icon {\n color: #007bff;\n}\n\n.diff-item.unchanged .type-icon {\n color: #6c757d;\n}\n\n/* Value Details */\n.value-details {\n margin: 8px 0 0 44px;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\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: #495057;\n min-width: 40px;\n font-size: 12px;\n padding-top: 2px;\n}\n\n.value-content {\n flex: 1;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 12px;\n line-height: 1.5;\n color: #2c3e50;\n background: white;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid #dee2e6;\n word-break: break-word;\n white-space: pre-wrap;\n}\n\n.value-row.old .value-content {\n background: #fef5f6;\n border-color: #f8d7da;\n color: #721c24;\n}\n\n.value-row.new .value-content {\n background: #f4fdf6;\n border-color: #d4edda;\n color: #155724;\n}\n\n/* Expand/Collapse Value Button */\n.btn-expand-value {\n background: none;\n border: 1px solid #dee2e6;\n color: #6c757d;\n cursor: pointer;\n padding: 4px 8px;\n border-radius: 4px;\n transition: all 0.2s ease;\n font-size: 11px;\n flex-shrink: 0;\n margin-left: 8px;\n}\n\n.btn-expand-value:hover {\n background: #e9ecef;\n color: #495057;\n border-color: #adb5bd;\n}\n\n.btn-expand-value i {\n font-size: 10px;\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: #e9ecef;\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}"] }]
|
|
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}"] }]
|
|
680
680
|
}], () => [{ type: i0.ChangeDetectorRef }], { oldValue: [{
|
|
681
681
|
type: Input
|
|
682
682
|
}], newValue: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-deep-diff",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.13.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.13.0",
|
|
30
|
+
"@memberjunction/global": "5.13.0",
|
|
31
31
|
"tslib": "^2.8.1"
|
|
32
32
|
},
|
|
33
33
|
"sideEffects": false,
|