@memberjunction/ng-data-context 5.43.0 → 5.45.0

package/dist/lib/module.d.ts

@@ -8,7 +8,7 @@ import * as i6 from "@memberjunction/ng-container-directives";
 import * as i7 from "@memberjunction/ng-shared-generic";
 export declare class DataContextModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DataContextModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DataContextModule, [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.MJButtonDirective, typeof i5.MJWindowComponent, typeof i5.MJWindowTitlebarComponent, typeof i6.ContainerDirectivesModule, typeof i7.SharedGenericModule], [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DataContextModule, [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.MJButtonDirective, typeof i5.MJEmptyStateComponent, typeof i5.MJWindowComponent, typeof i5.MJWindowTitlebarComponent, typeof i6.ContainerDirectivesModule, typeof i7.SharedGenericModule], [typeof i1.DataContextComponent, typeof i2.DataContextDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DataContextModule>;
 }
 //# sourceMappingURL=module.d.ts.map

package/dist/lib/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;AAYA,qBAmBa,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB;0CAAjB,iBAAiB;CAAI"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":";;;;;;;;AAYA,qBAoBa,iBAAiB;yCAAjB,iBAAiB;0CAAjB,iBAAiB;0CAAjB,iBAAiB;CAAI"}

package/dist/lib/module.js

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 // MJ UI Components
-import { MJButtonDirective, MJWindowComponent, MJWindowTitlebarComponent } from '@memberjunction/ng-ui-components';
+import { MJButtonDirective, MJEmptyStateComponent, MJWindowComponent, MJWindowTitlebarComponent } from '@memberjunction/ng-ui-components';
 import { DataContextComponent } from './ng-data-context.component';
 import { DataContextDialogComponent } from './ng-data-context-dialog.component';
 import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
@@ -13,6 +13,7 @@ export class DataContextModule {
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DataContextModule });
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
             FormsModule,
+            MJEmptyStateComponent,
             MJWindowComponent,
             MJWindowTitlebarComponent,
             ContainerDirectivesModule,
@@ -29,6 +30,7 @@ export class DataContextModule {
                     CommonModule,
                     FormsModule,
                     MJButtonDirective,
+                    MJEmptyStateComponent,
                     MJWindowComponent,
                     MJWindowTitlebarComponent,
                     ContainerDirectivesModule,
@@ -44,6 +46,7 @@ export class DataContextModule {
         DataContextDialogComponent], imports: [CommonModule,
         FormsModule,
         MJButtonDirective,
+        MJEmptyStateComponent,
         MJWindowComponent,
         MJWindowTitlebarComponent,
         ContainerDirectivesModule,

package/dist/lib/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,mBAAmB;AACnB,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAEnH,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;;AAqBxE,MAAM,OAAO,iBAAiB;2GAAjB,iBAAiB;4DAAjB,iBAAiB;gEAb1B,YAAY;YACZ,WAAW;YAEX,iBAAiB;YACjB,yBAAyB;YACzB,yBAAyB;YACzB,mBAAmB;;iFAOV,iBAAiB;cAnB7B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,0BAA0B;iBAC3B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,iBAAiB;oBACjB,iBAAiB;oBACjB,yBAAyB;oBACzB,yBAAyB;oBACzB,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,oBAAoB;oBACpB,0BAA0B;iBAC3B;aACF;;wFACY,iBAAiB,mBAjB1B,oBAAoB;QACpB,0BAA0B,aAG1B,YAAY;QACZ,WAAW;QACX,iBAAiB;QACjB,iBAAiB;QACjB,yBAAyB;QACzB,yBAAyB;QACzB,mBAAmB,aAGnB,oBAAoB;QACpB,0BAA0B","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n// MJ UI Components\nimport { MJButtonDirective, MJWindowComponent, MJWindowTitlebarComponent } from '@memberjunction/ng-ui-components';\n\nimport { DataContextComponent } from './ng-data-context.component';\nimport { DataContextDialogComponent } from './ng-data-context-dialog.component';\nimport { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\n\n@NgModule({\n  declarations: [\n    DataContextComponent,\n    DataContextDialogComponent\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MJButtonDirective,\n    MJWindowComponent,\n    MJWindowTitlebarComponent,\n    ContainerDirectivesModule,\n    SharedGenericModule\n  ],\n  exports: [\n    DataContextComponent,\n    DataContextDialogComponent\n  ]\n})\nexport class DataContextModule { }"]}
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/lib/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,mBAAmB;AACnB,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAE1I,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;;AAsBxE,MAAM,OAAO,iBAAiB;2GAAjB,iBAAiB;4DAAjB,iBAAiB;gEAd1B,YAAY;YACZ,WAAW;YAEX,qBAAqB;YACrB,iBAAiB;YACjB,yBAAyB;YACzB,yBAAyB;YACzB,mBAAmB;;iFAOV,iBAAiB;cApB7B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,oBAAoB;oBACpB,0BAA0B;iBAC3B;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,iBAAiB;oBACjB,qBAAqB;oBACrB,iBAAiB;oBACjB,yBAAyB;oBACzB,yBAAyB;oBACzB,mBAAmB;iBACpB;gBACD,OAAO,EAAE;oBACP,oBAAoB;oBACpB,0BAA0B;iBAC3B;aACF;;wFACY,iBAAiB,mBAlB1B,oBAAoB;QACpB,0BAA0B,aAG1B,YAAY;QACZ,WAAW;QACX,iBAAiB;QACjB,qBAAqB;QACrB,iBAAiB;QACjB,yBAAyB;QACzB,yBAAyB;QACzB,mBAAmB,aAGnB,oBAAoB;QACpB,0BAA0B","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n// MJ UI Components\nimport { MJButtonDirective, MJEmptyStateComponent, MJWindowComponent, MJWindowTitlebarComponent } from '@memberjunction/ng-ui-components';\n\nimport { DataContextComponent } from './ng-data-context.component';\nimport { DataContextDialogComponent } from './ng-data-context-dialog.component';\nimport { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\n\n@NgModule({\n  declarations: [\n    DataContextComponent,\n    DataContextDialogComponent\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MJButtonDirective,\n    MJEmptyStateComponent,\n    MJWindowComponent,\n    MJWindowTitlebarComponent,\n    ContainerDirectivesModule,\n    SharedGenericModule\n  ],\n  exports: [\n    DataContextComponent,\n    DataContextDialogComponent\n  ]\n})\nexport class DataContextModule { }"]}

package/dist/lib/ng-data-context.component.js

@@ -217,11 +217,10 @@ function DataContextComponent_Conditional_2_For_30_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(item_r4.__mj_UpdatedAt && item_r4.__mj_UpdatedAt !== item_r4.__mj_CreatedAt ? 23 : -1);
 } }
 function DataContextComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "i", 59);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No items found");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 27);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Variant", ctx_r1.searchTerm ? "no-results" : "empty")("Icon", ctx_r1.searchTerm ? "fa-solid fa-magnifying-glass" : "fa-solid fa-inbox")("Title", ctx_r1.searchTerm ? "No matching items" : "No items found")("Message", ctx_r1.searchTerm ? "Try a different search term." : "");
 } }
 function DataContextComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -261,7 +260,7 @@ function DataContextComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(28, "div", 25);
     i0.ɵɵrepeaterCreate(29, DataContextComponent_Conditional_2_For_30_Template, 24, 24, "div", 26, _forTrack0);
-    i0.ɵɵconditionalCreate(31, DataContextComponent_Conditional_2_Conditional_31_Template, 4, 0, "div", 27);
+    i0.ɵɵconditionalCreate(31, DataContextComponent_Conditional_2_Conditional_31_Template, 1, 4, "mj-empty-state", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -286,21 +285,21 @@ function DataContextComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function DataContextComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵelementStart(0, "div", 59);
     i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeSQLPreview()); });
-    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵelementStart(1, "div", 60);
     i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r10); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 62)(3, "h3");
+    i0.ɵɵelementStart(2, "div", 61)(3, "h3");
     i0.ɵɵtext(4, "SQL Preview");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 63);
+    i0.ɵɵelementStart(5, "button", 62);
     i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeSQLPreview()); });
-    i0.ɵɵelement(6, "i", 64);
+    i0.ɵɵelement(6, "i", 63);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 65)(8, "pre")(9, "code");
+    i0.ɵɵelementStart(7, "div", 64)(8, "pre")(9, "code");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 66)(12, "button", 67);
+    i0.ɵɵelementStart(11, "div", 65)(12, "button", 66);
     i0.ɵɵlistener("click", function DataContextComponent_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyToClipboard(ctx_r1.previewSQL, "preview-sql")); });
     i0.ɵɵelement(13, "i", 13);
     i0.ɵɵtext(14);
@@ -492,7 +491,7 @@ export class DataContextComponent {
         window.URL.revokeObjectURL(url);
     }
     static ɵfac = function DataContextComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataContextComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextComponent, selectors: [["mj-data-context"]], inputs: { dataContextId: "dataContextId", Provider: "Provider" }, standalone: false, decls: 4, vars: 2, consts: [[1, "data-context-viewer"], [1, "loading-container"], [1, "sql-preview-overlay"], ["text", "Loading data context...", "size", "large"], [1, "data-context-header"], [1, "header-info"], [1, "header-title"], [1, "fa-solid", "fa-layer-group", "header-icon"], [1, "header-description"], [1, "header-meta"], [1, "meta-item"], [1, "fa-solid", "fa-fingerprint"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-list-ol"], [1, "header-actions"], ["mjButton", "", "variant", "flat", "title", "Refresh", 3, "click"], [1, "fa-solid", "fa-rotate"], ["mjButton", "", "variant", "flat", "title", "Export to CSV", 3, "click"], [1, "fa-solid", "fa-download"], [1, "error-message"], [1, "search-container"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["placeholder", "Search items by type, SQL, entity name, or description...", 1, "mj-input", "search-input", 3, "ngModelChange", "ngModel"], [1, "items-container"], [1, "data-context-card", 3, "expanded"], [1, "no-items"], [1, "fa-solid", "fa-circle-exclamation"], [1, "data-context-card"], [1, "card-header", 3, "click"], [1, "card-header-left"], [1, "type-badge"], [1, "card-description"], [1, "expand-btn"], [1, "card-content"], [1, "sql-section"], [1, "metadata-section"], [1, "metadata-grid"], [1, "metadata-item"], [1, "card-footer"], [1, "timestamp"], [1, "fa-solid", "fa-clock"], [1, "section-header"], [1, "fa-solid", "fa-code"], [1, "sql-actions"], ["title", "Copy SQL", 1, "action-btn", 3, "click"], ["title", "Expand", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "sql-code"], [1, "metadata-label"], [1, "metadata-value"], ["title", "View entity", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [3, "title"], ["title", "View details", 1, "link-btn", 3, "click"], ["title", "View query", 1, "link-btn", 3, "click"], ["title", "Copy", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-inbox"], [1, "sql-preview-overlay", 3, "click"], [1, "sql-preview-dialog", 3, "click"], [1, "sql-preview-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sql-preview-content"], [1, "sql-preview-actions"], ["mjButton", "", 3, "click"]], template: function DataContextComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataContextComponent, selectors: [["mj-data-context"]], inputs: { dataContextId: "dataContextId", Provider: "Provider" }, standalone: false, decls: 4, vars: 2, consts: [[1, "data-context-viewer"], [1, "loading-container"], [1, "sql-preview-overlay"], ["text", "Loading data context...", "size", "large"], [1, "data-context-header"], [1, "header-info"], [1, "header-title"], [1, "fa-solid", "fa-layer-group", "header-icon"], [1, "header-description"], [1, "header-meta"], [1, "meta-item"], [1, "fa-solid", "fa-fingerprint"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid"], [1, "fa-solid", "fa-list-ol"], [1, "header-actions"], ["mjButton", "", "variant", "flat", "title", "Refresh", 3, "click"], [1, "fa-solid", "fa-rotate"], ["mjButton", "", "variant", "flat", "title", "Export to CSV", 3, "click"], [1, "fa-solid", "fa-download"], [1, "error-message"], [1, "search-container"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["placeholder", "Search items by type, SQL, entity name, or description...", 1, "mj-input", "search-input", 3, "ngModelChange", "ngModel"], [1, "items-container"], [1, "data-context-card", 3, "expanded"], [3, "Variant", "Icon", "Title", "Message"], [1, "fa-solid", "fa-circle-exclamation"], [1, "data-context-card"], [1, "card-header", 3, "click"], [1, "card-header-left"], [1, "type-badge"], [1, "card-description"], [1, "expand-btn"], [1, "card-content"], [1, "sql-section"], [1, "metadata-section"], [1, "metadata-grid"], [1, "metadata-item"], [1, "card-footer"], [1, "timestamp"], [1, "fa-solid", "fa-clock"], [1, "section-header"], [1, "fa-solid", "fa-code"], [1, "sql-actions"], ["title", "Copy SQL", 1, "action-btn", 3, "click"], ["title", "Expand", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "sql-code"], [1, "metadata-label"], [1, "metadata-value"], ["title", "View entity", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [3, "title"], ["title", "View details", 1, "link-btn", 3, "click"], ["title", "View query", 1, "link-btn", 3, "click"], ["title", "Copy", 1, "link-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "sql-preview-overlay", 3, "click"], [1, "sql-preview-dialog", 3, "click"], [1, "sql-preview-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "sql-preview-content"], [1, "sql-preview-actions"], ["mjButton", "", 3, "click"]], template: function DataContextComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, DataContextComponent_Conditional_1_Template, 2, 0, "div", 1)(2, DataContextComponent_Conditional_2_Template, 32, 12);
             i0.ɵɵconditionalCreate(3, DataContextComponent_Conditional_3_Template, 15, 6, "div", 2);
@@ -502,11 +501,11 @@ export class DataContextComponent {
             i0.ɵɵconditional(ctx.showLoader ? 1 : 2);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.showSQLPreview ? 3 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i3.LoadingComponent, i4.SlicePipe, i4.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}"] });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJEmptyStateComponent, i3.LoadingComponent, i4.SlicePipe, i4.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.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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataContextComponent, [{
         type: Component,
-        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 mjButton variant=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-rotate\"></i>\n                    Refresh\n                </button>\n                <button mjButton variant=\"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            <div class=\"search-input-wrapper\">\n                <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n                <input\n                    class=\"mj-input search-input\"\n                    [(ngModel)]=\"searchTerm\"\n                    (ngModelChange)=\"onSearchChange()\"\n                    placeholder=\"Search items by type, SQL, entity name, or description...\"\n                />\n            </div>\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 mjButton (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"] }]
+        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 mjButton variant=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-rotate\"></i>\n                    Refresh\n                </button>\n                <button mjButton variant=\"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            <div class=\"search-input-wrapper\">\n                <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n                <input\n                    class=\"mj-input search-input\"\n                    [(ngModel)]=\"searchTerm\"\n                    (ngModelChange)=\"onSearchChange()\"\n                    placeholder=\"Search items by type, SQL, entity name, or description...\"\n                />\n            </div>\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                <mj-empty-state\n                    [Variant]=\"searchTerm ? 'no-results' : 'empty'\"\n                    [Icon]=\"searchTerm ? 'fa-solid fa-magnifying-glass' : 'fa-solid fa-inbox'\"\n                    [Title]=\"searchTerm ? 'No matching items' : 'No items found'\"\n                    [Message]=\"searchTerm ? 'Try a different search term.' : ''\" />\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 mjButton (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/* 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"] }]
     }], null, { dataContextId: [{
             type: Input
         }], Provider: [{

package/dist/lib/ng-data-context.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"ng-data-context.component.js","sourceRoot":"","sources":["../../src/lib/ng-data-context.component.ts","../../src/lib/ng-data-context.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { IMetadataProvider, LogError, Metadata, RunView } from '@memberjunction/core';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport { MJDataContextEntity, MJDataContextItemEntity } from '@memberjunction/core-entities';\n\n@Component({\n  standalone: false,\n  selector: 'mj-data-context',\n  templateUrl: './ng-data-context.component.html',\n  styleUrls: ['./ng-data-context.component.css']\n})\nexport class DataContextComponent implements OnInit {\n  @Input() dataContextId!: string;\n  @Input() Provider: IMetadataProvider | null = null;\n \n  public dataContextRecord?: MJDataContextEntity;\n  public dataContextItems: MJDataContextItemEntity[] = [];\n  public showLoader: boolean = false;\n  public errorMessage: string = '';\n  public searchTerm: string = '';\n  \n  // UI state\n  public showSQLPreview: boolean = false;\n  public previewSQL: string = '';\n  public copiedField: string = '';\n  public expandedItems: { [key: string]: boolean } = {};\n\n  public get ProviderToUse(): IMetadataProvider {\n    return this.Provider ?? Metadata.Provider;\n  }\n\n  public get filteredItems(): MJDataContextItemEntity[] {\n    if (!this.searchTerm) {\n      return this.dataContextItems;\n    }\n    \n    const term = this.searchTerm.toLowerCase();\n    return this.dataContextItems.filter(item => \n      item.Type?.toLowerCase().includes(term) ||\n      item.SQL?.toLowerCase().includes(term) ||\n      (item.EntityID ? this.getEntityName(item.EntityID)?.toLowerCase().includes(term) : false) ||\n      item.Description?.toLowerCase().includes(term)\n    );\n  }\n\n  public get itemCount(): number {\n    return this.filteredItems.length;\n  }\n\n  ngOnInit(): void {\n    if(this.dataContextId){\n      this.showLoader = true;\n      this.LoadDataContext(this.dataContextId);\n    }\n  }\n\n  async LoadDataContext(dataContextId: string) {\n    try {\n      if (dataContextId) {\n        const p = this.ProviderToUse;\n        this.dataContextRecord = await p.GetEntityObject<MJDataContextEntity>(\"MJ: Data Contexts\", p.CurrentUser);\n        await this.dataContextRecord.Load(dataContextId);\n\n        const rv = RunView.FromMetadataProvider(p);\n        const response = await rv.RunView<MJDataContextItemEntity>(\n          { \n            EntityName: \"MJ: Data Context Items\", \n            ExtraFilter: `DataContextID='${dataContextId}'`,\n            OrderBy: '__mj_CreatedAt DESC',\n            ResultType: 'entity_object'\n          });\n          \n        if(response.Success){\n          this.dataContextItems = response.Results;\n          this.showLoader = false;\n        } else {\n          this.errorMessage = response.ErrorMessage || 'Failed to load data context items';\n          LogError(response.ErrorMessage);\n          this.showLoader = false;\n        }\n      }\n    } catch (error) {\n      this.errorMessage = 'An error occurred while loading the data context';\n      LogError(error);\n      this.showLoader = false;\n    }\n  }\n\n  public getTypeIcon(type: string): string {\n    const typeIcons: Record<string, string> = {\n      'sql': 'fa-solid fa-database',\n      'view': 'fa-solid fa-table',\n      'query': 'fa-solid fa-magnifying-glass',\n      'entity': 'fa-solid fa-cube',\n      'record': 'fa-solid fa-file'\n    };\n    \n    return typeIcons[type?.toLowerCase()] || 'fa-solid fa-question';\n  }\n\n  public getTypeColor(type: string): string {\n    const typeColors: Record<string, string> = {\n      'sql': '#2196f3',\n      'view': '#4caf50',\n      'query': '#ff9800',\n      'entity': '#9c27b0',\n      'record': '#f44336'\n    };\n    \n    return typeColors[type?.toLowerCase()] || '#757575';\n  }\n\n  public getEntityName(entityId: string | null): string | undefined {\n    if (!entityId) return undefined;\n    const md = this.ProviderToUse;\n    return md.Entities.find(e => UUIDsEqual(e.ID, entityId))?.Name;\n  }\n\n  public async getViewName(viewId: string): Promise<string | undefined> {\n    try {\n      const p = this.ProviderToUse;\n      const view = await p.GetEntityObject(\"Views\", p.CurrentUser);\n      await (view as any).Load(viewId);\n      return (view as any).Get('Name');\n    } catch {\n      return undefined;\n    }\n  }\n\n  public async getQueryName(queryId: string): Promise<string | undefined> {\n    try {\n      const p = this.ProviderToUse;\n      const query = await p.GetEntityObject(\"MJ: Queries\", p.CurrentUser);\n      await (query as any).Load(queryId);\n      return (query as any).Get('Name');\n    } catch {\n      return undefined;\n    }\n  }\n\n  public onSearchChange(): void {\n    // Reset expanded items when searching\n    this.expandedItems = {};\n  }\n\n  public toggleItemExpansion(itemId: string): void {\n    this.expandedItems[itemId] = !this.expandedItems[itemId];\n  }\n\n  public async copyToClipboard(text: string, fieldName: string): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(text);\n      this.copiedField = fieldName;\n      setTimeout(() => {\n        this.copiedField = '';\n      }, 2000);\n    } catch (err) {\n      LogError(`Failed to copy to clipboard: ${err}`);\n    }\n  }\n\n  public previewSQLCode(sql: string): void {\n    this.previewSQL = sql;\n    this.showSQLPreview = true;\n  }\n\n  public closeSQLPreview(): void {\n    this.showSQLPreview = false;\n    this.previewSQL = '';\n  }\n\n  public navigateToEntity(entityId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to entity:', entityId);\n  }\n\n  public navigateToView(viewId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to view:', viewId);\n  }\n\n  public navigateToQuery(queryId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to query:', queryId);\n  }\n\n  public async refresh(): Promise<void> {\n    this.showLoader = true;\n    await this.LoadDataContext(this.dataContextId);\n  }\n\n  public exportToCSV(): void {\n    // Implement CSV export functionality\n    const headers = ['Type', 'SQL', 'View', 'Query', 'Entity', 'Record ID', 'Description'];\n    const rows = this.filteredItems.map(item => [\n      item.Type,\n      item.SQL,\n      item.ViewID,\n      item.QueryID,\n      this.getEntityName(item.EntityID) || item.EntityID,\n      item.RecordID,\n      item.Description || ''\n    ]);\n    \n    const csv = [headers, ...rows].map(row => row.map(cell => `\"${cell}\"`).join(',')).join('\\n');\n    const blob = new Blob([csv], { type: 'text/csv' });\n    const url = window.URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `data-context-${this.dataContextRecord?.Name || this.dataContextId}.csv`;\n    a.click();\n    window.URL.revokeObjectURL(url);\n  }\n}","<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 mjButton variant=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-rotate\"></i>\n                    Refresh\n                </button>\n                <button mjButton variant=\"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            <div class=\"search-input-wrapper\">\n                <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n                <input\n                    class=\"mj-input search-input\"\n                    [(ngModel)]=\"searchTerm\"\n                    (ngModelChange)=\"onSearchChange()\"\n                    placeholder=\"Search items by type, SQL, entity name, or description...\"\n                />\n            </div>\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 mjButton (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>"]}
+{"version":3,"file":"ng-data-context.component.js","sourceRoot":"","sources":["../../src/lib/ng-data-context.component.ts","../../src/lib/ng-data-context.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { IMetadataProvider, LogError, Metadata, RunView } from '@memberjunction/core';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport { MJDataContextEntity, MJDataContextItemEntity } from '@memberjunction/core-entities';\n\n@Component({\n  standalone: false,\n  selector: 'mj-data-context',\n  templateUrl: './ng-data-context.component.html',\n  styleUrls: ['./ng-data-context.component.css']\n})\nexport class DataContextComponent implements OnInit {\n  @Input() dataContextId!: string;\n  @Input() Provider: IMetadataProvider | null = null;\n \n  public dataContextRecord?: MJDataContextEntity;\n  public dataContextItems: MJDataContextItemEntity[] = [];\n  public showLoader: boolean = false;\n  public errorMessage: string = '';\n  public searchTerm: string = '';\n  \n  // UI state\n  public showSQLPreview: boolean = false;\n  public previewSQL: string = '';\n  public copiedField: string = '';\n  public expandedItems: { [key: string]: boolean } = {};\n\n  public get ProviderToUse(): IMetadataProvider {\n    return this.Provider ?? Metadata.Provider;\n  }\n\n  public get filteredItems(): MJDataContextItemEntity[] {\n    if (!this.searchTerm) {\n      return this.dataContextItems;\n    }\n    \n    const term = this.searchTerm.toLowerCase();\n    return this.dataContextItems.filter(item => \n      item.Type?.toLowerCase().includes(term) ||\n      item.SQL?.toLowerCase().includes(term) ||\n      (item.EntityID ? this.getEntityName(item.EntityID)?.toLowerCase().includes(term) : false) ||\n      item.Description?.toLowerCase().includes(term)\n    );\n  }\n\n  public get itemCount(): number {\n    return this.filteredItems.length;\n  }\n\n  ngOnInit(): void {\n    if(this.dataContextId){\n      this.showLoader = true;\n      this.LoadDataContext(this.dataContextId);\n    }\n  }\n\n  async LoadDataContext(dataContextId: string) {\n    try {\n      if (dataContextId) {\n        const p = this.ProviderToUse;\n        this.dataContextRecord = await p.GetEntityObject<MJDataContextEntity>(\"MJ: Data Contexts\", p.CurrentUser);\n        await this.dataContextRecord.Load(dataContextId);\n\n        const rv = RunView.FromMetadataProvider(p);\n        const response = await rv.RunView<MJDataContextItemEntity>(\n          { \n            EntityName: \"MJ: Data Context Items\", \n            ExtraFilter: `DataContextID='${dataContextId}'`,\n            OrderBy: '__mj_CreatedAt DESC',\n            ResultType: 'entity_object'\n          });\n          \n        if(response.Success){\n          this.dataContextItems = response.Results;\n          this.showLoader = false;\n        } else {\n          this.errorMessage = response.ErrorMessage || 'Failed to load data context items';\n          LogError(response.ErrorMessage);\n          this.showLoader = false;\n        }\n      }\n    } catch (error) {\n      this.errorMessage = 'An error occurred while loading the data context';\n      LogError(error);\n      this.showLoader = false;\n    }\n  }\n\n  public getTypeIcon(type: string): string {\n    const typeIcons: Record<string, string> = {\n      'sql': 'fa-solid fa-database',\n      'view': 'fa-solid fa-table',\n      'query': 'fa-solid fa-magnifying-glass',\n      'entity': 'fa-solid fa-cube',\n      'record': 'fa-solid fa-file'\n    };\n    \n    return typeIcons[type?.toLowerCase()] || 'fa-solid fa-question';\n  }\n\n  public getTypeColor(type: string): string {\n    const typeColors: Record<string, string> = {\n      'sql': '#2196f3',\n      'view': '#4caf50',\n      'query': '#ff9800',\n      'entity': '#9c27b0',\n      'record': '#f44336'\n    };\n    \n    return typeColors[type?.toLowerCase()] || '#757575';\n  }\n\n  public getEntityName(entityId: string | null): string | undefined {\n    if (!entityId) return undefined;\n    const md = this.ProviderToUse;\n    return md.Entities.find(e => UUIDsEqual(e.ID, entityId))?.Name;\n  }\n\n  public async getViewName(viewId: string): Promise<string | undefined> {\n    try {\n      const p = this.ProviderToUse;\n      const view = await p.GetEntityObject(\"Views\", p.CurrentUser);\n      await (view as any).Load(viewId);\n      return (view as any).Get('Name');\n    } catch {\n      return undefined;\n    }\n  }\n\n  public async getQueryName(queryId: string): Promise<string | undefined> {\n    try {\n      const p = this.ProviderToUse;\n      const query = await p.GetEntityObject(\"MJ: Queries\", p.CurrentUser);\n      await (query as any).Load(queryId);\n      return (query as any).Get('Name');\n    } catch {\n      return undefined;\n    }\n  }\n\n  public onSearchChange(): void {\n    // Reset expanded items when searching\n    this.expandedItems = {};\n  }\n\n  public toggleItemExpansion(itemId: string): void {\n    this.expandedItems[itemId] = !this.expandedItems[itemId];\n  }\n\n  public async copyToClipboard(text: string, fieldName: string): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(text);\n      this.copiedField = fieldName;\n      setTimeout(() => {\n        this.copiedField = '';\n      }, 2000);\n    } catch (err) {\n      LogError(`Failed to copy to clipboard: ${err}`);\n    }\n  }\n\n  public previewSQLCode(sql: string): void {\n    this.previewSQL = sql;\n    this.showSQLPreview = true;\n  }\n\n  public closeSQLPreview(): void {\n    this.showSQLPreview = false;\n    this.previewSQL = '';\n  }\n\n  public navigateToEntity(entityId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to entity:', entityId);\n  }\n\n  public navigateToView(viewId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to view:', viewId);\n  }\n\n  public navigateToQuery(queryId: string): void {\n    // This would be implemented based on your navigation system\n    console.log('Navigate to query:', queryId);\n  }\n\n  public async refresh(): Promise<void> {\n    this.showLoader = true;\n    await this.LoadDataContext(this.dataContextId);\n  }\n\n  public exportToCSV(): void {\n    // Implement CSV export functionality\n    const headers = ['Type', 'SQL', 'View', 'Query', 'Entity', 'Record ID', 'Description'];\n    const rows = this.filteredItems.map(item => [\n      item.Type,\n      item.SQL,\n      item.ViewID,\n      item.QueryID,\n      this.getEntityName(item.EntityID) || item.EntityID,\n      item.RecordID,\n      item.Description || ''\n    ]);\n    \n    const csv = [headers, ...rows].map(row => row.map(cell => `\"${cell}\"`).join(',')).join('\\n');\n    const blob = new Blob([csv], { type: 'text/csv' });\n    const url = window.URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `data-context-${this.dataContextRecord?.Name || this.dataContextId}.csv`;\n    a.click();\n    window.URL.revokeObjectURL(url);\n  }\n}","<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 mjButton variant=\"flat\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-rotate\"></i>\n                    Refresh\n                </button>\n                <button mjButton variant=\"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            <div class=\"search-input-wrapper\">\n                <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n                <input\n                    class=\"mj-input search-input\"\n                    [(ngModel)]=\"searchTerm\"\n                    (ngModelChange)=\"onSearchChange()\"\n                    placeholder=\"Search items by type, SQL, entity name, or description...\"\n                />\n            </div>\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                <mj-empty-state\n                    [Variant]=\"searchTerm ? 'no-results' : 'empty'\"\n                    [Icon]=\"searchTerm ? 'fa-solid fa-magnifying-glass' : 'fa-solid fa-inbox'\"\n                    [Title]=\"searchTerm ? 'No matching items' : 'No items found'\"\n                    [Message]=\"searchTerm ? 'Try a different search term.' : ''\" />\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 mjButton (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>"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/ng-data-context",
-  "version": "5.43.0",
+  "version": "5.45.0",
   "description": "MemberJunction: Angular component and pop-up window to display and edit the contents of a data context.",
   "main": "./dist/public-api.js",
   "typings": "./dist/public-api.d.ts",
@@ -18,6 +18,7 @@
   "devDependencies": {
     "@angular/compiler": "21.1.3",
     "@angular/compiler-cli": "21.1.3",
+    "@memberjunction/ng-test-utils": "5.45.0",
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
@@ -26,13 +27,13 @@
   },
   "dependencies": {
     "@angular/forms": "21.1.3",
-    "@memberjunction/core": "5.43.0",
-    "@memberjunction/ng-base-types": "5.43.0",
-    "@memberjunction/core-entities": "5.43.0",
-    "@memberjunction/global": "5.43.0",
-    "@memberjunction/ng-container-directives": "5.43.0",
-    "@memberjunction/ng-shared-generic": "5.43.0",
-    "@memberjunction/ng-ui-components": "5.43.0",
+    "@memberjunction/core": "5.45.0",
+    "@memberjunction/ng-base-types": "5.45.0",
+    "@memberjunction/core-entities": "5.45.0",
+    "@memberjunction/global": "5.45.0",
+    "@memberjunction/ng-container-directives": "5.45.0",
+    "@memberjunction/ng-shared-generic": "5.45.0",
+    "@memberjunction/ng-ui-components": "5.45.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/dist/__tests__/exports.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=exports.test.d.ts.map

package/dist/__tests__/exports.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"exports.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/exports.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/exports.test.js

@@ -1,17 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { existsSync } from 'fs';
-import { resolve } from 'path';
-describe('@memberjunction/ng-data-context', () => {
-    it('should have a public API entry point', () => {
-        const pkgRoot = resolve(__dirname, '../..');
-        const hasPublicApi = existsSync(resolve(pkgRoot, 'src/public-api.ts'));
-        const hasIndex = existsSync(resolve(pkgRoot, 'src/index.ts'));
-        expect(hasPublicApi || hasIndex).toBe(true);
-    });
-    it('should have a package.json with correct name', () => {
-        const pkgRoot = resolve(__dirname, '../..');
-        const pkg = require(resolve(pkgRoot, 'package.json'));
-        expect(pkg.name).toBe('@memberjunction/ng-data-context');
-    });
-});
-//# sourceMappingURL=exports.test.js.map

package/dist/__tests__/exports.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"exports.test.js","sourceRoot":"","sources":["../../src/__tests__/exports.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;IAC/C,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;QAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC;QACvE,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9D,MAAM,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC5C,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;QACtD,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { describe, it, expect } from 'vitest';\nimport { existsSync } from 'fs';\nimport { resolve } from 'path';\n\ndescribe('@memberjunction/ng-data-context', () => {\n  it('should have a public API entry point', () => {\n    const pkgRoot = resolve(__dirname, '../..');\n    const hasPublicApi = existsSync(resolve(pkgRoot, 'src/public-api.ts'));\n    const hasIndex = existsSync(resolve(pkgRoot, 'src/index.ts'));\n    expect(hasPublicApi || hasIndex).toBe(true);\n  });\n\n  it('should have a package.json with correct name', () => {\n    const pkgRoot = resolve(__dirname, '../..');\n    const pkg = require(resolve(pkgRoot, 'package.json'));\n    expect(pkg.name).toBe('@memberjunction/ng-data-context');\n  });\n});\n"]}

package/dist/__tests__/index.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.test.d.ts.map

package/dist/__tests__/index.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/index.test.ts"],"names":[],"mappings":""}

package/dist/__tests__/index.test.js

@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-describe('@memberjunction/ng-data-context', () => {
-    it('should have a passing test', () => {
-        expect(true).toBe(true);
-    });
-});
-//# sourceMappingURL=index.test.js.map

package/dist/__tests__/index.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../src/__tests__/index.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE9C,QAAQ,CAAC,iCAAiC,EAAE,GAAG,EAAE;IAC/C,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { describe, it, expect } from 'vitest';\n\ndescribe('@memberjunction/ng-data-context', () => {\n  it('should have a passing test', () => {\n    expect(true).toBe(true);\n  });\n});\n"]}