@memberjunction/ng-dashboards 2.42.0

package/dist/EntityAdmin/components/entity-details.component.js

@@ -0,0 +1,684 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+const _c0 = ["fieldsListContainer"];
+const _c1 = ["relationshipsListContainer"];
+const _forTrack0 = ($index, $item) => $item.ID;
+const _c2 = (a0, a1, a2, a3) => ({ "primary-key-field": a0, "foreign-key-field": a1, "regular-field": a2, "field-expanded": a3 });
+function EntityDetailsComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "label");
+    i0.ɵɵtext(2, "Description:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.selectedEntity == null ? null : ctx_r0.selectedEntity.Description);
+} }
+function EntityDetailsComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16)(1, "button", 21);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("all")); });
+    i0.ɵɵtext(2, " All ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 22);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("keys")); });
+    i0.ɵɵtext(4, " Keys ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 23);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("foreign_keys")); });
+    i0.ɵɵtext(6, " FKs ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 24);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("regular")); });
+    i0.ɵɵtext(8, " Regular ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "all");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "keys");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "foreign_keys");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "regular");
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 29);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 30);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldValues(field_r4.ID)); });
+    i0.ɵɵelement(1, "span", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("expanded", ctx_r0.isFieldValuesExpanded(field_r4.ID));
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldDescription(field_r4.ID)); });
+    i0.ɵɵelement(1, "span", 46);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("expanded", ctx_r0.isFieldDescriptionExpanded(field_r4.ID));
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 35);
+    i0.ɵɵtext(1, "PK");
+    i0.ɵɵelementEnd();
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
+    i0.ɵɵtext(1, "FK");
+    i0.ɵɵelementEnd();
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "span", 47);
+    i0.ɵɵtext(2, " Related Entity ");
+    i0.ɵɵelementEnd();
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 48);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r4.Description);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const value_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(value_r7);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 49);
+    i0.ɵɵtext(2, "Possible Values:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 50);
+    i0.ɵɵrepeaterCreate(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_17_For_5_Template, 2, 1, "span", 51, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r0.getFieldPossibleValues(field_r4));
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 58);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r4.Description);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fieldValue_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("[", fieldValue_r8.Code, "]");
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fieldValue_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(fieldValue_r8.Description);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60)(1, "div", 61)(2, "span", 62);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template, 2, 1, "span", 63);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template, 2, 1, "div", 64);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const fieldValue_r8 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(fieldValue_r8.Value);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(fieldValue_r8.Code && fieldValue_r8.Code !== fieldValue_r8.Value ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(fieldValue_r8.Description && fieldValue_r8.Description !== fieldValue_r8.Value ? 5 : -1);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 49);
+    i0.ɵɵelement(2, "span", 44);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 59);
+    i0.ɵɵrepeaterCreate(5, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Template, 6, 3, "div", 60, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" Possible Values (", field_r4.EntityFieldValues.length, ") ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.getSortedEntityFieldValues(field_r4));
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Max Length:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(field_r4.Length);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Precision:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(field_r4.Precision);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Scale:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(field_r4.Scale);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Default Value:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 65);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(field_r4.DefaultValue);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Related Entity:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 66);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template_span_click_3_listener($event) { i0.ɵɵrestoreView(_r9); const field_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onRelatedEntityClick($event, field_r4)); });
+    i0.ɵɵtext(4);
+    i0.ɵɵelement(5, "span", 47);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate1("title", "Click to select ", field_r4.RelatedEntity, " in ERD");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r4.RelatedEntity, " ");
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵtext(2, "Auto Increment:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 67);
+    i0.ɵɵtext(4, "Yes");
+    i0.ɵɵelementEnd()();
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵtemplate(1, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_1_Template, 3, 1, "div", 52)(2, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_Template, 7, 1, "div", 53);
+    i0.ɵɵelementStart(3, "div", 54)(4, "div", 55)(5, "span", 56);
+    i0.ɵɵtext(6, "Data Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 57);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 55)(10, "span", 56);
+    i0.ɵɵtext(11, "Nullable:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 57);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(14, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_14_Template, 5, 1, "div", 55)(15, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_15_Template, 5, 1, "div", 55)(16, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_16_Template, 5, 1, "div", 55);
+    i0.ɵɵelementStart(17, "div", 55)(18, "span", 56);
+    i0.ɵɵtext(19, "Virtual Field:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 57);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(22, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_22_Template, 5, 1, "div", 55)(23, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template, 6, 3, "div", 55)(24, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_24_Template, 5, 0, "div", 55);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Description ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.EntityFieldValues && field_r4.EntityFieldValues.length > 0 ? 2 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(field_r4.Type);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(field_r4.AllowsNull ? "nullable-yes" : "nullable-no");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r4.AllowsNull ? "Yes" : "No", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Length && field_r4.Length > 0 ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Precision && field_r4.Precision > 0 ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Scale && field_r4.Scale > 0 ? 16 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(field_r4.IsVirtual ? "virtual-yes" : "virtual-no");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r4.IsVirtual ? "Yes" : "No", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.DefaultValue ? 22 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.RelatedEntityID ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.AutoIncrement ? 24 : -1);
+} }
+function EntityDetailsComponent_Conditional_30_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Template_div_click_0_listener() { const field_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFieldClick(field_r4)); });
+    i0.ɵɵelementStart(1, "div", 27)(2, "div", 28);
+    i0.ɵɵtemplate(3, EntityDetailsComponent_Conditional_30_For_3_Conditional_3_Template, 1, 0, "span", 29)(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_4_Template, 1, 0, "span", 30);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 31);
+    i0.ɵɵtemplate(7, EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template, 2, 2, "button", 32)(8, EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template, 2, 2, "button", 33);
+    i0.ɵɵelementStart(9, "div", 34);
+    i0.ɵɵtemplate(10, EntityDetailsComponent_Conditional_30_For_3_Conditional_10_Template, 2, 0, "span", 35)(11, EntityDetailsComponent_Conditional_30_For_3_Conditional_11_Template, 2, 0, "span", 36);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 37)(13, "div", 38);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(15, EntityDetailsComponent_Conditional_30_For_3_Conditional_15_Template, 3, 0, "div", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(16, EntityDetailsComponent_Conditional_30_For_3_Conditional_16_Template, 3, 1, "div", 40)(17, EntityDetailsComponent_Conditional_30_For_3_Conditional_17_Template, 6, 0, "div", 41)(18, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Template, 25, 15, "div", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(i0.ɵɵpureFunction4(14, _c2, field_r4.IsPrimaryKey, field_r4.RelatedEntityID && !field_r4.IsPrimaryKey, !field_r4.IsPrimaryKey && !field_r4.RelatedEntityID, ctx_r0.isFieldDetailsExpanded(field_r4.ID)));
+    i0.ɵɵproperty("title", "Click to see more details about " + field_r4.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(field_r4.IsPrimaryKey ? 3 : field_r4.RelatedEntityID ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r4.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.hasFieldPossibleValues(field_r4) ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Description ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(field_r4.IsPrimaryKey ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.RelatedEntityID && !field_r4.IsPrimaryKey ? 11 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r4.Type);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.RelatedEntityID ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r4.Description && ctx_r0.isFieldDescriptionExpanded(field_r4.ID) ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.hasFieldPossibleValues(field_r4) && ctx_r0.isFieldValuesExpanded(field_r4.ID) ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isFieldDetailsExpanded(field_r4.ID) ? 18 : -1);
+} }
+function EntityDetailsComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17, 0);
+    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_30_For_3_Template, 19, 19, "div", 25, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.getEntityFields((ctx_r0.selectedEntity == null ? null : ctx_r0.selectedEntity.ID) || ""));
+} }
+function EntityDetailsComponent_Conditional_38_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_38_For_3_Template_div_click_0_listener() { const relatedEntity_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.selectEntity(relatedEntity_r11, true)); });
+    i0.ɵɵelement(1, "span", 70);
+    i0.ɵɵelementStart(2, "span", 71);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "span", 72);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const relatedEntity_r11 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(relatedEntity_r11.Name || relatedEntity_r11.SchemaName);
+} }
+function EntityDetailsComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20, 1);
+    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_38_For_3_Template, 5, 1, "div", 68, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.getRelatedEntities((ctx_r0.selectedEntity == null ? null : ctx_r0.selectedEntity.ID) || ""));
+} }
+export class EntityDetailsComponent {
+    constructor() {
+        this.selectedEntity = null;
+        this.allEntityFields = [];
+        this.fieldsSectionExpanded = true;
+        this.relationshipsSectionExpanded = true;
+        this.openEntity = new EventEmitter();
+        this.closePanel = new EventEmitter();
+        this.fieldsSectionToggle = new EventEmitter();
+        this.relationshipsSectionToggle = new EventEmitter();
+        this.entitySelected = new EventEmitter();
+        this.openRecord = new EventEmitter();
+        this.fieldFilter = 'all';
+        this.expandedFieldDescriptions = new Set();
+        this.expandedFieldValues = new Set();
+        this.expandedFieldDetails = new Set();
+        this.previousSelectedEntityId = null;
+    }
+    ngOnInit() {
+        // Component initialization
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes['selectedEntity'] && !changes['selectedEntity'].firstChange) {
+            const currentEntityId = ((_a = this.selectedEntity) === null || _a === void 0 ? void 0 : _a.ID) || null;
+            // Check if entity actually changed
+            if (currentEntityId !== this.previousSelectedEntityId) {
+                // Reset scroll positions when entity changes
+                this.resetScrollPositions();
+                this.previousSelectedEntityId = currentEntityId;
+            }
+        }
+    }
+    resetScrollPositions() {
+        // Use setTimeout to ensure the DOM is updated
+        setTimeout(() => {
+            var _a, _b;
+            if ((_a = this.fieldsListContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                this.fieldsListContainer.nativeElement.scrollTop = 0;
+            }
+            if ((_b = this.relationshipsListContainer) === null || _b === void 0 ? void 0 : _b.nativeElement) {
+                this.relationshipsListContainer.nativeElement.scrollTop = 0;
+            }
+        }, 0);
+    }
+    onOpenEntity() {
+        if (this.selectedEntity) {
+            this.openRecord.emit({
+                EntityName: 'Entities',
+                RecordID: this.selectedEntity.ID
+            });
+        }
+    }
+    onClosePanel() {
+        this.closePanel.emit();
+    }
+    toggleFieldsSection() {
+        this.fieldsSectionToggle.emit();
+    }
+    toggleRelationshipsSection() {
+        this.relationshipsSectionToggle.emit();
+    }
+    setFieldFilter(filter) {
+        this.fieldFilter = filter;
+    }
+    getEntityFields(entityId) {
+        if (!entityId)
+            return [];
+        let fields = this.allEntityFields.filter(f => f.EntityID === entityId);
+        switch (this.fieldFilter) {
+            case 'keys':
+                return fields.filter(f => f.IsPrimaryKey || f.Name.toLowerCase().includes('id'));
+            case 'foreign_keys':
+                return fields.filter(f => f.RelatedEntityID && !f.IsPrimaryKey);
+            case 'regular':
+                return fields.filter(f => !f.IsPrimaryKey && !f.RelatedEntityID);
+            default:
+                return fields;
+        }
+    }
+    getRelatedEntities(entityId) {
+        if (!entityId)
+            return [];
+        const relatedEntityIds = new Array();
+        // Get entities that this entity references (foreign keys)
+        this.allEntityFields
+            .filter(f => f.EntityID === entityId && f.RelatedEntityID)
+            .forEach(f => relatedEntityIds.push(f.RelatedEntityID));
+        // Get entities that reference this entity
+        this.allEntityFields
+            .filter(f => f.RelatedEntityID === entityId)
+            .forEach(f => relatedEntityIds.push(f.EntityID));
+        // Convert to actual EntityInfo objects (would need entities list passed in)
+        // For now, returning empty array as we'd need the full entities list
+        const md = new Metadata();
+        const allEntities = md.Entities;
+        const retVals = [];
+        relatedEntityIds.forEach(id => {
+            if (id !== entityId) {
+                // don't return the current entity itself
+                const entity = allEntities.find(e => e.ID === id);
+                if (entity) {
+                    retVals.push(entity);
+                }
+            }
+        });
+        return retVals;
+    }
+    onFieldClick(field) {
+        this.toggleFieldDetails(field.ID);
+    }
+    toggleFieldDescription(fieldId) {
+        if (this.expandedFieldDescriptions.has(fieldId)) {
+            this.expandedFieldDescriptions.delete(fieldId);
+        }
+        else {
+            this.expandedFieldDescriptions.add(fieldId);
+        }
+    }
+    toggleFieldValues(fieldId) {
+        if (this.expandedFieldValues.has(fieldId)) {
+            this.expandedFieldValues.delete(fieldId);
+        }
+        else {
+            this.expandedFieldValues.add(fieldId);
+        }
+    }
+    toggleFieldDetails(fieldId) {
+        if (this.expandedFieldDetails.has(fieldId)) {
+            this.expandedFieldDetails.delete(fieldId);
+        }
+        else {
+            this.expandedFieldDetails.add(fieldId);
+        }
+    }
+    isFieldDescriptionExpanded(fieldId) {
+        return this.expandedFieldDescriptions.has(fieldId);
+    }
+    isFieldValuesExpanded(fieldId) {
+        return this.expandedFieldValues.has(fieldId);
+    }
+    isFieldDetailsExpanded(fieldId) {
+        return this.expandedFieldDetails.has(fieldId);
+    }
+    hasFieldPossibleValues(field) {
+        return field.EntityFieldValues && field.EntityFieldValues.length > 0;
+    }
+    getFieldPossibleValues(field) {
+        if (!field.EntityFieldValues)
+            return [];
+        return field.EntityFieldValues.map(v => v.Value).slice(0, 10);
+    }
+    getSortedEntityFieldValues(field) {
+        if (!field.EntityFieldValues)
+            return [];
+        return field.EntityFieldValues.sort((a, b) => {
+            if (a.Sequence !== undefined && b.Sequence !== undefined) {
+                return a.Sequence - b.Sequence;
+            }
+            return a.Value.localeCompare(b.Value);
+        });
+    }
+    onRelatedEntityClick(event, field) {
+        event.stopPropagation();
+        if (field.RelatedEntityID) {
+            // Find the related entity and select it in the ERD
+            const md = new Metadata();
+            const relatedEntity = md.Entities.find(e => e.ID === field.RelatedEntityID);
+            if (relatedEntity) {
+                this.entitySelected.emit(relatedEntity);
+            }
+        }
+    }
+    selectEntity(entity, _zoomTo = false) {
+        this.entitySelected.emit(entity);
+    }
+}
+EntityDetailsComponent.ɵfac = function EntityDetailsComponent_Factory(t) { return new (t || EntityDetailsComponent)(); };
+EntityDetailsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityDetailsComponent, selectors: [["mj-entity-details"]], viewQuery: function EntityDetailsComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+        i0.ɵɵviewQuery(_c1, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldsListContainer = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.relationshipsListContainer = _t.first);
+    } }, inputs: { selectedEntity: "selectedEntity", allEntityFields: "allEntityFields", fieldsSectionExpanded: "fieldsSectionExpanded", relationshipsSectionExpanded: "relationshipsSectionExpanded" }, outputs: { openEntity: "openEntity", closePanel: "closePanel", fieldsSectionToggle: "fieldsSectionToggle", relationshipsSectionToggle: "relationshipsSectionToggle", entitySelected: "entitySelected", openRecord: "openRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 39, vars: 21, consts: [["fieldsListContainer", ""], ["relationshipsListContainer", ""], [1, "details-panel"], [1, "panel-header"], [1, "panel-actions"], ["title", "Open Entity Record", 1, "open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "entity-info"], [1, "info-row"], [1, "fields-section"], [1, "section-header", "extra-padding"], [1, "section-title-group", 3, "click"], ["title", "Toggle fields section", 1, "expand-btn"], [1, "fa-solid", "fa-chevron-right"], [1, "field-filters"], [1, "fields-list"], [1, "relationships-section"], ["title", "Toggle relationships section", 1, "expand-btn"], [1, "related-entities-list"], ["title", "Show all fields", 1, "filter-btn", 3, "click"], ["title", "Show primary keys and ID fields", 1, "filter-btn", 3, "click"], ["title", "Show foreign key fields only", 1, "filter-btn", 3, "click"], ["title", "Show regular data fields", 1, "filter-btn", 3, "click"], [1, "field-item", 3, "class", "title"], [1, "field-item", 3, "click", "title"], [1, "field-header"], [1, "field-name"], ["title", "Primary Key", 1, "field-icon", "fa-solid", "fa-key"], ["title", "Foreign Key", 1, "field-icon", "fa-solid", "fa-link"], [1, "field-actions"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "expanded"], ["title", "Toggle field description", 1, "field-info-btn", 3, "expanded"], [1, "field-badges"], [1, "field-badge", "primary-key"], [1, "field-badge", "foreign-key"], [1, "field-details"], [1, "field-type"], [1, "field-relation"], [1, "field-description"], [1, "field-values"], [1, "field-comprehensive-details"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Toggle field description", 1, "field-info-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-arrow-right"], [1, "description-text"], [1, "values-header"], [1, "values-list"], [1, "value-tag"], [1, "comprehensive-description-top"], [1, "field-values-comprehensive"], [1, "details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "description-content"], [1, "values-grid"], [1, "value-item"], [1, "value-main"], [1, "value-text"], [1, "value-code"], [1, "value-description"], [1, "detail-value", "default-value"], [1, "detail-value", "related-entity", 3, "click", "title"], [1, "detail-value", "auto-increment"], [1, "related-entity-item"], [1, "related-entity-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "entity-name"], ["title", "Click to zoom to entity", 1, "zoom-indicator", "fa-solid", "fa-search-plus"]], template: function EntityDetailsComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h3");
+        i0.ɵɵtext(3);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(4, "div", 4)(5, "button", 5);
+        i0.ɵɵlistener("click", function EntityDetailsComponent_Template_button_click_5_listener() { return ctx.onOpenEntity(); });
+        i0.ɵɵelement(6, "span", 6);
+        i0.ɵɵtext(7, " Open ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(8, "button", 7);
+        i0.ɵɵlistener("click", function EntityDetailsComponent_Template_button_click_8_listener() { return ctx.onClosePanel(); });
+        i0.ɵɵelement(9, "span", 8);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵelementStart(10, "div", 9)(11, "div", 10)(12, "label");
+        i0.ɵɵtext(13, "Schema:");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(14, "span");
+        i0.ɵɵtext(15);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(16, "div", 10)(17, "label");
+        i0.ɵɵtext(18, "Table:");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(19, "span");
+        i0.ɵɵtext(20);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(21, EntityDetailsComponent_Conditional_21_Template, 5, 1, "div", 10);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(22, "div", 11)(23, "div", 12)(24, "div", 13);
+        i0.ɵɵlistener("click", function EntityDetailsComponent_Template_div_click_24_listener() { return ctx.toggleFieldsSection(); });
+        i0.ɵɵelementStart(25, "button", 14);
+        i0.ɵɵelement(26, "span", 15);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(27, "h4");
+        i0.ɵɵtext(28);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(29, EntityDetailsComponent_Conditional_29_Template, 9, 8, "div", 16);
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(30, EntityDetailsComponent_Conditional_30_Template, 4, 0, "div", 17);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(31, "div", 18)(32, "div", 12)(33, "div", 13);
+        i0.ɵɵlistener("click", function EntityDetailsComponent_Template_div_click_33_listener() { return ctx.toggleRelationshipsSection(); });
+        i0.ɵɵelementStart(34, "button", 19);
+        i0.ɵɵelement(35, "span", 15);
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(36, "h4");
+        i0.ɵɵtext(37);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵtemplate(38, EntityDetailsComponent_Conditional_38_Template, 4, 0, "div", 20);
+        i0.ɵɵelementEnd()();
+    } if (rf & 2) {
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate((ctx.selectedEntity == null ? null : ctx.selectedEntity.Name) || (ctx.selectedEntity == null ? null : ctx.selectedEntity.SchemaName));
+        i0.ɵɵadvance(12);
+        i0.ɵɵtextInterpolate(ctx.selectedEntity == null ? null : ctx.selectedEntity.SchemaName);
+        i0.ɵɵadvance(5);
+        i0.ɵɵtextInterpolate(ctx.selectedEntity == null ? null : ctx.selectedEntity.BaseTable);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional((ctx.selectedEntity == null ? null : ctx.selectedEntity.Description) ? 21 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵclassProp("section-expanded", ctx.fieldsSectionExpanded)("section-collapsed", !ctx.fieldsSectionExpanded);
+        i0.ɵɵadvance(3);
+        i0.ɵɵclassProp("expanded", ctx.fieldsSectionExpanded);
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1("Fields (", ctx.selectedEntity ? ctx.getEntityFields(ctx.selectedEntity.ID).length : 0, ")");
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.fieldsSectionExpanded ? 29 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.fieldsSectionExpanded ? 30 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵclassProp("section-expanded", ctx.relationshipsSectionExpanded)("section-collapsed", !ctx.relationshipsSectionExpanded);
+        i0.ɵɵadvance(3);
+        i0.ɵɵclassProp("expanded", ctx.relationshipsSectionExpanded);
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate1("Related Entities (", ctx.selectedEntity ? ctx.getRelatedEntities(ctx.selectedEntity.ID).length : 0, ")");
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 38 : -1);
+    } }, styles: [".details-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  \n  // Create proper scrolling structure\n  .panel-header {\n    flex-shrink: 0; // Header stays fixed\n  }\n  \n  .entity-info {\n    flex-shrink: 0; // Entity info stays fixed\n  }\n  \n  .fields-section,\n  .relationships-section {\n    display: flex;\n    flex-direction: column;\n    min-height: 0; // Important for flex scrolling\n    transition: flex 0.3s ease;\n    \n    &.section-expanded {\n      flex: 1;\n    }\n    \n    &.section-collapsed {\n      flex: 0 0 auto;\n    }\n    \n    &:last-child {\n      border-bottom: none;\n    }\n  }\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  \n  h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.open-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #4caf50;\n  border-radius: 4px;\n  background: #4caf50;\n  color: white;\n  cursor: pointer;\n  font-size: 10px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  \n  &:hover {\n    background-color: #45a049;\n    border-color: #45a049;\n  }\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  padding: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #666;\n  \n  &:hover {\n    color: #333;\n  }\n}\n\n.entity-info[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.info-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n  \n  &:last-child {\n    margin-bottom: 0;\n  }\n  \n  label {\n    font-weight: 600;\n    color: #666;\n    min-width: 60px;\n  }\n  \n  span {\n    color: #333;\n    flex: 1;\n    text-align: right;\n  }\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  \n  &.status-active {\n    background-color: #e8f5e8;\n    color: #2e7d32;\n  }\n  \n  &.status-deprecated {\n    background-color: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.status-disabled {\n    background-color: #ffebee;\n    color: #c62828;\n  }\n}\n\n.extra-padding[_ngcontent-%COMP%] {\n padding: 4px;\n}\n.fields-section[_ngcontent-%COMP%], .relationships-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #d0d0d0;\n  \n  .section-header {\n    flex-shrink: 0; // Header stays fixed\n    padding: 16px 16px 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: #f8f9fa;\n    border: none;\n    border-bottom: 1px solid #e9ecef;\n    \n    .section-title-group {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n  \n  h4 {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  padding: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #666;\n  border-radius: 3px;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background-color: #f0f0f0;\n    color: #333;\n  }\n  \n  .fa-solid {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n  }\n  \n  &.expanded .fa-solid {\n    transform: rotate(90deg);\n  }\n}\n\n.section-title-group[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n}\n\n.field-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 10px;\n  color: #666;\n  transition: all 0.2s;\n  \n  &:hover {\n    background-color: #f0f0f0;\n  }\n  \n  &.active {\n    background-color: #2196f3;\n    border-color: #2196f3;\n    color: white;\n  }\n}\n\n.fields-list[_ngcontent-%COMP%], .related-entities-list[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n  \n  // Enhanced scrollbar for better UX\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 3px;\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 3px;\n    \n    &:hover {\n      background: #a1a1a1;\n    }\n  }\n}\n\n.field-item[_ngcontent-%COMP%] {\n  padding: 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 11px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n  }\n  \n  &.field-expanded {\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    transform: scale(1.02);\n  }\n  \n  &.primary-key-field {\n    border-color: #ff9800;\n    background-color: #fff8e1;\n    border-left: 4px solid #ff9800;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);\n    }\n  }\n  \n  &.foreign-key-field {\n    border-color: #2196f3;\n    background-color: #f3f9ff;\n    border-left: 4px solid #2196f3;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    }\n  }\n  \n  &.regular-field {\n    border-color: #e0e0e0;\n    background-color: #fafafa;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    }\n  }\n}\n\n.field-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  \n  &.fa-key {\n    color: #ff9800;\n  }\n  \n  &.fa-link {\n    color: #2196f3;\n  }\n}\n\n.field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge[_ngcontent-%COMP%] {\n  padding: 1px 4px;\n  border-radius: 2px;\n  font-size: 8px;\n  font-weight: 700;\n  text-transform: uppercase;\n  \n  &.primary-key {\n    background-color: #ff9800;\n    color: white;\n  }\n  \n  &.foreign-key {\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n.field-type[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 10px;\n}\n\n.field-relation[_ngcontent-%COMP%] {\n  color: #2196f3;\n  font-size: 10px;\n  margin-top: 4px;\n  \n  .fa-solid {\n    margin-right: 4px;\n  }\n}\n\n.field-info-btn[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] {\n  padding: 2px 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #999;\n  border-radius: 3px;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background-color: #e3f2fd;\n    color: #2196f3;\n  }\n  \n  &.expanded {\n    color: #2196f3;\n    background-color: #e3f2fd;\n  }\n  \n  .fa-solid {\n    font-size: 10px;\n  }\n}\n\n\n.field-description[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background-color: #f8f9fa;\n  border-left: 3px solid #2196f3;\n  border-radius: 0 4px 4px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n  \n  .description-text {\n    font-size: 10px;\n    color: #555;\n    line-height: 1.4;\n    font-style: italic;\n  }\n}\n\n.field-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.field-values[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background-color: #f8f4ff;\n  border-left: 3px solid #9c27b0;\n  border-radius: 0 4px 4px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n  \n  .values-header {\n    font-size: 10px;\n    color: #9c27b0;\n    font-weight: 600;\n    margin-bottom: 6px;\n  }\n  \n  .values-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  \n  .value-tag {\n    display: inline-block;\n    padding: 2px 6px;\n    background-color: #e1bee7;\n    color: #4a148c;\n    font-size: 9px;\n    border-radius: 10px;\n    font-weight: 500;\n    white-space: nowrap;\n    max-width: 80px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    \n    &:hover {\n      background-color: #ce93d8;\n      color: #2e003e;\n      cursor: default;\n    }\n  }\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 12px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border: 1px solid #dee2e6;\n  border-radius: 6px;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n  \n  .details-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 10px;\n    padding-bottom: 6px;\n    border-bottom: 1px solid #dee2e6;\n    \n    .fa-solid {\n      color: #6c757d;\n    }\n  }\n  \n  .details-grid {\n    display: grid;\n    gap: 6px;\n  }\n  \n  .detail-row {\n    display: grid;\n    grid-template-columns: 100px 1fr;\n    gap: 8px;\n    font-size: 10px;\n    align-items: center;\n  }\n  \n  .detail-label {\n    font-weight: 600;\n    color: #6c757d;\n    text-align: right;\n  }\n  \n  .detail-value {\n    color: #495057;\n    font-family: 'Courier New', monospace;\n    background-color: #fff;\n    padding: 2px 6px;\n    border-radius: 3px;\n    border: 1px solid #dee2e6;\n    \n    &.nullable-yes,\n    &.nullable-no {\n      color: #495057;\n      background-color: #fff;\n      border-color: #dee2e6;\n    }\n    \n    &.virtual-yes {\n      color: #6f42c1;\n      background-color: #e2d9f3;\n      border-color: #d1c4e9;\n    }\n    \n    &.virtual-no {\n      color: #6c757d;\n    }\n    \n    &.default-value {\n      color: #856404;\n      background-color: #fff3cd;\n      border-color: #ffeaa7;\n    }\n    \n    &.related-entity {\n      color: #0066cc;\n      background-color: #cce5ff;\n      border-color: #99d6ff;\n      cursor: pointer;\n      user-select: none;\n      transition: all 0.2s ease;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      \n      &:hover {\n        text-decoration: underline;\n        background-color: #b3d9ff;\n        border-color: #66c2ff;\n        transform: translateX(2px);\n      }\n      \n      .fa-external-link-alt {\n        font-size: 8px;\n        opacity: 0.7;\n        transition: opacity 0.2s ease;\n      }\n      \n      &:hover .fa-external-link-alt {\n        opacity: 1;\n      }\n    }\n    \n    &.auto-increment {\n      color: #20c997;\n      background-color: #d1ecf1;\n      border-color: #bee5eb;\n    }\n  }\n  \n  .comprehensive-description-top {\n    margin-bottom: 12px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #dee2e6;\n    \n    .description-content {\n      font-size: 11px;\n      color: #495057;\n      line-height: 1.4;\n      font-style: italic;\n      background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);\n      padding: 10px;\n      border-radius: 6px;\n      border: 1px solid #bee5eb;\n      border-left: 4px solid #17a2b8;\n    }\n  }\n  \n  .field-values-comprehensive {\n    margin-bottom: 12px;\n    padding: 12px;\n    background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%);\n    border: 1px solid #e1bee7;\n    border-radius: 6px;\n    border-left: 4px solid #9c27b0;\n    \n    .values-header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #6a1b9a;\n      margin-bottom: 10px;\n      padding-bottom: 6px;\n      border-bottom: 1px solid #e1bee7;\n      \n      .fa-solid {\n        color: #9c27b0;\n      }\n    }\n    \n    .values-grid {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      max-height: 200px;\n      overflow-y: auto;\n      \n      &::-webkit-scrollbar {\n        width: 4px;\n      }\n      \n      &::-webkit-scrollbar-track {\n        background: #f3e5f5;\n        border-radius: 2px;\n      }\n      \n      &::-webkit-scrollbar-thumb {\n        background: #ce93d8;\n        border-radius: 2px;\n        \n        &:hover {\n          background: #ba68c8;\n        }\n      }\n    }\n    \n    .value-item {\n      padding: 8px;\n      background: white;\n      border: 1px solid #e1bee7;\n      border-radius: 4px;\n      \n      .value-main {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        margin-bottom: 2px;\n        \n        .value-text {\n          font-size: 10px;\n          font-weight: 600;\n          color: #4a148c;\n        }\n        \n        .value-code {\n          font-size: 9px;\n          color: #7b1fa2;\n          background: #f3e5f5;\n          padding: 1px 4px;\n          border-radius: 3px;\n          border: 1px solid #e1bee7;\n          font-family: 'Courier New', monospace;\n        }\n      }\n      \n      .value-description {\n        font-size: 9px;\n        color: #666;\n        line-height: 1.3;\n        font-style: italic;\n        margin-top: 2px;\n      }\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n.related-entity-item[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n  \n  &:hover {\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n    border-color: #2196f3;\n    transform: translateX(4px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n    \n    .zoom-indicator {\n      opacity: 1;\n      transform: scale(1.1);\n    }\n    \n    .fa-database {\n      color: #2196f3;\n      transform: scale(1.1);\n    }\n    \n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(to bottom, #2196f3, #9c27b0);\n      border-radius: 0 3px 3px 0;\n    }\n  }\n  \n  .fa-solid {\n    margin-right: 10px;\n    color: #666;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n  }\n  \n  .fa-database {\n    font-size: 14px;\n  }\n  \n  .entity-name {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n  }\n  \n  .zoom-indicator {\n    opacity: 0.4;\n    color: #2196f3;\n    font-size: 11px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n  }\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityDetailsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-details', template: "<div class=\"details-panel\">\n  <div class=\"panel-header\">\n    <h3>{{ selectedEntity?.Name || selectedEntity?.SchemaName }}</h3>\n    <div class=\"panel-actions\">\n      <button class=\"open-btn\" (click)=\"onOpenEntity()\" title=\"Open Entity Record\">\n        <span class=\"fa-solid fa-external-link-alt\"></span>\n        Open\n      </button>\n      <button class=\"close-btn\" (click)=\"onClosePanel()\">\n        <span class=\"fa-solid fa-times\"></span>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"entity-info\">\n    <div class=\"info-row\">\n      <label>Schema:</label>\n      <span>{{ selectedEntity?.SchemaName }}</span>\n    </div>\n    <div class=\"info-row\">\n      <label>Table:</label>\n      <span>{{ selectedEntity?.BaseTable }}</span>\n    </div>\n    @if (selectedEntity?.Description) {\n      <div class=\"info-row\">\n        <label>Description:</label>\n        <span>{{ selectedEntity?.Description }}</span>\n      </div>\n    }\n  </div>\n  \n  <div class=\"fields-section\" [class.section-expanded]=\"fieldsSectionExpanded\" [class.section-collapsed]=\"!fieldsSectionExpanded\">\n    <div class=\"section-header extra-padding\">\n      <div class=\"section-title-group\" (click)=\"toggleFieldsSection()\">\n        <button \n          class=\"expand-btn\" \n          [class.expanded]=\"fieldsSectionExpanded\"\n          title=\"Toggle fields section\">\n          <span class=\"fa-solid fa-chevron-right\"></span>\n        </button>\n        <h4>Fields ({{ selectedEntity ? getEntityFields(selectedEntity.ID).length : 0 }})</h4>\n      </div>\n      @if (fieldsSectionExpanded) {\n        <div class=\"field-filters\">\n          <button \n            class=\"filter-btn\" \n            [class.active]=\"fieldFilter === 'all'\"\n            (click)=\"setFieldFilter('all')\"\n            title=\"Show all fields\">\n            All\n          </button>\n          <button \n            class=\"filter-btn\" \n            [class.active]=\"fieldFilter === 'keys'\"\n            (click)=\"setFieldFilter('keys')\"\n            title=\"Show primary keys and ID fields\">\n            Keys\n          </button>\n          <button \n            class=\"filter-btn\" \n            [class.active]=\"fieldFilter === 'foreign_keys'\"\n            (click)=\"setFieldFilter('foreign_keys')\"\n            title=\"Show foreign key fields only\">\n            FKs\n          </button>\n          <button \n            class=\"filter-btn\" \n            [class.active]=\"fieldFilter === 'regular'\"\n            (click)=\"setFieldFilter('regular')\"\n            title=\"Show regular data fields\">\n            Regular\n          </button>\n        </div>\n      }\n    </div>\n    @if (fieldsSectionExpanded) {\n      <div class=\"fields-list\" #fieldsListContainer>\n        @for (field of getEntityFields(selectedEntity?.ID || ''); track field.ID) {\n          <div class=\"field-item\" \n               [class]=\"{ \n                 'primary-key-field': field.IsPrimaryKey,\n                 'foreign-key-field': field.RelatedEntityID && !field.IsPrimaryKey,\n                 'regular-field': !field.IsPrimaryKey && !field.RelatedEntityID,\n                 'field-expanded': isFieldDetailsExpanded(field.ID)\n               }\"\n               (click)=\"onFieldClick(field)\"\n               [title]=\"'Click to see more details about ' + field.Name\">\n            <div class=\"field-header\">\n              <div class=\"field-name\">\n                @if (field.IsPrimaryKey) {\n                  <span class=\"field-icon fa-solid fa-key\" title=\"Primary Key\"></span>\n                } @else if (field.RelatedEntityID) {\n                  <span class=\"field-icon fa-solid fa-link\" title=\"Foreign Key\"></span>\n                }\n                {{ field.Name }}\n              </div>\n              <div class=\"field-actions\">\n                @if (hasFieldPossibleValues(field)) {\n                  <button \n                    class=\"field-values-btn\"\n                    (click)=\"toggleFieldValues(field.ID)\"\n                    [class.expanded]=\"isFieldValuesExpanded(field.ID)\"\n                    title=\"Toggle possible values\">\n                    <span class=\"fa-solid fa-list\"></span>\n                  </button>\n                }\n                @if (field.Description) {\n                  <button \n                    class=\"field-info-btn\"\n                    (click)=\"toggleFieldDescription(field.ID)\"\n                    [class.expanded]=\"isFieldDescriptionExpanded(field.ID)\"\n                    title=\"Toggle field description\">\n                    <span class=\"fa-solid fa-info-circle\"></span>\n                  </button>\n                }\n                <div class=\"field-badges\">\n                  @if (field.IsPrimaryKey) {\n                    <span class=\"field-badge primary-key\">PK</span>\n                  }\n                  @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                    <span class=\"field-badge foreign-key\">FK</span>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"field-details\">\n              <div class=\"field-type\">{{ field.Type }}</div>\n              @if (field.RelatedEntityID) {\n                <div class=\"field-relation\">\n                  <span class=\"fa-solid fa-arrow-right\"></span>\n                  Related Entity\n                </div>\n              }\n            </div>\n            @if (field.Description && isFieldDescriptionExpanded(field.ID)) {\n              <div class=\"field-description\">\n                <div class=\"description-text\">{{ field.Description }}</div>\n              </div>\n            }\n            @if (hasFieldPossibleValues(field) && isFieldValuesExpanded(field.ID)) {\n              <div class=\"field-values\">\n                <div class=\"values-header\">Possible Values:</div>\n                <div class=\"values-list\">\n                  @for (value of getFieldPossibleValues(field); track value; let i = $index) {\n                    <span class=\"value-tag\">{{ value }}</span>\n                  }\n                </div>\n              </div>\n            }\n            @if (isFieldDetailsExpanded(field.ID)) {\n              <div class=\"field-comprehensive-details\">\n                @if (field.Description) {\n                  <div class=\"comprehensive-description-top\">\n                    <div class=\"description-content\">{{ field.Description }}</div>\n                  </div>\n                }\n                @if (field.EntityFieldValues && field.EntityFieldValues.length > 0) {\n                  <div class=\"field-values-comprehensive\">\n                    <div class=\"values-header\">\n                      <span class=\"fa-solid fa-list\"></span>\n                      Possible Values ({{ field.EntityFieldValues.length }})\n                    </div>\n                    <div class=\"values-grid\">\n                      @for (fieldValue of getSortedEntityFieldValues(field); track fieldValue.ID) {\n                        <div class=\"value-item\">\n                          <div class=\"value-main\">\n                            <span class=\"value-text\">{{ fieldValue.Value }}</span>\n                            @if (fieldValue.Code && fieldValue.Code !== fieldValue.Value) {\n                              <span class=\"value-code\">[{{ fieldValue.Code }}]</span>\n                            }\n                          </div>\n                          @if (fieldValue.Description && fieldValue.Description !== fieldValue.Value) {\n                            <div class=\"value-description\">{{ fieldValue.Description }}</div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n                <div class=\"details-grid\">\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Data Type:</span>\n                    <span class=\"detail-value\">{{ field.Type }}</span>\n                  </div>\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Nullable:</span>\n                    <span class=\"detail-value\" [class]=\"field.AllowsNull ? 'nullable-yes' : 'nullable-no'\">\n                      {{ field.AllowsNull ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.Length && field.Length > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Max Length:</span>\n                      <span class=\"detail-value\">{{ field.Length }}</span>\n                    </div>\n                  }\n                  @if (field.Precision && field.Precision > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Precision:</span>\n                      <span class=\"detail-value\">{{ field.Precision }}</span>\n                    </div>\n                  }\n                  @if (field.Scale && field.Scale > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Scale:</span>\n                      <span class=\"detail-value\">{{ field.Scale }}</span>\n                    </div>\n                  }\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Virtual Field:</span>\n                    <span class=\"detail-value\" [class]=\"field.IsVirtual ? 'virtual-yes' : 'virtual-no'\">\n                      {{ field.IsVirtual ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.DefaultValue) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Default Value:</span>\n                      <span class=\"detail-value default-value\">{{ field.DefaultValue }}</span>\n                    </div>\n                  }\n                  @if (field.RelatedEntityID) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Related Entity:</span>\n                      <span class=\"detail-value related-entity\" \n                            (click)=\"onRelatedEntityClick($event, field)\"\n                            title=\"Click to select {{ field.RelatedEntity }} in ERD\">\n                        {{ field.RelatedEntity }}\n                        <span class=\"fa-solid fa-arrow-right\"></span>\n                      </span>\n                    </div>\n                  }\n                  @if (field.AutoIncrement) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Auto Increment:</span>\n                      <span class=\"detail-value auto-increment\">Yes</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n    \n  <div class=\"relationships-section\" [class.section-expanded]=\"relationshipsSectionExpanded\" [class.section-collapsed]=\"!relationshipsSectionExpanded\">\n    <div class=\"section-header extra-padding\">\n      <div class=\"section-title-group\" (click)=\"toggleRelationshipsSection()\">\n        <button \n          class=\"expand-btn\" \n          [class.expanded]=\"relationshipsSectionExpanded\"\n          title=\"Toggle relationships section\">\n          <span class=\"fa-solid fa-chevron-right\"></span>\n        </button>\n        <h4>Related Entities ({{ selectedEntity ? getRelatedEntities(selectedEntity.ID).length : 0 }})</h4>\n      </div>\n    </div>\n    @if (relationshipsSectionExpanded) {\n      <div class=\"related-entities-list\" #relationshipsListContainer>\n        @for (relatedEntity of getRelatedEntities(selectedEntity?.ID || ''); track relatedEntity.ID) {\n          <div class=\"related-entity-item\" (click)=\"selectEntity(relatedEntity, true)\">\n            <span class=\"fa-solid fa-database\"></span>\n            <span class=\"entity-name\">{{ relatedEntity.Name || relatedEntity.SchemaName }}</span>\n            <span class=\"zoom-indicator fa-solid fa-search-plus\" title=\"Click to zoom to entity\"></span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>", styles: [".details-panel {\n  height: 100%;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  \n  // Create proper scrolling structure\n  .panel-header {\n    flex-shrink: 0; // Header stays fixed\n  }\n  \n  .entity-info {\n    flex-shrink: 0; // Entity info stays fixed\n  }\n  \n  .fields-section,\n  .relationships-section {\n    display: flex;\n    flex-direction: column;\n    min-height: 0; // Important for flex scrolling\n    transition: flex 0.3s ease;\n    \n    &.section-expanded {\n      flex: 1;\n    }\n    \n    &.section-collapsed {\n      flex: 0 0 auto;\n    }\n    \n    &:last-child {\n      border-bottom: none;\n    }\n  }\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background-color: #f5f5f5;\n  border-bottom: 1px solid #e0e0e0;\n  \n  h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.panel-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.open-btn {\n  padding: 4px 8px;\n  border: 1px solid #4caf50;\n  border-radius: 4px;\n  background: #4caf50;\n  color: white;\n  cursor: pointer;\n  font-size: 10px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  \n  &:hover {\n    background-color: #45a049;\n    border-color: #45a049;\n  }\n}\n\n.close-btn {\n  padding: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #666;\n  \n  &:hover {\n    color: #333;\n  }\n}\n\n.entity-info {\n  padding: 16px;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.info-row {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n  \n  &:last-child {\n    margin-bottom: 0;\n  }\n  \n  label {\n    font-weight: 600;\n    color: #666;\n    min-width: 60px;\n  }\n  \n  span {\n    color: #333;\n    flex: 1;\n    text-align: right;\n  }\n}\n\n.status-badge {\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  \n  &.status-active {\n    background-color: #e8f5e8;\n    color: #2e7d32;\n  }\n  \n  &.status-deprecated {\n    background-color: #fff3e0;\n    color: #f57c00;\n  }\n  \n  &.status-disabled {\n    background-color: #ffebee;\n    color: #c62828;\n  }\n}\n\n.extra-padding {\n padding: 4px;\n}\n.fields-section, .relationships-section {\n  border-bottom: 1px solid #d0d0d0;\n  \n  .section-header {\n    flex-shrink: 0; // Header stays fixed\n    padding: 16px 16px 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: #f8f9fa;\n    border: none;\n    border-bottom: 1px solid #e9ecef;\n    \n    .section-title-group {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n  \n  h4 {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #333;\n  }\n}\n\n.expand-btn {\n  padding: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #666;\n  border-radius: 3px;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background-color: #f0f0f0;\n    color: #333;\n  }\n  \n  .fa-solid {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n  }\n  \n  &.expanded .fa-solid {\n    transform: rotate(90deg);\n  }\n}\n\n.section-title-group {\n  cursor: pointer;\n  user-select: none;\n  \n  &:hover {\n    opacity: 0.8;\n  }\n}\n\n.field-filters {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn {\n  padding: 4px 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background: white;\n  cursor: pointer;\n  font-size: 10px;\n  color: #666;\n  transition: all 0.2s;\n  \n  &:hover {\n    background-color: #f0f0f0;\n  }\n  \n  &.active {\n    background-color: #2196f3;\n    border-color: #2196f3;\n    color: white;\n  }\n}\n\n.fields-list, .related-entities-list {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n  \n  // Enhanced scrollbar for better UX\n  &::-webkit-scrollbar {\n    width: 6px;\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 3px;\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 3px;\n    \n    &:hover {\n      background: #a1a1a1;\n    }\n  }\n}\n\n.field-item {\n  padding: 8px;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  font-size: 11px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n  }\n  \n  &.field-expanded {\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    transform: scale(1.02);\n  }\n  \n  &.primary-key-field {\n    border-color: #ff9800;\n    background-color: #fff8e1;\n    border-left: 4px solid #ff9800;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);\n    }\n  }\n  \n  &.foreign-key-field {\n    border-color: #2196f3;\n    background-color: #f3f9ff;\n    border-left: 4px solid #2196f3;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    }\n  }\n  \n  &.regular-field {\n    border-color: #e0e0e0;\n    background-color: #fafafa;\n    \n    &.field-expanded {\n      box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    }\n  }\n}\n\n.field-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name {\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon {\n  font-size: 10px;\n  \n  &.fa-key {\n    color: #ff9800;\n  }\n  \n  &.fa-link {\n    color: #2196f3;\n  }\n}\n\n.field-badges {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge {\n  padding: 1px 4px;\n  border-radius: 2px;\n  font-size: 8px;\n  font-weight: 700;\n  text-transform: uppercase;\n  \n  &.primary-key {\n    background-color: #ff9800;\n    color: white;\n  }\n  \n  &.foreign-key {\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n.field-type {\n  color: #666;\n  font-size: 10px;\n}\n\n.field-relation {\n  color: #2196f3;\n  font-size: 10px;\n  margin-top: 4px;\n  \n  .fa-solid {\n    margin-right: 4px;\n  }\n}\n\n.field-info-btn,\n.field-values-btn {\n  padding: 2px 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: #999;\n  border-radius: 3px;\n  transition: all 0.2s ease;\n  \n  &:hover {\n    background-color: #e3f2fd;\n    color: #2196f3;\n  }\n  \n  &.expanded {\n    color: #2196f3;\n    background-color: #e3f2fd;\n  }\n  \n  .fa-solid {\n    font-size: 10px;\n  }\n}\n\n\n.field-description {\n  margin-top: 8px;\n  padding: 8px;\n  background-color: #f8f9fa;\n  border-left: 3px solid #2196f3;\n  border-radius: 0 4px 4px 0;\n  animation: fadeIn 0.3s ease-in-out;\n  \n  .description-text {\n    font-size: 10px;\n    color: #555;\n    line-height: 1.4;\n    font-style: italic;\n  }\n}\n\n.field-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.field-values {\n  margin-top: 8px;\n  padding: 8px;\n  background-color: #f8f4ff;\n  border-left: 3px solid #9c27b0;\n  border-radius: 0 4px 4px 0;\n  animation: fadeIn 0.3s ease-in-out;\n  \n  .values-header {\n    font-size: 10px;\n    color: #9c27b0;\n    font-weight: 600;\n    margin-bottom: 6px;\n  }\n  \n  .values-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  \n  .value-tag {\n    display: inline-block;\n    padding: 2px 6px;\n    background-color: #e1bee7;\n    color: #4a148c;\n    font-size: 9px;\n    border-radius: 10px;\n    font-weight: 500;\n    white-space: nowrap;\n    max-width: 80px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    \n    &:hover {\n      background-color: #ce93d8;\n      color: #2e003e;\n      cursor: default;\n    }\n  }\n}\n\n.field-comprehensive-details {\n  margin-top: 12px;\n  padding: 12px;\n  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n  border: 1px solid #dee2e6;\n  border-radius: 6px;\n  animation: slideDown 0.3s ease-out;\n  \n  .details-header {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 10px;\n    padding-bottom: 6px;\n    border-bottom: 1px solid #dee2e6;\n    \n    .fa-solid {\n      color: #6c757d;\n    }\n  }\n  \n  .details-grid {\n    display: grid;\n    gap: 6px;\n  }\n  \n  .detail-row {\n    display: grid;\n    grid-template-columns: 100px 1fr;\n    gap: 8px;\n    font-size: 10px;\n    align-items: center;\n  }\n  \n  .detail-label {\n    font-weight: 600;\n    color: #6c757d;\n    text-align: right;\n  }\n  \n  .detail-value {\n    color: #495057;\n    font-family: 'Courier New', monospace;\n    background-color: #fff;\n    padding: 2px 6px;\n    border-radius: 3px;\n    border: 1px solid #dee2e6;\n    \n    &.nullable-yes,\n    &.nullable-no {\n      color: #495057;\n      background-color: #fff;\n      border-color: #dee2e6;\n    }\n    \n    &.virtual-yes {\n      color: #6f42c1;\n      background-color: #e2d9f3;\n      border-color: #d1c4e9;\n    }\n    \n    &.virtual-no {\n      color: #6c757d;\n    }\n    \n    &.default-value {\n      color: #856404;\n      background-color: #fff3cd;\n      border-color: #ffeaa7;\n    }\n    \n    &.related-entity {\n      color: #0066cc;\n      background-color: #cce5ff;\n      border-color: #99d6ff;\n      cursor: pointer;\n      user-select: none;\n      transition: all 0.2s ease;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      \n      &:hover {\n        text-decoration: underline;\n        background-color: #b3d9ff;\n        border-color: #66c2ff;\n        transform: translateX(2px);\n      }\n      \n      .fa-external-link-alt {\n        font-size: 8px;\n        opacity: 0.7;\n        transition: opacity 0.2s ease;\n      }\n      \n      &:hover .fa-external-link-alt {\n        opacity: 1;\n      }\n    }\n    \n    &.auto-increment {\n      color: #20c997;\n      background-color: #d1ecf1;\n      border-color: #bee5eb;\n    }\n  }\n  \n  .comprehensive-description-top {\n    margin-bottom: 12px;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #dee2e6;\n    \n    .description-content {\n      font-size: 11px;\n      color: #495057;\n      line-height: 1.4;\n      font-style: italic;\n      background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);\n      padding: 10px;\n      border-radius: 6px;\n      border: 1px solid #bee5eb;\n      border-left: 4px solid #17a2b8;\n    }\n  }\n  \n  .field-values-comprehensive {\n    margin-bottom: 12px;\n    padding: 12px;\n    background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%);\n    border: 1px solid #e1bee7;\n    border-radius: 6px;\n    border-left: 4px solid #9c27b0;\n    \n    .values-header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #6a1b9a;\n      margin-bottom: 10px;\n      padding-bottom: 6px;\n      border-bottom: 1px solid #e1bee7;\n      \n      .fa-solid {\n        color: #9c27b0;\n      }\n    }\n    \n    .values-grid {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      max-height: 200px;\n      overflow-y: auto;\n      \n      &::-webkit-scrollbar {\n        width: 4px;\n      }\n      \n      &::-webkit-scrollbar-track {\n        background: #f3e5f5;\n        border-radius: 2px;\n      }\n      \n      &::-webkit-scrollbar-thumb {\n        background: #ce93d8;\n        border-radius: 2px;\n        \n        &:hover {\n          background: #ba68c8;\n        }\n      }\n    }\n    \n    .value-item {\n      padding: 8px;\n      background: white;\n      border: 1px solid #e1bee7;\n      border-radius: 4px;\n      \n      .value-main {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        margin-bottom: 2px;\n        \n        .value-text {\n          font-size: 10px;\n          font-weight: 600;\n          color: #4a148c;\n        }\n        \n        .value-code {\n          font-size: 9px;\n          color: #7b1fa2;\n          background: #f3e5f5;\n          padding: 1px 4px;\n          border-radius: 3px;\n          border: 1px solid #e1bee7;\n          font-family: 'Courier New', monospace;\n        }\n      }\n      \n      .value-description {\n        font-size: 9px;\n        color: #666;\n        line-height: 1.3;\n        font-style: italic;\n        margin-top: 2px;\n      }\n    }\n  }\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n.related-entity-item {\n  padding: 10px 12px;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #333;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n  \n  &:hover {\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n    border-color: #2196f3;\n    transform: translateX(4px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n    \n    .zoom-indicator {\n      opacity: 1;\n      transform: scale(1.1);\n    }\n    \n    .fa-database {\n      color: #2196f3;\n      transform: scale(1.1);\n    }\n    \n    &::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      width: 3px;\n      background: linear-gradient(to bottom, #2196f3, #9c27b0);\n      border-radius: 0 3px 3px 0;\n    }\n  }\n  \n  .fa-solid {\n    margin-right: 10px;\n    color: #666;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n  }\n  \n  .fa-database {\n    font-size: 14px;\n  }\n  \n  .entity-name {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n  }\n  \n  .zoom-indicator {\n    opacity: 0.4;\n    color: #2196f3;\n    font-size: 11px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n  }\n}"] }]
+    }], null, { fieldsListContainer: [{
+            type: ViewChild,
+            args: ['fieldsListContainer', { static: false }]
+        }], relationshipsListContainer: [{
+            type: ViewChild,
+            args: ['relationshipsListContainer', { static: false }]
+        }], selectedEntity: [{
+            type: Input
+        }], allEntityFields: [{
+            type: Input
+        }], fieldsSectionExpanded: [{
+            type: Input
+        }], relationshipsSectionExpanded: [{
+            type: Input
+        }], openEntity: [{
+            type: Output
+        }], closePanel: [{
+            type: Output
+        }], fieldsSectionToggle: [{
+            type: Output
+        }], relationshipsSectionToggle: [{
+            type: Output
+        }], entitySelected: [{
+            type: Output
+        }], openRecord: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityDetailsComponent, { className: "EntityDetailsComponent", filePath: "src/EntityAdmin/components/entity-details.component.ts", lineNumber: 10 }); })();
+//# sourceMappingURL=entity-details.component.js.map