@memberjunction/ng-data-context 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.
|
@@ -57,11 +57,11 @@ export class DataContextDialogComponent {
|
|
|
57
57
|
i0.ɵɵclassProp("fa-maximize", !ctx.isMaximized)("fa-compress", ctx.isMaximized);
|
|
58
58
|
i0.ɵɵadvance(4);
|
|
59
59
|
i0.ɵɵproperty("dataContextId", ctx.dataContextId)("Provider", ctx.Provider);
|
|
60
|
-
} }, dependencies: [i1.WindowComponent, i1.WindowTitleBarComponent, i2.DataContextComponent], styles: [".data-context-dialog-wrapper[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.data-context-window[_ngcontent-%COMP%] {\n border-radius:
|
|
60
|
+
} }, dependencies: [i1.WindowComponent, i1.WindowTitleBarComponent, i2.DataContextComponent], styles: [".data-context-dialog-wrapper[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.data-context-window[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n box-shadow: var(--mj-shadow-lg);\n}\n\n\n\n[_nghost-%COMP%] .k-window {\n margin: 0 auto;\n top: 10% !important;\n position: fixed !important;\n}\n\n\n.data-context-window.maximized[_ngcontent-%COMP%] {\n position: fixed !important;\n top: 2.5% !important;\n left: 2.5% !important;\n}\n\n\n\n.window-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-base);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.title-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-lg);\n}\n\n.window-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: auto;\n}\n\n.window-action-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px 10px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n}\n\n.window-action-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-brand-primary-subtle);\n color: var(--mj-brand-primary);\n}\n\n.window-action-btn[_ngcontent-%COMP%]:last-child:hover {\n background-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n\n\n[_nghost-%COMP%] .k-window-titlebar {\n background-color: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n[_nghost-%COMP%] .k-window-title {\n display: contents;\n}\n\n[_nghost-%COMP%] .k-window-actions {\n display: none; \n\n}\n\n[_nghost-%COMP%] .k-window-content {\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n[_nghost-%COMP%] .k-window {\n border: none;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.data-context-window[_ngcontent-%COMP%] {\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}"] });
|
|
61
61
|
}
|
|
62
62
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextDialogComponent, [{
|
|
63
63
|
type: Component,
|
|
64
|
-
args: [{ standalone: false, selector: 'mj-data-context-dialog', template: "<div class=\"data-context-dialog-wrapper\">\n <div class=\"k-overlay\"></div>\n <kendo-window \n class=\"data-context-window\"\n [class.maximized]=\"isMaximized\"\n [width]=\"dialogWidth\"\n [height]=\"dialogHeight\"\n [minHeight]=\"400\"\n [minWidth]=\"600\"\n [resizable]=\"!isMaximized\"\n [draggable]=\"!isMaximized\"\n (close)=\"closeDialog()\">\n \n <kendo-window-titlebar>\n <div class=\"window-title\">\n <i class=\"fa-solid fa-layer-group title-icon\"></i>\n <span>Data Context{{ dataContextName ? ': ' + dataContextName : '' }}</span>\n </div>\n <div class=\"window-actions\">\n <button \n (click)=\"toggleMaximize()\"\n title=\"{{ isMaximized ? 'Restore' : 'Maximize' }}\"\n class=\"window-action-btn\">\n <i class=\"fa-solid\" [class.fa-maximize]=\"!isMaximized\" [class.fa-compress]=\"isMaximized\"></i>\n </button>\n <button \n (click)=\"closeDialog()\"\n title=\"Close\"\n class=\"window-action-btn\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </kendo-window-titlebar>\n \n <div class=\"dialog-content\">\n <mj-data-context \n [dataContextId]=\"dataContextId\" \n [Provider]=\"Provider\">\n </mj-data-context>\n </div>\n </kendo-window>\n</div>", styles: [".data-context-dialog-wrapper {\n position: relative;\n}\n\n.data-context-window {\n border-radius:
|
|
64
|
+
args: [{ standalone: false, selector: 'mj-data-context-dialog', template: "<div class=\"data-context-dialog-wrapper\">\n <div class=\"k-overlay\"></div>\n <kendo-window \n class=\"data-context-window\"\n [class.maximized]=\"isMaximized\"\n [width]=\"dialogWidth\"\n [height]=\"dialogHeight\"\n [minHeight]=\"400\"\n [minWidth]=\"600\"\n [resizable]=\"!isMaximized\"\n [draggable]=\"!isMaximized\"\n (close)=\"closeDialog()\">\n \n <kendo-window-titlebar>\n <div class=\"window-title\">\n <i class=\"fa-solid fa-layer-group title-icon\"></i>\n <span>Data Context{{ dataContextName ? ': ' + dataContextName : '' }}</span>\n </div>\n <div class=\"window-actions\">\n <button \n (click)=\"toggleMaximize()\"\n title=\"{{ isMaximized ? 'Restore' : 'Maximize' }}\"\n class=\"window-action-btn\">\n <i class=\"fa-solid\" [class.fa-maximize]=\"!isMaximized\" [class.fa-compress]=\"isMaximized\"></i>\n </button>\n <button \n (click)=\"closeDialog()\"\n title=\"Close\"\n class=\"window-action-btn\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </kendo-window-titlebar>\n \n <div class=\"dialog-content\">\n <mj-data-context \n [dataContextId]=\"dataContextId\" \n [Provider]=\"Provider\">\n </mj-data-context>\n </div>\n </kendo-window>\n</div>", styles: [".data-context-dialog-wrapper {\n position: relative;\n}\n\n.data-context-window {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n box-shadow: var(--mj-shadow-lg);\n}\n\n/* Position the window properly */\n:host ::ng-deep .k-window {\n margin: 0 auto;\n top: 10% !important;\n position: fixed !important;\n}\n\n\n.data-context-window.maximized {\n position: fixed !important;\n top: 2.5% !important;\n left: 2.5% !important;\n}\n\n/* Custom Title Bar */\n.window-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-base);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.title-icon {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-lg);\n}\n\n.window-actions {\n display: flex;\n gap: 4px;\n margin-left: auto;\n}\n\n.window-action-btn {\n background: none;\n border: none;\n padding: 8px 10px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n}\n\n.window-action-btn:hover {\n background-color: var(--mj-brand-primary-subtle);\n color: var(--mj-brand-primary);\n}\n\n.window-action-btn:last-child:hover {\n background-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n}\n\n/* Dialog Content */\n.dialog-content {\n height: 100%;\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n/* Override Kendo Window Styles */\n:host ::ng-deep .k-window-titlebar {\n background-color: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 12px 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n:host ::ng-deep .k-window-title {\n display: contents;\n}\n\n:host ::ng-deep .k-window-actions {\n display: none; /* Hide default Kendo window actions since we have custom ones */\n}\n\n:host ::ng-deep .k-window-content {\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n:host ::ng-deep .k-window {\n border: none;\n}\n\n/* Animations */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.data-context-window {\n animation: fadeIn 0.2s ease-out;\n}\n"] }]
|
|
65
65
|
}], null, { dialogClosed: [{
|
|
66
66
|
type: Output
|
|
67
67
|
}], dataContextId: [{
|
|
@@ -506,11 +506,11 @@ export class DataContextComponent {
|
|
|
506
506
|
i0.ɵɵconditional(ctx.showLoader ? 1 : 2);
|
|
507
507
|
i0.ɵɵadvance(2);
|
|
508
508
|
i0.ɵɵconditional(ctx.showSQLPreview ? 3 : -1);
|
|
509
|
-
} }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.LoadingComponent, i5.SlicePipe, i5.DatePipe], styles: [".data-context-viewer[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: #f8f9fa;\n border-radius: 8px;\n overflow: hidden;\n min-height: 0;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n margin-top: 16px;\n color: #656565;\n font-size: 14px;\n}\n\n\n\n.data-context-header[_ngcontent-%COMP%] {\n background-color: #ffffff;\n padding: 24px;\n border-bottom: 1px solid #e2e8f0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n font-size: 24px;\n color: #2196f3;\n}\n\n.header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 24px;\n font-weight: 500;\n color: #333333;\n}\n\n.header-description[_ngcontent-%COMP%] {\n margin: 8px 0 16px 0;\n color: #656565;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.header-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #656565;\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #9e9e9e;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n}\n\n.copy-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n background-color: #fee;\n color: #c62828;\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n}\n\n.error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n color: #9e9e9e;\n margin-right: 8px;\n}\n\n\n\n.items-container[_ngcontent-%COMP%] {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n\n\n.data-context-card[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background-color: #f8f9fa;\n}\n\n.card-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.card-description[_ngcontent-%COMP%] {\n color: #656565;\n font-size: 14px;\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n font-size: 16px;\n flex-shrink: 0;\n margin-top: -4px; \n\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] .card-content[_ngcontent-%COMP%] {\n max-height: 2000px;\n}\n\n\n\n.sql-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n color: #333333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #656565;\n}\n\n.sql-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background-color: #f5f5f5;\n border: 1px solid #e0e0e0;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: #333333;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background-color: #e3f2fd;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.action-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n.sql-code[_ngcontent-%COMP%] {\n background-color: #f5f5f5;\n padding: 16px;\n border-radius: 6px;\n margin: 0;\n overflow-x: auto;\n border: 1px solid #e0e0e0;\n}\n\n.sql-code[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n color: #333333;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n\n\n.metadata-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n background-color: #f8f9fa;\n padding: 12px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n}\n\n.metadata-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: #656565;\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: 14px;\n color: #333333;\n}\n\n.metadata-value[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n background-color: #ffffff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #e0e0e0;\n}\n\n.link-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n border-radius: 3px;\n font-size: 13px;\n}\n\n.link-btn[_ngcontent-%COMP%]:hover {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n\n.link-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: #4caf50;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: #f8f9fa;\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 20px;\n font-size: 12px;\n color: #656565;\n}\n\n.timestamp[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.no-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: #9e9e9e;\n}\n\n.no-items[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 16px;\n margin: 0;\n}\n\n\n\n.sql-preview-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog[_ngcontent-%COMP%] {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.sql-preview-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n color: #333333;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n font-size: 18px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n color: #333333;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: #f5f5f5;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 16px;\n color: #333333;\n line-height: 1.6;\n}\n\n.sql-preview-actions[_ngcontent-%COMP%] {\n padding: 16px 24px;\n border-top: 1px solid #e2e8f0;\n display: flex;\n justify-content: flex-end;\n}\n\n\n\n@media (max-width: 768px) {\n .data-context-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-actions[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n \n .items-container[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .card-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n \n .sql-section[_ngcontent-%COMP%], \n .metadata-section[_ngcontent-%COMP%] {\n padding: 0 16px 16px;\n }\n \n .metadata-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n \n .sql-preview-dialog[_ngcontent-%COMP%] {\n width: 95%;\n margin: 16px;\n }\n}"] });
|
|
509
|
+
} }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.LoadingComponent, i5.SlicePipe, i5.DatePipe], styles: [".data-context-viewer[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n min-height: 0;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n margin-top: 16px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n\n\n.data-context-header[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n padding: 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n font-size: var(--mj-text-2xl);\n color: var(--mj-brand-primary);\n}\n\n.header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-2xl);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.header-description[_ngcontent-%COMP%] {\n margin: 8px 0 16px 0;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n line-height: 1.5;\n}\n\n.header-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.meta-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-disabled);\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n}\n\n.copy-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n background-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n}\n\n.error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n margin-right: 8px;\n}\n\n\n\n.items-container[_ngcontent-%COMP%] {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n\n\n.data-context-card[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-sm);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mj-shadow-lg);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.card-header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: var(--mj-text-sm);\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.card-description[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n font-size: var(--mj-text-base);\n flex-shrink: 0;\n margin-top: -4px; \n\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n}\n\n\n\n.card-content[_ngcontent-%COMP%] {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded[_ngcontent-%COMP%] .card-content[_ngcontent-%COMP%] {\n max-height: 2000px;\n}\n\n\n\n.sql-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 500;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.sql-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n padding: 6px 12px;\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background-color: var(--mj-brand-primary-subtle);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.action-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.sql-code[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-card);\n padding: 16px;\n border-radius: var(--mj-radius-md);\n margin: 0;\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n}\n\n.sql-code[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n line-height: 1.6;\n color: var(--mj-text-primary);\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n\n\n.metadata-section[_ngcontent-%COMP%] {\n padding: 0 24px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface-card);\n padding: 12px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n}\n\n.metadata-label[_ngcontent-%COMP%] {\n display: block;\n font-size: var(--mj-text-xs);\n font-weight: 500;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.metadata-value[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n background-color: var(--mj-bg-surface);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n border: 1px solid var(--mj-border-default);\n}\n\n.link-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n}\n\n.link-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n background-color: var(--mj-brand-primary-subtle);\n}\n\n.link-btn[_ngcontent-%COMP%] .fa-check[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 20px;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n\n.timestamp[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n\n\n.no-items[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: var(--mj-text-disabled);\n}\n\n.no-items[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: var(--mj-text-base);\n margin: 0;\n}\n\n\n\n.sql-preview-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog[_ngcontent-%COMP%] {\n background-color: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sql-preview-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-lg);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n font-size: var(--mj-text-lg);\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.sql-preview-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: var(--mj-bg-surface-card);\n}\n\n.sql-preview-content[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-base);\n color: var(--mj-text-primary);\n line-height: 1.6;\n}\n\n.sql-preview-actions[_ngcontent-%COMP%] {\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: flex-end;\n}\n\n\n\n@media (max-width: 768px) {\n .data-context-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-actions[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n\n .items-container[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .card-header[_ngcontent-%COMP%] {\n padding: 16px;\n }\n\n .sql-section[_ngcontent-%COMP%], \n .metadata-section[_ngcontent-%COMP%] {\n padding: 0 16px 16px;\n }\n\n .metadata-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .sql-preview-dialog[_ngcontent-%COMP%] {\n width: 95%;\n margin: 16px;\n }\n}"] });
|
|
510
510
|
}
|
|
511
511
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextComponent, [{
|
|
512
512
|
type: Component,
|
|
513
|
-
args: [{ standalone: false, selector: 'mj-data-context', template: "<div class=\"data-context-viewer\">\n @if (showLoader) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading data context...\" size=\"large\"></mj-loading>\n </div>\n } @else {\n <!-- Header Section -->\n <div class=\"data-context-header\">\n <div class=\"header-info\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-layer-group header-icon\"></i>\n <h2>{{ dataContextRecord?.Name || 'Data Context' }}</h2>\n </div>\n @if (dataContextRecord && dataContextRecord.Description) {\n <p class=\"header-description\">{{ dataContextRecord.Description }}</p>\n }\n <div class=\"header-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n ID: {{ dataContextRecord?.ID }}\n <button class=\"copy-btn\" (click)=\"copyToClipboard(dataContextRecord?.ID || '', 'context-id')\" title=\"Copy ID\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'context-id'\" [class.fa-check]=\"copiedField === 'context-id'\"></i>\n </button>\n </span>\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-list-ol\"></i>\n {{ itemCount }} {{ itemCount === 1 ? 'item' : 'items' }}\n </span>\n </div>\n </div>\n <div class=\"header-actions\">\n <button kendoButton look=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-rotate\"></i>\n Refresh\n </button>\n <button kendoButton look=\"flat\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n <i class=\"fa-solid fa-download\"></i>\n Export\n </button>\n </div>\n </div>\n\n @if (errorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n {{ errorMessage }}\n </div>\n }\n\n <!-- Search Bar -->\n <div class=\"search-container\">\n <kendo-textbox \n [(ngModel)]=\"searchTerm\" \n (ngModelChange)=\"onSearchChange()\"\n placeholder=\"Search items by type, SQL, entity name, or description...\"\n [clearButton]=\"true\"\n class=\"search-input\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n\n <!-- Data Context Items as Cards -->\n <div class=\"items-container\">\n @for (item of filteredItems; track item.ID; let i = $index) {\n <div class=\"data-context-card\" [class.expanded]=\"expandedItems[item.ID]\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleItemExpansion(item.ID)\">\n <div class=\"card-header-left\">\n <div class=\"type-badge\" [style.background-color]=\"getTypeColor(item.Type) + '20'\" [style.color]=\"getTypeColor(item.Type)\">\n <i [class]=\"getTypeIcon(item.Type)\"></i>\n <span>{{ item.Type }}</span>\n </div>\n @if (item.Description) {\n <span class=\"card-description\">{{ item.Description }}</span>\n }\n </div>\n <button class=\"expand-btn\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expandedItems[item.ID]\" [class.fa-chevron-up]=\"expandedItems[item.ID]\"></i>\n </button>\n </div>\n\n <!-- Card Content -->\n <div class=\"card-content\">\n <!-- SQL Section -->\n @if (item.SQL) {\n <div class=\"sql-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-code\"></i> SQL Query</h4>\n <div class=\"sql-actions\">\n <button class=\"action-btn\" (click)=\"copyToClipboard(item.SQL, 'sql-' + item.ID)\" title=\"Copy SQL\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'sql-' + item.ID\" [class.fa-check]=\"copiedField === 'sql-' + item.ID\"></i>\n {{ copiedField === 'sql-' + item.ID ? 'Copied!' : 'Copy' }}\n </button>\n <button class=\"action-btn\" (click)=\"previewSQLCode(item.SQL)\" title=\"Expand\">\n <i class=\"fa-solid fa-expand\"></i>\n Expand\n </button>\n </div>\n </div>\n <pre class=\"sql-code\"><code>{{ item.SQL }}</code></pre>\n </div>\n }\n\n <!-- Metadata Section -->\n <div class=\"metadata-section\">\n <div class=\"metadata-grid\">\n @if (item.EntityID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Entity</span>\n <div class=\"metadata-value\">\n <span>{{ getEntityName(item.EntityID) || 'Unknown' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToEntity(item.EntityID)\" title=\"View entity\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.ViewID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">View</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.ViewID }}\">{{ item.ViewID | slice:0:20 }}{{ item.ViewID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToView(item.ViewID)\" title=\"View details\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.QueryID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Query</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.QueryID }}\">{{ item.QueryID | slice:0:20 }}{{ item.QueryID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToQuery(item.QueryID)\" title=\"View query\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.RecordID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Record ID</span>\n <div class=\"metadata-value\">\n <code>{{ item.RecordID }}</code>\n <button class=\"link-btn\" (click)=\"copyToClipboard(item.RecordID, 'record-' + item.ID)\" title=\"Copy\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'record-' + item.ID\" [class.fa-check]=\"copiedField === 'record-' + item.ID\"></i>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"card-footer\">\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-clock\"></i>\n Created {{ item.__mj_CreatedAt | date:'short' }}\n </span>\n @if (item.__mj_UpdatedAt && item.__mj_UpdatedAt !== item.__mj_CreatedAt) {\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-pen\"></i>\n Updated {{ item.__mj_UpdatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n @if (filteredItems.length === 0) {\n <div class=\"no-items\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No items found</p>\n </div>\n }\n </div>\n }\n\n <!-- SQL Preview Dialog -->\n @if (showSQLPreview) {\n <div class=\"sql-preview-overlay\" (click)=\"closeSQLPreview()\">\n <div class=\"sql-preview-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"sql-preview-header\">\n <h3>SQL Preview</h3>\n <button class=\"close-btn\" (click)=\"closeSQLPreview()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"sql-preview-content\">\n <pre><code>{{ previewSQL }}</code></pre>\n </div>\n <div class=\"sql-preview-actions\">\n <button kendoButton (click)=\"copyToClipboard(previewSQL, 'preview-sql')\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'preview-sql'\" [class.fa-check]=\"copiedField === 'preview-sql'\"></i>\n {{ copiedField === 'preview-sql' ? 'Copied!' : 'Copy SQL' }}\n </button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".data-context-viewer {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: #f8f9fa;\n border-radius: 8px;\n overflow: hidden;\n min-height: 0;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text {\n margin-top: 16px;\n color: #656565;\n font-size: 14px;\n}\n\n/* Header Section */\n.data-context-header {\n background-color: #ffffff;\n padding: 24px;\n border-bottom: 1px solid #e2e8f0;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info {\n flex: 1;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon {\n font-size: 24px;\n color: #2196f3;\n}\n\n.header-title h2 {\n margin: 0;\n font-size: 24px;\n font-weight: 500;\n color: #333333;\n}\n\n.header-description {\n margin: 8px 0 16px 0;\n color: #656565;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.header-meta {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #656565;\n}\n\n.meta-item i {\n font-size: 12px;\n color: #9e9e9e;\n}\n\n.copy-btn {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn:hover {\n color: #2196f3;\n}\n\n.copy-btn .fa-check {\n color: #4caf50;\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Error Message */\n.error-message {\n background-color: #fee;\n color: #c62828;\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n}\n\n.error-message i {\n font-size: 16px;\n}\n\n/* Search Container */\n.search-container {\n padding: 16px 24px;\n background-color: #ffffff;\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.search-input {\n width: 100%;\n}\n\n.search-icon {\n color: #9e9e9e;\n margin-right: 8px;\n}\n\n/* Items Container */\n.items-container {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n/* Data Context Card */\n.data-context-card {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.data-context-card.expanded {\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n/* Card Header */\n.card-header {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header:hover {\n background-color: #f8f9fa;\n}\n\n.card-header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 14px;\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge i {\n font-size: 14px;\n}\n\n.card-description {\n color: #656565;\n font-size: 14px;\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n font-size: 16px;\n flex-shrink: 0;\n margin-top: -4px; /* Align with top of content */\n}\n\n.expand-btn:hover {\n color: #2196f3;\n}\n\n/* Card Content */\n.card-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded .card-content {\n max-height: 2000px;\n}\n\n/* SQL Section */\n.sql-section {\n padding: 0 24px 20px;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n color: #333333;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header h4 i {\n font-size: 14px;\n color: #656565;\n}\n\n.sql-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn {\n background-color: #f5f5f5;\n border: 1px solid #e0e0e0;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: #333333;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background-color: #e3f2fd;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.action-btn .fa-check {\n color: #4caf50;\n}\n\n.sql-code {\n background-color: #f5f5f5;\n padding: 16px;\n border-radius: 6px;\n margin: 0;\n overflow-x: auto;\n border: 1px solid #e0e0e0;\n}\n\n.sql-code code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 14px;\n line-height: 1.6;\n color: #333333;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Metadata Section */\n.metadata-section {\n padding: 0 24px 20px;\n}\n\n.metadata-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item {\n background-color: #f8f9fa;\n padding: 12px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n}\n\n.metadata-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: #656565;\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: 14px;\n color: #333333;\n}\n\n.metadata-value code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n background-color: #ffffff;\n padding: 2px 6px;\n border-radius: 3px;\n border: 1px solid #e0e0e0;\n}\n\n.link-btn {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: #656565;\n transition: all 0.2s;\n border-radius: 3px;\n font-size: 13px;\n}\n\n.link-btn:hover {\n color: #2196f3;\n background-color: #e3f2fd;\n}\n\n.link-btn .fa-check {\n color: #4caf50;\n}\n\n/* Card Footer */\n.card-footer {\n padding: 16px 24px;\n background-color: #f8f9fa;\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 20px;\n font-size: 12px;\n color: #656565;\n}\n\n.timestamp {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp i {\n font-size: 11px;\n}\n\n/* No Items */\n.no-items {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: #9e9e9e;\n}\n\n.no-items i {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items p {\n font-size: 16px;\n margin: 0;\n}\n\n/* SQL Preview Modal */\n.sql-preview-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog {\n background-color: #ffffff;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.sql-preview-header h3 {\n margin: 0;\n font-size: 18px;\n font-weight: 500;\n color: #333333;\n}\n\n.close-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: #656565;\n transition: color 0.2s;\n font-size: 18px;\n}\n\n.close-btn:hover {\n color: #333333;\n}\n\n.sql-preview-content {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: #f5f5f5;\n}\n\n.sql-preview-content pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 16px;\n color: #333333;\n line-height: 1.6;\n}\n\n.sql-preview-actions {\n padding: 16px 24px;\n border-top: 1px solid #e2e8f0;\n display: flex;\n justify-content: flex-end;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .data-context-header {\n flex-direction: column;\n gap: 16px;\n }\n \n .header-actions {\n width: 100%;\n justify-content: flex-start;\n }\n \n .items-container {\n padding: 16px;\n }\n \n .card-header {\n padding: 16px;\n }\n \n .sql-section,\n .metadata-section {\n padding: 0 16px 16px;\n }\n \n .metadata-grid {\n grid-template-columns: 1fr;\n }\n \n .sql-preview-dialog {\n width: 95%;\n margin: 16px;\n }\n}"] }]
|
|
513
|
+
args: [{ standalone: false, selector: 'mj-data-context', template: "<div class=\"data-context-viewer\">\n @if (showLoader) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading data context...\" size=\"large\"></mj-loading>\n </div>\n } @else {\n <!-- Header Section -->\n <div class=\"data-context-header\">\n <div class=\"header-info\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-layer-group header-icon\"></i>\n <h2>{{ dataContextRecord?.Name || 'Data Context' }}</h2>\n </div>\n @if (dataContextRecord && dataContextRecord.Description) {\n <p class=\"header-description\">{{ dataContextRecord.Description }}</p>\n }\n <div class=\"header-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-fingerprint\"></i>\n ID: {{ dataContextRecord?.ID }}\n <button class=\"copy-btn\" (click)=\"copyToClipboard(dataContextRecord?.ID || '', 'context-id')\" title=\"Copy ID\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'context-id'\" [class.fa-check]=\"copiedField === 'context-id'\"></i>\n </button>\n </span>\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-list-ol\"></i>\n {{ itemCount }} {{ itemCount === 1 ? 'item' : 'items' }}\n </span>\n </div>\n </div>\n <div class=\"header-actions\">\n <button kendoButton look=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-rotate\"></i>\n Refresh\n </button>\n <button kendoButton look=\"flat\" (click)=\"exportToCSV()\" title=\"Export to CSV\">\n <i class=\"fa-solid fa-download\"></i>\n Export\n </button>\n </div>\n </div>\n\n @if (errorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-circle-exclamation\"></i>\n {{ errorMessage }}\n </div>\n }\n\n <!-- Search Bar -->\n <div class=\"search-container\">\n <kendo-textbox \n [(ngModel)]=\"searchTerm\" \n (ngModelChange)=\"onSearchChange()\"\n placeholder=\"Search items by type, SQL, entity name, or description...\"\n [clearButton]=\"true\"\n class=\"search-input\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n </ng-template>\n </kendo-textbox>\n </div>\n\n <!-- Data Context Items as Cards -->\n <div class=\"items-container\">\n @for (item of filteredItems; track item.ID; let i = $index) {\n <div class=\"data-context-card\" [class.expanded]=\"expandedItems[item.ID]\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleItemExpansion(item.ID)\">\n <div class=\"card-header-left\">\n <div class=\"type-badge\" [style.background-color]=\"getTypeColor(item.Type) + '20'\" [style.color]=\"getTypeColor(item.Type)\">\n <i [class]=\"getTypeIcon(item.Type)\"></i>\n <span>{{ item.Type }}</span>\n </div>\n @if (item.Description) {\n <span class=\"card-description\">{{ item.Description }}</span>\n }\n </div>\n <button class=\"expand-btn\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expandedItems[item.ID]\" [class.fa-chevron-up]=\"expandedItems[item.ID]\"></i>\n </button>\n </div>\n\n <!-- Card Content -->\n <div class=\"card-content\">\n <!-- SQL Section -->\n @if (item.SQL) {\n <div class=\"sql-section\">\n <div class=\"section-header\">\n <h4><i class=\"fa-solid fa-code\"></i> SQL Query</h4>\n <div class=\"sql-actions\">\n <button class=\"action-btn\" (click)=\"copyToClipboard(item.SQL, 'sql-' + item.ID)\" title=\"Copy SQL\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'sql-' + item.ID\" [class.fa-check]=\"copiedField === 'sql-' + item.ID\"></i>\n {{ copiedField === 'sql-' + item.ID ? 'Copied!' : 'Copy' }}\n </button>\n <button class=\"action-btn\" (click)=\"previewSQLCode(item.SQL)\" title=\"Expand\">\n <i class=\"fa-solid fa-expand\"></i>\n Expand\n </button>\n </div>\n </div>\n <pre class=\"sql-code\"><code>{{ item.SQL }}</code></pre>\n </div>\n }\n\n <!-- Metadata Section -->\n <div class=\"metadata-section\">\n <div class=\"metadata-grid\">\n @if (item.EntityID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Entity</span>\n <div class=\"metadata-value\">\n <span>{{ getEntityName(item.EntityID) || 'Unknown' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToEntity(item.EntityID)\" title=\"View entity\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.ViewID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">View</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.ViewID }}\">{{ item.ViewID | slice:0:20 }}{{ item.ViewID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToView(item.ViewID)\" title=\"View details\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.QueryID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Query</span>\n <div class=\"metadata-value\">\n <span title=\"{{ item.QueryID }}\">{{ item.QueryID | slice:0:20 }}{{ item.QueryID.length > 20 ? '...' : '' }}</span>\n <button class=\"link-btn\" (click)=\"navigateToQuery(item.QueryID)\" title=\"View query\">\n <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n </div>\n }\n @if (item.RecordID) {\n <div class=\"metadata-item\">\n <span class=\"metadata-label\">Record ID</span>\n <div class=\"metadata-value\">\n <code>{{ item.RecordID }}</code>\n <button class=\"link-btn\" (click)=\"copyToClipboard(item.RecordID, 'record-' + item.ID)\" title=\"Copy\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'record-' + item.ID\" [class.fa-check]=\"copiedField === 'record-' + item.ID\"></i>\n </button>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"card-footer\">\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-clock\"></i>\n Created {{ item.__mj_CreatedAt | date:'short' }}\n </span>\n @if (item.__mj_UpdatedAt && item.__mj_UpdatedAt !== item.__mj_CreatedAt) {\n <span class=\"timestamp\">\n <i class=\"fa-solid fa-pen\"></i>\n Updated {{ item.__mj_UpdatedAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n </div>\n }\n\n @if (filteredItems.length === 0) {\n <div class=\"no-items\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No items found</p>\n </div>\n }\n </div>\n }\n\n <!-- SQL Preview Dialog -->\n @if (showSQLPreview) {\n <div class=\"sql-preview-overlay\" (click)=\"closeSQLPreview()\">\n <div class=\"sql-preview-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"sql-preview-header\">\n <h3>SQL Preview</h3>\n <button class=\"close-btn\" (click)=\"closeSQLPreview()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"sql-preview-content\">\n <pre><code>{{ previewSQL }}</code></pre>\n </div>\n <div class=\"sql-preview-actions\">\n <button kendoButton (click)=\"copyToClipboard(previewSQL, 'preview-sql')\">\n <i class=\"fa-solid\" [class.fa-copy]=\"copiedField !== 'preview-sql'\" [class.fa-check]=\"copiedField === 'preview-sql'\"></i>\n {{ copiedField === 'preview-sql' ? 'Copied!' : 'Copy SQL' }}\n </button>\n </div>\n </div>\n </div>\n }\n</div>", styles: [".data-context-viewer {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n min-height: 0;\n}\n\n/* Loading State */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n.loading-text {\n margin-top: 16px;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n/* Header Section */\n.data-context-header {\n background-color: var(--mj-bg-surface);\n padding: 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-shrink: 0;\n}\n\n.header-info {\n flex: 1;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.header-icon {\n font-size: var(--mj-text-2xl);\n color: var(--mj-brand-primary);\n}\n\n.header-title h2 {\n margin: 0;\n font-size: var(--mj-text-2xl);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.header-description {\n margin: 8px 0 16px 0;\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n line-height: 1.5;\n}\n\n.header-meta {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.meta-item {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.meta-item i {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-disabled);\n}\n\n.copy-btn {\n background: none;\n border: none;\n padding: 4px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n margin-left: 4px;\n}\n\n.copy-btn:hover {\n color: var(--mj-brand-primary);\n}\n\n.copy-btn .fa-check {\n color: var(--mj-status-success);\n}\n\n.header-actions {\n display: flex;\n gap: 8px;\n}\n\n/* Error Message */\n.error-message {\n background-color: var(--mj-status-error-subtle);\n color: var(--mj-status-error);\n padding: 12px 16px;\n margin: 16px 24px;\n border-radius: var(--mj-radius-sm);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: var(--mj-text-sm);\n}\n\n.error-message i {\n font-size: var(--mj-text-base);\n}\n\n/* Search Container */\n.search-container {\n padding: 16px 24px;\n background-color: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.search-input {\n width: 100%;\n}\n\n.search-icon {\n color: var(--mj-text-disabled);\n margin-right: 8px;\n}\n\n/* Items Container */\n.items-container {\n height: 100%;\n padding: 24px;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n}\n\n/* Data Context Card */\n.data-context-card {\n background-color: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-sm);\n margin-bottom: 16px;\n transition: all 0.3s ease;\n overflow: hidden;\n}\n\n.data-context-card:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.data-context-card.expanded {\n box-shadow: var(--mj-shadow-lg);\n}\n\n/* Card Header */\n.card-header {\n padding: 20px 24px;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n transition: background-color 0.2s;\n gap: 16px;\n}\n\n.card-header:hover {\n background-color: var(--mj-bg-surface-card);\n}\n\n.card-header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n}\n\n.type-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: var(--mj-text-sm);\n font-weight: 500;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.type-badge i {\n font-size: var(--mj-text-sm);\n}\n\n.card-description {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n flex: 1;\n line-height: 1.4;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.expand-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n font-size: var(--mj-text-base);\n flex-shrink: 0;\n margin-top: -4px; /* Align with top of content */\n}\n\n.expand-btn:hover {\n color: var(--mj-brand-primary);\n}\n\n/* Card Content */\n.card-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n\n.data-context-card.expanded .card-content {\n max-height: 2000px;\n}\n\n/* SQL Section */\n.sql-section {\n padding: 0 24px 20px;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.section-header h4 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: 500;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-header h4 i {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n}\n\n.sql-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn {\n background-color: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n padding: 6px 12px;\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background-color: var(--mj-brand-primary-subtle);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.action-btn .fa-check {\n color: var(--mj-status-success);\n}\n\n.sql-code {\n background-color: var(--mj-bg-surface-card);\n padding: 16px;\n border-radius: var(--mj-radius-md);\n margin: 0;\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n}\n\n.sql-code code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n line-height: 1.6;\n color: var(--mj-text-primary);\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n/* Metadata Section */\n.metadata-section {\n padding: 0 24px 20px;\n}\n\n.metadata-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n}\n\n.metadata-item {\n background-color: var(--mj-bg-surface-card);\n padding: 12px;\n border-radius: var(--mj-radius-md);\n border: 1px solid var(--mj-border-default);\n}\n\n.metadata-label {\n display: block;\n font-size: var(--mj-text-xs);\n font-weight: 500;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n margin-bottom: 6px;\n}\n\n.metadata-value {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.metadata-value code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-sm);\n background-color: var(--mj-bg-surface);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n border: 1px solid var(--mj-border-default);\n}\n\n.link-btn {\n background: none;\n border: none;\n padding: 4px 6px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: all 0.2s;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n}\n\n.link-btn:hover {\n color: var(--mj-brand-primary);\n background-color: var(--mj-brand-primary-subtle);\n}\n\n.link-btn .fa-check {\n color: var(--mj-status-success);\n}\n\n/* Card Footer */\n.card-footer {\n padding: 16px 24px;\n background-color: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 20px;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n\n.timestamp {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.timestamp i {\n font-size: 11px;\n}\n\n/* No Items */\n.no-items {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 80px 20px;\n color: var(--mj-text-disabled);\n}\n\n.no-items i {\n font-size: 48px;\n margin-bottom: 16px;\n}\n\n.no-items p {\n font-size: var(--mj-text-base);\n margin: 0;\n}\n\n/* SQL Preview Modal */\n.sql-preview-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.sql-preview-dialog {\n background-color: var(--mj-bg-surface);\n border-radius: var(--mj-radius-md);\n box-shadow: var(--mj-shadow-lg);\n width: 90%;\n max-width: 1000px;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n}\n\n.sql-preview-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.sql-preview-header h3 {\n margin: 0;\n font-size: var(--mj-text-lg);\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.close-btn {\n background: none;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n transition: color 0.2s;\n font-size: var(--mj-text-lg);\n}\n\n.close-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.sql-preview-content {\n flex: 1;\n overflow: auto;\n padding: 24px;\n background-color: var(--mj-bg-surface-card);\n}\n\n.sql-preview-content pre {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.sql-preview-content code {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: var(--mj-text-base);\n color: var(--mj-text-primary);\n line-height: 1.6;\n}\n\n.sql-preview-actions {\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: flex-end;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .data-context-header {\n flex-direction: column;\n gap: 16px;\n }\n\n .header-actions {\n width: 100%;\n justify-content: flex-start;\n }\n\n .items-container {\n padding: 16px;\n }\n\n .card-header {\n padding: 16px;\n }\n\n .sql-section,\n .metadata-section {\n padding: 0 16px 16px;\n }\n\n .metadata-grid {\n grid-template-columns: 1fr;\n }\n\n .sql-preview-dialog {\n width: 95%;\n margin: 16px;\n }\n}\n"] }]
|
|
514
514
|
}], null, { dataContextId: [{
|
|
515
515
|
type: Input
|
|
516
516
|
}], Provider: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-data-context",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.13.0",
|
|
4
4
|
"description": "MemberJunction: Angular component and pop-up window to display and edit the contents of a data context.",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@angular/forms": "21.1.3",
|
|
31
|
-
"@memberjunction/core": "5.
|
|
32
|
-
"@memberjunction/core-entities": "5.
|
|
33
|
-
"@memberjunction/global": "5.
|
|
34
|
-
"@memberjunction/ng-container-directives": "5.
|
|
35
|
-
"@memberjunction/ng-shared-generic": "5.
|
|
31
|
+
"@memberjunction/core": "5.13.0",
|
|
32
|
+
"@memberjunction/core-entities": "5.13.0",
|
|
33
|
+
"@memberjunction/global": "5.13.0",
|
|
34
|
+
"@memberjunction/ng-container-directives": "5.13.0",
|
|
35
|
+
"@memberjunction/ng-shared-generic": "5.13.0",
|
|
36
36
|
"@progress/kendo-angular-buttons": "22.0.1",
|
|
37
37
|
"@progress/kendo-angular-dialog": "22.0.1",
|
|
38
38
|
"@progress/kendo-angular-inputs": "22.0.1",
|