@memberjunction/ng-versions 5.10.1 → 5.12.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.
- package/dist/lib/label-create/label-create.component.js +2 -2
- package/dist/lib/label-detail/label-detail.component.js +245 -245
- package/dist/lib/label-detail/label-detail.component.js.map +1 -1
- package/dist/lib/panel/slide-panel.component.js +2 -2
- package/dist/lib/record-micro-view/record-micro-view.component.js +2 -2
- package/package.json +6 -6
|
@@ -170,11 +170,11 @@ export class MjSlidePanelComponent {
|
|
|
170
170
|
i0.ɵɵconditional(ctx.Mode === "slide" ? 1 : -1);
|
|
171
171
|
i0.ɵɵadvance();
|
|
172
172
|
i0.ɵɵconditional(ctx.Mode === "dialog" ? 2 : -1);
|
|
173
|
-
} }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background:
|
|
173
|
+
} }, styles: ["\n\n\n\n\n\n\n.sp-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.sp-backdrop.visible[_ngcontent-%COMP%] {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible[_ngcontent-%COMP%] {\n background: var(--mj-bg-overlay);\n}\n\n\n\n\n\n\n\n\n.sp-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n min-width: 400px;\n max-width: 92vw;\n}\n\n.sp-panel.visible[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.sp-dialog[_ngcontent-%COMP%] {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n min-width: 360px;\n max-width: 95vw;\n}\n\n.sp-dialog.visible[_ngcontent-%COMP%] {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n}\n\n\n\n\n\n\n\n\n.sp-resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover .sp-resize-grip[_ngcontent-%COMP%], \n.sp-resize-handle[_ngcontent-%COMP%]:active .sp-resize-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.sp-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.sp-title[_ngcontent-%COMP%] {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n.sp-close-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.sp-close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.sp-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.sp-dialog-body[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n .sp-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n min-width: unset;\n }\n\n .sp-resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .sp-dialog[_ngcontent-%COMP%] {\n width: 95vw !important;\n max-height: 90vh;\n }\n}"], changeDetection: 0 });
|
|
174
174
|
}
|
|
175
175
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjSlidePanelComponent, [{
|
|
176
176
|
type: Component,
|
|
177
|
-
args: [{ standalone: false, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n [class.visible]=\"IsVisible\"\n [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n <div\n class=\"sp-panel\"\n [class.visible]=\"IsVisible\"\n [style.width.px]=\"WidthPx\">\n <!-- Resize handle -->\n @if (Resizable) {\n <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n <div class=\"sp-resize-grip\"></div>\n </div>\n }\n <!-- Header (if Title provided) -->\n @if (Title) {\n <div class=\"sp-header\">\n <h2 class=\"sp-title\">{{Title}}</h2>\n <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n <!-- Content projection -->\n <div class=\"sp-body\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n <div\n class=\"sp-dialog\"\n [class.visible]=\"IsVisible\"\n [style.width.px]=\"WidthPx\">\n <!-- Header (if Title provided) -->\n @if (Title) {\n <div class=\"sp-header\">\n <h2 class=\"sp-title\">{{Title}}</h2>\n <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n <!-- Content projection -->\n <div class=\"sp-body sp-dialog-body\">\n <ng-content select=\"[dialog-content]\"></ng-content>\n </div>\n </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n position: fixed;\n inset: 0;\n background:
|
|
177
|
+
args: [{ standalone: false, selector: 'mj-slide-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"sp-backdrop\"\n [class.visible]=\"IsVisible\"\n [class.sp-dialog-backdrop]=\"Mode === 'dialog'\"\n (click)=\"OnBackdropClick()\">\n</div>\n\n<!-- Panel (slide-in from right) -->\n@if (Mode === 'slide') {\n <div\n class=\"sp-panel\"\n [class.visible]=\"IsVisible\"\n [style.width.px]=\"WidthPx\">\n <!-- Resize handle -->\n @if (Resizable) {\n <div class=\"sp-resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n <div class=\"sp-resize-grip\"></div>\n </div>\n }\n <!-- Header (if Title provided) -->\n @if (Title) {\n <div class=\"sp-header\">\n <h2 class=\"sp-title\">{{Title}}</h2>\n <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n <!-- Content projection -->\n <div class=\"sp-body\">\n <ng-content></ng-content>\n </div>\n </div>\n}\n\n<!-- Dialog (centered modal) -->\n@if (Mode === 'dialog') {\n <div\n class=\"sp-dialog\"\n [class.visible]=\"IsVisible\"\n [style.width.px]=\"WidthPx\">\n <!-- Header (if Title provided) -->\n @if (Title) {\n <div class=\"sp-header\">\n <h2 class=\"sp-title\">{{Title}}</h2>\n <button class=\"sp-close-btn\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n }\n <!-- Content projection -->\n <div class=\"sp-body sp-dialog-body\">\n <ng-content select=\"[dialog-content]\"></ng-content>\n </div>\n </div>\n}\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.sp-backdrop {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1000;\n transition: background 0.3s ease;\n pointer-events: none;\n}\n\n.sp-backdrop.visible {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n.sp-dialog-backdrop.visible {\n background: var(--mj-bg-overlay);\n}\n\n/* ================================================================= */\n/* SLIDE PANEL */\n/* ================================================================= */\n\n.sp-panel {\n position: fixed;\n top: 0;\n right: 0;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n min-width: 400px;\n max-width: 92vw;\n}\n\n.sp-panel.visible {\n transform: translateX(0);\n}\n\n/* ================================================================= */\n/* DIALOG (centered modal) */\n/* ================================================================= */\n\n.sp-dialog {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.95);\n max-height: 85vh;\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: var(--mj-shadow-lg);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n opacity: 0;\n transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n min-width: 360px;\n max-width: 95vw;\n}\n\n.sp-dialog.visible {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.sp-resize-handle {\n position: absolute;\n left: -4px;\n top: 0;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.sp-resize-handle:hover .sp-resize-grip,\n.sp-resize-handle:active .sp-resize-grip {\n opacity: 1;\n background: var(--mj-brand-primary);\n}\n\n.sp-resize-grip {\n width: 3px;\n height: 40px;\n background: var(--mj-border-strong);\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.sp-resize-handle:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.sp-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.sp-title {\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n}\n\n.sp-close-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: none;\n border: none;\n border-radius: 8px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.sp-close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* BODY */\n/* ================================================================= */\n\n.sp-body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.sp-dialog-body {\n padding: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 768px) {\n .sp-panel {\n width: 100% !important;\n min-width: unset;\n }\n\n .sp-resize-handle {\n display: none;\n }\n\n .sp-dialog {\n width: 95vw !important;\n max-height: 90vh;\n }\n}\n"] }]
|
|
178
178
|
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Mode: [{
|
|
179
179
|
type: Input
|
|
180
180
|
}], Title: [{
|
|
@@ -802,11 +802,11 @@ export class MjRecordMicroViewComponent {
|
|
|
802
802
|
i0.ɵɵconditional(!ctx.Inline ? 0 : -1);
|
|
803
803
|
i0.ɵɵadvance();
|
|
804
804
|
i0.ɵɵconditional(ctx.Inline ? 1 : -1);
|
|
805
|
-
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.LoadingComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.micro-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0);\n z-index: 1100;\n transition: background 0.25s ease;\n pointer-events: none;\n}\n\n.micro-backdrop.visible[_ngcontent-%COMP%] {\n background: rgba(0, 0, 0, 0.15);\n pointer-events: auto;\n}\n\n.micro-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 480px;\n max-width: 90vw;\n height: 100vh;\n background: var(--card-background, #ffffff);\n box-shadow: -6px 0 24px rgba(0, 0, 0, 0.1);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.micro-panel.visible[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.micro-inline[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.micro-inline-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.micro-header-left[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.micro-content-inline[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n\n\n\n\n\n\n\n.micro-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.micro-header-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n}\n\n.micro-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.micro-entity[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.micro-entity-icon[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n\n\n.micro-record-name[_ngcontent-%COMP%] {\n color: #6366f1;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.micro-record-id[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.micro-record-id[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.micro-open-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n color: #3b82f6;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.micro-open-btn[_ngcontent-%COMP%]:hover {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.micro-open-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.micro-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: none;\n border-radius: 6px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.micro-close[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n\n\n\n\n\n\n\n.micro-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n}\n\n.micro-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n margin: 0 20px;\n background: rgba(239, 68, 68, 0.06);\n border: 1px solid rgba(239, 68, 68, 0.15);\n border-radius: 8px;\n font-size: 13px;\n color: #ef4444;\n}\n\n\n\n.micro-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.null-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--text-secondary, #6b7280);\n user-select: none;\n}\n\n.null-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: #6366f1;\n cursor: pointer;\n}\n\n.null-toggle-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n\n\n.micro-fields[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.micro-field-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 8px 20px;\n font-size: 11px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n position: sticky;\n top: 0;\n background: var(--card-background, #ffffff);\n z-index: 1;\n}\n\n.micro-field-header[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.micro-field-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 7px 20px;\n align-items: baseline;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n transition: background 0.1s ease;\n}\n\n.micro-field-row[_ngcontent-%COMP%]:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.micro-field-row.odd[_ngcontent-%COMP%] {\n background: var(--hover-background, #fafafa);\n}\n\n.micro-field-row.odd[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n}\n\n\n\n.micro-field-row.diff-added[_ngcontent-%COMP%] {\n background: rgba(16, 185, 129, 0.04) !important;\n border-left: 3px solid #10b981;\n}\n\n.micro-field-row.diff-modified[_ngcontent-%COMP%] {\n background: rgba(245, 158, 11, 0.04) !important;\n border-left: 3px solid #f59e0b;\n}\n\n.micro-field-row.diff-removed[_ngcontent-%COMP%] {\n background: rgba(239, 68, 68, 0.04) !important;\n border-left: 3px solid #ef4444;\n}\n\n.micro-field-row[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.mf-col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n overflow: hidden;\n cursor: default;\n}\n\n.mf-type-icon[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #d1d5db);\n font-size: 11px;\n width: 14px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mf-field-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mf-col-value[_ngcontent-%COMP%], \n.mf-col-old[_ngcontent-%COMP%], \n.mf-col-new[_ngcontent-%COMP%] {\n color: var(--text-secondary, #6b7280);\n word-break: break-word;\n line-height: 1.4;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 12px;\n}\n\n.mf-col-old[_ngcontent-%COMP%] {\n color: #ef4444;\n opacity: 0.7;\n text-decoration: line-through;\n}\n\n.mf-col-new[_ngcontent-%COMP%] {\n color: #10b981;\n}\n\n\n\n\n\n\n\n\n.mf-bool-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n vertical-align: middle;\n}\n\n.mf-bool-true[_ngcontent-%COMP%] {\n color: #10b981;\n}\n\n.mf-bool-false[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #d1d5db);\n}\n\n.mf-bool-label[_ngcontent-%COMP%] {\n margin-left: 6px;\n font-family: inherit;\n font-size: 12px;\n color: var(--text-secondary, #6b7280);\n}\n\n\n\n\n\n\n\n\n.mf-fk-link[_ngcontent-%COMP%] {\n color: #3b82f6;\n cursor: pointer;\n text-decoration: none;\n font-family: inherit;\n font-size: inherit;\n transition: color 0.15s ease;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mf-fk-link[_ngcontent-%COMP%]:hover {\n color: #2563eb;\n text-decoration: underline;\n}\n\n.mf-fk-id[_ngcontent-%COMP%] {\n color: var(--text-tertiary, #9ca3af);\n font-size: 10px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.mf-fk-icon[_ngcontent-%COMP%] {\n font-size: 9px;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.mf-fk-link[_ngcontent-%COMP%]:hover .mf-fk-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n\n\n\n\n\n.mf-json-value[_ngcontent-%COMP%] {\n margin: 0;\n padding: 8px 10px;\n background: var(--hover-background, #f9fafb);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 11px;\n line-height: 1.5;\n color: var(--text-secondary, #6b7280);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n\n\n.micro-empty[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.micro-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.micro-inline[_ngcontent-%COMP%] .micro-field-header[_ngcontent-%COMP%], \n.micro-inline[_ngcontent-%COMP%] .micro-field-row[_ngcontent-%COMP%] {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n.micro-inline[_ngcontent-%COMP%] .micro-toolbar[_ngcontent-%COMP%] {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n@media (max-width: 600px) {\n .micro-field-header[_ngcontent-%COMP%], \n .micro-field-row[_ngcontent-%COMP%] {\n grid-template-columns: 120px 1fr;\n }\n\n .micro-field-header[_ngcontent-%COMP%]:has(.mf-col-old), \n .micro-field-row[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 100px 1fr 1fr;\n }\n\n .micro-record-name[_ngcontent-%COMP%] {\n max-width: 120px;\n }\n}"], changeDetection: 0 });
|
|
805
|
+
} }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.LoadingComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.micro-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1100;\n transition: background 0.25s ease;\n pointer-events: none;\n}\n\n.micro-backdrop.visible[_ngcontent-%COMP%] {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n.micro-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 480px;\n max-width: 90vw;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.micro-panel.visible[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.micro-inline[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.micro-inline-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.micro-header-left[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.micro-content-inline[_ngcontent-%COMP%] {\n padding: 0;\n}\n\n\n\n\n\n\n\n\n.micro-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.micro-header-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n}\n\n.micro-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.micro-entity[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.micro-entity-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.micro-record-name[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.micro-record-id[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.micro-record-id[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.micro-open-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n color: var(--mj-brand-primary);\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.micro-open-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.micro-open-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.micro-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: none;\n border-radius: 6px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.micro-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.micro-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n}\n\n.micro-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n margin: 0 20px;\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-status-error);\n}\n\n\n\n.micro-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.null-toggle[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n user-select: none;\n}\n\n.null-toggle[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.null-toggle-label[_ngcontent-%COMP%] {\n font-weight: 500;\n}\n\n\n\n.micro-fields[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.micro-field-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 8px 20px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n border-bottom: 1px solid var(--mj-border-default);\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface);\n z-index: 1;\n}\n\n.micro-field-header[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.micro-field-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 7px 20px;\n align-items: baseline;\n border-bottom: 1px solid var(--mj-border-default);\n transition: background 0.1s ease;\n}\n\n.micro-field-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.micro-field-row.odd[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n}\n\n.micro-field-row.odd[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.micro-field-row.diff-added[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-success);\n}\n\n.micro-field-row.diff-modified[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.micro-field-row.diff-removed[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-error);\n}\n\n.micro-field-row[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.mf-col-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n overflow: hidden;\n cursor: default;\n}\n\n.mf-type-icon[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n font-size: 11px;\n width: 14px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mf-field-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mf-col-value[_ngcontent-%COMP%], \n.mf-col-old[_ngcontent-%COMP%], \n.mf-col-new[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n word-break: break-word;\n line-height: 1.4;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 12px;\n}\n\n.mf-col-old[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n opacity: 0.7;\n text-decoration: line-through;\n}\n\n.mf-col-new[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n\n\n\n.mf-bool-icon[_ngcontent-%COMP%] {\n font-size: 14px;\n vertical-align: middle;\n}\n\n.mf-bool-true[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.mf-bool-false[_ngcontent-%COMP%] {\n color: var(--mj-border-strong);\n}\n\n.mf-bool-label[_ngcontent-%COMP%] {\n margin-left: 6px;\n font-family: inherit;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.mf-fk-link[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n cursor: pointer;\n text-decoration: none;\n font-family: inherit;\n font-size: inherit;\n transition: color 0.15s ease;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mf-fk-link[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n\n.mf-fk-id[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 10px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.mf-fk-icon[_ngcontent-%COMP%] {\n font-size: 9px;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.mf-fk-link[_ngcontent-%COMP%]:hover .mf-fk-icon[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n\n\n\n\n\n\n\n.mf-json-value[_ngcontent-%COMP%] {\n margin: 0;\n padding: 8px 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 11px;\n line-height: 1.5;\n color: var(--mj-text-secondary);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n\n\n.micro-empty[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.micro-empty[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.micro-inline[_ngcontent-%COMP%] .micro-field-header[_ngcontent-%COMP%], \n.micro-inline[_ngcontent-%COMP%] .micro-field-row[_ngcontent-%COMP%] {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n.micro-inline[_ngcontent-%COMP%] .micro-toolbar[_ngcontent-%COMP%] {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n@media (max-width: 600px) {\n .micro-field-header[_ngcontent-%COMP%], \n .micro-field-row[_ngcontent-%COMP%] {\n grid-template-columns: 120px 1fr;\n }\n\n .micro-field-header[_ngcontent-%COMP%]:has(.mf-col-old), \n .micro-field-row[_ngcontent-%COMP%]:has(.mf-col-old) {\n grid-template-columns: 100px 1fr 1fr;\n }\n\n .micro-record-name[_ngcontent-%COMP%] {\n max-width: 120px;\n }\n}"], changeDetection: 0 });
|
|
806
806
|
}
|
|
807
807
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjRecordMicroViewComponent, [{
|
|
808
808
|
type: Component,
|
|
809
|
-
args: [{ standalone: false, selector: 'mj-record-micro-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay mode -->\n@if (!Inline) {\n <div class=\"micro-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n <div class=\"micro-panel\" [class.visible]=\"IsVisible\">\n <ng-container *ngTemplateOutlet=\"microContent\"></ng-container>\n </div>\n}\n\n<!-- Inline mode (embedded in parent panel) -->\n@if (Inline) {\n <div class=\"micro-inline\">\n <ng-container *ngTemplateOutlet=\"microContent\"></ng-container>\n </div>\n}\n\n<!-- Shared content template -->\n<ng-template #microContent>\n <!-- Header (overlay mode only) -->\n @if (!Inline) {\n <div class=\"micro-header\">\n <div class=\"micro-header-info\">\n <div class=\"micro-entity\">\n <i [class]=\"EntityIcon\" class=\"micro-entity-icon\"></i>\n <span>{{Data.EntityName}}</span>\n @if (RecordDisplayName) {\n <span class=\"micro-record-name\">{{RecordDisplayName}}</span>\n }\n </div>\n <div class=\"micro-record-id\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n <span>{{DisplayRecordID}}</span>\n </div>\n </div>\n <div class=\"micro-header-actions\">\n <button class=\"micro-open-btn\" (click)=\"OnOpenRecord()\" title=\"Open this record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n <button class=\"micro-close\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Inline header -->\n @if (Inline) {\n <div class=\"micro-inline-header\">\n <div class=\"micro-header-left\">\n <div class=\"micro-entity\">\n <i [class]=\"EntityIcon\" class=\"micro-entity-icon\"></i>\n <span>{{Data.EntityName}}</span>\n @if (RecordDisplayName) {\n <span class=\"micro-record-name\">{{RecordDisplayName}}</span>\n }\n </div>\n <div class=\"micro-record-id\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n <span>{{DisplayRecordID}}</span>\n </div>\n </div>\n <button class=\"micro-open-btn\" (click)=\"OnOpenRecord()\" title=\"Open this record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n </div>\n }\n\n <!-- Content -->\n <div class=\"micro-content\" [class.micro-content-inline]=\"Inline\">\n @if (IsLoading) {\n <mj-loading text=\"Loading record data...\"></mj-loading>\n }\n\n <!-- Error -->\n @if (!IsLoading && ErrorMessage) {\n <div class=\"micro-error\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n <span>{{ErrorMessage}}</span>\n </div>\n }\n\n <!-- Field table -->\n @if (!IsLoading && !ErrorMessage && Fields.length > 0) {\n <div class=\"micro-fields\">\n <!-- Null toggle toolbar -->\n @if (HiddenNullCount > 0) {\n <div class=\"micro-toolbar\">\n <label class=\"null-toggle\">\n <input type=\"checkbox\" [checked]=\"ShowNullValues\" (change)=\"ToggleShowNulls()\" />\n <span class=\"null-toggle-label\">Show null values ({{HiddenNullCount}})</span>\n </label>\n </div>\n }\n <div class=\"micro-field-header\">\n <span class=\"mf-col-name\">Field</span>\n @if (!HasDiffs) {\n <span class=\"mf-col-value\">Value</span>\n }\n @if (HasDiffs) {\n <span class=\"mf-col-old\">Old</span>\n <span class=\"mf-col-new\">New</span>\n }\n </div>\n @for (field of VisibleFields; track field; let odd = $odd) {\n <div class=\"micro-field-row\"\n [class.odd]=\"odd\" [ngClass]=\"field.DiffClass\">\n <span class=\"mf-col-name\" [title]=\"field.Description\">\n <i [class]=\"GetTypeIcon(field.Type)\" class=\"mf-type-icon\"></i>\n <span class=\"mf-field-name\">{{field.DisplayName}}</span>\n </span>\n @if (!HasDiffs) {\n <span class=\"mf-col-value\" [title]=\"field.Value\">\n <!-- Boolean field -->\n @if (field.IsBoolean && !field.IsNull) {\n <i [class]=\"field.BooleanValue ? 'fa-solid fa-square-check mf-bool-true' : 'fa-regular fa-square mf-bool-false'\"\n class=\"mf-bool-icon\"></i>\n <span class=\"mf-bool-label\">{{field.BooleanValue ? 'Yes' : 'No'}}</span>\n }\n <!-- FK field with display value \u2014 show display name (ID) with open icon -->\n @if (!field.IsBoolean && field.ForeignKeyEntityName && field.ForeignKeyDisplayValue) {\n <a class=\"mf-fk-link\" (click)=\"OnEntityLinkClicked($event, field)\"\n [title]=\"field.ForeignKeyEntityName + ': ' + field.ForeignKeyRecordId\">\n {{field.ForeignKeyDisplayValue}}\n <span class=\"mf-fk-id\">({{field.ForeignKeyRecordId | slice:0:8}}...)</span>\n <i class=\"fa-solid fa-arrow-up-right-from-square mf-fk-icon\"></i>\n </a>\n }\n <!-- FK field without display value \u2014 show raw ID with open icon -->\n @if (!field.IsBoolean && field.ForeignKeyEntityName && !field.ForeignKeyDisplayValue) {\n <a class=\"mf-fk-link\" (click)=\"OnEntityLinkClicked($event, field)\"\n [title]=\"'Open ' + field.ForeignKeyEntityName\">\n {{field.Value}}\n <i class=\"fa-solid fa-arrow-up-right-from-square mf-fk-icon\"></i>\n </a>\n }\n <!-- JSON field \u2014 formatted -->\n @if (!field.IsBoolean && !field.ForeignKeyEntityName && field.IsJson) {\n <pre class=\"mf-json-value\">{{field.Value}}</pre>\n }\n <!-- Regular value -->\n @if (!field.IsBoolean && !field.ForeignKeyEntityName && !field.IsJson) {\n {{field.Value}}\n }\n </span>\n }\n @if (HasDiffs) {\n <span class=\"mf-col-old\" [title]=\"field.OldValue\">\n {{field.OldValue || field.Value}}\n </span>\n <span class=\"mf-col-new\" [title]=\"field.Value\">\n {{field.Value}}\n </span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty -->\n @if (!IsLoading && !ErrorMessage && Fields.length === 0) {\n <div class=\"micro-empty\">\n <p>No field data available.</p>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["/* ================================================================= */\n/* OVERLAY MODE */\n/* ================================================================= */\n\n.micro-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0);\n z-index: 1100;\n transition: background 0.25s ease;\n pointer-events: none;\n}\n\n.micro-backdrop.visible {\n background: rgba(0, 0, 0, 0.15);\n pointer-events: auto;\n}\n\n.micro-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 480px;\n max-width: 90vw;\n height: 100vh;\n background: var(--card-background, #ffffff);\n box-shadow: -6px 0 24px rgba(0, 0, 0, 0.1);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.micro-panel.visible {\n transform: translateX(0);\n}\n\n/* ================================================================= */\n/* INLINE MODE */\n/* ================================================================= */\n\n.micro-inline {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.micro-inline-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.micro-header-left {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.micro-content-inline {\n padding: 0;\n}\n\n/* ================================================================= */\n/* HEADER (overlay mode) */\n/* ================================================================= */\n\n.micro-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n flex-shrink: 0;\n}\n\n.micro-header-info {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n}\n\n.micro-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.micro-entity {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--text-primary, #1f2937);\n}\n\n.micro-entity-icon {\n color: #3b82f6;\n}\n\n/* Record display name shown prominently next to entity name */\n.micro-record-name {\n color: #6366f1;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.micro-record-id {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--text-tertiary, #9ca3af);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.micro-record-id i {\n font-size: 11px;\n}\n\n/* Open record button */\n.micro-open-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n background: var(--card-background, #ffffff);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n color: #3b82f6;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.micro-open-btn:hover {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.micro-open-btn i {\n font-size: 11px;\n}\n\n.micro-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: none;\n border-radius: 6px;\n color: var(--text-secondary, #6b7280);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.micro-close:hover {\n background: var(--hover-background, #f3f4f6);\n color: var(--text-primary, #1f2937);\n}\n\n/* ================================================================= */\n/* CONTENT */\n/* ================================================================= */\n\n.micro-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n}\n\n.micro-error {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n margin: 0 20px;\n background: rgba(239, 68, 68, 0.06);\n border: 1px solid rgba(239, 68, 68, 0.15);\n border-radius: 8px;\n font-size: 13px;\n color: #ef4444;\n}\n\n/* Null toggle toolbar */\n.micro-toolbar {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.null-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--text-secondary, #6b7280);\n user-select: none;\n}\n\n.null-toggle input[type=\"checkbox\"] {\n width: 14px;\n height: 14px;\n accent-color: #6366f1;\n cursor: pointer;\n}\n\n.null-toggle-label {\n font-weight: 500;\n}\n\n/* Field table */\n.micro-fields {\n font-size: 13px;\n}\n\n.micro-field-header {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 8px 20px;\n font-size: 11px;\n font-weight: 600;\n color: var(--text-tertiary, #9ca3af);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n border-bottom: 1px solid var(--border-color, #e5e7eb);\n position: sticky;\n top: 0;\n background: var(--card-background, #ffffff);\n z-index: 1;\n}\n\n.micro-field-header:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.micro-field-row {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 7px 20px;\n align-items: baseline;\n border-bottom: 1px solid var(--border-color, #f3f4f6);\n transition: background 0.1s ease;\n}\n\n.micro-field-row:hover {\n background: var(--hover-background, #f9fafb);\n}\n\n.micro-field-row.odd {\n background: var(--hover-background, #fafafa);\n}\n\n.micro-field-row.odd:hover {\n background: #f3f4f6;\n}\n\n/* Diff styling */\n.micro-field-row.diff-added {\n background: rgba(16, 185, 129, 0.04) !important;\n border-left: 3px solid #10b981;\n}\n\n.micro-field-row.diff-modified {\n background: rgba(245, 158, 11, 0.04) !important;\n border-left: 3px solid #f59e0b;\n}\n\n.micro-field-row.diff-removed {\n background: rgba(239, 68, 68, 0.04) !important;\n border-left: 3px solid #ef4444;\n}\n\n.micro-field-row:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.mf-col-name {\n display: flex;\n align-items: center;\n gap: 6px;\n overflow: hidden;\n cursor: default;\n}\n\n.mf-type-icon {\n color: var(--text-tertiary, #d1d5db);\n font-size: 11px;\n width: 14px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mf-field-name {\n font-weight: 500;\n color: var(--text-primary, #1f2937);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mf-col-value,\n.mf-col-old,\n.mf-col-new {\n color: var(--text-secondary, #6b7280);\n word-break: break-word;\n line-height: 1.4;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 12px;\n}\n\n.mf-col-old {\n color: #ef4444;\n opacity: 0.7;\n text-decoration: line-through;\n}\n\n.mf-col-new {\n color: #10b981;\n}\n\n/* ================================================================= */\n/* BOOLEAN FIELD DISPLAY */\n/* ================================================================= */\n\n.mf-bool-icon {\n font-size: 14px;\n vertical-align: middle;\n}\n\n.mf-bool-true {\n color: #10b981;\n}\n\n.mf-bool-false {\n color: var(--text-tertiary, #d1d5db);\n}\n\n.mf-bool-label {\n margin-left: 6px;\n font-family: inherit;\n font-size: 12px;\n color: var(--text-secondary, #6b7280);\n}\n\n/* ================================================================= */\n/* FOREIGN KEY LINK STYLES */\n/* ================================================================= */\n\n.mf-fk-link {\n color: #3b82f6;\n cursor: pointer;\n text-decoration: none;\n font-family: inherit;\n font-size: inherit;\n transition: color 0.15s ease;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mf-fk-link:hover {\n color: #2563eb;\n text-decoration: underline;\n}\n\n.mf-fk-id {\n color: var(--text-tertiary, #9ca3af);\n font-size: 10px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.mf-fk-icon {\n font-size: 9px;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.mf-fk-link:hover .mf-fk-icon {\n opacity: 1;\n}\n\n/* ================================================================= */\n/* JSON FIELD DISPLAY */\n/* ================================================================= */\n\n.mf-json-value {\n margin: 0;\n padding: 8px 10px;\n background: var(--hover-background, #f9fafb);\n border: 1px solid var(--border-color, #e5e7eb);\n border-radius: 6px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 11px;\n line-height: 1.5;\n color: var(--text-secondary, #6b7280);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Empty */\n.micro-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.micro-empty p {\n font-size: 14px;\n color: var(--text-tertiary, #9ca3af);\n margin: 0;\n}\n\n/* ================================================================= */\n/* INLINE MODE - Responsive */\n/* ================================================================= */\n\n.micro-inline .micro-field-header,\n.micro-inline .micro-field-row {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n.micro-inline .micro-toolbar {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n@media (max-width: 600px) {\n .micro-field-header,\n .micro-field-row {\n grid-template-columns: 120px 1fr;\n }\n\n .micro-field-header:has(.mf-col-old),\n .micro-field-row:has(.mf-col-old) {\n grid-template-columns: 100px 1fr 1fr;\n }\n\n .micro-record-name {\n max-width: 120px;\n }\n}\n"] }]
|
|
809
|
+
args: [{ standalone: false, selector: 'mj-record-micro-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay mode -->\n@if (!Inline) {\n <div class=\"micro-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n <div class=\"micro-panel\" [class.visible]=\"IsVisible\">\n <ng-container *ngTemplateOutlet=\"microContent\"></ng-container>\n </div>\n}\n\n<!-- Inline mode (embedded in parent panel) -->\n@if (Inline) {\n <div class=\"micro-inline\">\n <ng-container *ngTemplateOutlet=\"microContent\"></ng-container>\n </div>\n}\n\n<!-- Shared content template -->\n<ng-template #microContent>\n <!-- Header (overlay mode only) -->\n @if (!Inline) {\n <div class=\"micro-header\">\n <div class=\"micro-header-info\">\n <div class=\"micro-entity\">\n <i [class]=\"EntityIcon\" class=\"micro-entity-icon\"></i>\n <span>{{Data.EntityName}}</span>\n @if (RecordDisplayName) {\n <span class=\"micro-record-name\">{{RecordDisplayName}}</span>\n }\n </div>\n <div class=\"micro-record-id\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n <span>{{DisplayRecordID}}</span>\n </div>\n </div>\n <div class=\"micro-header-actions\">\n <button class=\"micro-open-btn\" (click)=\"OnOpenRecord()\" title=\"Open this record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n <button class=\"micro-close\" (click)=\"OnClose()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n }\n\n <!-- Inline header -->\n @if (Inline) {\n <div class=\"micro-inline-header\">\n <div class=\"micro-header-left\">\n <div class=\"micro-entity\">\n <i [class]=\"EntityIcon\" class=\"micro-entity-icon\"></i>\n <span>{{Data.EntityName}}</span>\n @if (RecordDisplayName) {\n <span class=\"micro-record-name\">{{RecordDisplayName}}</span>\n }\n </div>\n <div class=\"micro-record-id\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n <span>{{DisplayRecordID}}</span>\n </div>\n </div>\n <button class=\"micro-open-btn\" (click)=\"OnOpenRecord()\" title=\"Open this record\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n </button>\n </div>\n }\n\n <!-- Content -->\n <div class=\"micro-content\" [class.micro-content-inline]=\"Inline\">\n @if (IsLoading) {\n <mj-loading text=\"Loading record data...\"></mj-loading>\n }\n\n <!-- Error -->\n @if (!IsLoading && ErrorMessage) {\n <div class=\"micro-error\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n <span>{{ErrorMessage}}</span>\n </div>\n }\n\n <!-- Field table -->\n @if (!IsLoading && !ErrorMessage && Fields.length > 0) {\n <div class=\"micro-fields\">\n <!-- Null toggle toolbar -->\n @if (HiddenNullCount > 0) {\n <div class=\"micro-toolbar\">\n <label class=\"null-toggle\">\n <input type=\"checkbox\" [checked]=\"ShowNullValues\" (change)=\"ToggleShowNulls()\" />\n <span class=\"null-toggle-label\">Show null values ({{HiddenNullCount}})</span>\n </label>\n </div>\n }\n <div class=\"micro-field-header\">\n <span class=\"mf-col-name\">Field</span>\n @if (!HasDiffs) {\n <span class=\"mf-col-value\">Value</span>\n }\n @if (HasDiffs) {\n <span class=\"mf-col-old\">Old</span>\n <span class=\"mf-col-new\">New</span>\n }\n </div>\n @for (field of VisibleFields; track field; let odd = $odd) {\n <div class=\"micro-field-row\"\n [class.odd]=\"odd\" [ngClass]=\"field.DiffClass\">\n <span class=\"mf-col-name\" [title]=\"field.Description\">\n <i [class]=\"GetTypeIcon(field.Type)\" class=\"mf-type-icon\"></i>\n <span class=\"mf-field-name\">{{field.DisplayName}}</span>\n </span>\n @if (!HasDiffs) {\n <span class=\"mf-col-value\" [title]=\"field.Value\">\n <!-- Boolean field -->\n @if (field.IsBoolean && !field.IsNull) {\n <i [class]=\"field.BooleanValue ? 'fa-solid fa-square-check mf-bool-true' : 'fa-regular fa-square mf-bool-false'\"\n class=\"mf-bool-icon\"></i>\n <span class=\"mf-bool-label\">{{field.BooleanValue ? 'Yes' : 'No'}}</span>\n }\n <!-- FK field with display value \u2014 show display name (ID) with open icon -->\n @if (!field.IsBoolean && field.ForeignKeyEntityName && field.ForeignKeyDisplayValue) {\n <a class=\"mf-fk-link\" (click)=\"OnEntityLinkClicked($event, field)\"\n [title]=\"field.ForeignKeyEntityName + ': ' + field.ForeignKeyRecordId\">\n {{field.ForeignKeyDisplayValue}}\n <span class=\"mf-fk-id\">({{field.ForeignKeyRecordId | slice:0:8}}...)</span>\n <i class=\"fa-solid fa-arrow-up-right-from-square mf-fk-icon\"></i>\n </a>\n }\n <!-- FK field without display value \u2014 show raw ID with open icon -->\n @if (!field.IsBoolean && field.ForeignKeyEntityName && !field.ForeignKeyDisplayValue) {\n <a class=\"mf-fk-link\" (click)=\"OnEntityLinkClicked($event, field)\"\n [title]=\"'Open ' + field.ForeignKeyEntityName\">\n {{field.Value}}\n <i class=\"fa-solid fa-arrow-up-right-from-square mf-fk-icon\"></i>\n </a>\n }\n <!-- JSON field \u2014 formatted -->\n @if (!field.IsBoolean && !field.ForeignKeyEntityName && field.IsJson) {\n <pre class=\"mf-json-value\">{{field.Value}}</pre>\n }\n <!-- Regular value -->\n @if (!field.IsBoolean && !field.ForeignKeyEntityName && !field.IsJson) {\n {{field.Value}}\n }\n </span>\n }\n @if (HasDiffs) {\n <span class=\"mf-col-old\" [title]=\"field.OldValue\">\n {{field.OldValue || field.Value}}\n </span>\n <span class=\"mf-col-new\" [title]=\"field.Value\">\n {{field.Value}}\n </span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Empty -->\n @if (!IsLoading && !ErrorMessage && Fields.length === 0) {\n <div class=\"micro-empty\">\n <p>No field data available.</p>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["/* ================================================================= */\n/* OVERLAY MODE */\n/* ================================================================= */\n\n.micro-backdrop {\n position: fixed;\n inset: 0;\n background: transparent;\n z-index: 1100;\n transition: background 0.25s ease;\n pointer-events: none;\n}\n\n.micro-backdrop.visible {\n background: var(--mj-bg-overlay);\n pointer-events: auto;\n}\n\n.micro-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 480px;\n max-width: 90vw;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: var(--mj-shadow-lg);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.micro-panel.visible {\n transform: translateX(0);\n}\n\n/* ================================================================= */\n/* INLINE MODE */\n/* ================================================================= */\n\n.micro-inline {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.micro-inline-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.micro-header-left {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.micro-content-inline {\n padding: 0;\n}\n\n/* ================================================================= */\n/* HEADER (overlay mode) */\n/* ================================================================= */\n\n.micro-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.micro-header-info {\n display: flex;\n flex-direction: column;\n gap: 6px;\n min-width: 0;\n}\n\n.micro-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.micro-entity {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.micro-entity-icon {\n color: var(--mj-brand-primary);\n}\n\n/* Record display name shown prominently next to entity name */\n.micro-record-name {\n color: var(--mj-brand-primary);\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.micro-record-id {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.micro-record-id i {\n font-size: 11px;\n}\n\n/* Open record button */\n.micro-open-btn {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 12px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n color: var(--mj-brand-primary);\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n flex-shrink: 0;\n}\n\n.micro-open-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.micro-open-btn i {\n font-size: 11px;\n}\n\n.micro-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n background: none;\n border: none;\n border-radius: 6px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.micro-close:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* ================================================================= */\n/* CONTENT */\n/* ================================================================= */\n\n.micro-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px 0;\n}\n\n.micro-error {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 20px;\n margin: 0 20px;\n background: color-mix(in srgb, var(--mj-status-error) 6%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 15%, transparent);\n border-radius: 8px;\n font-size: 13px;\n color: var(--mj-status-error);\n}\n\n/* Null toggle toolbar */\n.micro-toolbar {\n display: flex;\n align-items: center;\n padding: 8px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.null-toggle {\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n font-size: 12px;\n color: var(--mj-text-secondary);\n user-select: none;\n}\n\n.null-toggle input[type=\"checkbox\"] {\n width: 14px;\n height: 14px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.null-toggle-label {\n font-weight: 500;\n}\n\n/* Field table */\n.micro-fields {\n font-size: 13px;\n}\n\n.micro-field-header {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 8px 20px;\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n border-bottom: 1px solid var(--mj-border-default);\n position: sticky;\n top: 0;\n background: var(--mj-bg-surface);\n z-index: 1;\n}\n\n.micro-field-header:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.micro-field-row {\n display: grid;\n grid-template-columns: 180px 1fr;\n padding: 7px 20px;\n align-items: baseline;\n border-bottom: 1px solid var(--mj-border-default);\n transition: background 0.1s ease;\n}\n\n.micro-field-row:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.micro-field-row.odd {\n background: var(--mj-bg-surface-card);\n}\n\n.micro-field-row.odd:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* Diff styling */\n.micro-field-row.diff-added {\n background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-success);\n}\n\n.micro-field-row.diff-modified {\n background: color-mix(in srgb, var(--mj-status-warning) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-warning);\n}\n\n.micro-field-row.diff-removed {\n background: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface)) !important;\n border-left: 3px solid var(--mj-status-error);\n}\n\n.micro-field-row:has(.mf-col-old) {\n grid-template-columns: 160px 1fr 1fr;\n}\n\n.mf-col-name {\n display: flex;\n align-items: center;\n gap: 6px;\n overflow: hidden;\n cursor: default;\n}\n\n.mf-type-icon {\n color: var(--mj-border-strong);\n font-size: 11px;\n width: 14px;\n text-align: center;\n flex-shrink: 0;\n}\n\n.mf-field-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.mf-col-value,\n.mf-col-old,\n.mf-col-new {\n color: var(--mj-text-secondary);\n word-break: break-word;\n line-height: 1.4;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 12px;\n}\n\n.mf-col-old {\n color: var(--mj-status-error);\n opacity: 0.7;\n text-decoration: line-through;\n}\n\n.mf-col-new {\n color: var(--mj-status-success);\n}\n\n/* ================================================================= */\n/* BOOLEAN FIELD DISPLAY */\n/* ================================================================= */\n\n.mf-bool-icon {\n font-size: 14px;\n vertical-align: middle;\n}\n\n.mf-bool-true {\n color: var(--mj-status-success);\n}\n\n.mf-bool-false {\n color: var(--mj-border-strong);\n}\n\n.mf-bool-label {\n margin-left: 6px;\n font-family: inherit;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n/* ================================================================= */\n/* FOREIGN KEY LINK STYLES */\n/* ================================================================= */\n\n.mf-fk-link {\n color: var(--mj-brand-primary);\n cursor: pointer;\n text-decoration: none;\n font-family: inherit;\n font-size: inherit;\n transition: color 0.15s ease;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.mf-fk-link:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n\n.mf-fk-id {\n color: var(--mj-text-disabled);\n font-size: 10px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.mf-fk-icon {\n font-size: 9px;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.mf-fk-link:hover .mf-fk-icon {\n opacity: 1;\n}\n\n/* ================================================================= */\n/* JSON FIELD DISPLAY */\n/* ================================================================= */\n\n.mf-json-value {\n margin: 0;\n padding: 8px 10px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-family: 'SF Mono', 'Fira Code', monospace;\n font-size: 11px;\n line-height: 1.5;\n color: var(--mj-text-secondary);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 200px;\n overflow-y: auto;\n}\n\n/* Empty */\n.micro-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.micro-empty p {\n font-size: 14px;\n color: var(--mj-text-disabled);\n margin: 0;\n}\n\n/* ================================================================= */\n/* INLINE MODE - Responsive */\n/* ================================================================= */\n\n.micro-inline .micro-field-header,\n.micro-inline .micro-field-row {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n.micro-inline .micro-toolbar {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n@media (max-width: 600px) {\n .micro-field-header,\n .micro-field-row {\n grid-template-columns: 120px 1fr;\n }\n\n .micro-field-header:has(.mf-col-old),\n .micro-field-row:has(.mf-col-old) {\n grid-template-columns: 100px 1fr 1fr;\n }\n\n .micro-record-name {\n max-width: 120px;\n }\n}\n"] }]
|
|
810
810
|
}], () => [{ type: i0.ChangeDetectorRef }], { Data: [{
|
|
811
811
|
type: Input
|
|
812
812
|
}], Inline: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-versions",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.12.0",
|
|
4
4
|
"description": "MemberJunction: Angular Version History Components - Label creation, detail viewing, and slide panel",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
"@angular/forms": "21.1.3"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@memberjunction/core": "5.
|
|
30
|
-
"@memberjunction/core-entities": "5.
|
|
31
|
-
"@memberjunction/global": "5.
|
|
32
|
-
"@memberjunction/graphql-dataprovider": "5.
|
|
33
|
-
"@memberjunction/ng-shared-generic": "5.
|
|
29
|
+
"@memberjunction/core": "5.12.0",
|
|
30
|
+
"@memberjunction/core-entities": "5.12.0",
|
|
31
|
+
"@memberjunction/global": "5.12.0",
|
|
32
|
+
"@memberjunction/graphql-dataprovider": "5.12.0",
|
|
33
|
+
"@memberjunction/ng-shared-generic": "5.12.0",
|
|
34
34
|
"rxjs": "^7.8.2",
|
|
35
35
|
"tslib": "^2.8.1"
|
|
36
36
|
},
|