@memberjunction/ng-query-viewer 3.3.0 → 4.0.0

package/dist/lib/query-row-detail/query-row-detail.component.js

@@ -5,54 +5,53 @@ import { takeUntil, debounceTime } from 'rxjs/operators';
 import { Metadata } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-function QueryRowDetailComponent_div_0_div_8_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "button", 19);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNavigatePrev()); });
-    i0.ɵɵelement(2, "i", 20);
+    i0.ɵɵelementStart(0, "div", 9)(1, "button", 18);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNavigatePrev()); });
+    i0.ɵɵelement(2, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵelementStart(3, "span", 20);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 22);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNavigateNext()); });
-    i0.ɵɵelement(6, "i", 23);
+    i0.ɵɵelementStart(5, "button", 21);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNavigateNext()); });
+    i0.ɵɵelement(6, "i", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.RowIndex === 0);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r1.RowIndex + 1, " / ", ctx_r1.TotalRows, "");
+    i0.ɵɵtextInterpolate2("", ctx_r1.RowIndex + 1, " / ", ctx_r1.TotalRows);
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.RowIndex >= ctx_r1.TotalRows - 1);
 } }
-function QueryRowDetailComponent_div_0_div_16_div_5_i_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 37);
+function QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
 } if (rf & 2) {
     const field_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵclassMap(field_r5.targetEntityIcon);
 } }
-function QueryRowDetailComponent_div_0_div_16_div_5_i_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
 } }
-function QueryRowDetailComponent_div_0_div_16_div_5_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "span", 31);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27)(2, "span", 28);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 32);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_16_div_5_Template_button_click_4_listener() { const field_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r5)); });
+    i0.ɵɵelementStart(4, "button", 29);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Template_button_click_4_listener() { const field_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r5)); });
     i0.ɵɵelement(5, "i", 13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 33);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_16_div_5_Template_div_click_6_listener() { const field_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(field_r5.targetEntityName && ctx_r1.onEntityLinkClick(field_r5)); });
-    i0.ɵɵtemplate(7, QueryRowDetailComponent_div_0_div_16_div_5_i_7_Template, 1, 2, "i", 34);
-    i0.ɵɵelementStart(8, "span", 35);
+    i0.ɵɵelementStart(6, "div", 30);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Template_div_click_6_listener() { const field_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(field_r5.targetEntityName && ctx_r1.onEntityLinkClick(field_r5)); });
+    i0.ɵɵconditionalCreate(7, QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Conditional_7_Template, 1, 2, "i", 31);
+    i0.ɵɵelementStart(8, "span", 32);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, QueryRowDetailComponent_div_0_div_16_div_5_i_10_Template, 1, 0, "i", 36);
+    i0.ɵɵconditionalCreate(10, QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Conditional_10_Template, 1, 0, "i", 33);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r5 = ctx.$implicit;
@@ -61,28 +60,28 @@ function QueryRowDetailComponent_div_0_div_16_div_5_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("clickable", field_r5.targetEntityName);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r5.targetEntityIcon);
+    i0.ɵɵconditional(field_r5.targetEntityIcon ? 7 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r5.formattedValue);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r5.targetEntityName);
+    i0.ɵɵconditional(field_r5.targetEntityName ? 10 : -1);
 } }
-function QueryRowDetailComponent_div_0_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "h4", 25);
-    i0.ɵɵelement(2, "i", 26);
+function QueryRowDetailComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "h4", 23);
+    i0.ɵɵelement(2, "i", 24);
     i0.ɵɵtext(3, " Primary Key ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 27);
-    i0.ɵɵtemplate(5, QueryRowDetailComponent_div_0_div_16_div_5_Template, 11, 6, "div", 28);
+    i0.ɵɵelementStart(4, "div", 25);
+    i0.ɵɵrepeaterCreate(5, QueryRowDetailComponent_Conditional_0_Conditional_16_For_6_Template, 11, 6, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r1.getVisibleFields(ctx_r1.PrimaryKeyFields));
+    i0.ɵɵrepeater(ctx_r1.getVisibleFields(ctx_r1.PrimaryKeyFields));
 } }
-function QueryRowDetailComponent_div_0_div_17_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 43);
-    i0.ɵɵelement(1, "i", 44);
+function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵelement(1, "i", 39);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -90,72 +89,73 @@ function QueryRowDetailComponent_div_0_div_17_div_5_span_4_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", field_r7.targetEntityName, " ");
 } }
-function QueryRowDetailComponent_div_0_div_17_div_5_div_7_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 37);
+function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
 } if (rf & 2) {
     const field_r7 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵclassMap(field_r7.targetEntityIcon);
 } }
-function QueryRowDetailComponent_div_0_div_17_div_5_div_7_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_17_div_5_div_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const field_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntityLinkClick(field_r7)); });
-    i0.ɵɵtemplate(1, QueryRowDetailComponent_div_0_div_17_div_5_div_7_i_1_Template, 1, 2, "i", 34);
-    i0.ɵɵelementStart(2, "span", 35);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_7_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const field_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntityLinkClick(field_r7)); });
+    i0.ɵɵconditionalCreate(1, QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_7_Conditional_1_Template, 1, 2, "i", 31);
+    i0.ɵɵelementStart(2, "span", 32);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 38);
+    i0.ɵɵelement(4, "i", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r7 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r7.targetEntityIcon);
+    i0.ɵɵconditional(field_r7.targetEntityIcon ? 1 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r7.formattedValue);
 } }
-function QueryRowDetailComponent_div_0_div_17_div_5_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "span", 41);
     i0.ɵɵtext(2, "(empty)");
     i0.ɵɵelementEnd()();
 } }
-function QueryRowDetailComponent_div_0_div_17_div_5_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "span", 31);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27)(2, "span", 28);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, QueryRowDetailComponent_div_0_div_17_div_5_span_4_Template, 3, 1, "span", 40);
-    i0.ɵɵelementStart(5, "button", 32);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_17_div_5_Template_button_click_5_listener() { const field_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r7)); });
+    i0.ɵɵconditionalCreate(4, QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_4_Template, 3, 1, "span", 36);
+    i0.ɵɵelementStart(5, "button", 29);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Template_button_click_5_listener() { const field_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r7)); });
     i0.ɵɵelement(6, "i", 13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, QueryRowDetailComponent_div_0_div_17_div_5_div_7_Template, 5, 2, "div", 41)(8, QueryRowDetailComponent_div_0_div_17_div_5_div_8_Template, 3, 0, "div", 42);
+    i0.ɵɵconditionalCreate(7, QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_7_Template, 5, 2, "div", 37);
+    i0.ɵɵconditionalCreate(8, QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Conditional_8_Template, 3, 0, "div", 38);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r7 = ctx.$implicit;
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(field_r7.displayName);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r7.targetEntityName);
+    i0.ɵɵconditional(field_r7.targetEntityName ? 4 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", field_r7.value != null);
+    i0.ɵɵconditional(field_r7.value != null ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r7.value == null);
+    i0.ɵɵconditional(field_r7.value == null ? 8 : -1);
 } }
-function QueryRowDetailComponent_div_0_div_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "h4", 25);
-    i0.ɵɵelement(2, "i", 39);
+function QueryRowDetailComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "h4", 23);
+    i0.ɵɵelement(2, "i", 35);
     i0.ɵɵtext(3, " Related Records ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 27);
-    i0.ɵɵtemplate(5, QueryRowDetailComponent_div_0_div_17_div_5_Template, 9, 4, "div", 28);
+    i0.ɵɵelementStart(4, "div", 25);
+    i0.ɵɵrepeaterCreate(5, QueryRowDetailComponent_Conditional_0_Conditional_17_For_6_Template, 9, 4, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r1.getVisibleFields(ctx_r1.ForeignKeyFields));
+    i0.ɵɵrepeater(ctx_r1.getVisibleFields(ctx_r1.ForeignKeyFields));
 } }
-function QueryRowDetailComponent_div_0_div_18_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
+function QueryRowDetailComponent_Conditional_0_Conditional_18_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -163,13 +163,13 @@ function QueryRowDetailComponent_div_0_div_18_span_4_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" (", ctx_r1.getEmptyFieldCount(ctx_r1.RegularFields), " empty hidden) ");
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_div_8_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 56)(1, "pre", 57);
+    i0.ɵɵelementStart(0, "div", 49)(1, "pre", 50);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 58);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_18_div_6_div_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const field_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleFieldExpand(field_r10)); });
+    i0.ɵɵelementStart(3, "button", 51);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const field_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleFieldExpand(field_r10)); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -181,13 +181,13 @@ function QueryRowDetailComponent_div_0_div_18_div_6_div_8_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", field_r10.isExpanded ? "Collapse" : "Expand", " ");
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_div_9_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59)(1, "span", 47);
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 41);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 58);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_18_div_6_div_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const field_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleFieldExpand(field_r10)); });
+    i0.ɵɵelementStart(3, "button", 51);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const field_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleFieldExpand(field_r10)); });
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -198,10 +198,10 @@ function QueryRowDetailComponent_div_0_div_18_div_6_div_9_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", field_r10.isExpanded ? "Show less" : "Show more", " ");
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 47);
+    i0.ɵɵelementStart(2, "span", 41);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -211,13 +211,13 @@ function QueryRowDetailComponent_div_0_div_18_div_6_div_10_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r10.formattedValue);
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "span", 47);
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "span", 41);
     i0.ɵɵtext(2, "(empty)");
     i0.ɵɵelementEnd()();
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "span", 47);
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "span", 41);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -227,19 +227,23 @@ function QueryRowDetailComponent_div_0_div_18_div_6_div_12_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", field_r10.formattedValue, " ");
 } }
-function QueryRowDetailComponent_div_0_div_18_div_6_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "span", 31);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27)(2, "span", 28);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 51);
+    i0.ɵɵelementStart(4, "span", 44);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 32);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_div_18_div_6_Template_button_click_6_listener() { const field_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r10)); });
+    i0.ɵɵelementStart(6, "button", 29);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Template_button_click_6_listener() { const field_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyValue(field_r10)); });
     i0.ɵɵelement(7, "i", 13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, QueryRowDetailComponent_div_0_div_18_div_6_div_8_Template, 5, 4, "div", 52)(9, QueryRowDetailComponent_div_0_div_18_div_6_div_9_Template, 5, 4, "div", 53)(10, QueryRowDetailComponent_div_0_div_18_div_6_div_10_Template, 4, 3, "div", 54)(11, QueryRowDetailComponent_div_0_div_18_div_6_div_11_Template, 3, 0, "div", 42)(12, QueryRowDetailComponent_div_0_div_18_div_6_div_12_Template, 3, 3, "div", 55);
+    i0.ɵɵconditionalCreate(8, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_8_Template, 5, 4, "div", 45);
+    i0.ɵɵconditionalCreate(9, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_9_Template, 5, 4, "div", 46);
+    i0.ɵɵconditionalCreate(10, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_10_Template, 4, 3, "div", 47);
+    i0.ɵɵconditionalCreate(11, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_11_Template, 3, 0, "div", 38);
+    i0.ɵɵconditionalCreate(12, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Conditional_12_Template, 3, 3, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r10 = ctx.$implicit;
@@ -249,36 +253,36 @@ function QueryRowDetailComponent_div_0_div_18_div_6_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r10.sqlType);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.isJson(field_r10.formattedValue));
+    i0.ɵɵconditional(ctx_r1.isJson(field_r10.formattedValue) ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.isJson(field_r10.formattedValue) && field_r10.isLongText);
+    i0.ɵɵconditional(!ctx_r1.isJson(field_r10.formattedValue) && field_r10.isLongText ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r10.sqlType.toLowerCase() === "bit" && !ctx_r1.isJson(field_r10.formattedValue));
+    i0.ɵɵconditional(field_r10.sqlType.toLowerCase() === "bit" && !ctx_r1.isJson(field_r10.formattedValue) ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r10.value == null && !ctx_r1.isJson(field_r10.formattedValue));
+    i0.ɵɵconditional(field_r10.value == null && !ctx_r1.isJson(field_r10.formattedValue) ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", field_r10.value != null && !ctx_r1.isJson(field_r10.formattedValue) && !field_r10.isLongText && field_r10.sqlType.toLowerCase() !== "bit");
+    i0.ɵɵconditional(field_r10.value != null && !ctx_r1.isJson(field_r10.formattedValue) && !field_r10.isLongText && field_r10.sqlType.toLowerCase() !== "bit" ? 12 : -1);
 } }
-function QueryRowDetailComponent_div_0_div_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "h4", 25);
-    i0.ɵɵelement(2, "i", 48);
+function QueryRowDetailComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "h4", 23);
+    i0.ɵɵelement(2, "i", 42);
     i0.ɵɵtext(3, " Fields ");
-    i0.ɵɵtemplate(4, QueryRowDetailComponent_div_0_div_18_span_4_Template, 2, 1, "span", 49);
+    i0.ɵɵconditionalCreate(4, QueryRowDetailComponent_Conditional_0_Conditional_18_Conditional_4_Template, 2, 1, "span", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 27);
-    i0.ɵɵtemplate(6, QueryRowDetailComponent_div_0_div_18_div_6_Template, 13, 7, "div", 28);
+    i0.ɵɵelementStart(5, "div", 25);
+    i0.ɵɵrepeaterCreate(6, QueryRowDetailComponent_Conditional_0_Conditional_18_For_7_Template, 13, 7, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r1.HideEmptyFields && ctx_r1.getEmptyFieldCount(ctx_r1.RegularFields) > 0);
+    i0.ɵɵconditional(ctx_r1.HideEmptyFields && ctx_r1.getEmptyFieldCount(ctx_r1.RegularFields) > 0 ? 4 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.getVisibleFields(ctx_r1.RegularFields));
+    i0.ɵɵrepeater(ctx_r1.getVisibleFields(ctx_r1.RegularFields));
 } }
-function QueryRowDetailComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
-    i0.ɵɵlistener("mousedown", function QueryRowDetailComponent_div_0_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
+    i0.ɵɵlistener("mousedown", function QueryRowDetailComponent_Conditional_0_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "div", 4)(3, "div", 5);
     i0.ɵɵelement(4, "i", 6);
@@ -286,21 +290,23 @@ function QueryRowDetailComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(6, "Row Details");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 8);
-    i0.ɵɵtemplate(8, QueryRowDetailComponent_div_0_div_8_Template, 7, 4, "div", 9);
+    i0.ɵɵconditionalCreate(8, QueryRowDetailComponent_Conditional_0_Conditional_8_Template, 7, 4, "div", 9);
     i0.ɵɵelementStart(9, "button", 10);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHideEmptyFields()); });
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHideEmptyFields()); });
     i0.ɵɵelement(10, "i", 11);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "button", 12);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyRowAsJson()); });
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyRowAsJson()); });
     i0.ɵɵelement(12, "i", 13);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(13, "button", 14);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
     i0.ɵɵelement(14, "i", 15);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "div", 16);
-    i0.ɵɵtemplate(16, QueryRowDetailComponent_div_0_div_16_Template, 6, 1, "div", 17)(17, QueryRowDetailComponent_div_0_div_17_Template, 6, 1, "div", 17)(18, QueryRowDetailComponent_div_0_div_18_Template, 7, 2, "div", 17);
+    i0.ɵɵconditionalCreate(16, QueryRowDetailComponent_Conditional_0_Conditional_16_Template, 7, 0, "div", 17);
+    i0.ɵɵconditionalCreate(17, QueryRowDetailComponent_Conditional_0_Conditional_17_Template, 7, 0, "div", 17);
+    i0.ɵɵconditionalCreate(18, QueryRowDetailComponent_Conditional_0_Conditional_18_Template, 8, 1, "div", 17);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -309,23 +315,23 @@ function QueryRowDetailComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵclassProp("resizing", ctx_r1.IsResizing);
     i0.ɵɵadvance(7);
-    i0.ɵɵproperty("ngIf", ctx_r1.TotalRows > 1);
+    i0.ɵɵconditional(ctx_r1.TotalRows > 1 ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.HideEmptyFields);
     i0.ɵɵproperty("title", ctx_r1.HideEmptyFields ? "Show empty fields" : "Hide empty fields");
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-eye", !ctx_r1.HideEmptyFields)("fa-eye-slash", ctx_r1.HideEmptyFields);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", ctx_r1.getVisibleFields(ctx_r1.PrimaryKeyFields).length > 0);
+    i0.ɵɵconditional(ctx_r1.getVisibleFields(ctx_r1.PrimaryKeyFields).length > 0 ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.getVisibleFields(ctx_r1.ForeignKeyFields).length > 0);
+    i0.ɵɵconditional(ctx_r1.getVisibleFields(ctx_r1.ForeignKeyFields).length > 0 ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.getVisibleFields(ctx_r1.RegularFields).length > 0);
+    i0.ɵɵconditional(ctx_r1.getVisibleFields(ctx_r1.RegularFields).length > 0 ? 18 : -1);
 } }
-function QueryRowDetailComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+function QueryRowDetailComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function QueryRowDetailComponent_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵlistener("click", function QueryRowDetailComponent_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
     i0.ɵɵelementEnd();
 } }
 /**
@@ -686,14 +692,15 @@ export class QueryRowDetailComponent {
     }
     static ɵfac = function QueryRowDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || QueryRowDetailComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryRowDetailComponent, selectors: [["mj-query-row-detail"]], hostBindings: function QueryRowDetailComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mousemove", function QueryRowDetailComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, false, i0.ɵɵresolveDocument)("mouseup", function QueryRowDetailComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, false, i0.ɵɵresolveDocument)("keydown", function QueryRowDetailComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { RowData: "RowData", Columns: "Columns", QueryInfo: "QueryInfo", Visible: "Visible", RowIndex: "RowIndex", TotalRows: "TotalRows" }, outputs: { Close: "Close", EntityLinkClick: "EntityLinkClick", NavigateRow: "NavigateRow" }, decls: 2, vars: 2, consts: [["class", "row-detail-panel", 3, "width", 4, "ngIf"], ["class", "panel-backdrop", 3, "click", 4, "ngIf"], [1, "row-detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "panel-header"], [1, "header-left"], [1, "fa-solid", "fa-table-cells-large", "header-icon"], [1, "panel-title"], [1, "header-right"], ["class", "row-nav", 4, "ngIf"], [1, "action-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Copy row as JSON", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-copy"], ["title", "Close (Esc)", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], ["class", "field-section", 4, "ngIf"], [1, "row-nav"], ["title", "Previous row (\u2191 or K)", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], [1, "row-indicator"], ["title", "Next row (\u2193 or J)", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], [1, "field-section"], [1, "section-title"], [1, "fa-solid", "fa-key", "section-icon", "pk-icon"], [1, "field-list"], ["class", "field-item", 4, "ngFor", "ngForOf"], [1, "field-item"], [1, "field-header"], [1, "field-name"], ["title", "Copy value", 1, "copy-btn", 3, "click"], [1, "field-value", 3, "click"], ["class", "entity-icon", 3, "class", 4, "ngIf"], [1, "value-text", "monospace"], ["class", "fa-solid fa-arrow-up-right-from-square link-icon", 4, "ngIf"], [1, "entity-icon"], [1, "fa-solid", "fa-arrow-up-right-from-square", "link-icon"], [1, "fa-solid", "fa-link", "section-icon", "fk-icon"], ["class", "target-entity", 4, "ngIf"], ["class", "field-value clickable", 3, "click", 4, "ngIf"], ["class", "field-value empty", 4, "ngIf"], [1, "target-entity"], [1, "fa-solid", "fa-arrow-right"], [1, "field-value", "clickable", 3, "click"], [1, "field-value", "empty"], [1, "value-text"], [1, "fa-solid", "fa-list", "section-icon"], ["class", "hidden-count", 4, "ngIf"], [1, "hidden-count"], [1, "field-type"], ["class", "field-value json-value", 3, "expanded", 4, "ngIf"], ["class", "field-value long-text", 3, "expanded", 4, "ngIf"], ["class", "field-value boolean-value", 4, "ngIf"], ["class", "field-value", 4, "ngIf"], [1, "field-value", "json-value"], [1, "json-content"], [1, "expand-btn", 3, "click"], [1, "field-value", "long-text"], [1, "field-value", "boolean-value"], [1, "field-value"], [1, "panel-backdrop", 3, "click"]], template: function QueryRowDetailComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, QueryRowDetailComponent_div_0_Template, 19, 16, "div", 0)(1, QueryRowDetailComponent_div_1_Template, 1, 0, "div", 1);
+            i0.ɵɵlistener("mousemove", function QueryRowDetailComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function QueryRowDetailComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, i0.ɵɵresolveDocument)("keydown", function QueryRowDetailComponent_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { RowData: "RowData", Columns: "Columns", QueryInfo: "QueryInfo", Visible: "Visible", RowIndex: "RowIndex", TotalRows: "TotalRows" }, outputs: { Close: "Close", EntityLinkClick: "EntityLinkClick", NavigateRow: "NavigateRow" }, standalone: false, decls: 2, vars: 2, consts: [[1, "row-detail-panel", 3, "width"], [1, "panel-backdrop"], [1, "row-detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "panel-header"], [1, "header-left"], [1, "fa-solid", "fa-table-cells-large", "header-icon"], [1, "panel-title"], [1, "header-right"], [1, "row-nav"], [1, "action-btn", 3, "click", "title"], [1, "fa-solid"], ["title", "Copy row as JSON", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-copy"], ["title", "Close (Esc)", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "field-section"], ["title", "Previous row (\u2191 or K)", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], [1, "row-indicator"], ["title", "Next row (\u2193 or J)", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], [1, "section-title"], [1, "fa-solid", "fa-key", "section-icon", "pk-icon"], [1, "field-list"], [1, "field-item"], [1, "field-header"], [1, "field-name"], ["title", "Copy value", 1, "copy-btn", 3, "click"], [1, "field-value", 3, "click"], [1, "entity-icon", 3, "class"], [1, "value-text", "monospace"], [1, "fa-solid", "fa-arrow-up-right-from-square", "link-icon"], [1, "entity-icon"], [1, "fa-solid", "fa-link", "section-icon", "fk-icon"], [1, "target-entity"], [1, "field-value", "clickable"], [1, "field-value", "empty"], [1, "fa-solid", "fa-arrow-right"], [1, "field-value", "clickable", 3, "click"], [1, "value-text"], [1, "fa-solid", "fa-list", "section-icon"], [1, "hidden-count"], [1, "field-type"], [1, "field-value", "json-value", 3, "expanded"], [1, "field-value", "long-text", 3, "expanded"], [1, "field-value", "boolean-value"], [1, "field-value"], [1, "field-value", "json-value"], [1, "json-content"], [1, "expand-btn", 3, "click"], [1, "field-value", "long-text"], [1, "panel-backdrop", 3, "click"]], template: function QueryRowDetailComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, QueryRowDetailComponent_Conditional_0_Template, 19, 16, "div", 0);
+            i0.ɵɵconditionalCreate(1, QueryRowDetailComponent_Conditional_1_Template, 1, 0, "div", 1);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.Visible);
+            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.Visible);
-        } }, dependencies: [i1.NgForOf, i1.NgIf], styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n}\n\n\n\n\n\n\n.row-detail-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: #fff;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.resizing[_ngcontent-%COMP%] {\n    background: rgba(33, 150, 243, 0.3);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 2px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 2px;\n    height: 40px;\n    background: #ccc;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover::before, \n.resize-handle.resizing[_ngcontent-%COMP%]::before {\n    background: #2196F3;\n}\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    font-size: 20px;\n    opacity: 0.9;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #fff;\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n\n\n\n.row-nav[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    background: rgba(255, 255, 255, 0.15);\n    border-radius: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: rgba(255, 255, 255, 0.15);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.row-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #fff;\n    padding: 0 4px;\n    min-width: 50px;\n    text-align: center;\n}\n\n\n\n\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.action-btn.active[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.hidden-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    font-size: 11px;\n    color: rgba(255, 255, 255, 0.7);\n    margin-left: auto;\n}\n\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n\n\n\n\n\n.field-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.field-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n    padding-bottom: 8px;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n    color: #f9a825;\n}\n\n.fk-icon[_ngcontent-%COMP%] {\n    color: #2196F3;\n}\n\n\n\n\n\n\n.field-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border-left: 3px solid #5c6bc0;\n}\n\n.field-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n    flex-shrink: 0;\n}\n\n.field-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: #666;\n    background: #e8eaf6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.target-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: #2196F3;\n    margin-left: auto;\n}\n\n.target-entity[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 8px;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #aaa;\n    cursor: pointer;\n    border-radius: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: all 0.15s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover   .copy-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #666;\n}\n\n\n\n\n\n\n.field-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #333;\n    line-height: 1.5;\n    word-break: break-word;\n}\n\n.field-value.empty[_ngcontent-%COMP%] {\n    color: #999;\n    font-style: italic;\n}\n\n.field-value.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 8px;\n    margin: -2px -4px;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.field-value.clickable[_ngcontent-%COMP%]:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: #aaa;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.field-value.clickable[_ngcontent-%COMP%]:hover   .link-icon[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.value-text[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.value-text.monospace[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n\n\n\n\n\n.boolean-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.bool-true[_ngcontent-%COMP%] {\n    color: #4caf50;\n}\n\n.bool-false[_ngcontent-%COMP%] {\n    color: #9e9e9e;\n}\n\n\n\n\n\n\n.json-value[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.json-content[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 8px;\n    background: #f5f5f5;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 11px;\n    line-height: 1.4;\n    overflow: hidden;\n    max-height: 100px;\n    white-space: pre-wrap;\n    word-break: break-all;\n}\n\n.json-value.expanded[_ngcontent-%COMP%]   .json-content[_ngcontent-%COMP%] {\n    max-height: none;\n}\n\n\n\n\n\n\n.long-text[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.long-text[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.long-text.expanded[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n    display: block;\n    -webkit-line-clamp: unset;\n}\n\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n    display: inline-block;\n    margin-top: 6px;\n    padding: 4px 8px;\n    border: none;\n    background: transparent;\n    color: #2196F3;\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n}\n\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #ccc;\n    border-radius: 3px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #aaa;\n}\n\n\n\n\n\n\n@media (max-width: 600px) {\n    .row-detail-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"], data: { animation: [
+            i0.ɵɵconditional(ctx.Visible ? 1 : -1);
+        } }, styles: ["\n\n\n[_nghost-%COMP%] {\n    display: block;\n}\n\n\n\n\n\n\n.row-detail-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: #fff;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.resizing[_ngcontent-%COMP%] {\n    background: rgba(33, 150, 243, 0.3);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 2px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 2px;\n    height: 40px;\n    background: #ccc;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover::before, \n.resize-handle.resizing[_ngcontent-%COMP%]::before {\n    background: #2196F3;\n}\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    font-size: 20px;\n    opacity: 0.9;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #fff;\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n\n\n\n.row-nav[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    background: rgba(255, 255, 255, 0.15);\n    border-radius: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: rgba(255, 255, 255, 0.15);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.row-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #fff;\n    padding: 0 4px;\n    min-width: 50px;\n    text-align: center;\n}\n\n\n\n\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.action-btn.active[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.hidden-count[_ngcontent-%COMP%] {\n    font-weight: 400;\n    font-size: 11px;\n    color: rgba(255, 255, 255, 0.7);\n    margin-left: auto;\n}\n\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n\n\n\n\n\n.field-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.field-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n    padding-bottom: 8px;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n    color: #f9a825;\n}\n\n.fk-icon[_ngcontent-%COMP%] {\n    color: #2196F3;\n}\n\n\n\n\n\n\n.field-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border-left: 3px solid #5c6bc0;\n}\n\n.field-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n    flex-shrink: 0;\n}\n\n.field-type[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: #666;\n    background: #e8eaf6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.target-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: #2196F3;\n    margin-left: auto;\n}\n\n.target-entity[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 8px;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #aaa;\n    cursor: pointer;\n    border-radius: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: all 0.15s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover   .copy-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #666;\n}\n\n\n\n\n\n\n.field-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #333;\n    line-height: 1.5;\n    word-break: break-word;\n}\n\n.field-value.empty[_ngcontent-%COMP%] {\n    color: #999;\n    font-style: italic;\n}\n\n.field-value.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 8px;\n    margin: -2px -4px;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.field-value.clickable[_ngcontent-%COMP%]:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: #aaa;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.field-value.clickable[_ngcontent-%COMP%]:hover   .link-icon[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.value-text[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.value-text.monospace[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n\n\n\n\n\n.boolean-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.bool-true[_ngcontent-%COMP%] {\n    color: #4caf50;\n}\n\n.bool-false[_ngcontent-%COMP%] {\n    color: #9e9e9e;\n}\n\n\n\n\n\n\n.json-value[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.json-content[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 8px;\n    background: #f5f5f5;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 11px;\n    line-height: 1.4;\n    overflow: hidden;\n    max-height: 100px;\n    white-space: pre-wrap;\n    word-break: break-all;\n}\n\n.json-value.expanded[_ngcontent-%COMP%]   .json-content[_ngcontent-%COMP%] {\n    max-height: none;\n}\n\n\n\n\n\n\n.long-text[_ngcontent-%COMP%] {\n    position: relative;\n}\n\n.long-text[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.long-text.expanded[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n    display: block;\n    -webkit-line-clamp: unset;\n}\n\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n    display: inline-block;\n    margin-top: 6px;\n    padding: 4px 8px;\n    border: none;\n    background: transparent;\n    color: #2196F3;\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n}\n\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #ccc;\n    border-radius: 3px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #aaa;\n}\n\n\n\n\n\n\n@media (max-width: 600px) {\n    .row-detail-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n}"], data: { animation: [
                 trigger('slideIn', [
                     transition(':enter', [
                         style({ transform: 'translateX(100%)', opacity: 0 }),
@@ -707,7 +714,7 @@ export class QueryRowDetailComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryRowDetailComponent, [{
         type: Component,
-        args: [{ selector: 'mj-query-row-detail', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+        args: [{ standalone: false, selector: 'mj-query-row-detail', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                     trigger('slideIn', [
                         transition(':enter', [
                             style({ transform: 'translateX(100%)', opacity: 0 }),
@@ -717,7 +724,7 @@ export class QueryRowDetailComponent {
                             animate('150ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
                         ])
                     ])
-                ], template: "<!-- Row Detail Slide-in Panel -->\n<div class=\"row-detail-panel\"\n     *ngIf=\"Visible\"\n     @slideIn\n     [style.width.px]=\"PanelWidth\">\n\n    <!-- Resize handle -->\n    <div class=\"resize-handle\"\n         (mousedown)=\"onResizeStart($event)\"\n         [class.resizing]=\"IsResizing\">\n    </div>\n\n    <!-- Header -->\n    <div class=\"panel-header\">\n        <div class=\"header-left\">\n            <i class=\"fa-solid fa-table-cells-large header-icon\"></i>\n            <h3 class=\"panel-title\">Row Details</h3>\n        </div>\n        <div class=\"header-right\">\n            <!-- Row navigation -->\n            <div class=\"row-nav\" *ngIf=\"TotalRows > 1\">\n                <button class=\"nav-btn\"\n                        [disabled]=\"RowIndex === 0\"\n                        (click)=\"onNavigatePrev()\"\n                        title=\"Previous row (\u2191 or K)\">\n                    <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <span class=\"row-indicator\">{{ RowIndex + 1 }} / {{ TotalRows }}</span>\n                <button class=\"nav-btn\"\n                        [disabled]=\"RowIndex >= TotalRows - 1\"\n                        (click)=\"onNavigateNext()\"\n                        title=\"Next row (\u2193 or J)\">\n                    <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n            </div>\n            <!-- Toggle empty fields -->\n            <button class=\"action-btn\"\n                    (click)=\"toggleHideEmptyFields()\"\n                    [class.active]=\"HideEmptyFields\"\n                    [title]=\"HideEmptyFields ? 'Show empty fields' : 'Hide empty fields'\">\n                <i class=\"fa-solid\" [class.fa-eye]=\"!HideEmptyFields\" [class.fa-eye-slash]=\"HideEmptyFields\"></i>\n            </button>\n            <!-- Copy JSON button -->\n            <button class=\"action-btn\" (click)=\"copyRowAsJson()\" title=\"Copy row as JSON\">\n                <i class=\"fa-solid fa-copy\"></i>\n            </button>\n            <!-- Close button -->\n            <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close (Esc)\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- Content -->\n    <div class=\"panel-content\">\n        <!-- Primary Keys Section -->\n        <div class=\"field-section\" *ngIf=\"getVisibleFields(PrimaryKeyFields).length > 0\">\n            <h4 class=\"section-title\">\n                <i class=\"fa-solid fa-key section-icon pk-icon\"></i>\n                Primary Key\n            </h4>\n            <div class=\"field-list\">\n                <div class=\"field-item\" *ngFor=\"let field of getVisibleFields(PrimaryKeyFields)\">\n                    <div class=\"field-header\">\n                        <span class=\"field-name\">{{ field.displayName }}</span>\n                        <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                    </div>\n                    <div class=\"field-value\"\n                         [class.clickable]=\"field.targetEntityName\"\n                         (click)=\"field.targetEntityName && onEntityLinkClick(field)\">\n                        <i *ngIf=\"field.targetEntityIcon\"\n                           [class]=\"field.targetEntityIcon\"\n                           class=\"entity-icon\"></i>\n                        <span class=\"value-text monospace\">{{ field.formattedValue }}</span>\n                        <i *ngIf=\"field.targetEntityName\"\n                           class=\"fa-solid fa-arrow-up-right-from-square link-icon\"></i>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Foreign Keys Section -->\n        <div class=\"field-section\" *ngIf=\"getVisibleFields(ForeignKeyFields).length > 0\">\n            <h4 class=\"section-title\">\n                <i class=\"fa-solid fa-link section-icon fk-icon\"></i>\n                Related Records\n            </h4>\n            <div class=\"field-list\">\n                <div class=\"field-item\" *ngFor=\"let field of getVisibleFields(ForeignKeyFields)\">\n                    <div class=\"field-header\">\n                        <span class=\"field-name\">{{ field.displayName }}</span>\n                        <span class=\"target-entity\" *ngIf=\"field.targetEntityName\">\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                            {{ field.targetEntityName }}\n                        </span>\n                        <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                    </div>\n                    <div class=\"field-value clickable\"\n                         *ngIf=\"field.value != null\"\n                         (click)=\"onEntityLinkClick(field)\">\n                        <i *ngIf=\"field.targetEntityIcon\"\n                           [class]=\"field.targetEntityIcon\"\n                           class=\"entity-icon\"></i>\n                        <span class=\"value-text monospace\">{{ field.formattedValue }}</span>\n                        <i class=\"fa-solid fa-arrow-up-right-from-square link-icon\"></i>\n                    </div>\n                    <div class=\"field-value empty\" *ngIf=\"field.value == null\">\n                        <span class=\"value-text\">(empty)</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Regular Fields Section -->\n        <div class=\"field-section\" *ngIf=\"getVisibleFields(RegularFields).length > 0\">\n            <h4 class=\"section-title\">\n                <i class=\"fa-solid fa-list section-icon\"></i>\n                Fields\n                <span class=\"hidden-count\" *ngIf=\"HideEmptyFields && getEmptyFieldCount(RegularFields) > 0\">\n                    ({{ getEmptyFieldCount(RegularFields) }} empty hidden)\n                </span>\n            </h4>\n            <div class=\"field-list\">\n                <div class=\"field-item\" *ngFor=\"let field of getVisibleFields(RegularFields)\">\n                    <div class=\"field-header\">\n                        <span class=\"field-name\">{{ field.displayName }}</span>\n                        <span class=\"field-type\">{{ field.sqlType }}</span>\n                        <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                            <i class=\"fa-solid fa-copy\"></i>\n                        </button>\n                    </div>\n\n                    <!-- JSON value -->\n                    <div class=\"field-value json-value\"\n                         *ngIf=\"isJson(field.formattedValue)\"\n                         [class.expanded]=\"field.isExpanded\">\n                        <pre class=\"json-content\">{{ formatJson(field.formattedValue) }}</pre>\n                        <button class=\"expand-btn\" (click)=\"toggleFieldExpand(field)\">\n                            {{ field.isExpanded ? 'Collapse' : 'Expand' }}\n                        </button>\n                    </div>\n\n                    <!-- Long text value -->\n                    <div class=\"field-value long-text\"\n                         *ngIf=\"!isJson(field.formattedValue) && field.isLongText\"\n                         [class.expanded]=\"field.isExpanded\">\n                        <span class=\"value-text\">{{ field.formattedValue }}</span>\n                        <button class=\"expand-btn\" (click)=\"toggleFieldExpand(field)\">\n                            {{ field.isExpanded ? 'Show less' : 'Show more' }}\n                        </button>\n                    </div>\n\n                    <!-- Boolean value -->\n                    <div class=\"field-value boolean-value\"\n                         *ngIf=\"field.sqlType.toLowerCase() === 'bit' && !isJson(field.formattedValue)\">\n                        <i [class]=\"field.value ? 'fa-solid fa-check-circle bool-true' : 'fa-solid fa-times-circle bool-false'\"></i>\n                        <span class=\"value-text\">{{ field.formattedValue }}</span>\n                    </div>\n\n                    <!-- Empty value -->\n                    <div class=\"field-value empty\"\n                         *ngIf=\"field.value == null && !isJson(field.formattedValue)\">\n                        <span class=\"value-text\">(empty)</span>\n                    </div>\n\n                    <!-- Regular value -->\n                    <div class=\"field-value\"\n                         *ngIf=\"field.value != null && !isJson(field.formattedValue) && !field.isLongText && field.sqlType.toLowerCase() !== 'bit'\">\n                        <span class=\"value-text\"\n                              [class.monospace]=\"field.sqlType.toLowerCase().includes('uniqueidentifier') || field.name.toLowerCase().includes('id')\">\n                            {{ field.formattedValue }}\n                        </span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!-- Backdrop -->\n<div class=\"panel-backdrop\"\n     *ngIf=\"Visible\"\n     (click)=\"onClose()\">\n</div>\n", styles: ["/* Query Row Detail Panel Styles */\n\n:host {\n    display: block;\n}\n\n/* ========================================\n   Panel Container\n   ======================================== */\n\n.row-detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: #fff;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n/* ========================================\n   Resize Handle\n   ======================================== */\n\n.resize-handle {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle.resizing {\n    background: rgba(33, 150, 243, 0.3);\n}\n\n.resize-handle::before {\n    content: '';\n    position: absolute;\n    left: 2px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 2px;\n    height: 40px;\n    background: #ccc;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover::before,\n.resize-handle.resizing::before {\n    background: #2196F3;\n}\n\n/* ========================================\n   Header\n   ======================================== */\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon {\n    font-size: 20px;\n    opacity: 0.9;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.panel-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #fff;\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* ========================================\n   Row Navigation\n   ======================================== */\n\n.row-nav {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    background: rgba(255, 255, 255, 0.15);\n    border-radius: 4px;\n}\n\n.nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n}\n\n.nav-btn:hover:not(:disabled) {\n    background: rgba(255, 255, 255, 0.15);\n}\n\n.nav-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.row-indicator {\n    font-size: 12px;\n    font-weight: 500;\n    color: #fff;\n    padding: 0 4px;\n    min-width: 50px;\n    text-align: center;\n}\n\n/* ========================================\n   Action Buttons\n   ======================================== */\n\n.action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.action-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.action-btn.active {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.hidden-count {\n    font-weight: 400;\n    font-size: 11px;\n    color: rgba(255, 255, 255, 0.7);\n    margin-left: auto;\n}\n\n/* ========================================\n   Content\n   ======================================== */\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n/* ========================================\n   Field Sections\n   ======================================== */\n\n.field-section {\n    margin-bottom: 24px;\n}\n\n.field-section:last-child {\n    margin-bottom: 0;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n    padding-bottom: 8px;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.section-icon {\n    font-size: 12px;\n}\n\n.pk-icon {\n    color: #f9a825;\n}\n\n.fk-icon {\n    color: #2196F3;\n}\n\n/* ========================================\n   Field Items\n   ======================================== */\n\n.field-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item {\n    padding: 10px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border-left: 3px solid #5c6bc0;\n}\n\n.field-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.field-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n    flex-shrink: 0;\n}\n\n.field-type {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: #666;\n    background: #e8eaf6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.target-entity {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: #2196F3;\n    margin-left: auto;\n}\n\n.target-entity i {\n    font-size: 8px;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #aaa;\n    cursor: pointer;\n    border-radius: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: all 0.15s ease;\n}\n\n.field-item:hover .copy-btn {\n    opacity: 1;\n}\n\n.copy-btn:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #666;\n}\n\n/* ========================================\n   Field Values\n   ======================================== */\n\n.field-value {\n    font-size: 13px;\n    color: #333;\n    line-height: 1.5;\n    word-break: break-word;\n}\n\n.field-value.empty {\n    color: #999;\n    font-style: italic;\n}\n\n.field-value.clickable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 8px;\n    margin: -2px -4px;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.field-value.clickable:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n.entity-icon {\n    font-size: 12px;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.link-icon {\n    font-size: 10px;\n    color: #aaa;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.field-value.clickable:hover .link-icon {\n    opacity: 1;\n}\n\n.value-text {\n    flex: 1;\n}\n\n.value-text.monospace {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n/* ========================================\n   Boolean Values\n   ======================================== */\n\n.boolean-value {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.bool-true {\n    color: #4caf50;\n}\n\n.bool-false {\n    color: #9e9e9e;\n}\n\n/* ========================================\n   JSON Values\n   ======================================== */\n\n.json-value {\n    position: relative;\n}\n\n.json-content {\n    margin: 0;\n    padding: 8px;\n    background: #f5f5f5;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 11px;\n    line-height: 1.4;\n    overflow: hidden;\n    max-height: 100px;\n    white-space: pre-wrap;\n    word-break: break-all;\n}\n\n.json-value.expanded .json-content {\n    max-height: none;\n}\n\n/* ========================================\n   Long Text Values\n   ======================================== */\n\n.long-text {\n    position: relative;\n}\n\n.long-text .value-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.long-text.expanded .value-text {\n    display: block;\n    -webkit-line-clamp: unset;\n}\n\n/* ========================================\n   Expand Button\n   ======================================== */\n\n.expand-btn {\n    display: inline-block;\n    margin-top: 6px;\n    padding: 4px 8px;\n    border: none;\n    background: transparent;\n    color: #2196F3;\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.expand-btn:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n/* ========================================\n   Backdrop\n   ======================================== */\n\n.panel-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n}\n\n/* ========================================\n   Scrollbar\n   ======================================== */\n\n.panel-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n    background: #ccc;\n    border-radius: 3px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n    background: #aaa;\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 600px) {\n    .row-detail-panel {\n        width: 100% !important;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n}\n"] }]
+                ], template: "<!-- Row Detail Slide-in Panel -->\n@if (Visible) {\n  <div class=\"row-detail-panel\"\n    @slideIn\n    [style.width.px]=\"PanelWidth\">\n    <!-- Resize handle -->\n    <div class=\"resize-handle\"\n      (mousedown)=\"onResizeStart($event)\"\n      [class.resizing]=\"IsResizing\">\n    </div>\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <i class=\"fa-solid fa-table-cells-large header-icon\"></i>\n        <h3 class=\"panel-title\">Row Details</h3>\n      </div>\n      <div class=\"header-right\">\n        <!-- Row navigation -->\n        @if (TotalRows > 1) {\n          <div class=\"row-nav\">\n            <button class=\"nav-btn\"\n              [disabled]=\"RowIndex === 0\"\n              (click)=\"onNavigatePrev()\"\n              title=\"Previous row (\u2191 or K)\">\n              <i class=\"fa-solid fa-chevron-up\"></i>\n            </button>\n            <span class=\"row-indicator\">{{ RowIndex + 1 }} / {{ TotalRows }}</span>\n            <button class=\"nav-btn\"\n              [disabled]=\"RowIndex >= TotalRows - 1\"\n              (click)=\"onNavigateNext()\"\n              title=\"Next row (\u2193 or J)\">\n              <i class=\"fa-solid fa-chevron-down\"></i>\n            </button>\n          </div>\n        }\n        <!-- Toggle empty fields -->\n        <button class=\"action-btn\"\n          (click)=\"toggleHideEmptyFields()\"\n          [class.active]=\"HideEmptyFields\"\n          [title]=\"HideEmptyFields ? 'Show empty fields' : 'Hide empty fields'\">\n          <i class=\"fa-solid\" [class.fa-eye]=\"!HideEmptyFields\" [class.fa-eye-slash]=\"HideEmptyFields\"></i>\n        </button>\n        <!-- Copy JSON button -->\n        <button class=\"action-btn\" (click)=\"copyRowAsJson()\" title=\"Copy row as JSON\">\n          <i class=\"fa-solid fa-copy\"></i>\n        </button>\n        <!-- Close button -->\n        <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n    </div>\n    <!-- Content -->\n    <div class=\"panel-content\">\n      <!-- Primary Keys Section -->\n      @if (getVisibleFields(PrimaryKeyFields).length > 0) {\n        <div class=\"field-section\">\n          <h4 class=\"section-title\">\n            <i class=\"fa-solid fa-key section-icon pk-icon\"></i>\n            Primary Key\n          </h4>\n          <div class=\"field-list\">\n            @for (field of getVisibleFields(PrimaryKeyFields); track field) {\n              <div class=\"field-item\">\n                <div class=\"field-header\">\n                  <span class=\"field-name\">{{ field.displayName }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n                <div class=\"field-value\"\n                  [class.clickable]=\"field.targetEntityName\"\n                  (click)=\"field.targetEntityName && onEntityLinkClick(field)\">\n                  @if (field.targetEntityIcon) {\n                    <i\n                      [class]=\"field.targetEntityIcon\"\n                    class=\"entity-icon\"></i>\n                  }\n                  <span class=\"value-text monospace\">{{ field.formattedValue }}</span>\n                  @if (field.targetEntityName) {\n                    <i\n                    class=\"fa-solid fa-arrow-up-right-from-square link-icon\"></i>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <!-- Foreign Keys Section -->\n      @if (getVisibleFields(ForeignKeyFields).length > 0) {\n        <div class=\"field-section\">\n          <h4 class=\"section-title\">\n            <i class=\"fa-solid fa-link section-icon fk-icon\"></i>\n            Related Records\n          </h4>\n          <div class=\"field-list\">\n            @for (field of getVisibleFields(ForeignKeyFields); track field) {\n              <div class=\"field-item\">\n                <div class=\"field-header\">\n                  <span class=\"field-name\">{{ field.displayName }}</span>\n                  @if (field.targetEntityName) {\n                    <span class=\"target-entity\">\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                      {{ field.targetEntityName }}\n                    </span>\n                  }\n                  <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n                @if (field.value != null) {\n                  <div class=\"field-value clickable\"\n                    (click)=\"onEntityLinkClick(field)\">\n                    @if (field.targetEntityIcon) {\n                      <i\n                        [class]=\"field.targetEntityIcon\"\n                      class=\"entity-icon\"></i>\n                    }\n                    <span class=\"value-text monospace\">{{ field.formattedValue }}</span>\n                    <i class=\"fa-solid fa-arrow-up-right-from-square link-icon\"></i>\n                  </div>\n                }\n                @if (field.value == null) {\n                  <div class=\"field-value empty\">\n                    <span class=\"value-text\">(empty)</span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n      <!-- Regular Fields Section -->\n      @if (getVisibleFields(RegularFields).length > 0) {\n        <div class=\"field-section\">\n          <h4 class=\"section-title\">\n            <i class=\"fa-solid fa-list section-icon\"></i>\n            Fields\n            @if (HideEmptyFields && getEmptyFieldCount(RegularFields) > 0) {\n              <span class=\"hidden-count\">\n                ({{ getEmptyFieldCount(RegularFields) }} empty hidden)\n              </span>\n            }\n          </h4>\n          <div class=\"field-list\">\n            @for (field of getVisibleFields(RegularFields); track field) {\n              <div class=\"field-item\">\n                <div class=\"field-header\">\n                  <span class=\"field-name\">{{ field.displayName }}</span>\n                  <span class=\"field-type\">{{ field.sqlType }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyValue(field)\" title=\"Copy value\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n                <!-- JSON value -->\n                @if (isJson(field.formattedValue)) {\n                  <div class=\"field-value json-value\"\n                    [class.expanded]=\"field.isExpanded\">\n                    <pre class=\"json-content\">{{ formatJson(field.formattedValue) }}</pre>\n                    <button class=\"expand-btn\" (click)=\"toggleFieldExpand(field)\">\n                      {{ field.isExpanded ? 'Collapse' : 'Expand' }}\n                    </button>\n                  </div>\n                }\n                <!-- Long text value -->\n                @if (!isJson(field.formattedValue) && field.isLongText) {\n                  <div class=\"field-value long-text\"\n                    [class.expanded]=\"field.isExpanded\">\n                    <span class=\"value-text\">{{ field.formattedValue }}</span>\n                    <button class=\"expand-btn\" (click)=\"toggleFieldExpand(field)\">\n                      {{ field.isExpanded ? 'Show less' : 'Show more' }}\n                    </button>\n                  </div>\n                }\n                <!-- Boolean value -->\n                @if (field.sqlType.toLowerCase() === 'bit' && !isJson(field.formattedValue)) {\n                  <div class=\"field-value boolean-value\"\n                    >\n                    <i [class]=\"field.value ? 'fa-solid fa-check-circle bool-true' : 'fa-solid fa-times-circle bool-false'\"></i>\n                    <span class=\"value-text\">{{ field.formattedValue }}</span>\n                  </div>\n                }\n                <!-- Empty value -->\n                @if (field.value == null && !isJson(field.formattedValue)) {\n                  <div class=\"field-value empty\"\n                    >\n                    <span class=\"value-text\">(empty)</span>\n                  </div>\n                }\n                <!-- Regular value -->\n                @if (field.value != null && !isJson(field.formattedValue) && !field.isLongText && field.sqlType.toLowerCase() !== 'bit') {\n                  <div class=\"field-value\"\n                    >\n                    <span class=\"value-text\"\n                      [class.monospace]=\"field.sqlType.toLowerCase().includes('uniqueidentifier') || field.name.toLowerCase().includes('id')\">\n                      {{ field.formattedValue }}\n                    </span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Backdrop -->\n@if (Visible) {\n  <div class=\"panel-backdrop\"\n    (click)=\"onClose()\">\n  </div>\n}\n", styles: ["/* Query Row Detail Panel Styles */\n\n:host {\n    display: block;\n}\n\n/* ========================================\n   Panel Container\n   ======================================== */\n\n.row-detail-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 100%;\n    background: #fff;\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1000;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n/* ========================================\n   Resize Handle\n   ======================================== */\n\n.resize-handle {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    transition: background 0.15s ease;\n    z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle.resizing {\n    background: rgba(33, 150, 243, 0.3);\n}\n\n.resize-handle::before {\n    content: '';\n    position: absolute;\n    left: 2px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 2px;\n    height: 40px;\n    background: #ccc;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover::before,\n.resize-handle.resizing::before {\n    background: #2196F3;\n}\n\n/* ========================================\n   Header\n   ======================================== */\n\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);\n    color: #fff;\n    flex-shrink: 0;\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-icon {\n    font-size: 20px;\n    opacity: 0.9;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.panel-title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #fff;\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* ========================================\n   Row Navigation\n   ======================================== */\n\n.row-nav {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    background: rgba(255, 255, 255, 0.15);\n    border-radius: 4px;\n}\n\n.nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s ease;\n}\n\n.nav-btn:hover:not(:disabled) {\n    background: rgba(255, 255, 255, 0.15);\n}\n\n.nav-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.row-indicator {\n    font-size: 12px;\n    font-weight: 500;\n    color: #fff;\n    padding: 0 4px;\n    min-width: 50px;\n    text-align: center;\n}\n\n/* ========================================\n   Action Buttons\n   ======================================== */\n\n.action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: rgba(255, 255, 255, 0.15);\n    color: #fff;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.action-btn:hover {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n.action-btn.active {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.hidden-count {\n    font-weight: 400;\n    font-size: 11px;\n    color: rgba(255, 255, 255, 0.7);\n    margin-left: auto;\n}\n\n/* ========================================\n   Content\n   ======================================== */\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n}\n\n/* ========================================\n   Field Sections\n   ======================================== */\n\n.field-section {\n    margin-bottom: 24px;\n}\n\n.field-section:last-child {\n    margin-bottom: 0;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n    padding-bottom: 8px;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.section-icon {\n    font-size: 12px;\n}\n\n.pk-icon {\n    color: #f9a825;\n}\n\n.fk-icon {\n    color: #2196F3;\n}\n\n/* ========================================\n   Field Items\n   ======================================== */\n\n.field-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item {\n    padding: 10px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border-left: 3px solid #5c6bc0;\n}\n\n.field-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.field-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n    flex-shrink: 0;\n}\n\n.field-type {\n    font-size: 11px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    color: #666;\n    background: #e8eaf6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.target-entity {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: #2196F3;\n    margin-left: auto;\n}\n\n.target-entity i {\n    font-size: 8px;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: #aaa;\n    cursor: pointer;\n    border-radius: 4px;\n    margin-left: auto;\n    opacity: 0;\n    transition: all 0.15s ease;\n}\n\n.field-item:hover .copy-btn {\n    opacity: 1;\n}\n\n.copy-btn:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #666;\n}\n\n/* ========================================\n   Field Values\n   ======================================== */\n\n.field-value {\n    font-size: 13px;\n    color: #333;\n    line-height: 1.5;\n    word-break: break-word;\n}\n\n.field-value.empty {\n    color: #999;\n    font-style: italic;\n}\n\n.field-value.clickable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 8px;\n    margin: -2px -4px;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.field-value.clickable:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n.entity-icon {\n    font-size: 12px;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.link-icon {\n    font-size: 10px;\n    color: #aaa;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.field-value.clickable:hover .link-icon {\n    opacity: 1;\n}\n\n.value-text {\n    flex: 1;\n}\n\n.value-text.monospace {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n/* ========================================\n   Boolean Values\n   ======================================== */\n\n.boolean-value {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.bool-true {\n    color: #4caf50;\n}\n\n.bool-false {\n    color: #9e9e9e;\n}\n\n/* ========================================\n   JSON Values\n   ======================================== */\n\n.json-value {\n    position: relative;\n}\n\n.json-content {\n    margin: 0;\n    padding: 8px;\n    background: #f5f5f5;\n    border-radius: 4px;\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 11px;\n    line-height: 1.4;\n    overflow: hidden;\n    max-height: 100px;\n    white-space: pre-wrap;\n    word-break: break-all;\n}\n\n.json-value.expanded .json-content {\n    max-height: none;\n}\n\n/* ========================================\n   Long Text Values\n   ======================================== */\n\n.long-text {\n    position: relative;\n}\n\n.long-text .value-text {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.long-text.expanded .value-text {\n    display: block;\n    -webkit-line-clamp: unset;\n}\n\n/* ========================================\n   Expand Button\n   ======================================== */\n\n.expand-btn {\n    display: inline-block;\n    margin-top: 6px;\n    padding: 4px 8px;\n    border: none;\n    background: transparent;\n    color: #2196F3;\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: background 0.15s ease;\n}\n\n.expand-btn:hover {\n    background: rgba(33, 150, 243, 0.1);\n}\n\n/* ========================================\n   Backdrop\n   ======================================== */\n\n.panel-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 999;\n}\n\n/* ========================================\n   Scrollbar\n   ======================================== */\n\n.panel-content::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n    background: #ccc;\n    border-radius: 3px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n    background: #aaa;\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 600px) {\n    .row-detail-panel {\n        width: 100% !important;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { RowData: [{
             type: Input
         }], Columns: [{
@@ -746,5 +753,5 @@ export class QueryRowDetailComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryRowDetailComponent, { className: "QueryRowDetailComponent", filePath: "src/lib/query-row-detail/query-row-detail.component.ts", lineNumber: 78 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryRowDetailComponent, { className: "QueryRowDetailComponent", filePath: "src/lib/query-row-detail/query-row-detail.component.ts", lineNumber: 79 }); })();
 //# sourceMappingURL=query-row-detail.component.js.map