@memberjunction/ng-core-entity-forms 2.128.0 → 2.129.0

package/dist/lib/custom/Entities/entity-form.component.js

@@ -0,0 +1,2543 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { Metadata, CompositeKey, RunView } from '@memberjunction/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseFormComponent } from '@memberjunction/ng-base-forms';
+import { EntityFormComponent } from '../../generated/Entities/Entity/entity.form.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "@memberjunction/ng-entity-relationship-diagram";
+const _c0 = () => [1, 2, 3, 4, 5];
+const _c1 = a0 => [a0];
+const _c2 = () => [];
+function EntityFormComponentExtended_div_0_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "slice");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r1.entity.Description);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind3(2, 3, ctx_r1.entity.Description, 0, 80), "", ctx_r1.entity.Description.length > 80 ? "..." : "", " ");
+} }
+function EntityFormComponentExtended_div_0_span_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.formattedRowCount);
+} }
+function EntityFormComponentExtended_div_0_span_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_button_44_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 49);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r4.badge);
+} }
+function EntityFormComponentExtended_div_0_button_44_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_button_44_Template_button_click_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection(item_r4.id)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span", 47);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, EntityFormComponentExtended_div_0_button_44_span_4_Template, 2, 1, "span", 48);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r1.activeSection === item_r4.id);
+    i0.ɵɵproperty("title", item_r4.label);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(item_r4.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r4.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r4.badge);
+} }
+function EntityFormComponentExtended_div_0_section_46_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.stats.encryptedFieldCount, " Encrypted");
+} }
+function EntityFormComponentExtended_div_0_section_46_span_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "date");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Updated ", i0.ɵɵpipeBind2(2, 1, ctx_r1.entity.RowCountRunAt, "short"), "");
+} }
+function EntityFormComponentExtended_div_0_section_46_span_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Row count");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_46_span_63_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 82);
+    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cap_r6 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", cap_r6, " ");
+} }
+function EntityFormComponentExtended_div_0_section_46_span_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 84);
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " No API ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_46_div_90_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 76);
+    i0.ɵɵtext(2, "SP Create");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 81);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.spCreate);
+} }
+function EntityFormComponentExtended_div_0_section_46_div_91_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 76);
+    i0.ɵɵtext(2, "SP Update");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 81);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.spUpdate);
+} }
+function EntityFormComponentExtended_div_0_section_46_div_92_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 76);
+    i0.ɵɵtext(2, "SP Delete");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 81);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.spDelete);
+} }
+function EntityFormComponentExtended_div_0_section_46_div_108_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(1, "span", 76);
+    i0.ɵɵtext(2, "Subclass");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 81);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.EntityObjectSubclassName);
+} }
+function EntityFormComponentExtended_div_0_section_46_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 50)(1, "div", 51)(2, "div", 52)(3, "div", 53);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_46_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection("fields")); });
+    i0.ɵɵelementStart(4, "div", 54);
+    i0.ɵɵelement(5, "i", 55);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Fields");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 56)(9, "div", 57);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 58)(12, "span");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(16, EntityFormComponentExtended_div_0_section_46_span_16_Template, 2, 1, "span", 39);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 59);
+    i0.ɵɵelement(18, "i", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 61);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_46_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection("relationships")); });
+    i0.ɵɵelementStart(20, "div", 54);
+    i0.ɵɵelement(21, "i", 62);
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23, "Relationships");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 56)(25, "div", 57);
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "div", 58)(28, "span");
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span");
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(32, "div", 59);
+    i0.ɵɵelement(33, "i", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(34, "div", 63);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_46_Template_div_click_34_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection("permissions")); });
+    i0.ɵɵelementStart(35, "div", 54);
+    i0.ɵɵelement(36, "i", 64);
+    i0.ɵɵelementStart(37, "span");
+    i0.ɵɵtext(38, "Security");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(39, "div", 56)(40, "div", 57);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "div", 58)(43, "span");
+    i0.ɵɵtext(44, "Roles configured");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(45, "div", 59);
+    i0.ɵɵelement(46, "i", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(47, "div", 65)(48, "div", 54);
+    i0.ɵɵelement(49, "i", 23);
+    i0.ɵɵelementStart(50, "span");
+    i0.ɵɵtext(51, "Data");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(52, "div", 56)(53, "div", 57);
+    i0.ɵɵtext(54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(55, "div", 58);
+    i0.ɵɵtemplate(56, EntityFormComponentExtended_div_0_section_46_span_56_Template, 3, 4, "span", 39)(57, EntityFormComponentExtended_div_0_section_46_span_57_Template, 2, 0, "span", 39);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(58, "div", 66)(59, "h3", 67);
+    i0.ɵɵelement(60, "i", 68);
+    i0.ɵɵtext(61, " Capabilities ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(62, "div", 69);
+    i0.ɵɵtemplate(63, EntityFormComponentExtended_div_0_section_46_span_63_Template, 3, 1, "span", 70)(64, EntityFormComponentExtended_div_0_section_46_span_64_Template, 3, 0, "span", 71);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(65, "div", 72)(66, "h3", 67);
+    i0.ɵɵelement(67, "i", 73);
+    i0.ɵɵtext(68, " Database ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(69, "div", 74)(70, "div", 75)(71, "span", 76);
+    i0.ɵɵtext(72, "Schema");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(73, "span", 77);
+    i0.ɵɵtext(74);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(75, "div", 75)(76, "span", 76);
+    i0.ɵɵtext(77, "Table");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(78, "span", 77);
+    i0.ɵɵtext(79);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(80, "div", 75)(81, "span", 76);
+    i0.ɵɵtext(82, "View");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(83, "span", 77);
+    i0.ɵɵtext(84);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(85, "div", 75)(86, "span", 76);
+    i0.ɵɵtext(87, "Delete Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(88, "span", 77);
+    i0.ɵɵtext(89);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(90, EntityFormComponentExtended_div_0_section_46_div_90_Template, 5, 1, "div", 78)(91, EntityFormComponentExtended_div_0_section_46_div_91_Template, 5, 1, "div", 78)(92, EntityFormComponentExtended_div_0_section_46_div_92_Template, 5, 1, "div", 78);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(93, "div", 79)(94, "h3", 67);
+    i0.ɵɵelement(95, "i", 80);
+    i0.ɵɵtext(96, " Code Generation ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(97, "div", 74)(98, "div", 75)(99, "span", 76);
+    i0.ɵɵtext(100, "Class Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(101, "span", 81);
+    i0.ɵɵtext(102);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(103, "div", 75)(104, "span", 76);
+    i0.ɵɵtext(105, "Code Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(106, "span", 81);
+    i0.ɵɵtext(107);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(108, EntityFormComponentExtended_div_0_section_46_div_108_Template, 5, 1, "div", 78);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.fieldCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.stats.primaryKeyCount, " PKs");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.stats.foreignKeyCount, " FKs");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.stats.encryptedFieldCount);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.relationshipCount);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.groupedOutgoingRelationships.length, " Out");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.groupedIncomingRelationships.length, " In");
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.permissionCount);
+    i0.ɵɵadvance(13);
+    i0.ɵɵtextInterpolate(ctx_r1.formattedRowCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.RowCountRunAt);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.entity.RowCountRunAt);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngForOf", ctx_r1.capabilitySummary);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.entity.IncludeInAPI);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.SchemaName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.BaseTable);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.BaseView);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.DeleteType);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.spCreate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.spUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.spDelete);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.ClassName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.CodeName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.EntityObjectSubclassName);
+} }
+function EntityFormComponentExtended_div_0_section_47_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 100)(1, "button", 101);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.expandAllFieldGroups()); });
+    i0.ɵɵelement(2, "i", 102);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 103);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.collapseAllFieldGroups()); });
+    i0.ɵɵelement(4, "i", 104);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.allFieldGroupsExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.allFieldGroupsCollapsed);
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 128);
+    i0.ɵɵtext(1, "Required");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_10_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 129);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_10_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const field_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.navigateToRelatedEntity(field_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r12 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getRelatedEntityName(field_r12), " ");
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 130);
+    i0.ɵɵtext(1, "PK");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 131);
+    i0.ɵɵtext(1, "FK");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 132);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 116);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_Template_div_click_0_listener() { const field_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.selectField(field_r12)); });
+    i0.ɵɵelementStart(1, "div", 117);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 118)(4, "div", 119);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 120)(7, "span", 121);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_9_Template, 2, 0, "span", 122)(10, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_10_Template, 3, 1, "span", 123);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 124);
+    i0.ɵɵtemplate(12, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_12_Template, 2, 0, "span", 125)(13, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_13_Template, 2, 0, "span", 126)(14, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_span_14_Template, 2, 0, "span", 127);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("selected", (ctx_r1.selectedField == null ? null : ctx_r1.selectedField.ID) === field_r12.ID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getFieldTypeIcon(field_r12));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r12.DisplayName || field_r12.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.formatFieldType(field_r12));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !field_r12.AllowsNull);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r12.RelatedEntityID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", field_r12.IsPrimaryKey);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r12.RelatedEntityID && !field_r12.IsPrimaryKey);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r12.Encrypt);
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 114);
+    i0.ɵɵtemplate(1, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_div_1_Template, 15, 11, "div", 115);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", group_r10.fields);
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 107)(1, "div", 108);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_13_div_1_Template_div_click_1_listener() { const group_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleFieldGroup(group_r10.id)); });
+    i0.ɵɵelement(2, "i", 109)(3, "i", 110);
+    i0.ɵɵelementStart(4, "span", 111);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 112);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, EntityFormComponentExtended_div_0_section_47_div_13_div_1_div_8_Template, 2, 1, "div", 113);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("expanded", ctx_r1.isFieldGroupExpanded(group_r10.id));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.isFieldGroupExpanded(group_r10.id) ? "fa-chevron-down" : "fa-chevron-right");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(group_r10.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r10.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r10.fields.length);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isFieldGroupExpanded(group_r10.id));
+} }
+function EntityFormComponentExtended_div_0_section_47_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵtemplate(1, EntityFormComponentExtended_div_0_section_47_div_13_div_1_Template, 9, 8, "div", 106);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.getFilteredFieldGroups());
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 165);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r16.Length);
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 166);
+    i0.ɵɵtext(1, "\u2014");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 167);
+    i0.ɵɵelement(1, "i", 168);
+    i0.ɵɵtext(2, " PK ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 169);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵtext(2, " FK ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 170);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_23_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 146);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_div_23_Template_div_click_0_listener() { const field_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectField(field_r16)); });
+    i0.ɵɵelementStart(1, "div", 147)(2, "span", 148);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 149);
+    i0.ɵɵelement(5, "i", 150);
+    i0.ɵɵelementStart(6, "span", 151);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 152)(9, "span", 153);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 154);
+    i0.ɵɵtemplate(12, EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_12_Template, 2, 1, "span", 155)(13, EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_13_Template, 2, 0, "span", 156);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 157)(15, "span", 158);
+    i0.ɵɵelement(16, "i");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 141)(19, "div", 159);
+    i0.ɵɵtemplate(20, EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_20_Template, 3, 0, "span", 160)(21, EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_21_Template, 3, 0, "span", 161)(22, EntityFormComponentExtended_div_0_section_47_div_14_div_23_span_22_Template, 2, 0, "span", 162);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 163)(24, "span", 164);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const field_r16 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", (ctx_r1.selectedField == null ? null : ctx_r1.selectedField.ID) === field_r16.ID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r16.Sequence);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getFieldTypeIcon(field_r16));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r16.DisplayName || field_r16.Name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(field_r16.Type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", field_r16.Length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r16.Length <= 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("required", !field_r16.AllowsNull)("optional", field_r16.AllowsNull);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(field_r16.AllowsNull ? "fa-solid fa-circle-minus" : "fa-solid fa-circle-check");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r16.AllowsNull ? "Optional" : "Required", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", field_r16.IsPrimaryKey);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r16.RelatedEntityID && !field_r16.IsPrimaryKey);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r16.Encrypt);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", field_r16.Description || "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r16.Description || "\u2014");
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 171);
+    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No fields match your search");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_47_div_14_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 133)(1, "div", 134)(2, "div", 135);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("Sequence")); });
+    i0.ɵɵtext(3, " # ");
+    i0.ɵɵelement(4, "i", 136);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 137);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("Name")); });
+    i0.ɵɵtext(6, " Field Name ");
+    i0.ɵɵelement(7, "i", 136);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 138);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("Type")); });
+    i0.ɵɵtext(9, " Type ");
+    i0.ɵɵelement(10, "i", 136);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 139);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("Length")); });
+    i0.ɵɵtext(12, " Length ");
+    i0.ɵɵelement(13, "i", 136);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 140);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("AllowsNull")); });
+    i0.ɵɵtext(15, " Required ");
+    i0.ɵɵelement(16, "i", 136);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 141);
+    i0.ɵɵtext(18, "Flags");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 142);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_div_14_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.sortFieldList("Description")); });
+    i0.ɵɵtext(20, " Description ");
+    i0.ɵɵelement(21, "i", 136);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 143);
+    i0.ɵɵtemplate(23, EntityFormComponentExtended_div_0_section_47_div_14_div_23_Template, 26, 21, "div", 144);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(24, EntityFormComponentExtended_div_0_section_47_div_14_div_24_Template, 4, 0, "div", 145);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "Sequence");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "Sequence" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "Name");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "Name" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "Type");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "Type" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "Length");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "Length" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "AllowsNull");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "AllowsNull" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("sorted", ctx_r1.fieldListSortColumn === "Description");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.fieldListSortColumn === "Description" ? ctx_r1.fieldListSortDirection === "asc" ? "fa-caret-up" : "fa-caret-down" : "fa-sort");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.getFilteredFieldsList());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.getFilteredFieldsList().length === 0);
+} }
+function EntityFormComponentExtended_div_0_section_47_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 85)(1, "div", 86)(2, "div", 87);
+    i0.ɵɵelement(3, "i", 88);
+    i0.ɵɵelementStart(4, "input", 89);
+    i0.ɵɵlistener("ngModelChange", function EntityFormComponentExtended_div_0_section_47_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onFieldSearch($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 90)(6, "div", 91)(7, "button", 92);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.fieldViewMode = "grouped"); });
+    i0.ɵɵelement(8, "i", 93);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 94);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_47_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.fieldViewMode = "list"); });
+    i0.ɵɵelement(10, "i", 95);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, EntityFormComponentExtended_div_0_section_47_div_11_Template, 5, 2, "div", 96);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 97);
+    i0.ɵɵtemplate(13, EntityFormComponentExtended_div_0_section_47_div_13_Template, 2, 1, "div", 98)(14, EntityFormComponentExtended_div_0_section_47_div_14_Template, 25, 20, "div", 99);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngModel", ctx_r1.fieldSearchTerm);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.fieldViewMode === "grouped");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.fieldViewMode === "list");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.fieldViewMode === "grouped");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.fieldViewMode === "grouped");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.fieldViewMode === "list");
+} }
+function EntityFormComponentExtended_div_0_section_48_div_9_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 182);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_48_div_9_button_4_Template_button_click_0_listener() { const d_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setErdDepth(d_r19)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const d_r19 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("active", ctx_r1.erdDepth === d_r19);
+    i0.ɵɵproperty("title", "Show " + d_r19 + " level(s) of relationships");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", d_r19, " ");
+} }
+function EntityFormComponentExtended_div_0_section_48_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 178)(1, "span", 179);
+    i0.ɵɵtext(2, "Depth:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 180);
+    i0.ɵɵtemplate(4, EntityFormComponentExtended_div_0_section_48_div_9_button_4_Template, 2, 4, "button", 181);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpureFunction0(1, _c0));
+} }
+function EntityFormComponentExtended_div_0_section_48_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 183)(1, "mj-erd-composite", 184);
+    i0.ɵɵlistener("stateChange", function EntityFormComponentExtended_div_0_section_48_div_11_Template_mj_erd_composite_stateChange_1_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onERDStateChange($event)); })("openRecord", function EntityFormComponentExtended_div_0_section_48_div_11_Template_mj_erd_composite_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onERDOpenRecord($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("focusEntities", ctx_r1.entity ? i0.ɵɵpureFunction1(4, _c1, ctx_r1.entity) : i0.ɵɵpureFunction0(6, _c2))("showFilterPanel", false)("showHeader", false)("depth", ctx_r1.erdDepth);
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_8_span_7_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 199);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_48_div_12_div_8_span_7_Template_span_click_0_listener() { const field_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.selectField(field_r22)); });
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r22 = ctx.$implicit;
+    i0.ɵɵproperty("title", field_r22.Description || field_r22.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r22.Name, " ");
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 193)(1, "div", 194)(2, "div", 195);
+    i0.ɵɵelement(3, "i", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 196);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 197);
+    i0.ɵɵtemplate(7, EntityFormComponentExtended_div_0_section_48_div_12_div_8_span_7_Template, 3, 2, "span", 198);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r23 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(group_r23.entityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", group_r23.fields);
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 200)(1, "p");
+    i0.ɵɵtext(2, "No outgoing relationships");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_17_span_7_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 206);
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_17_span_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 204);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵtext(2);
+    i0.ɵɵtemplate(3, EntityFormComponentExtended_div_0_section_48_div_12_div_17_span_7_i_3_Template, 1, 0, "i", 205);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r24 = ctx.$implicit;
+    i0.ɵɵproperty("title", "Type: " + field_r24.type);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", field_r24.fieldName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r24.bundleInAPI);
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 193)(1, "div", 194)(2, "div", 201);
+    i0.ɵɵelement(3, "i", 202);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 196);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 197);
+    i0.ɵɵtemplate(7, EntityFormComponentExtended_div_0_section_48_div_12_div_17_span_7_Template, 4, 3, "span", 203);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r25 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(group_r25.entityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", group_r25.fields);
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 200)(1, "p");
+    i0.ɵɵtext(2, "No incoming relationships");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_48_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 185)(1, "div", 186)(2, "h3", 187);
+    i0.ɵɵelement(3, "i", 188);
+    i0.ɵɵtext(4, " Outgoing (References to other entities) ");
+    i0.ɵɵelementStart(5, "span", 112);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 189);
+    i0.ɵɵtemplate(8, EntityFormComponentExtended_div_0_section_48_div_12_div_8_Template, 8, 2, "div", 190)(9, EntityFormComponentExtended_div_0_section_48_div_12_div_9_Template, 3, 0, "div", 191);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 186)(11, "h3", 187);
+    i0.ɵɵelement(12, "i", 192);
+    i0.ɵɵtext(13, " Incoming (Entities that reference this one) ");
+    i0.ɵɵelementStart(14, "span", 112);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 189);
+    i0.ɵɵtemplate(17, EntityFormComponentExtended_div_0_section_48_div_12_div_17_Template, 8, 2, "div", 190)(18, EntityFormComponentExtended_div_0_section_48_div_12_div_18_Template, 3, 0, "div", 191);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.groupedOutgoingRelationships.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.groupedOutgoingRelationships);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.groupedOutgoingRelationships.length === 0);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.groupedIncomingRelationships.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.groupedIncomingRelationships);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.groupedIncomingRelationships.length === 0);
+} }
+function EntityFormComponentExtended_div_0_section_48_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 172)(1, "div", 86)(2, "div", 173)(3, "button", 174);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_48_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.relationshipViewMode = "diagram"); });
+    i0.ɵɵelement(4, "i", 62);
+    i0.ɵɵtext(5, " Diagram ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 174);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_section_48_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.relationshipViewMode = "list"); });
+    i0.ɵɵelement(7, "i", 95);
+    i0.ɵɵtext(8, " List ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(9, EntityFormComponentExtended_div_0_section_48_div_9_Template, 5, 2, "div", 175);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 51);
+    i0.ɵɵtemplate(11, EntityFormComponentExtended_div_0_section_48_div_11_Template, 2, 7, "div", 176)(12, EntityFormComponentExtended_div_0_section_48_div_12_Template, 19, 6, "div", 177);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.relationshipViewMode === "diagram");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.relationshipViewMode === "list");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.relationshipViewMode === "diagram");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.relationshipViewMode === "diagram");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.relationshipViewMode === "list");
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 225);
+    i0.ɵɵtext(1, "R");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 226);
+    i0.ɵɵtext(1, "C");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_span_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 227);
+    i0.ɵɵtext(1, "U");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_span_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 228);
+    i0.ɵɵtext(1, "D");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 229);
+    i0.ɵɵtext(1, "None");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_49_tr_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 217);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td", 210);
+    i0.ɵɵelement(4, "i", 218);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td", 210);
+    i0.ɵɵelement(6, "i", 218);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "td", 210);
+    i0.ɵɵelement(8, "i", 218);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "td", 210);
+    i0.ɵɵelement(10, "i", 218);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "td", 219);
+    i0.ɵɵtemplate(12, EntityFormComponentExtended_div_0_section_49_tr_19_span_12_Template, 2, 0, "span", 220)(13, EntityFormComponentExtended_div_0_section_49_tr_19_span_13_Template, 2, 0, "span", 221)(14, EntityFormComponentExtended_div_0_section_49_tr_19_span_14_Template, 2, 0, "span", 222)(15, EntityFormComponentExtended_div_0_section_49_tr_19_span_15_Template, 2, 0, "span", 223)(16, EntityFormComponentExtended_div_0_section_49_tr_19_span_16_Template, 2, 0, "span", 224);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const perm_r26 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getRoleName(perm_r26));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", perm_r26.CanCreate ? "fa-solid fa-check granted" : "fa-solid fa-xmark denied");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", perm_r26.CanRead ? "fa-solid fa-check granted" : "fa-solid fa-xmark denied");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", perm_r26.CanUpdate ? "fa-solid fa-check granted" : "fa-solid fa-xmark denied");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", perm_r26.CanDelete ? "fa-solid fa-check granted" : "fa-solid fa-xmark denied");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", perm_r26.ReadRLSFilterID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", perm_r26.CreateRLSFilterID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", perm_r26.UpdateRLSFilterID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", perm_r26.DeleteRLSFilterID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !perm_r26.ReadRLSFilterID && !perm_r26.CreateRLSFilterID && !perm_r26.UpdateRLSFilterID && !perm_r26.DeleteRLSFilterID);
+} }
+function EntityFormComponentExtended_div_0_section_49_div_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 200);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No permissions configured");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 207)(1, "div", 51)(2, "div", 208)(3, "table", 209)(4, "thead")(5, "tr")(6, "th");
+    i0.ɵɵtext(7, "Role");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th", 210);
+    i0.ɵɵtext(9, "Create");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th", 210);
+    i0.ɵɵtext(11, "Read");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th", 210);
+    i0.ɵɵtext(13, "Update");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "th", 210);
+    i0.ɵɵtext(15, "Delete");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "th");
+    i0.ɵɵtext(17, "RLS");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "tbody");
+    i0.ɵɵtemplate(19, EntityFormComponentExtended_div_0_section_49_tr_19_Template, 17, 10, "tr", 211);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(20, EntityFormComponentExtended_div_0_section_49_div_20_Template, 4, 0, "div", 191);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 212)(22, "h3", 67);
+    i0.ɵɵelement(23, "i", 213);
+    i0.ɵɵtext(24, " API Capabilities ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 214)(26, "div", 215);
+    i0.ɵɵelement(27, "i", 216);
+    i0.ɵɵelementStart(28, "span");
+    i0.ɵɵtext(29, "Include in API");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "div", 215);
+    i0.ɵɵelement(31, "i", 216);
+    i0.ɵɵelementStart(32, "span");
+    i0.ɵɵtext(33, "Allow All Rows");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(34, "div", 215);
+    i0.ɵɵelement(35, "i", 216);
+    i0.ɵɵelementStart(36, "span");
+    i0.ɵɵtext(37, "Allow Create");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(38, "div", 215);
+    i0.ɵɵelement(39, "i", 216);
+    i0.ɵɵelementStart(40, "span");
+    i0.ɵɵtext(41, "Allow Update");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(42, "div", 215);
+    i0.ɵɵelement(43, "i", 216);
+    i0.ɵɵelementStart(44, "span");
+    i0.ɵɵtext(45, "Allow Delete");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(46, "div", 215);
+    i0.ɵɵelement(47, "i", 216);
+    i0.ɵɵelementStart(48, "span");
+    i0.ɵɵtext(49, "User Search");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(50, "div", 215);
+    i0.ɵɵelement(51, "i", 216);
+    i0.ɵɵelementStart(52, "span");
+    i0.ɵɵtext(53, "Custom Resolver");
+    i0.ɵɵelementEnd()()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(19);
+    i0.ɵɵproperty("ngForOf", ctx_r1.entity.Permissions);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.Permissions.length === 0);
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.IncludeInAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.IncludeInAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AllowAllRowsAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AllowAllRowsAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AllowCreateAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AllowCreateAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AllowUpdateAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AllowUpdateAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AllowDeleteAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AllowDeleteAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AllowUserSearchAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AllowUserSearchAPI ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.CustomResolverAPI);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.CustomResolverAPI ? "fa-check" : "fa-xmark");
+} }
+function EntityFormComponentExtended_div_0_section_50_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 234);
+    i0.ɵɵelement(1, "i", 213);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "API Create");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_50_div_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 234);
+    i0.ɵɵelement(1, "i", 242);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Record Changes");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_50_div_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 234);
+    i0.ɵɵelement(1, "i", 247);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Access Audit");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 230)(1, "div", 51)(2, "div", 231)(3, "div", 232)(4, "h4");
+    i0.ɵɵtext(5, "Data Sources");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 233)(7, "div", 234);
+    i0.ɵɵelement(8, "i", 235);
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Manual Entry");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, EntityFormComponentExtended_div_0_section_50_div_11_Template, 4, 0, "div", 236);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 237);
+    i0.ɵɵelement(13, "i", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 238)(15, "div", 239);
+    i0.ɵɵelement(16, "i");
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 237);
+    i0.ɵɵelement(20, "i", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 240)(22, "h4");
+    i0.ɵɵtext(23, "Data Sinks");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 233);
+    i0.ɵɵtemplate(25, EntityFormComponentExtended_div_0_section_50_div_25_Template, 4, 0, "div", 236)(26, EntityFormComponentExtended_div_0_section_50_div_26_Template, 4, 0, "div", 236);
+    i0.ɵɵelementStart(27, "div", 234);
+    i0.ɵɵelement(28, "i", 20);
+    i0.ɵɵelementStart(29, "span");
+    i0.ɵɵtext(30);
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(31, "div", 241)(32, "h3", 67);
+    i0.ɵɵelement(33, "i", 242);
+    i0.ɵɵtext(34, " Tracking Configuration ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "div", 243)(36, "div", 244);
+    i0.ɵɵelement(37, "i", 216);
+    i0.ɵɵelementStart(38, "span");
+    i0.ɵɵtext(39, "Track Record Changes");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(40, "div", 244);
+    i0.ɵɵelement(41, "i", 216);
+    i0.ɵɵelementStart(42, "span");
+    i0.ɵɵtext(43, "Audit Record Access");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(44, "div", 244);
+    i0.ɵɵelement(45, "i", 216);
+    i0.ɵɵelementStart(46, "span");
+    i0.ɵɵtext(47, "Audit View Runs");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(48, "div", 244)(49, "span", 245);
+    i0.ɵɵtext(50, "Delete Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(51, "span", 246);
+    i0.ɵɵtext(52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(53, "div", 244);
+    i0.ɵɵelement(54, "i", 216);
+    i0.ɵɵelementStart(55, "span");
+    i0.ɵɵtext(56, "Cascade Deletes");
+    i0.ɵɵelementEnd()()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.IncludeInAPI);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassMap(ctx_r1.entityIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.Name);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.TrackRecordChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.AuditRecordAccess);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Related Entities (", ctx_r1.stats.relationshipCount, ")");
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.TrackRecordChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.TrackRecordChanges ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AuditRecordAccess);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AuditRecordAccess ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.AuditViewRuns);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.AuditViewRuns ? "fa-check" : "fa-xmark");
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.DeleteType);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.CascadeDeletes);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.CascadeDeletes ? "fa-check" : "fa-xmark");
+} }
+function EntityFormComponentExtended_div_0_section_51_p_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, " This entity has change tracking enabled. All modifications to records are stored in the ");
+    i0.ɵɵelementStart(2, "code");
+    i0.ɵɵtext(3, "RecordChange");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4, " table, including the user who made the change, timestamp, and the before/after values. ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_51_p_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, " This entity does not have change tracking enabled. To enable it, set ");
+    i0.ɵɵelementStart(2, "code");
+    i0.ɵɵtext(3, "TrackRecordChanges");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4, " to ");
+    i0.ɵɵelementStart(5, "code");
+    i0.ɵɵtext(6, "true");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(7, " in the entity metadata. ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_51_div_17_li_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li")(1, "code");
+    i0.ɵɵtext(2, "__mj_DeletedAt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3, " - Soft delete timestamp (when applicable) ");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_section_51_div_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 253)(1, "h4");
+    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵtext(3, " Audit Fields ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "ul", 256)(5, "li")(6, "code");
+    i0.ɵɵtext(7, "__mj_CreatedAt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(8, " - Record creation timestamp ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "li")(10, "code");
+    i0.ɵɵtext(11, "__mj_UpdatedAt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12, " - Last modification timestamp ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, EntityFormComponentExtended_div_0_section_51_div_17_li_13_Template, 4, 0, "li", 39);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(13);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.DeleteType === "Soft");
+} }
+function EntityFormComponentExtended_div_0_section_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 248)(1, "div", 51)(2, "div", 249)(3, "div", 250);
+    i0.ɵɵelement(4, "i", 216);
+    i0.ɵɵelementStart(5, "div", 251)(6, "strong");
+    i0.ɵɵtext(7, "Record Change Tracking");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(10, "div", 252)(11, "div", 253)(12, "h4");
+    i0.ɵɵelement(13, "i", 254);
+    i0.ɵɵtext(14, " About Change Tracking ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(15, EntityFormComponentExtended_div_0_section_51_p_15_Template, 5, 0, "p", 39)(16, EntityFormComponentExtended_div_0_section_51_p_16_Template, 8, 0, "p", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(17, EntityFormComponentExtended_div_0_section_51_div_17_Template, 14, 1, "div", 255);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("enabled", ctx_r1.entity.TrackRecordChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.entity.TrackRecordChanges ? "fa-circle-check" : "fa-circle-xmark");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.TrackRecordChanges ? "Enabled - All changes are recorded" : "Disabled - Changes are not tracked");
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.TrackRecordChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.entity.TrackRecordChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.TrackRecordChanges);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_6_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 272);
+    i0.ɵɵelement(2, "mj-code-editor", 273);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const setting_r27 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", ctx_r1.formatJsonValue(setting_r27.Value))("readonly", true)("lineWrapping", true);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_6_div_1_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 274);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const setting_r27 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(setting_r27.Value);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_6_div_1_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 275);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const setting_r27 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(setting_r27.Comments);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_6_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 268)(1, "div", 269);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, EntityFormComponentExtended_div_0_section_52_div_6_div_1_ng_container_3_Template, 3, 3, "ng-container", 270)(4, EntityFormComponentExtended_div_0_section_52_div_6_div_1_ng_template_4_Template, 2, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(6, EntityFormComponentExtended_div_0_section_52_div_6_div_1_div_6_Template, 2, 1, "div", 271);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const setting_r27 = ctx.$implicit;
+    const plainValue_r28 = i0.ɵɵreference(5);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(setting_r27.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isJsonValue(setting_r27.Value))("ngIfElse", plainValue_r28);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", setting_r27.Comments);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 266);
+    i0.ɵɵtemplate(1, EntityFormComponentExtended_div_0_section_52_div_6_div_1_Template, 7, 4, "div", 267);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.entity.Settings);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 200)(1, "p");
+    i0.ɵɵtext(2, "No custom settings configured");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_52_div_12_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 264)(1, "span", 245);
+    i0.ɵɵtext(2, "Catalog");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 279);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.FullTextCatalog);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_12_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 264)(1, "span", 245);
+    i0.ɵɵtext(2, "Index");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 279);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.FullTextIndex);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_12_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 264)(1, "span", 245);
+    i0.ɵɵtext(2, "Function");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 279);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.FullTextSearchFunction);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 276)(1, "div", 264)(2, "span", 245);
+    i0.ɵɵtext(3, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 277);
+    i0.ɵɵelement(5, "i", 278);
+    i0.ɵɵtext(6, " Enabled ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, EntityFormComponentExtended_div_0_section_52_div_12_div_7_Template, 5, 1, "div", 265)(8, EntityFormComponentExtended_div_0_section_52_div_12_div_8_Template, 5, 1, "div", 265)(9, EntityFormComponentExtended_div_0_section_52_div_12_div_9_Template, 5, 1, "div", 265);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.FullTextCatalog);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.FullTextIndex);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.FullTextSearchFunction);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 200)(1, "p");
+    i0.ɵɵtext(2, "Full-text search is not enabled for this entity");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_div_0_section_52_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 264)(1, "span", 245);
+    i0.ɵɵtext(2, "Sample Count");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 246);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.RowsToPackSampleCount);
+} }
+function EntityFormComponentExtended_div_0_section_52_div_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 264)(1, "span", 245);
+    i0.ɵɵtext(2, "Sample Method");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 246);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.RowsToPackSampleMethod);
+} }
+function EntityFormComponentExtended_div_0_section_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 257)(1, "div", 51)(2, "div", 258)(3, "h3", 67);
+    i0.ɵɵelement(4, "i", 259);
+    i0.ɵɵtext(5, " Entity Settings ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, EntityFormComponentExtended_div_0_section_52_div_6_Template, 2, 1, "div", 260)(7, EntityFormComponentExtended_div_0_section_52_div_7_Template, 3, 0, "div", 191);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 258)(9, "h3", 67);
+    i0.ɵɵelement(10, "i", 261);
+    i0.ɵɵtext(11, " Full-Text Search ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, EntityFormComponentExtended_div_0_section_52_div_12_Template, 10, 3, "div", 262)(13, EntityFormComponentExtended_div_0_section_52_div_13_Template, 3, 0, "div", 191);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 258)(15, "h3", 67);
+    i0.ɵɵelement(16, "i", 263);
+    i0.ɵɵtext(17, " Schema Packaging ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 243)(19, "div", 264)(20, "span", 245);
+    i0.ɵɵtext(21, "Rows to Pack");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span", 246);
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(24, EntityFormComponentExtended_div_0_section_52_div_24_Template, 5, 1, "div", 265)(25, EntityFormComponentExtended_div_0_section_52_div_25_Template, 5, 1, "div", 265);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.Settings.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.Settings.length === 0);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.FullTextSearchEnabled);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.entity.FullTextSearchEnabled);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r1.entity.RowsToPackWithSchema || "None");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.RowsToPackSampleCount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.RowsToPackSampleMethod);
+} }
+function EntityFormComponentExtended_div_0_h3_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3");
+    i0.ɵɵtext(1, "Field Details");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_h3_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3");
+    i0.ɵɵtext(1, "Relationship Details");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_div_0_div_59_p_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 290);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.Description);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 284)(1, "span", 285);
+    i0.ɵɵtext(2, "Default");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 286);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.DefaultValue);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_25_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 281)(1, "h5");
+    i0.ɵɵtext(2, "Relationship");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 283)(4, "div", 284)(5, "span", 285);
+    i0.ɵɵtext(6, "Related Entity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 291);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_div_59_div_25_Template_span_click_7_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToRelatedEntity(ctx_r1.selectedField)); });
+    i0.ɵɵtext(8);
+    i0.ɵɵelement(9, "i", 60);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 284)(11, "span", 285);
+    i0.ɵɵtext(12, "Display Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 287);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getRelatedEntityName(ctx_r1.selectedField), " ");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.RelatedEntityDisplayType);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 281)(1, "h5");
+    i0.ɵɵtext(2, "Encryption");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 283)(4, "div", 284)(5, "span", 285);
+    i0.ɵɵtext(6, "Encrypted");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 287);
+    i0.ɵɵtext(8, "Yes");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 284)(10, "span", 285);
+    i0.ɵɵtext(11, "Decrypt in API");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 287);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(13);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.AllowDecryptInAPI ? "Yes" : "No");
+} }
+function EntityFormComponentExtended_div_0_div_59_div_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 284)(1, "span", 285);
+    i0.ɵɵtext(2, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 287);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.Category);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_66_div_4_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 297);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const val_r30 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(val_r30.Code);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_66_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 294);
+    i0.ɵɵtemplate(1, EntityFormComponentExtended_div_0_div_59_div_66_div_4_span_1_Template, 2, 1, "span", 295);
+    i0.ɵɵelementStart(2, "span", 296);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const val_r30 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", val_r30.Code !== val_r30.Value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(val_r30.Value);
+} }
+function EntityFormComponentExtended_div_0_div_59_div_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 281)(1, "h5");
+    i0.ɵɵtext(2, "Allowed Values");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 292);
+    i0.ɵɵtemplate(4, EntityFormComponentExtended_div_0_div_59_div_66_div_4_Template, 4, 2, "div", 293);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.selectedField.EntityFieldValues);
+} }
+function EntityFormComponentExtended_div_0_div_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 280)(1, "div", 281)(2, "h4");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, EntityFormComponentExtended_div_0_div_59_p_4_Template, 2, 1, "p", 282);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 281)(6, "h5");
+    i0.ɵɵtext(7, "Type Information");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 283)(9, "div", 284)(10, "span", 285);
+    i0.ɵɵtext(11, "SQL Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 286);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 284)(15, "span", 285);
+    i0.ɵɵtext(16, "TypeScript Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "span", 286);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 284)(20, "span", 285);
+    i0.ɵɵtext(21, "Nullable");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span", 287);
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(24, EntityFormComponentExtended_div_0_div_59_div_24_Template, 5, 1, "div", 288);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(25, EntityFormComponentExtended_div_0_div_59_div_25_Template, 15, 2, "div", 289)(26, EntityFormComponentExtended_div_0_div_59_div_26_Template, 14, 1, "div", 289);
+    i0.ɵɵelementStart(27, "div", 281)(28, "h5");
+    i0.ɵɵtext(29, "API Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "div", 283)(31, "div", 284)(32, "span", 285);
+    i0.ɵɵtext(33, "Allow Update");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "span", 287);
+    i0.ɵɵtext(35);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "div", 284)(37, "span", 285);
+    i0.ɵɵtext(38, "Include in Search");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "span", 287);
+    i0.ɵɵtext(40);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(41, "div", 284)(42, "span", 285);
+    i0.ɵɵtext(43, "Full-Text Search");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(44, "span", 287);
+    i0.ɵɵtext(45);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(46, "div", 281)(47, "h5");
+    i0.ɵɵtext(48, "Form Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(49, "div", 283)(50, "div", 284)(51, "span", 285);
+    i0.ɵɵtext(52, "Include in Form");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(53, "span", 287);
+    i0.ɵɵtext(54);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(55, "div", 284)(56, "span", 285);
+    i0.ɵɵtext(57, "Section");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(58, "span", 287);
+    i0.ɵɵtext(59);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(60, EntityFormComponentExtended_div_0_div_59_div_60_Template, 5, 1, "div", 288);
+    i0.ɵɵelementStart(61, "div", 284)(62, "span", 285);
+    i0.ɵɵtext(63, "Sequence");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(64, "span", 287);
+    i0.ɵɵtext(65);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(66, EntityFormComponentExtended_div_0_div_59_div_66_Template, 5, 1, "div", 289);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.DisplayName || ctx_r1.selectedField.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.Description);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.formatFieldType(ctx_r1.selectedField));
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.TSType);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.AllowsNull ? "Yes" : "No");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.DefaultValue);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.RelatedEntityID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.Encrypt);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.AllowUpdateAPI ? "Yes" : "No");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.IncludeInUserSearchAPI ? "Yes" : "No");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.FullTextSearchEnabled ? "Yes" : "No");
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.IncludeInGeneratedForm ? "Yes" : "No");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.GeneratedFormSection);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.Category);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedField.Sequence);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField.EntityFieldValues.length > 0);
+} }
+function EntityFormComponentExtended_div_0_div_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 280)(1, "div", 281)(2, "h4");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 281)(5, "h5");
+    i0.ɵɵtext(6, "Connection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 283)(8, "div", 284)(9, "span", 285);
+    i0.ɵɵtext(10, "From Entity");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 287);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 284)(14, "span", 285);
+    i0.ɵɵtext(15, "Join Field");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span", 286);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 284)(19, "span", 285);
+    i0.ɵɵtext(20, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span", 287);
+    i0.ɵɵtext(22);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(23, "div", 281)(24, "h5");
+    i0.ɵɵtext(25, "Display Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 283)(27, "div", 284)(28, "span", 285);
+    i0.ɵɵtext(29, "Display in Form");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 287);
+    i0.ɵɵtext(31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "div", 284)(33, "span", 285);
+    i0.ɵɵtext(34, "Location");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "span", 287);
+    i0.ɵɵtext(36);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 284)(38, "span", 285);
+    i0.ɵɵtext(39, "Bundle in API");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "span", 287);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.DisplayName || ctx_r1.selectedRelationship.Entity);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.Entity);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.RelatedEntityJoinField);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.Type);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.DisplayInForm ? "Yes" : "No");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.DisplayLocation);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedRelationship.BundleInAPI ? "Yes" : "No");
+} }
+function EntityFormComponentExtended_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "header", 4)(2, "div", 5)(3, "div", 6);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 7)(6, "div", 8)(7, "h1", 9);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 10);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 11)(12, "span", 12);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 13);
+    i0.ɵɵtext(15, "|");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(16, EntityFormComponentExtended_div_0_span_16_Template, 3, 7, "span", 14);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 15)(18, "div", 16);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_Template_div_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection("fields")); });
+    i0.ɵɵelement(19, "i", 17);
+    i0.ɵɵelementStart(20, "span", 18);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span", 19);
+    i0.ɵɵtext(23, "Fields");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 16);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_Template_div_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection("relationships")); });
+    i0.ɵɵelement(25, "i", 20);
+    i0.ɵɵelementStart(26, "span", 18);
+    i0.ɵɵtext(27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span", 19);
+    i0.ɵɵtext(29, "Relations");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "div", 16);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_Template_div_click_30_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection("permissions")); });
+    i0.ɵɵelement(31, "i", 21);
+    i0.ɵɵelementStart(32, "span", 18);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "span", 19);
+    i0.ɵɵtext(35, "Roles");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "div", 22);
+    i0.ɵɵelement(37, "i", 23);
+    i0.ɵɵtemplate(38, EntityFormComponentExtended_div_0_span_38_Template, 2, 1, "span", 24)(39, EntityFormComponentExtended_div_0_span_39_Template, 2, 0, "span", 25);
+    i0.ɵɵelementStart(40, "span", 19);
+    i0.ɵɵtext(41, "Rows");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(42, "div", 26)(43, "nav", 27);
+    i0.ɵɵtemplate(44, EntityFormComponentExtended_div_0_button_44_Template, 5, 7, "button", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "main", 29);
+    i0.ɵɵtemplate(46, EntityFormComponentExtended_div_0_section_46_Template, 109, 23, "section", 30)(47, EntityFormComponentExtended_div_0_section_47_Template, 15, 8, "section", 31)(48, EntityFormComponentExtended_div_0_section_48_Template, 13, 7, "section", 32)(49, EntityFormComponentExtended_div_0_section_49_Template, 54, 23, "section", 33)(50, EntityFormComponentExtended_div_0_section_50_Template, 57, 20, "section", 34)(51, EntityFormComponentExtended_div_0_section_51_Template, 18, 7, "section", 35)(52, EntityFormComponentExtended_div_0_section_52_Template, 26, 7, "section", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(53, "aside", 37)(54, "div", 38);
+    i0.ɵɵtemplate(55, EntityFormComponentExtended_div_0_h3_55_Template, 2, 0, "h3", 39)(56, EntityFormComponentExtended_div_0_h3_56_Template, 2, 0, "h3", 39);
+    i0.ɵɵelementStart(57, "button", 40);
+    i0.ɵɵlistener("click", function EntityFormComponentExtended_div_0_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDetailPanel()); });
+    i0.ɵɵelement(58, "i", 41);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(59, EntityFormComponentExtended_div_0_div_59_Template, 67, 16, "div", 42)(60, EntityFormComponentExtended_div_0_div_60_Template, 42, 7, "div", 42);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", "#3b82f6");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.entityIcon);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.entityDisplayName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.statusClass);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.entity.Status, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r1.entity.SchemaName, ".", ctx_r1.entity.BaseTable, "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.entity.Description);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.fieldCount);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.relationshipCount);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.permissionCount);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isRowCountLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isRowCountLoading);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngForOf", ctx_r1.navItems);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("panel-open", ctx_r1.detailPanelOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "overview");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "fields");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "relationships");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "permissions");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "lineage");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "history");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.activeSection === "settings");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("open", ctx_r1.detailPanelOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedRelationship);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedField);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedRelationship);
+} }
+function EntityFormComponentExtended_ng_template_1_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 301);
+    i0.ɵɵelement(1, "mj-loading", 302);
+    i0.ɵɵelementEnd();
+} }
+function EntityFormComponentExtended_ng_template_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 303);
+    i0.ɵɵelement(1, "i", 304);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.explorerError);
+} }
+function EntityFormComponentExtended_ng_template_1_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 305);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Entity metadata not available");
+    i0.ɵɵelementEnd()();
+} }
+function EntityFormComponentExtended_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, EntityFormComponentExtended_ng_template_1_div_0_Template, 2, 0, "div", 298)(1, EntityFormComponentExtended_ng_template_1_div_1_Template, 4, 1, "div", 299)(2, EntityFormComponentExtended_ng_template_1_div_2_Template, 4, 0, "div", 300);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", ctx_r1.isExplorerLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isExplorerLoading && ctx_r1.explorerError);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isExplorerLoading && !ctx_r1.explorerError && !ctx_r1.entity);
+} }
+/**
+ * World-class Entity Explorer form component that provides an exploration-focused
+ * interface for understanding entities in the MemberJunction system.
+ *
+ * This component replaces the traditional edit-focused entity form with a rich
+ * exploration experience featuring:
+ * - Three-zone architecture (Header, Nav Rail, Main Canvas)
+ * - Seven exploration sections: Overview, Fields, Relationships, Permissions, Lineage, History, Settings
+ * - Semantic field grouping by purpose (Primary Keys, Foreign Keys, Encrypted, etc.)
+ * - Visual ERD integration for relationship exploration
+ * - Slide-in detail panels for contextual information
+ */
+let EntityFormComponentExtended = class EntityFormComponentExtended extends EntityFormComponent {
+    constructor() {
+        super(...arguments);
+        /** Runtime EntityInfo metadata (populated from record.ID) */
+        this.entity = null;
+        /** All entities for relationship lookups */
+        this.allEntities = [];
+        /** All entity fields (flattened from all entities) for ERD details panel */
+        this.allEntityFields = [];
+        /** Loading state */
+        this.isExplorerLoading = true;
+        /** Error message if loading fails */
+        this.explorerError = null;
+        /** Current active section in the explorer */
+        this.activeSection = 'overview';
+        /** Navigation items for the rail - world-class minimalist icons */
+        this.navItems = [
+            { id: 'overview', icon: 'fa-solid fa-house', label: 'Overview' },
+            { id: 'fields', icon: 'fa-solid fa-table-cells', label: 'Fields' },
+            { id: 'relationships', icon: 'fa-solid fa-diagram-project', label: 'Relations' },
+            { id: 'permissions', icon: 'fa-solid fa-lock', label: 'Security' },
+            { id: 'lineage', icon: 'fa-solid fa-code-branch', label: 'Lineage' },
+            { id: 'history', icon: 'fa-solid fa-clock-rotate-left', label: 'History' },
+            { id: 'settings', icon: 'fa-solid fa-sliders', label: 'Settings' }
+        ];
+        /** Computed statistics for the entity */
+        this.stats = {
+            fieldCount: 0,
+            relationshipCount: 0,
+            permissionCount: 0,
+            rowCount: null,
+            primaryKeyCount: 0,
+            foreignKeyCount: 0,
+            encryptedFieldCount: 0,
+            valueListFieldCount: 0
+        };
+        /** Semantically grouped fields */
+        this.fieldGroups = [];
+        /** Field search term for filtering */
+        this.fieldSearchTerm = '';
+        /** Set of expanded field group IDs */
+        this.expandedFieldGroups = new Set();
+        /** Field view mode: grouped by category or flat list */
+        this.fieldViewMode = 'grouped';
+        /** Field list sort configuration */
+        this.fieldListSortColumn = 'Sequence';
+        this.fieldListSortDirection = 'asc';
+        /** Relationship view mode toggle */
+        this.relationshipViewMode = 'diagram';
+        /** ERD depth level (1-5) */
+        this.erdDepth = 1;
+        /** Whether the row count is loading */
+        this.isRowCountLoading = false;
+        /** Outgoing relationships (this entity references others) */
+        this.outgoingRelationships = [];
+        /** Incoming relationships (other entities reference this one) */
+        this.incomingRelationships = [];
+        /** Grouped outgoing relationships by target entity */
+        this.groupedOutgoingRelationships = [];
+        /** Grouped incoming relationships by source entity */
+        this.groupedIncomingRelationships = [];
+        /** Whether detail panel is open */
+        this.detailPanelOpen = false;
+        /** Currently selected field for detail panel */
+        this.selectedField = null;
+        /** Currently selected relationship for detail panel */
+        this.selectedRelationship = null;
+        this.destroy$ = new Subject();
+        this.stateChange$ = new Subject();
+        this._metadata = new Metadata();
+    }
+    async ngOnInit() {
+        await super.ngOnInit();
+        this.setupStateManagement();
+        this.loadExplorerData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupStateManagement() {
+        this.stateChange$.pipe(debounceTime(100), takeUntil(this.destroy$)).subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    loadExplorerData() {
+        this.isExplorerLoading = true;
+        this.explorerError = null;
+        this.cdr.markForCheck();
+        try {
+            this.allEntities = this._metadata.Entities;
+            // Flatten all entity fields for ERD details panel
+            this.allEntityFields = this.allEntities.flatMap(e => e.Fields);
+            // Find the EntityInfo by the record's ID
+            if (this.record?.ID) {
+                this.entity = this.allEntities.find(e => e.ID === this.record.ID) || null;
+            }
+            if (this.entity) {
+                this.computeStats();
+                this.buildFieldGroups();
+                this.buildRelationships();
+                this.updateNavBadges();
+                // Load row count asynchronously (don't block UI)
+                this.loadRowCountAsync();
+            }
+            else {
+                this.explorerError = `Entity metadata not found for: ${this.record?.Name || 'Unknown'}`;
+            }
+        }
+        catch (err) {
+            this.explorerError = err instanceof Error ? err.message : 'Failed to load entity metadata';
+            console.error('Error loading entity explorer data:', err);
+        }
+        finally {
+            this.isExplorerLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Loads the row count asynchronously using RunView with count_only.
+     * This doesn't block the UI - updates when complete.
+     */
+    async loadRowCountAsync() {
+        if (!this.entity)
+            return;
+        this.isRowCountLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: this.entity.Name,
+                ResultType: 'count_only'
+            });
+            if (result.Success) {
+                this.stats = {
+                    ...this.stats,
+                    rowCount: result.TotalRowCount
+                };
+            }
+        }
+        catch (err) {
+            console.warn('Failed to load row count:', err);
+            // Keep the default N/A - don't show error for this
+        }
+        finally {
+            this.isRowCountLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    computeStats() {
+        if (!this.entity)
+            return;
+        const fields = this.entity.Fields;
+        // Count unique outgoing relationships (fields with RelatedEntityID, grouped by target entity)
+        const outgoingEntityIds = new Set(fields.filter(f => f.RelatedEntityID).map(f => f.RelatedEntityID));
+        // Count unique incoming relationships (RelatedEntities, grouped by source entity)
+        const incomingEntityNames = new Set(this.entity.RelatedEntities.map(r => r.RelatedEntity));
+        this.stats = {
+            fieldCount: fields.length,
+            relationshipCount: outgoingEntityIds.size + incomingEntityNames.size,
+            permissionCount: this.entity.Permissions.length,
+            rowCount: this.entity.RowCount,
+            primaryKeyCount: fields.filter(f => f.IsPrimaryKey).length,
+            foreignKeyCount: fields.filter(f => f.RelatedEntityID).length,
+            encryptedFieldCount: fields.filter(f => f.Encrypt).length,
+            valueListFieldCount: fields.filter(f => f.ValueListType !== 'None').length
+        };
+    }
+    buildFieldGroups() {
+        if (!this.entity)
+            return;
+        const fields = this.entity.Fields;
+        const groups = [];
+        // Primary Keys
+        const primaryKeys = fields.filter(f => f.IsPrimaryKey);
+        if (primaryKeys.length > 0) {
+            groups.push({
+                id: 'primary-keys',
+                label: 'Primary Keys',
+                icon: 'fa-solid fa-key',
+                fields: primaryKeys,
+                expanded: true
+            });
+        }
+        // Identity Fields (Name, Code, Description, DisplayName)
+        const identityFields = fields.filter(f => !f.IsPrimaryKey &&
+            (f.IsNameField || ['Name', 'Code', 'Description', 'DisplayName'].includes(f.Name)));
+        if (identityFields.length > 0) {
+            groups.push({
+                id: 'identity',
+                label: 'Identity Fields',
+                icon: 'fa-solid fa-id-card',
+                fields: identityFields,
+                expanded: true
+            });
+        }
+        // Foreign Keys
+        const foreignKeys = fields.filter(f => f.RelatedEntityID && !f.IsPrimaryKey);
+        if (foreignKeys.length > 0) {
+            groups.push({
+                id: 'foreign-keys',
+                label: 'Foreign Keys',
+                icon: 'fa-solid fa-link',
+                fields: foreignKeys,
+                expanded: true
+            });
+        }
+        // Encrypted Fields
+        const encryptedFields = fields.filter(f => f.Encrypt);
+        if (encryptedFields.length > 0) {
+            groups.push({
+                id: 'encrypted',
+                label: 'Encrypted Fields',
+                icon: 'fa-solid fa-lock',
+                fields: encryptedFields,
+                expanded: false
+            });
+        }
+        // Value List Fields
+        const valueListFields = fields.filter(f => f.ValueListType !== 'None' && !f.Encrypt);
+        if (valueListFields.length > 0) {
+            groups.push({
+                id: 'value-lists',
+                label: 'Value List Fields',
+                icon: 'fa-solid fa-list-check',
+                fields: valueListFields,
+                expanded: false
+            });
+        }
+        // Audit Fields
+        const auditFields = fields.filter(f => f.IsSpecialDateField);
+        if (auditFields.length > 0) {
+            groups.push({
+                id: 'audit',
+                label: 'Audit Fields',
+                icon: 'fa-solid fa-clock',
+                fields: auditFields,
+                expanded: false
+            });
+        }
+        // Remaining fields grouped by Category
+        const usedFieldIds = new Set(groups.flatMap(g => g.fields.map(f => f.ID)));
+        const remainingFields = fields.filter(f => !usedFieldIds.has(f.ID));
+        // Group by category
+        const categoryMap = new Map();
+        for (const field of remainingFields) {
+            const category = field.Category || 'General';
+            if (!categoryMap.has(category)) {
+                categoryMap.set(category, []);
+            }
+            categoryMap.get(category).push(field);
+        }
+        // Sort categories and add as groups
+        const sortedCategories = Array.from(categoryMap.keys()).sort();
+        for (const category of sortedCategories) {
+            const categoryFields = categoryMap.get(category);
+            groups.push({
+                id: `category-${category.toLowerCase().replace(/\s+/g, '-')}`,
+                label: category,
+                icon: 'fa-solid fa-folder',
+                fields: categoryFields.sort((a, b) => a.Sequence - b.Sequence),
+                expanded: false
+            });
+        }
+        this.fieldGroups = groups;
+        // Initialize expanded state
+        for (const group of groups) {
+            if (group.expanded) {
+                this.expandedFieldGroups.add(group.id);
+            }
+        }
+    }
+    buildRelationships() {
+        if (!this.entity)
+            return;
+        // DEBUG: Log relationship data
+        console.log(`[buildRelationships] Entity: ${this.entity.Name}`);
+        console.log(`[buildRelationships] Fields with RelatedEntityID:`, this.entity.Fields.filter(f => f.RelatedEntityID).map(f => ({ name: f.Name, relatedEntityID: f.RelatedEntityID, relatedEntity: f.RelatedEntity })));
+        console.log(`[buildRelationships] RelatedEntities (first 5):`, this.entity.RelatedEntities.slice(0, 5).map(r => ({ entity: r.Entity, relatedEntity: r.RelatedEntity, joinField: r.RelatedEntityJoinField })));
+        console.log(`[buildRelationships] Unique Entity values:`, [...new Set(this.entity.RelatedEntities.map(r => r.Entity))]);
+        // Incoming: Relationships defined on this entity (other entities that reference this one)
+        this.incomingRelationships = this.entity.RelatedEntities;
+        // Outgoing relationships could be computed from fields with RelatedEntityID
+        this.outgoingRelationships = [];
+        // Build grouped outgoing relationships (fields on THIS entity that reference OTHER entities)
+        const outgoingMap = new Map();
+        for (const field of this.entity.Fields) {
+            if (field.RelatedEntityID) {
+                const existing = outgoingMap.get(field.RelatedEntityID);
+                if (existing) {
+                    existing.fields.push(field);
+                }
+                else {
+                    const relatedEntity = this.allEntities.find(e => e.ID === field.RelatedEntityID);
+                    outgoingMap.set(field.RelatedEntityID, {
+                        entityId: field.RelatedEntityID,
+                        entityName: relatedEntity?.Name || field.RelatedEntity || 'Unknown',
+                        fields: [field]
+                    });
+                }
+            }
+        }
+        this.groupedOutgoingRelationships = Array.from(outgoingMap.values())
+            .sort((a, b) => a.entityName.localeCompare(b.entityName));
+        // Build grouped incoming relationships (fields on OTHER entities that reference THIS entity)
+        // Group by RelatedEntity name (the entity that references this one), deduplicate fields
+        const incomingMap = new Map();
+        for (const rel of this.entity.RelatedEntities) {
+            // rel.RelatedEntity is the entity that has the FK pointing to THIS entity
+            const existing = incomingMap.get(rel.RelatedEntity);
+            if (existing) {
+                // Only add if this field name isn't already in the list
+                const fieldExists = existing.fields.some(f => f.fieldName === rel.RelatedEntityJoinField);
+                if (!fieldExists) {
+                    existing.fields.push({
+                        fieldName: rel.RelatedEntityJoinField,
+                        type: rel.Type,
+                        bundleInAPI: rel.BundleInAPI
+                    });
+                }
+            }
+            else {
+                incomingMap.set(rel.RelatedEntity, {
+                    entityName: rel.RelatedEntity,
+                    fields: [{
+                            fieldName: rel.RelatedEntityJoinField,
+                            type: rel.Type,
+                            bundleInAPI: rel.BundleInAPI
+                        }]
+                });
+            }
+        }
+        this.groupedIncomingRelationships = Array.from(incomingMap.values())
+            .sort((a, b) => a.entityName.localeCompare(b.entityName));
+    }
+    updateNavBadges() {
+        if (!this.entity)
+            return;
+        this.navItems = this.navItems.map(item => {
+            switch (item.id) {
+                case 'fields':
+                    return { ...item, badge: this.stats.fieldCount };
+                case 'relationships':
+                    return { ...item, badge: this.stats.relationshipCount };
+                case 'permissions':
+                    return { ...item, badge: this.stats.permissionCount };
+                default:
+                    return item;
+            }
+        });
+    }
+    // === Public Methods ===
+    setActiveSection(section) {
+        this.activeSection = section;
+        this.closeDetailPanel();
+        this.cdr.markForCheck();
+    }
+    toggleFieldGroup(groupId) {
+        if (this.expandedFieldGroups.has(groupId)) {
+            this.expandedFieldGroups.delete(groupId);
+        }
+        else {
+            this.expandedFieldGroups.add(groupId);
+        }
+        this.cdr.markForCheck();
+    }
+    isFieldGroupExpanded(groupId) {
+        return this.expandedFieldGroups.has(groupId);
+    }
+    expandAllFieldGroups() {
+        for (const group of this.fieldGroups) {
+            this.expandedFieldGroups.add(group.id);
+        }
+        this.cdr.markForCheck();
+    }
+    collapseAllFieldGroups() {
+        this.expandedFieldGroups.clear();
+        this.cdr.markForCheck();
+    }
+    get allFieldGroupsExpanded() {
+        return this.fieldGroups.length > 0 &&
+            this.fieldGroups.every(g => this.expandedFieldGroups.has(g.id));
+    }
+    get allFieldGroupsCollapsed() {
+        return this.expandedFieldGroups.size === 0;
+    }
+    /**
+     * Get all fields for the list view with sorting and filtering applied.
+     */
+    getFilteredFieldsList() {
+        if (!this.entity)
+            return [];
+        let fields = [...this.entity.Fields];
+        // Apply search filter
+        if (this.fieldSearchTerm) {
+            const term = this.fieldSearchTerm.toLowerCase();
+            fields = fields.filter(f => f.Name.toLowerCase().includes(term) ||
+                (f.DisplayName && f.DisplayName.toLowerCase().includes(term)) ||
+                (f.Description && f.Description.toLowerCase().includes(term)) ||
+                f.Type.toLowerCase().includes(term));
+        }
+        // Apply sorting
+        fields.sort((a, b) => {
+            const col = this.fieldListSortColumn;
+            const dir = this.fieldListSortDirection === 'asc' ? 1 : -1;
+            let aVal = this.getFieldSortValue(a, col);
+            let bVal = this.getFieldSortValue(b, col);
+            if (aVal == null && bVal == null)
+                return 0;
+            if (aVal == null)
+                return 1;
+            if (bVal == null)
+                return -1;
+            if (typeof aVal === 'string' && typeof bVal === 'string') {
+                return aVal.localeCompare(bVal) * dir;
+            }
+            if (typeof aVal === 'boolean' && typeof bVal === 'boolean') {
+                return (aVal === bVal ? 0 : aVal ? -1 : 1) * dir;
+            }
+            return (aVal - bVal) * dir;
+        });
+        return fields;
+    }
+    getFieldSortValue(field, column) {
+        switch (column) {
+            case 'Sequence': return field.Sequence;
+            case 'Name': return field.DisplayName || field.Name;
+            case 'Type': return field.Type;
+            case 'Length': return field.Length;
+            case 'AllowsNull': return field.AllowsNull;
+            case 'Description': return field.Description || '';
+            default: return field.Sequence;
+        }
+    }
+    sortFieldList(column) {
+        if (this.fieldListSortColumn === column) {
+            this.fieldListSortDirection = this.fieldListSortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.fieldListSortColumn = column;
+            this.fieldListSortDirection = 'asc';
+        }
+        this.cdr.markForCheck();
+    }
+    selectField(field) {
+        this.selectedField = field;
+        this.selectedRelationship = null;
+        this.detailPanelOpen = true;
+        this.cdr.markForCheck();
+    }
+    selectRelationship(relationship) {
+        this.selectedRelationship = relationship;
+        this.selectedField = null;
+        this.detailPanelOpen = true;
+        this.cdr.markForCheck();
+    }
+    closeDetailPanel() {
+        this.detailPanelOpen = false;
+        this.selectedField = null;
+        this.selectedRelationship = null;
+        this.cdr.markForCheck();
+    }
+    toggleRelationshipView() {
+        this.relationshipViewMode = this.relationshipViewMode === 'diagram' ? 'list' : 'diagram';
+        this.cdr.markForCheck();
+    }
+    /**
+     * Change the ERD depth level.
+     */
+    setErdDepth(depth) {
+        if (depth >= 1 && depth <= 5) {
+            this.erdDepth = depth;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Handle open record from the ERD composite component.
+     * Navigates to the selected entity's form using SharedService.
+     */
+    onERDOpenRecord(event) {
+        const pkey = new CompositeKey([{ FieldName: 'ID', Value: event.RecordID }]);
+        this.sharedService.OpenEntityRecord(event.EntityName, pkey);
+    }
+    /**
+     * Handle ERD composite state changes (for future persistence if needed).
+     */
+    onERDStateChange(_state) {
+        // ERD composite now handles all internal state management
+        // This handler is kept for potential future state persistence needs
+    }
+    onFieldSearch(term) {
+        this.fieldSearchTerm = term.toLowerCase();
+        this.cdr.markForCheck();
+    }
+    getFilteredFieldGroups() {
+        if (!this.fieldSearchTerm) {
+            return this.fieldGroups;
+        }
+        return this.fieldGroups
+            .map(group => ({
+            ...group,
+            fields: group.fields.filter(f => f.Name.toLowerCase().includes(this.fieldSearchTerm) ||
+                (f.DisplayName && f.DisplayName.toLowerCase().includes(this.fieldSearchTerm)) ||
+                (f.Description && f.Description.toLowerCase().includes(this.fieldSearchTerm)))
+        }))
+            .filter(group => group.fields.length > 0);
+    }
+    // === Computed Getters ===
+    get statusClass() {
+        if (!this.entity)
+            return '';
+        switch (this.entity.Status) {
+            case 'Active': return 'status-active';
+            case 'Deprecated': return 'status-deprecated';
+            case 'Disabled': return 'status-disabled';
+            default: return '';
+        }
+    }
+    get entityIcon() {
+        return this.entity?.Icon || 'fa-solid fa-database';
+    }
+    get entityDisplayName() {
+        if (!this.entity)
+            return '';
+        return this.entity.DisplayName || this.entity.Name;
+    }
+    get formattedRowCount() {
+        if (this.stats.rowCount === null)
+            return 'N/A';
+        return this.stats.rowCount.toLocaleString();
+    }
+    get capabilitySummary() {
+        if (!this.entity)
+            return [];
+        const caps = [];
+        if (this.entity.IncludeInAPI)
+            caps.push('API');
+        if (this.entity.AllowCreateAPI)
+            caps.push('Create');
+        if (this.entity.AllowUpdateAPI)
+            caps.push('Update');
+        if (this.entity.AllowDeleteAPI)
+            caps.push('Delete');
+        if (this.entity.TrackRecordChanges)
+            caps.push('Track Changes');
+        if (this.entity.FullTextSearchEnabled)
+            caps.push('FTS');
+        return caps;
+    }
+    getFieldTypeIcon(field) {
+        if (field.IsPrimaryKey)
+            return 'fa-solid fa-key';
+        if (field.RelatedEntityID)
+            return 'fa-solid fa-link';
+        if (field.Encrypt)
+            return 'fa-solid fa-lock';
+        if (field.ValueListType !== 'None')
+            return 'fa-solid fa-list';
+        if (field.IsSpecialDateField)
+            return 'fa-solid fa-clock';
+        // Type-based icons
+        switch (field.TSType) {
+            case 'number': return 'fa-solid fa-hashtag';
+            case 'boolean': return 'fa-solid fa-toggle-on';
+            case 'Date': return 'fa-solid fa-calendar';
+            default: return 'fa-solid fa-font';
+        }
+    }
+    getRelatedEntityName(field) {
+        if (!field.RelatedEntityID)
+            return null;
+        const related = this.allEntities.find(e => e.ID === field.RelatedEntityID);
+        return related?.Name || null;
+    }
+    getRelatedEntity(field) {
+        if (!field.RelatedEntityID)
+            return null;
+        return this.allEntities.find(e => e.ID === field.RelatedEntityID) || null;
+    }
+    navigateToRelatedEntity(field) {
+        const related = this.getRelatedEntity(field);
+        if (related) {
+            const pkey = new CompositeKey([{ FieldName: 'ID', Value: related.ID }]);
+            this.sharedService.OpenEntityRecord('Entities', pkey);
+        }
+    }
+    /**
+     * Open an entity record from the field detail panel.
+     */
+    openRelatedEntityFromField(entityId) {
+        if (entityId) {
+            const pkey = new CompositeKey([{ FieldName: 'ID', Value: entityId }]);
+            this.sharedService.OpenEntityRecord('Entities', pkey);
+        }
+    }
+    formatFieldType(field) {
+        let type = field.Type;
+        if (field.Length && field.Length > 0) {
+            type += `(${field.Length})`;
+        }
+        else if (field.Precision && field.Scale !== undefined) {
+            type += `(${field.Precision},${field.Scale})`;
+        }
+        return type;
+    }
+    /**
+     * Get the role name for a permission entry.
+     * The EntityPermissionInfo.Role property is not populated because the database view
+     * returns 'RoleName' but the class expects 'Role'. This helper looks up the role
+     * from the Metadata.Roles collection using the RoleID.
+     */
+    getRoleName(perm) {
+        if (!perm.RoleID)
+            return 'Unknown';
+        const role = this._metadata.Roles.find(r => r.ID === perm.RoleID);
+        return role?.Name || 'Unknown';
+    }
+    /**
+     * Checks if a string value is valid JSON (object or array).
+     */
+    isJsonValue(value) {
+        if (!value || typeof value !== 'string')
+            return false;
+        const trimmed = value.trim();
+        if (!trimmed.startsWith('{') && !trimmed.startsWith('['))
+            return false;
+        try {
+            JSON.parse(trimmed);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Formats a JSON string for display with proper indentation.
+     */
+    formatJsonValue(value) {
+        if (!value)
+            return '';
+        try {
+            const parsed = JSON.parse(value.trim());
+            return JSON.stringify(parsed, null, 2);
+        }
+        catch {
+            return value;
+        }
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵEntityFormComponentExtended_BaseFactory; return function EntityFormComponentExtended_Factory(t) { return (ɵEntityFormComponentExtended_BaseFactory || (ɵEntityFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(EntityFormComponentExtended)))(t || EntityFormComponentExtended); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityFormComponentExtended, selectors: [["mj-entity-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["loadingOrError", ""], ["plainValue", ""], ["class", "entity-explorer", 4, "ngIf", "ngIfElse"], [1, "entity-explorer"], [1, "explorer-header"], [1, "entity-identity"], [1, "entity-icon"], [1, "entity-info"], [1, "entity-title-row"], [1, "entity-name"], [1, "status-badge", 3, "ngClass"], [1, "entity-subtitle"], [1, "schema-table"], [1, "separator"], ["class", "entity-description", 3, "title", 4, "ngIf"], [1, "header-stats"], [1, "stat-item", 3, "click"], [1, "fa-solid", "fa-table-columns"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-shield-halved"], [1, "stat-item"], [1, "fa-solid", "fa-database"], ["class", "stat-value", 4, "ngIf"], ["class", "stat-value loading", 4, "ngIf"], [1, "explorer-body"], [1, "nav-rail"], ["class", "nav-item", 3, "active", "title", "click", 4, "ngFor", "ngForOf"], [1, "main-canvas"], ["class", "section overview-section", 4, "ngIf"], ["class", "section fields-section", 4, "ngIf"], ["class", "section relationships-section", 4, "ngIf"], ["class", "section permissions-section", 4, "ngIf"], ["class", "section lineage-section", 4, "ngIf"], ["class", "section history-section", 4, "ngIf"], ["class", "section settings-section", 4, "ngIf"], [1, "detail-panel"], [1, "panel-header"], [4, "ngIf"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["class", "panel-content", 4, "ngIf"], [1, "entity-description", 3, "title"], [1, "stat-value", "loading"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], ["class", "nav-badge", 4, "ngIf"], [1, "nav-badge"], [1, "section", "overview-section"], [1, "section-content"], [1, "stats-cards"], ["title", "View all fields", 1, "stat-card", "clickable", 3, "click"], [1, "stat-card-header"], [1, "fa-solid", "fa-table-cells"], [1, "stat-card-body"], [1, "stat-main"], [1, "stat-details"], [1, "stat-card-action"], [1, "fa-solid", "fa-arrow-right"], ["title", "View relationships", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["title", "View security settings", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-lock"], [1, "stat-card"], [1, "info-panel", "capabilities-panel"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "capability-tags"], ["class", "capability-tag", 4, "ngFor", "ngForOf"], ["class", "capability-tag disabled", 4, "ngIf"], [1, "info-panel", "database-panel"], [1, "fa-solid", "fa-server"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], ["class", "info-item", 4, "ngIf"], [1, "info-panel", "codegen-panel"], [1, "fa-solid", "fa-code"], [1, "info-value", "code"], [1, "capability-tag"], [1, "fa-solid", "fa-check"], [1, "capability-tag", "disabled"], [1, "section", "fields-section"], [1, "section-header"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search fields...", 3, "ngModelChange", "ngModel"], [1, "header-controls"], [1, "view-mode-toggle"], ["title", "Group by category", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], ["title", "List view", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["class", "expand-collapse-controls", 4, "ngIf"], [1, "section-content", "fields-content"], ["class", "field-groups", 4, "ngIf"], ["class", "fields-list-view", 4, "ngIf"], [1, "expand-collapse-controls"], ["title", "Expand all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], [1, "field-groups"], ["class", "field-group", 3, "expanded", 4, "ngFor", "ngForOf"], [1, "field-group"], [1, "group-header", 3, "click"], [1, "expand-icon", "fa-solid", 3, "ngClass"], [1, "group-icon"], [1, "group-label"], [1, "group-count"], ["class", "group-content", 4, "ngIf"], [1, "group-content"], ["class", "field-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "field-item", 3, "click"], [1, "field-icon"], [1, "field-info"], [1, "field-name"], [1, "field-meta"], [1, "field-type"], ["class", "field-nullable", 4, "ngIf"], ["class", "field-related", 3, "click", 4, "ngIf"], [1, "field-badges"], ["class", "badge pk", "title", "Primary Key", 4, "ngIf"], ["class", "badge fk", "title", "Foreign Key", 4, "ngIf"], ["class", "badge encrypted", "title", "Encrypted", 4, "ngIf"], [1, "field-nullable"], [1, "field-related", 3, "click"], ["title", "Primary Key", 1, "badge", "pk"], ["title", "Foreign Key", 1, "badge", "fk"], ["title", "Encrypted", 1, "badge", "encrypted"], [1, "fields-list-view"], [1, "list-header"], [1, "list-col", "col-seq", "sortable", 3, "click"], [1, "sort-icon", "fa-solid", 3, "ngClass"], [1, "list-col", "col-name", "sortable", 3, "click"], [1, "list-col", "col-type", "sortable", 3, "click"], [1, "list-col", "col-length", "sortable", 3, "click"], [1, "list-col", "col-nullable", "sortable", 3, "click"], [1, "list-col", "col-flags"], [1, "list-col", "col-desc", "sortable", 3, "click"], [1, "list-body"], ["class", "list-row", 3, "selected", "click", 4, "ngFor", "ngForOf"], ["class", "list-empty", 4, "ngIf"], [1, "list-row", 3, "click"], [1, "list-col", "col-seq"], [1, "seq-num"], [1, "list-col", "col-name"], [1, "field-type-icon"], [1, "field-name-text"], [1, "list-col", "col-type"], [1, "type-tag"], [1, "list-col", "col-length"], ["class", "length-value", 4, "ngIf"], ["class", "length-value muted", 4, "ngIf"], [1, "list-col", "col-nullable"], [1, "required-indicator"], [1, "flag-badges"], ["class", "flag-badge pk", "title", "Primary Key", 4, "ngIf"], ["class", "flag-badge fk", "title", "Foreign Key", 4, "ngIf"], ["class", "flag-badge encrypted", "title", "Encrypted", 4, "ngIf"], [1, "list-col", "col-desc"], [1, "desc-text", 3, "title"], [1, "length-value"], [1, "length-value", "muted"], ["title", "Primary Key", 1, "flag-badge", "pk"], [1, "fa-solid", "fa-key"], ["title", "Foreign Key", 1, "flag-badge", "fk"], ["title", "Encrypted", 1, "flag-badge", "encrypted"], [1, "list-empty"], [1, "section", "relationships-section"], [1, "view-toggle"], [1, "toggle-btn", 3, "click"], ["class", "depth-selector", 4, "ngIf"], ["class", "relationships-graph", 4, "ngIf"], ["class", "relationships-list", 4, "ngIf"], [1, "depth-selector"], [1, "depth-label"], [1, "depth-buttons"], ["class", "depth-btn", 3, "active", "title", "click", 4, "ngFor", "ngForOf"], [1, "depth-btn", 3, "click", "title"], [1, "relationships-graph"], [3, "stateChange", "openRecord", "focusEntities", "showFilterPanel", "showHeader", "depth"], [1, "relationships-list"], [1, "relationship-group"], [1, "relationship-group-title"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "relationship-items", "grouped"], ["class", "relationship-item-grouped", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "relationship-item-grouped"], [1, "rel-header"], [1, "rel-icon", "outgoing"], [1, "rel-entity-name"], [1, "rel-fields-chips"], ["class", "field-chip outgoing", 3, "title", "click", 4, "ngFor", "ngForOf"], [1, "field-chip", "outgoing", 3, "click", "title"], [1, "empty-state"], [1, "rel-icon", "incoming"], [1, "fa-solid", "fa-arrow-left"], ["class", "field-chip incoming", 3, "title", 4, "ngFor", "ngForOf"], [1, "field-chip", "incoming", 3, "title"], ["class", "fa-solid fa-box bundle-icon", "title", "Bundled in API", 4, "ngIf"], ["title", "Bundled in API", 1, "fa-solid", "fa-box", "bundle-icon"], [1, "section", "permissions-section"], [1, "permissions-matrix"], [1, "matrix-table"], [1, "center"], [4, "ngFor", "ngForOf"], [1, "api-capabilities"], [1, "fa-solid", "fa-plug"], [1, "capability-grid"], [1, "capability-item"], [1, "fa-solid", 3, "ngClass"], [1, "role-name"], [1, "permission-icon", 3, "ngClass"], [1, "rls-info"], ["class", "rls-badge", "title", "Read RLS", 4, "ngIf"], ["class", "rls-badge", "title", "Create RLS", 4, "ngIf"], ["class", "rls-badge", "title", "Update RLS", 4, "ngIf"], ["class", "rls-badge", "title", "Delete RLS", 4, "ngIf"], ["class", "no-rls", 4, "ngIf"], ["title", "Read RLS", 1, "rls-badge"], ["title", "Create RLS", 1, "rls-badge"], ["title", "Update RLS", 1, "rls-badge"], ["title", "Delete RLS", 1, "rls-badge"], [1, "no-rls"], [1, "section", "lineage-section"], [1, "lineage-diagram"], [1, "lineage-stage", "sources"], [1, "lineage-items"], [1, "lineage-item"], [1, "fa-solid", "fa-keyboard"], ["class", "lineage-item", 4, "ngIf"], [1, "lineage-arrow"], [1, "lineage-stage", "entity-node"], [1, "entity-box"], [1, "lineage-stage", "sinks"], [1, "tracking-config"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "config-grid"], [1, "config-item"], [1, "config-label"], [1, "config-value"], [1, "fa-solid", "fa-eye"], [1, "section", "history-section"], [1, "history-config"], [1, "config-status"], [1, "config-text"], [1, "history-info"], [1, "info-card"], [1, "fa-solid", "fa-info-circle"], ["class", "info-card", 4, "ngIf"], [1, "audit-fields-list"], [1, "section", "settings-section"], [1, "settings-panel"], [1, "fa-solid", "fa-sliders"], ["class", "settings-list", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass"], ["class", "fts-config", 4, "ngIf"], [1, "fa-solid", "fa-box"], [1, "config-row"], ["class", "config-row", 4, "ngIf"], [1, "settings-list"], ["class", "setting-item", 4, "ngFor", "ngForOf"], [1, "setting-item"], [1, "setting-name"], [4, "ngIf", "ngIfElse"], ["class", "setting-comment", 4, "ngIf"], [1, "setting-value-json"], ["language", "json", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], [1, "setting-value"], [1, "setting-comment"], [1, "fts-config"], [1, "config-value", "enabled"], [1, "fa-solid", "fa-circle-check"], [1, "config-value", "code"], [1, "panel-content"], [1, "detail-section"], ["class", "field-description", 4, "ngIf"], [1, "detail-grid"], [1, "detail-item"], [1, "label"], [1, "value", "code"], [1, "value"], ["class", "detail-item", 4, "ngIf"], ["class", "detail-section", 4, "ngIf"], [1, "field-description"], [1, "value", "link", 3, "click"], [1, "value-list"], ["class", "value-item", 4, "ngFor", "ngForOf"], [1, "value-item"], ["class", "value-code", 4, "ngIf"], [1, "value-display"], [1, "value-code"], ["class", "explorer-loading", 4, "ngIf"], ["class", "explorer-error", 4, "ngIf"], ["class", "explorer-empty", 4, "ngIf"], [1, "explorer-loading"], ["text", "Loading entity..."], [1, "explorer-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "explorer-empty"]], template: function EntityFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, EntityFormComponentExtended_div_0_Template, 61, 31, "div", 2)(1, EntityFormComponentExtended_ng_template_1_Template, 3, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            const loadingOrError_r31 = i0.ɵɵreference(2);
+            i0.ɵɵproperty("ngIf", !ctx.isExplorerLoading && ctx.entity)("ngIfElse", loadingOrError_r31);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.LoadingComponent, i5.ERDCompositeComponent, i1.SlicePipe, i1.DatePipe], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: #ffffff;\n    --bg-secondary: #f8fafc;\n    --bg-tertiary: #f1f5f9;\n\n    --text-primary: #1e293b;\n    --text-secondary: #64748b;\n    --text-muted: #94a3b8;\n\n    --border-color: #e2e8f0;\n    --border-light: #f1f5f9;\n\n    --accent-color: #3b82f6;\n    --accent-light: #eff6ff;\n    --accent-dark: #1d4ed8;\n\n    --success-color: #10b981;\n    --warning-color: #f59e0b;\n    --danger-color: #ef4444;\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n\n\n\n\n\n.explorer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info[_ngcontent-%COMP%] {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.entity-subtitle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator[_ngcontent-%COMP%] {\n    color: var(--border-color);\n}\n\n.entity-description[_ngcontent-%COMP%] {\n    color: var(--text-secondary);\n}\n\n\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n\n\n\n.explorer-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n    transform: scale(1.1);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    transform: scale(1.05);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n\n\n\n\n\n.main-canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n}\n\n.main-canvas.panel-open[_ngcontent-%COMP%] {\n    margin-right: var(--detail-panel-width);\n}\n\n\n\n.section[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--text-muted);\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: white;\n}\n\n\n\n.depth-selector[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: white;\n}\n\n\n\n.header-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n\n\n.fields-list-view[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%]:hover {\n    color: var(--accent-color);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable.sorted[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.list-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n.col-seq[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.seq-num[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row[_ngcontent-%COMP%]:hover   .seq-num[_ngcontent-%COMP%], \n.list-row.selected[_ngcontent-%COMP%]   .seq-num[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: white;\n}\n\n.col-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.required-indicator[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n    background: rgba(239, 68, 68, 0.1);\n}\n\n.required-indicator.required[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    color: #78350f;\n}\n\n.flag-badge.fk[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);\n    color: white;\n}\n\n.flag-badge.encrypted[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n    color: white;\n}\n\n.col-desc[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.desc-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n.list-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    color: var(--text-muted);\n    gap: 12px;\n}\n\n.list-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    opacity: 0.5;\n}\n\n.list-empty[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n\n\n\n.stats-cards[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover   .stat-card-action[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-main[_ngcontent-%COMP%] {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n\n\n.info-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n\n\n.capability-tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #dcfce7;\n    color: #166534;\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.capability-tag.disabled[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n\n\n.info-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n\n\n\n\n\n.fields-content[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.field-group[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-group[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    user-select: none;\n    background: linear-gradient(to right, var(--bg-secondary), transparent);\n    border-left: 3px solid var(--accent-color);\n}\n\n.group-header[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary));\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--text-muted);\n    width: 16px;\n    transition: transform var(--transition-fast);\n}\n\n.group-icon[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.field-related[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.badge.fk[_ngcontent-%COMP%] {\n    background: #dbeafe;\n    color: #1e40af;\n}\n\n.badge.encrypted[_ngcontent-%COMP%] {\n    background: #fce7f3;\n    color: #9d174d;\n}\n\n\n\n\n\n\n.relationships-graph[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-erd[_ngcontent-%COMP%], \n.relationships-graph[_ngcontent-%COMP%]   mj-erd-composite[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n\n\n.relationships-graph[_ngcontent-%COMP%]   .erd-splitter[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   kendo-splitter-pane[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-details[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.relationship-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.relationship-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.rel-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.rel-entity[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.rel-field[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type[_ngcontent-%COMP%], \n.rel-display-type[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n\n.relationship-group-title[_ngcontent-%COMP%]   .group-count[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.rel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing[_ngcontent-%COMP%] {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n}\n\n.rel-icon.incoming[_ngcontent-%COMP%] {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n}\n\n.rel-entity-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; \n\n}\n\n.field-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%] {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n    border: 1px solid var(--info-border, #90caf9);\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%]:hover {\n    background: var(--info-color, #1976d2);\n    color: white;\n}\n\n.field-chip.incoming[_ngcontent-%COMP%] {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n    border: 1px solid var(--success-border, #a5d6a7);\n}\n\n.field-chip.incoming[_ngcontent-%COMP%]:hover {\n    background: var(--success-color, #388e3c);\n    color: white;\n}\n\n.field-chip[_ngcontent-%COMP%]   .bundle-icon[_ngcontent-%COMP%] {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n\n\n\n\n\n.permissions-matrix[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th.center[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td.center[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.matrix-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.permission-icon.granted[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.permission-icon.denied[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.rls-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge[_ngcontent-%COMP%] {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n\n\n.api-capabilities[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n\n\n\n\n.lineage-diagram[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.lineage-stage[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.lineage-arrow[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: white;\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n}\n\n.tracking-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled[_ngcontent-%COMP%] {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.config-item[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n\n\n\n\n\n.history-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.config-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list[_ngcontent-%COMP%] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n\n\n\n.settings-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item[_ngcontent-%COMP%] {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: #fafafa;\n}\n\n.setting-value-json[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-editor {\n    font-size: 12px;\n    background: #fafafa;\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-gutters {\n    background: #f0f0f0;\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config[_ngcontent-%COMP%], \n.settings-section[_ngcontent-%COMP%]   .config-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.enabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.value-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display[_ngcontent-%COMP%] {\n    color: var(--text-primary);\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n}\n\n\n\n\n\n\n.explorer-loading[_ngcontent-%COMP%], \n.explorer-error[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.explorer-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.explorer-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.explorer-error[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.explorer-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    opacity: 1;\n}", ".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"], changeDetection: 0 }); }
+};
+EntityFormComponentExtended = __decorate([
+    RegisterClass(BaseFormComponent, 'Entities')
+], EntityFormComponentExtended);
+export { EntityFormComponentExtended };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFormComponentExtended, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"entity-explorer\" *ngIf=\"!isExplorerLoading && entity; else loadingOrError\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n        <div class=\"entity-identity\">\n            <div class=\"entity-icon\" [style.background-color]=\"'#3b82f6'\">\n                <i [class]=\"entityIcon\"></i>\n            </div>\n            <div class=\"entity-info\">\n                <div class=\"entity-title-row\">\n                    <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n                    <span class=\"status-badge\" [ngClass]=\"statusClass\">\n                        {{ entity.Status }}\n                    </span>\n                </div>\n                <div class=\"entity-subtitle\">\n                    <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n                    <span class=\"separator\">|</span>\n                    <span class=\"entity-description\" *ngIf=\"entity.Description\" [title]=\"entity.Description\">\n                        {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n                    </span>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"header-stats\">\n            <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n                <i class=\"fa-solid fa-table-columns\"></i>\n                <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n                <span class=\"stat-label\">Fields</span>\n            </div>\n            <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n                <i class=\"fa-solid fa-link\"></i>\n                <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n                <span class=\"stat-label\">Relations</span>\n            </div>\n            <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n                <span class=\"stat-label\">Roles</span>\n            </div>\n            <div class=\"stat-item\">\n                <i class=\"fa-solid fa-database\"></i>\n                <span class=\"stat-value\" *ngIf=\"!isRowCountLoading\">{{ formattedRowCount }}</span>\n                <span class=\"stat-value loading\" *ngIf=\"isRowCountLoading\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                </span>\n                <span class=\"stat-label\">Rows</span>\n            </div>\n        </div>\n    </header>\n\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n        <!-- Navigation Rail -->\n        <nav class=\"nav-rail\">\n            <button\n                *ngFor=\"let item of navItems\"\n                class=\"nav-item\"\n                [class.active]=\"activeSection === item.id\"\n                (click)=\"setActiveSection(item.id)\"\n                [title]=\"item.label\">\n                <i [class]=\"item.icon\"></i>\n                <span class=\"nav-label\">{{ item.label }}</span>\n                <span class=\"nav-badge\" *ngIf=\"item.badge\">{{ item.badge }}</span>\n            </button>\n        </nav>\n\n        <!-- Main Canvas -->\n        <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n            <!-- ============================================================ -->\n            <!-- OVERVIEW SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section overview-section\" *ngIf=\"activeSection === 'overview'\">\n                <div class=\"section-content\">\n                    <!-- Stats Cards Row - Clickable to navigate to sections -->\n                    <div class=\"stats-cards\">\n                        <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                            <div class=\"stat-card-header\">\n                                <i class=\"fa-solid fa-table-cells\"></i>\n                                <span>Fields</span>\n                            </div>\n                            <div class=\"stat-card-body\">\n                                <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                                <div class=\"stat-details\">\n                                    <span>{{ stats.primaryKeyCount }} PKs</span>\n                                    <span>{{ stats.foreignKeyCount }} FKs</span>\n                                    <span *ngIf=\"stats.encryptedFieldCount\">{{ stats.encryptedFieldCount }} Encrypted</span>\n                                </div>\n                            </div>\n                            <div class=\"stat-card-action\">\n                                <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                        </div>\n\n                        <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                            <div class=\"stat-card-header\">\n                                <i class=\"fa-solid fa-diagram-project\"></i>\n                                <span>Relationships</span>\n                            </div>\n                            <div class=\"stat-card-body\">\n                                <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                                <div class=\"stat-details\">\n                                    <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                                    <span>{{ groupedIncomingRelationships.length }} In</span>\n                                </div>\n                            </div>\n                            <div class=\"stat-card-action\">\n                                <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                        </div>\n\n                        <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                            <div class=\"stat-card-header\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                                <span>Security</span>\n                            </div>\n                            <div class=\"stat-card-body\">\n                                <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                                <div class=\"stat-details\">\n                                    <span>Roles configured</span>\n                                </div>\n                            </div>\n                            <div class=\"stat-card-action\">\n                                <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                        </div>\n\n                        <div class=\"stat-card\">\n                            <div class=\"stat-card-header\">\n                                <i class=\"fa-solid fa-database\"></i>\n                                <span>Data</span>\n                            </div>\n                            <div class=\"stat-card-body\">\n                                <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                                <div class=\"stat-details\">\n                                    <span *ngIf=\"entity.RowCountRunAt\">Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                                    <span *ngIf=\"!entity.RowCountRunAt\">Row count</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Capabilities -->\n                    <div class=\"info-panel capabilities-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-bolt\"></i>\n                            Capabilities\n                        </h3>\n                        <div class=\"capability-tags\">\n                            <span class=\"capability-tag\" *ngFor=\"let cap of capabilitySummary\">\n                                <i class=\"fa-solid fa-check\"></i>\n                                {{ cap }}\n                            </span>\n                            <span class=\"capability-tag disabled\" *ngIf=\"!entity.IncludeInAPI\">\n                                <i class=\"fa-solid fa-xmark\"></i>\n                                No API\n                            </span>\n                        </div>\n                    </div>\n\n                    <!-- Database Info -->\n                    <div class=\"info-panel database-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-server\"></i>\n                            Database\n                        </h3>\n                        <div class=\"info-grid\">\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">Schema</span>\n                                <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                            </div>\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">Table</span>\n                                <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                            </div>\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">View</span>\n                                <span class=\"info-value\">{{ entity.BaseView }}</span>\n                            </div>\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">Delete Type</span>\n                                <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                            </div>\n                            <div class=\"info-item\" *ngIf=\"entity.spCreate\">\n                                <span class=\"info-label\">SP Create</span>\n                                <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                            </div>\n                            <div class=\"info-item\" *ngIf=\"entity.spUpdate\">\n                                <span class=\"info-label\">SP Update</span>\n                                <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                            </div>\n                            <div class=\"info-item\" *ngIf=\"entity.spDelete\">\n                                <span class=\"info-label\">SP Delete</span>\n                                <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Code Gen Info -->\n                    <div class=\"info-panel codegen-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Code Generation\n                        </h3>\n                        <div class=\"info-grid\">\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">Class Name</span>\n                                <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                            </div>\n                            <div class=\"info-item\">\n                                <span class=\"info-label\">Code Name</span>\n                                <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                            </div>\n                            <div class=\"info-item\" *ngIf=\"entity.EntityObjectSubclassName\">\n                                <span class=\"info-label\">Subclass</span>\n                                <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- FIELDS SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section fields-section\" *ngIf=\"activeSection === 'fields'\">\n                <div class=\"section-header\">\n                    <div class=\"search-box\">\n                        <i class=\"fa-solid fa-search\"></i>\n                        <input\n                            type=\"text\"\n                            placeholder=\"Search fields...\"\n                            [ngModel]=\"fieldSearchTerm\"\n                            (ngModelChange)=\"onFieldSearch($event)\">\n                    </div>\n\n                    <div class=\"header-controls\">\n                        <!-- View mode toggle -->\n                        <div class=\"view-mode-toggle\">\n                            <button\n                                class=\"toggle-btn\"\n                                [class.active]=\"fieldViewMode === 'grouped'\"\n                                (click)=\"fieldViewMode = 'grouped'\"\n                                title=\"Group by category\">\n                                <i class=\"fa-solid fa-layer-group\"></i>\n                            </button>\n                            <button\n                                class=\"toggle-btn\"\n                                [class.active]=\"fieldViewMode === 'list'\"\n                                (click)=\"fieldViewMode = 'list'\"\n                                title=\"List view\">\n                                <i class=\"fa-solid fa-list\"></i>\n                            </button>\n                        </div>\n\n                        <!-- Expand/Collapse controls (only in grouped mode) -->\n                        <div class=\"expand-collapse-controls\" *ngIf=\"fieldViewMode === 'grouped'\">\n                            <button\n                                class=\"control-btn\"\n                                (click)=\"expandAllFieldGroups()\"\n                                [disabled]=\"allFieldGroupsExpanded\"\n                                title=\"Expand all\">\n                                <i class=\"fa-solid fa-angles-down\"></i>\n                            </button>\n                            <button\n                                class=\"control-btn\"\n                                (click)=\"collapseAllFieldGroups()\"\n                                [disabled]=\"allFieldGroupsCollapsed\"\n                                title=\"Collapse all\">\n                                <i class=\"fa-solid fa-angles-up\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-content fields-content\">\n                    <!-- Grouped View -->\n                    <div class=\"field-groups\" *ngIf=\"fieldViewMode === 'grouped'\">\n                        <div\n                            class=\"field-group\"\n                            *ngFor=\"let group of getFilteredFieldGroups()\"\n                            [class.expanded]=\"isFieldGroupExpanded(group.id)\">\n\n                            <div class=\"group-header\" (click)=\"toggleFieldGroup(group.id)\">\n                                <i class=\"expand-icon fa-solid\" [ngClass]=\"isFieldGroupExpanded(group.id) ? 'fa-chevron-down' : 'fa-chevron-right'\"></i>\n                                <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                                <span class=\"group-label\">{{ group.label }}</span>\n                                <span class=\"group-count\">{{ group.fields.length }}</span>\n                            </div>\n\n                            <div class=\"group-content\" *ngIf=\"isFieldGroupExpanded(group.id)\">\n                                <div\n                                    class=\"field-item\"\n                                    *ngFor=\"let field of group.fields\"\n                                    (click)=\"selectField(field)\"\n                                    [class.selected]=\"selectedField?.ID === field.ID\">\n\n                                    <div class=\"field-icon\">\n                                        <i [class]=\"getFieldTypeIcon(field)\"></i>\n                                    </div>\n\n                                    <div class=\"field-info\">\n                                        <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                        <div class=\"field-meta\">\n                                            <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                            <span class=\"field-nullable\" *ngIf=\"!field.AllowsNull\">Required</span>\n                                            <span class=\"field-related\" *ngIf=\"field.RelatedEntityID\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                                <i class=\"fa-solid fa-arrow-right\"></i>\n                                                {{ getRelatedEntityName(field) }}\n                                            </span>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"field-badges\">\n                                        <span class=\"badge pk\" *ngIf=\"field.IsPrimaryKey\" title=\"Primary Key\">PK</span>\n                                        <span class=\"badge fk\" *ngIf=\"field.RelatedEntityID && !field.IsPrimaryKey\" title=\"Foreign Key\">FK</span>\n                                        <span class=\"badge encrypted\" *ngIf=\"field.Encrypt\" title=\"Encrypted\">\n                                            <i class=\"fa-solid fa-lock\"></i>\n                                        </span>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- List View - Modern Card-style Table -->\n                    <div class=\"fields-list-view\" *ngIf=\"fieldViewMode === 'list'\">\n                        <!-- Table Header -->\n                        <div class=\"list-header\">\n                            <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                                #\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                            <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                                Field Name\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                            <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                                Type\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                            <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                                Length\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                            <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                                Required\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                            <div class=\"list-col col-flags\">Flags</div>\n                            <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                                Description\n                                <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                            </div>\n                        </div>\n\n                        <!-- Table Body -->\n                        <div class=\"list-body\">\n                            <div\n                                class=\"list-row\"\n                                *ngFor=\"let field of getFilteredFieldsList(); let i = index\"\n                                [class.selected]=\"selectedField?.ID === field.ID\"\n                                (click)=\"selectField(field)\">\n                                <div class=\"list-col col-seq\">\n                                    <span class=\"seq-num\">{{ field.Sequence }}</span>\n                                </div>\n                                <div class=\"list-col col-name\">\n                                    <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                                    <span class=\"field-name-text\">{{ field.DisplayName || field.Name }}</span>\n                                </div>\n                                <div class=\"list-col col-type\">\n                                    <span class=\"type-tag\">{{ field.Type }}</span>\n                                </div>\n                                <div class=\"list-col col-length\">\n                                    <span class=\"length-value\" *ngIf=\"field.Length > 0\">{{ field.Length }}</span>\n                                    <span class=\"length-value muted\" *ngIf=\"field.Length <= 0\">\u2014</span>\n                                </div>\n                                <div class=\"list-col col-nullable\">\n                                    <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                                        <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                                        {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                                    </span>\n                                </div>\n                                <div class=\"list-col col-flags\">\n                                    <div class=\"flag-badges\">\n                                        <span class=\"flag-badge pk\" *ngIf=\"field.IsPrimaryKey\" title=\"Primary Key\">\n                                            <i class=\"fa-solid fa-key\"></i> PK\n                                        </span>\n                                        <span class=\"flag-badge fk\" *ngIf=\"field.RelatedEntityID && !field.IsPrimaryKey\" title=\"Foreign Key\">\n                                            <i class=\"fa-solid fa-link\"></i> FK\n                                        </span>\n                                        <span class=\"flag-badge encrypted\" *ngIf=\"field.Encrypt\" title=\"Encrypted\">\n                                            <i class=\"fa-solid fa-lock\"></i>\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"list-col col-desc\">\n                                    <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Empty state -->\n                        <div class=\"list-empty\" *ngIf=\"getFilteredFieldsList().length === 0\">\n                            <i class=\"fa-solid fa-search\"></i>\n                            <span>No fields match your search</span>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- RELATIONSHIPS SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section relationships-section\" *ngIf=\"activeSection === 'relationships'\">\n                <div class=\"section-header\">\n                    <div class=\"view-toggle\">\n                        <button\n                            class=\"toggle-btn\"\n                            [class.active]=\"relationshipViewMode === 'diagram'\"\n                            (click)=\"relationshipViewMode = 'diagram'\">\n                            <i class=\"fa-solid fa-diagram-project\"></i>\n                            Diagram\n                        </button>\n                        <button\n                            class=\"toggle-btn\"\n                            [class.active]=\"relationshipViewMode === 'list'\"\n                            (click)=\"relationshipViewMode = 'list'\">\n                            <i class=\"fa-solid fa-list\"></i>\n                            List\n                        </button>\n                    </div>\n\n                    <!-- Depth selector (only in diagram mode) -->\n                    <div class=\"depth-selector\" *ngIf=\"relationshipViewMode === 'diagram'\">\n                        <span class=\"depth-label\">Depth:</span>\n                        <div class=\"depth-buttons\">\n                            <button\n                                *ngFor=\"let d of [1, 2, 3, 4, 5]\"\n                                class=\"depth-btn\"\n                                [class.active]=\"erdDepth === d\"\n                                (click)=\"setErdDepth(d)\"\n                                [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                                {{ d }}\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-content\">\n                    <!-- Diagram View using the ERD composite component -->\n                    <div class=\"relationships-graph\" *ngIf=\"relationshipViewMode === 'diagram'\">\n                        <mj-erd-composite\n                            [focusEntities]=\"entity ? [entity] : []\"\n                            [showFilterPanel]=\"false\"\n                            [showHeader]=\"false\"\n                            [depth]=\"erdDepth\"\n                            (stateChange)=\"onERDStateChange($event)\"\n                            (openRecord)=\"onERDOpenRecord($event)\">\n                        </mj-erd-composite>\n                    </div>\n\n                    <!-- List View -->\n                    <div class=\"relationships-list\" *ngIf=\"relationshipViewMode === 'list'\">\n                        <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                        <div class=\"relationship-group\">\n                            <h3 class=\"relationship-group-title\">\n                                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                                Outgoing (References to other entities)\n                                <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                            </h3>\n                            <div class=\"relationship-items grouped\">\n                                <div\n                                    class=\"relationship-item-grouped\"\n                                    *ngFor=\"let group of groupedOutgoingRelationships\">\n                                    <div class=\"rel-header\">\n                                        <div class=\"rel-icon outgoing\">\n                                            <i class=\"fa-solid fa-arrow-right\"></i>\n                                        </div>\n                                        <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                                    </div>\n                                    <div class=\"rel-fields-chips\">\n                                        <span\n                                            class=\"field-chip outgoing\"\n                                            *ngFor=\"let field of group.fields\"\n                                            [title]=\"field.Description || field.Name\"\n                                            (click)=\"selectField(field)\">\n                                            <i class=\"fa-solid fa-link\"></i>\n                                            {{ field.Name }}\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"empty-state\" *ngIf=\"groupedOutgoingRelationships.length === 0\">\n                                    <p>No outgoing relationships</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Incoming Relationships - Grouped by source entity -->\n                        <div class=\"relationship-group\">\n                            <h3 class=\"relationship-group-title\">\n                                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                                Incoming (Entities that reference this one)\n                                <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                            </h3>\n                            <div class=\"relationship-items grouped\">\n                                <div\n                                    class=\"relationship-item-grouped\"\n                                    *ngFor=\"let group of groupedIncomingRelationships\">\n                                    <div class=\"rel-header\">\n                                        <div class=\"rel-icon incoming\">\n                                            <i class=\"fa-solid fa-arrow-left\"></i>\n                                        </div>\n                                        <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                                    </div>\n                                    <div class=\"rel-fields-chips\">\n                                        <span\n                                            class=\"field-chip incoming\"\n                                            *ngFor=\"let field of group.fields\"\n                                            [title]=\"'Type: ' + field.type\">\n                                            <i class=\"fa-solid fa-link\"></i>\n                                            {{ field.fieldName }}\n                                            <i class=\"fa-solid fa-box bundle-icon\" *ngIf=\"field.bundleInAPI\" title=\"Bundled in API\"></i>\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"empty-state\" *ngIf=\"groupedIncomingRelationships.length === 0\">\n                                    <p>No incoming relationships</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- PERMISSIONS SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section permissions-section\" *ngIf=\"activeSection === 'permissions'\">\n                <div class=\"section-content\">\n                    <div class=\"permissions-matrix\">\n                        <table class=\"matrix-table\">\n                            <thead>\n                                <tr>\n                                    <th>Role</th>\n                                    <th class=\"center\">Create</th>\n                                    <th class=\"center\">Read</th>\n                                    <th class=\"center\">Update</th>\n                                    <th class=\"center\">Delete</th>\n                                    <th>RLS</th>\n                                </tr>\n                            </thead>\n                            <tbody>\n                                <tr *ngFor=\"let perm of entity.Permissions\">\n                                    <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                                    <td class=\"center\">\n                                        <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                                    </td>\n                                    <td class=\"center\">\n                                        <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                                    </td>\n                                    <td class=\"center\">\n                                        <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                                    </td>\n                                    <td class=\"center\">\n                                        <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                                    </td>\n                                    <td class=\"rls-info\">\n                                        <span *ngIf=\"perm.ReadRLSFilterID\" class=\"rls-badge\" title=\"Read RLS\">R</span>\n                                        <span *ngIf=\"perm.CreateRLSFilterID\" class=\"rls-badge\" title=\"Create RLS\">C</span>\n                                        <span *ngIf=\"perm.UpdateRLSFilterID\" class=\"rls-badge\" title=\"Update RLS\">U</span>\n                                        <span *ngIf=\"perm.DeleteRLSFilterID\" class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                                        <span *ngIf=\"!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID\" class=\"no-rls\">None</span>\n                                    </td>\n                                </tr>\n                            </tbody>\n                        </table>\n                        <div class=\"empty-state\" *ngIf=\"entity.Permissions.length === 0\">\n                            <i class=\"fa-solid fa-shield-halved\"></i>\n                            <p>No permissions configured</p>\n                        </div>\n                    </div>\n\n                    <div class=\"api-capabilities\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-plug\"></i>\n                            API Capabilities\n                        </h3>\n                        <div class=\"capability-grid\">\n                            <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Include in API</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Allow All Rows</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Allow Create</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Allow Update</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Allow Delete</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>User Search</span>\n                            </div>\n                            <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Custom Resolver</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- LINEAGE SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section lineage-section\" *ngIf=\"activeSection === 'lineage'\">\n                <div class=\"section-content\">\n                    <div class=\"lineage-diagram\">\n                        <div class=\"lineage-stage sources\">\n                            <h4>Data Sources</h4>\n                            <div class=\"lineage-items\">\n                                <div class=\"lineage-item\">\n                                    <i class=\"fa-solid fa-keyboard\"></i>\n                                    <span>Manual Entry</span>\n                                </div>\n                                <div class=\"lineage-item\" *ngIf=\"entity.IncludeInAPI\">\n                                    <i class=\"fa-solid fa-plug\"></i>\n                                    <span>API Create</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"lineage-arrow\">\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n\n                        <div class=\"lineage-stage entity-node\">\n                            <div class=\"entity-box\">\n                                <i [class]=\"entityIcon\"></i>\n                                <span>{{ entity.Name }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"lineage-arrow\">\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n\n                        <div class=\"lineage-stage sinks\">\n                            <h4>Data Sinks</h4>\n                            <div class=\"lineage-items\">\n                                <div class=\"lineage-item\" *ngIf=\"entity.TrackRecordChanges\">\n                                    <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                                    <span>Record Changes</span>\n                                </div>\n                                <div class=\"lineage-item\" *ngIf=\"entity.AuditRecordAccess\">\n                                    <i class=\"fa-solid fa-eye\"></i>\n                                    <span>Access Audit</span>\n                                </div>\n                                <div class=\"lineage-item\">\n                                    <i class=\"fa-solid fa-link\"></i>\n                                    <span>Related Entities ({{ stats.relationshipCount }})</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"tracking-config\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                            Tracking Configuration\n                        </h3>\n                        <div class=\"config-grid\">\n                            <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Track Record Changes</span>\n                            </div>\n                            <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Audit Record Access</span>\n                            </div>\n                            <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Audit View Runs</span>\n                            </div>\n                            <div class=\"config-item\">\n                                <span class=\"config-label\">Delete Type:</span>\n                                <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                            </div>\n                            <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                                <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                                <span>Cascade Deletes</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- HISTORY SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section history-section\" *ngIf=\"activeSection === 'history'\">\n                <div class=\"section-content\">\n                    <div class=\"history-config\">\n                        <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                            <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                            <div class=\"config-text\">\n                                <strong>Record Change Tracking</strong>\n                                <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"history-info\">\n                        <div class=\"info-card\">\n                            <h4>\n                                <i class=\"fa-solid fa-info-circle\"></i>\n                                About Change Tracking\n                            </h4>\n                            <p *ngIf=\"entity.TrackRecordChanges\">\n                                This entity has change tracking enabled. All modifications to records are stored in the\n                                <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                                the before/after values.\n                            </p>\n                            <p *ngIf=\"!entity.TrackRecordChanges\">\n                                This entity does not have change tracking enabled. To enable it, set\n                                <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                            </p>\n                        </div>\n\n                        <div class=\"info-card\" *ngIf=\"entity.TrackRecordChanges\">\n                            <h4>\n                                <i class=\"fa-solid fa-database\"></i>\n                                Audit Fields\n                            </h4>\n                            <ul class=\"audit-fields-list\">\n                                <li>\n                                    <code>__mj_CreatedAt</code> - Record creation timestamp\n                                </li>\n                                <li>\n                                    <code>__mj_UpdatedAt</code> - Last modification timestamp\n                                </li>\n                                <li *ngIf=\"entity.DeleteType === 'Soft'\">\n                                    <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n            <!-- ============================================================ -->\n            <!-- SETTINGS SECTION -->\n            <!-- ============================================================ -->\n            <section class=\"section settings-section\" *ngIf=\"activeSection === 'settings'\">\n                <div class=\"section-content\">\n                    <!-- Entity Settings -->\n                    <div class=\"settings-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-sliders\"></i>\n                            Entity Settings\n                        </h3>\n                        <div class=\"settings-list\" *ngIf=\"entity.Settings.length > 0\">\n                            <div class=\"setting-item\" *ngFor=\"let setting of entity.Settings\">\n                                <div class=\"setting-name\">{{ setting.Name }}</div>\n                                <ng-container *ngIf=\"isJsonValue(setting.Value); else plainValue\">\n                                    <div class=\"setting-value-json\">\n                                        <mj-code-editor\n                                            [value]=\"formatJsonValue(setting.Value)\"\n                                            language=\"json\"\n                                            [readonly]=\"true\"\n                                            [lineWrapping]=\"true\"\n                                            setup=\"minimal\">\n                                        </mj-code-editor>\n                                    </div>\n                                </ng-container>\n                                <ng-template #plainValue>\n                                    <div class=\"setting-value\">{{ setting.Value }}</div>\n                                </ng-template>\n                                <div class=\"setting-comment\" *ngIf=\"setting.Comments\">{{ setting.Comments }}</div>\n                            </div>\n                        </div>\n                        <div class=\"empty-state\" *ngIf=\"entity.Settings.length === 0\">\n                            <p>No custom settings configured</p>\n                        </div>\n                    </div>\n\n                    <!-- Full Text Search -->\n                    <div class=\"settings-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-magnifying-glass\"></i>\n                            Full-Text Search\n                        </h3>\n                        <div class=\"fts-config\" *ngIf=\"entity.FullTextSearchEnabled\">\n                            <div class=\"config-row\">\n                                <span class=\"config-label\">Status</span>\n                                <span class=\"config-value enabled\">\n                                    <i class=\"fa-solid fa-circle-check\"></i>\n                                    Enabled\n                                </span>\n                            </div>\n                            <div class=\"config-row\" *ngIf=\"entity.FullTextCatalog\">\n                                <span class=\"config-label\">Catalog</span>\n                                <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                            </div>\n                            <div class=\"config-row\" *ngIf=\"entity.FullTextIndex\">\n                                <span class=\"config-label\">Index</span>\n                                <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                            </div>\n                            <div class=\"config-row\" *ngIf=\"entity.FullTextSearchFunction\">\n                                <span class=\"config-label\">Function</span>\n                                <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                            </div>\n                        </div>\n                        <div class=\"empty-state\" *ngIf=\"!entity.FullTextSearchEnabled\">\n                            <p>Full-text search is not enabled for this entity</p>\n                        </div>\n                    </div>\n\n                    <!-- Row Packaging -->\n                    <div class=\"settings-panel\">\n                        <h3 class=\"panel-title\">\n                            <i class=\"fa-solid fa-box\"></i>\n                            Schema Packaging\n                        </h3>\n                        <div class=\"config-grid\">\n                            <div class=\"config-row\">\n                                <span class=\"config-label\">Rows to Pack</span>\n                                <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                            </div>\n                            <div class=\"config-row\" *ngIf=\"entity.RowsToPackSampleCount\">\n                                <span class=\"config-label\">Sample Count</span>\n                                <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                            </div>\n                            <div class=\"config-row\" *ngIf=\"entity.RowsToPackSampleMethod\">\n                                <span class=\"config-label\">Sample Method</span>\n                                <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n        </main>\n\n        <!-- ============================================================ -->\n        <!-- DETAIL PANEL (Slides in from right) -->\n        <!-- ============================================================ -->\n        <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n            <div class=\"panel-header\">\n                <h3 *ngIf=\"selectedField\">Field Details</h3>\n                <h3 *ngIf=\"selectedRelationship\">Relationship Details</h3>\n                <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n                    <i class=\"fa-solid fa-xmark\"></i>\n                </button>\n            </div>\n\n            <!-- Field Details -->\n            <div class=\"panel-content\" *ngIf=\"selectedField\">\n                <div class=\"detail-section\">\n                    <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n                    <p class=\"field-description\" *ngIf=\"selectedField.Description\">{{ selectedField.Description }}</p>\n                </div>\n\n                <div class=\"detail-section\">\n                    <h5>Type Information</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">SQL Type</span>\n                            <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">TypeScript Type</span>\n                            <span class=\"value code\">{{ selectedField.TSType }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Nullable</span>\n                            <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                        </div>\n                        <div class=\"detail-item\" *ngIf=\"selectedField.DefaultValue\">\n                            <span class=\"label\">Default</span>\n                            <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\" *ngIf=\"selectedField.RelatedEntityID\">\n                    <h5>Relationship</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Related Entity</span>\n                            <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                                {{ getRelatedEntityName(selectedField) }}\n                                <i class=\"fa-solid fa-arrow-right\"></i>\n                            </span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Display Type</span>\n                            <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\" *ngIf=\"selectedField.Encrypt\">\n                    <h5>Encryption</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Encrypted</span>\n                            <span class=\"value\">Yes</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Decrypt in API</span>\n                            <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\">\n                    <h5>API Settings</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Allow Update</span>\n                            <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Include in Search</span>\n                            <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Full-Text Search</span>\n                            <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\">\n                    <h5>Form Settings</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Include in Form</span>\n                            <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Section</span>\n                            <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                        </div>\n                        <div class=\"detail-item\" *ngIf=\"selectedField.Category\">\n                            <span class=\"label\">Category</span>\n                            <span class=\"value\">{{ selectedField.Category }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Sequence</span>\n                            <span class=\"value\">{{ selectedField.Sequence }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\" *ngIf=\"selectedField.EntityFieldValues.length > 0\">\n                    <h5>Allowed Values</h5>\n                    <div class=\"value-list\">\n                        <div class=\"value-item\" *ngFor=\"let val of selectedField.EntityFieldValues\">\n                            <span class=\"value-code\" *ngIf=\"val.Code !== val.Value\">{{ val.Code }}</span>\n                            <span class=\"value-display\">{{ val.Value }}</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Relationship Details -->\n            <div class=\"panel-content\" *ngIf=\"selectedRelationship\">\n                <div class=\"detail-section\">\n                    <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n                </div>\n\n                <div class=\"detail-section\">\n                    <h5>Connection</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">From Entity</span>\n                            <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Join Field</span>\n                            <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Type</span>\n                            <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"detail-section\">\n                    <h5>Display Settings</h5>\n                    <div class=\"detail-grid\">\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Display in Form</span>\n                            <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Location</span>\n                            <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                        </div>\n                        <div class=\"detail-item\">\n                            <span class=\"label\">Bundle in API</span>\n                            <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </aside>\n    </div>\n</div>\n\n<!-- Loading / Error State -->\n<ng-template #loadingOrError>\n    <div class=\"explorer-loading\" *ngIf=\"isExplorerLoading\">\n        <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n    <div class=\"explorer-error\" *ngIf=\"!isExplorerLoading && explorerError\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <p>{{ explorerError }}</p>\n    </div>\n    <div class=\"explorer-empty\" *ngIf=\"!isExplorerLoading && !explorerError && !entity\">\n        <i class=\"fa-solid fa-database\"></i>\n        <p>Entity metadata not available</p>\n    </div>\n</ng-template>\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: #ffffff;\n    --bg-secondary: #f8fafc;\n    --bg-tertiary: #f1f5f9;\n\n    --text-primary: #1e293b;\n    --text-secondary: #64748b;\n    --text-muted: #94a3b8;\n\n    --border-color: #e2e8f0;\n    --border-light: #f1f5f9;\n\n    --accent-color: #3b82f6;\n    --accent-light: #eff6ff;\n    --accent-dark: #1d4ed8;\n\n    --success-color: #10b981;\n    --warning-color: #f59e0b;\n    --danger-color: #ef4444;\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.status-badge.status-deprecated {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.status-badge.status-disabled {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: white;\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: white;\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: rgba(239, 68, 68, 0.1);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    color: #78350f;\n}\n\n.flag-badge.fk {\n    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);\n    color: white;\n}\n\n.flag-badge.encrypted {\n    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);\n    color: white;\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n.list-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    color: var(--text-muted);\n    gap: 12px;\n}\n\n.list-empty i {\n    font-size: 32px;\n    opacity: 0.5;\n}\n\n.list-empty span {\n    font-size: 14px;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: #dcfce7;\n    color: #166534;\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: #fee2e2;\n    color: #991b1b;\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n.field-group {\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-group:last-child {\n    border-bottom: none;\n}\n\n.group-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    user-select: none;\n    background: linear-gradient(to right, var(--bg-secondary), transparent);\n    border-left: 3px solid var(--accent-color);\n}\n\n.group-header:hover {\n    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary));\n}\n\n.expand-icon {\n    font-size: 10px;\n    color: var(--text-muted);\n    width: 16px;\n    transition: transform var(--transition-fast);\n}\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: #fef3c7;\n    color: #92400e;\n}\n\n.badge.fk {\n    background: #dbeafe;\n    color: #1e40af;\n}\n\n.badge.encrypted {\n    background: #fce7f3;\n    color: #9d174d;\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph kendo-splitter-pane {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n}\n\n.rel-icon.incoming {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: var(--info-light, #e3f2fd);\n    color: var(--info-color, #1976d2);\n    border: 1px solid var(--info-border, #90caf9);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--info-color, #1976d2);\n    color: white;\n}\n\n.field-chip.incoming {\n    background: var(--success-light, #e8f5e9);\n    color: var(--success-color, #388e3c);\n    border: 1px solid var(--success-border, #a5d6a7);\n}\n\n.field-chip.incoming:hover {\n    background: var(--success-color, #388e3c);\n    color: white;\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: white;\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: white;\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: #dcfce7;\n    color: #166534;\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: #fafafa;\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: #fafafa;\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: #f0f0f0;\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading,\n.explorer-error,\n.explorer-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.explorer-error i,\n.explorer-empty i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.explorer-error {\n    color: var(--danger-color);\n}\n\n.explorer-error i {\n    opacity: 1;\n}\n", ".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFormComponentExtended, { className: "EntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 99 }); })();
+export function LoadEntityFormComponentExtended() {
+    // Prevents tree-shaking
+}
+//# sourceMappingURL=entity-form.component.js.map