@memberjunction/ng-entity-viewer 0.0.1 → 2.121.0

package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js

@@ -0,0 +1,787 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RunView, Metadata, EntityFieldValueListType } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "../pill/pill.component";
+const _forTrack0 = ($index, $item) => $item.name;
+const _forTrack1 = ($index, $item) => $item.relatedEntityName;
+const _forTrack2 = ($index, $item) => $item.PrimaryKey.ToString();
+function EntityRecordDetailPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 18);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.getEntityIconClass());
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 23);
+    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 26);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template_button_click_5_listener($event) { i0.ɵɵrestoreView(_r2); const field_r3 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(field_r3.value, $event)); });
+    i0.ɵɵelement(6, "i", 27);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(field_r3.label);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r3.displayValue);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r3.value);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const field_r3 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onForeignKeyClick(field_r3, $event)); });
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵpropertyInterpolate1("title", "Open ", field_r3.relatedEntityName, " record");
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "span", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 28);
+    i0.ɵɵtemplate(4, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_4_Template, 2, 1, "span", 29)(5, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_5_Template, 2, 1, "span", 30)(6, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Conditional_6_Template, 2, 2, "button", 31);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r3.label);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fk-id-only", !ctx_r0.hasFriendlyName(field_r3));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.hasFriendlyName(field_r3) ? 4 : 5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(field_r3.relatedEntityName ? 6 : -1);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "span", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "mj-pill", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r3.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", field_r3.value);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "span", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r3.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r3.value);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_0_Template, 7, 1, "div", 20)(1, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_1_Template, 7, 5, "div", 21)(2, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_2_Template, 4, 2, "div", 22)(3, EntityRecordDetailPanelComponent_Conditional_15_For_2_Conditional_3_Template, 5, 2, "div", 22);
+} if (rf & 2) {
+    const field_r3 = ctx.$implicit;
+    i0.ɵɵconditional(field_r3.type === "primary-key" ? 0 : field_r3.type === "foreign-key" ? 1 : field_r3.type === "enum" ? 2 : 3);
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵtext(1, "No details available");
+    i0.ɵɵelementEnd();
+} }
+function EntityRecordDetailPanelComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵrepeaterCreate(1, EntityRecordDetailPanelComponent_Conditional_15_For_2_Template, 4, 1, null, null, _forTrack0);
+    i0.ɵɵtemplate(3, EntityRecordDetailPanelComponent_Conditional_15_Conditional_3_Template, 2, 0, "div", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.displayFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.displayFields.length === 0 ? 3 : -1);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "mj-loading", 36);
+    i0.ɵɵelementEnd();
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵtext(1, "No related records");
+    i0.ɵɵelementEnd();
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelement(1, "mj-loading", 45);
+    i0.ɵɵelementEnd();
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener($event) { const rec_r8 = i0.ɵɵrestoreView(_r7).$implicit; const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onRelatedRecordClick(relEntity_r6, rec_r8, $event)); });
+    i0.ɵɵelementStart(1, "div", 49)(2, "span", 50);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Conditional_4_Template, 2, 1, "span", 51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 52);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_25_0;
+    const rec_r8 = ctx.$implicit;
+    const relEntity_r6 = i0.ɵɵnextContext(3).$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.getRelatedRecordDisplayName(relEntity_r6, rec_r8));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_25_0 = ctx_r0.getRelatedRecordSubtitle(relEntity_r6, rec_r8)) ? 4 : -1, tmp_25_0);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const relEntity_r6 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onViewAllRelated(relEntity_r6, $event)); });
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 54);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const relEntity_r6 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("View all ", relEntity_r6.count, " records");
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_For_1_Template, 6, 2, "div", 46, _forTrack2);
+    i0.ɵɵtemplate(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Conditional_2_Template, 4, 1, "div", 47);
+} if (rf & 2) {
+    const relEntity_r6 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵrepeater(relEntity_r6.records);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(relEntity_r6.count > 10 ? 2 : -1);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵtemplate(1, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_1_Template, 2, 0, "div", 44)(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Conditional_2_Template, 3, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const relEntity_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(relEntity_r6.isLoadingRecords ? 1 : 2);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39);
+    i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template_div_click_1_listener($event) { const relEntity_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleRelatedEntityExpansion(relEntity_r6, $event)); });
+    i0.ɵɵelement(2, "i", 40)(3, "i");
+    i0.ɵɵelementStart(4, "span", 41);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 42);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Conditional_8_Template, 3, 1, "div", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const relEntity_r6 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("expanded", relEntity_r6.isExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("clickable", relEntity_r6.count > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", relEntity_r6.isExpanded)("fa-chevron-right", !relEntity_r6.isExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.getRelatedEntityIcon(relEntity_r6));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(relEntity_r6.relatedEntityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(relEntity_r6.count);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(relEntity_r6.isExpanded ? 8 : -1);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_For_1_Template, 9, 13, "div", 37, _forTrack1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r0.relatedEntitiesWithRecords);
+} }
+function EntityRecordDetailPanelComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵtemplate(1, EntityRecordDetailPanelComponent_Conditional_22_Conditional_1_Template, 2, 0, "div", 35)(2, EntityRecordDetailPanelComponent_Conditional_22_Conditional_2_Template, 2, 0, "div", 19)(3, EntityRecordDetailPanelComponent_Conditional_22_Conditional_3_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isLoadingRelationships ? 1 : ctx_r0.relatedEntitiesWithRecords.length === 0 ? 2 : 3);
+} }
+/**
+ * EntityRecordDetailPanelComponent - A reusable panel for displaying entity record details
+ *
+ * This component provides a detail panel view for entity records with:
+ * - Primary key display with copy functionality
+ * - Foreign key fields showing friendly names with navigation
+ * - Enum fields displayed as pills
+ * - Related entities with expandable record lists
+ * - Configurable sections for details and relationships
+ *
+ * @example
+ * ```html
+ * <mj-entity-record-detail-panel
+ *   [entity]="selectedEntity"
+ *   [record]="selectedRecord"
+ *   (close)="onClosePanel()"
+ *   (openRecord)="onOpenRecord($event)"
+ *   (navigateToRelated)="onNavigateToRelated($event)">
+ * </mj-entity-record-detail-panel>
+ * ```
+ */
+export class EntityRecordDetailPanelComponent {
+    cdr;
+    entity = null;
+    record = null;
+    close = new EventEmitter();
+    openRecord = new EventEmitter();
+    navigateToRelated = new EventEmitter();
+    openRelatedRecord = new EventEmitter();
+    openForeignKeyRecord = new EventEmitter();
+    // Related entity counts
+    relatedEntities = [];
+    isLoadingRelationships = false;
+    metadata = new Metadata();
+    // Sections expanded state
+    detailsSectionExpanded = true;
+    relationshipsSectionExpanded = true;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(changes) {
+        if (changes['record'] && this.record && this.entity) {
+            this.loadRelationshipCounts();
+        }
+    }
+    /**
+     * Load counts for related entities using batch RunViews call
+     */
+    async loadRelationshipCounts() {
+        if (!this.entity || !this.record)
+            return;
+        this.isLoadingRelationships = true;
+        this.relatedEntities = [];
+        // Get relationships where this entity is the related entity (foreign keys pointing TO this record)
+        const relationships = this.entity.RelatedEntities;
+        if (relationships.length === 0) {
+            this.isLoadingRelationships = false;
+            return;
+        }
+        // Build the filter using all primary key fields
+        const pkFilter = this.record.PrimaryKey.ToWhereClause();
+        if (!pkFilter) {
+            this.isLoadingRelationships = false;
+            return;
+        }
+        // Get the first PK value for the join field filter
+        const pkValue = this.record.PrimaryKey.KeyValuePairs[0]?.Value;
+        if (!pkValue) {
+            this.isLoadingRelationships = false;
+            return;
+        }
+        // Build batch query params for all relationships
+        const viewParams = relationships.map(rel => ({
+            EntityName: rel.RelatedEntity,
+            ExtraFilter: `${rel.RelatedEntityJoinField}='${pkValue}'`,
+            ResultType: 'count_only'
+        }));
+        try {
+            const rv = new RunView();
+            const results = await rv.RunViews(viewParams);
+            // Map results back to relationship data
+            this.relatedEntities = relationships.map((rel, index) => {
+                const result = results[index];
+                return {
+                    relationship: rel,
+                    relatedEntityName: rel.RelatedEntity,
+                    count: result.Success ? result.TotalRowCount : 0,
+                    isExpanded: false,
+                    records: [],
+                    isLoadingRecords: false
+                };
+            });
+        }
+        catch (error) {
+            console.warn('Failed to load relationship counts:', error);
+            // Initialize with zero counts on error
+            this.relatedEntities = relationships.map(rel => ({
+                relationship: rel,
+                relatedEntityName: rel.RelatedEntity,
+                count: 0,
+                isExpanded: false,
+                records: [],
+                isLoadingRecords: false
+            }));
+        }
+        finally {
+            this.isLoadingRelationships = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Get key fields to display in details section, categorized by type
+     */
+    get displayFields() {
+        if (!this.entity || !this.record)
+            return [];
+        const fields = [];
+        const excludePatterns = ['__mj_', 'password', 'secret', 'token'];
+        for (const field of this.entity.Fields) {
+            // Skip system fields and sensitive fields
+            if (excludePatterns.some(p => field.Name.toLowerCase().includes(p)))
+                continue;
+            // Skip very long text fields (but not FK fields which are usually GUIDs)
+            if (field.Length && field.Length > 500 && !field.RelatedEntityID)
+                continue;
+            const value = this.record.Get(field.Name);
+            // Handle Primary Key fields specially
+            if (field.IsPrimaryKey) {
+                fields.push({
+                    type: 'primary-key',
+                    name: field.Name,
+                    label: this.formatFieldLabel(field),
+                    value: value !== null && value !== undefined ? String(value) : ''
+                });
+                continue;
+            }
+            // Handle Foreign Key fields - show the related record name instead of ID
+            if (field.RelatedEntityID && field.RelatedEntityID.length > 0) {
+                const fkDisplay = this.buildForeignKeyDisplay(field, value);
+                if (fkDisplay) {
+                    fields.push(fkDisplay);
+                }
+                continue;
+            }
+            // Skip empty values for regular fields
+            if (value === null || value === undefined || String(value).trim() === '')
+                continue;
+            // Limit regular fields to reasonable number
+            if (fields.filter(f => f.type === 'regular' || f.type === 'enum').length >= 10)
+                continue;
+            // Check if this field has enumerated values
+            const isEnum = field.ValueListTypeEnum !== EntityFieldValueListType.None &&
+                field.EntityFieldValues.length > 0;
+            fields.push({
+                type: isEnum ? 'enum' : 'regular',
+                name: field.Name,
+                label: this.formatFieldLabel(field),
+                value: this.formatFieldValue(value, field.Name)
+            });
+        }
+        return fields;
+    }
+    /**
+     * Build display info for a foreign key field
+     * Uses RelatedEntityNameFieldMap to get the human-readable name
+     * Label comes from the virtual field's DisplayNameOrName (e.g., "Template" not "Template ID")
+     */
+    buildForeignKeyDisplay(field, value) {
+        if (value === null || value === undefined || String(value).trim() === '') {
+            return null;
+        }
+        const fkValue = String(value);
+        let displayValue = fkValue;
+        let label = field.DisplayNameOrName; // Fallback to FK field's label
+        // Try to get the display name from the mapped field
+        // RelatedEntityNameFieldMap tells us which field contains the name of the related record
+        if (field.RelatedEntityNameFieldMap && field.RelatedEntityNameFieldMap.trim().length > 0) {
+            const mappedValue = this.record.Get(field.RelatedEntityNameFieldMap);
+            if (mappedValue !== null && mappedValue !== undefined && String(mappedValue).trim() !== '') {
+                displayValue = String(mappedValue);
+            }
+            // Use the mapped field's DisplayNameOrName for the label
+            const mappedField = this.entity.Fields.find(f => f.Name === field.RelatedEntityNameFieldMap);
+            if (mappedField) {
+                label = mappedField.DisplayNameOrName;
+            }
+        }
+        else {
+            // Fallback: try to find a virtual field with the same name minus "ID" suffix
+            // e.g., for "TemplateID", look for "Template" field
+            const baseName = field.Name.replace(/ID$/i, '');
+            if (baseName !== field.Name) {
+                const virtualField = this.entity.Fields.find(f => f.Name.toLowerCase() === baseName.toLowerCase() && f.IsVirtual);
+                if (virtualField) {
+                    const virtualValue = this.record.Get(virtualField.Name);
+                    if (virtualValue !== null && virtualValue !== undefined && String(virtualValue).trim() !== '') {
+                        displayValue = String(virtualValue);
+                    }
+                    // Use the virtual field's DisplayNameOrName for the label
+                    label = virtualField.DisplayNameOrName;
+                }
+            }
+        }
+        return {
+            type: 'foreign-key',
+            name: field.Name,
+            label: label,
+            value: fkValue,
+            displayValue: displayValue,
+            relatedEntityName: field.RelatedEntity || undefined,
+            relatedRecordId: fkValue
+        };
+    }
+    /**
+     * Format field name to display label using EntityFieldInfo's built-in property
+     */
+    formatFieldLabel(field) {
+        return field.DisplayNameOrName;
+    }
+    /**
+     * Format field value for display
+     */
+    formatFieldValue(value, fieldName) {
+        if (value === null || value === undefined)
+            return '-';
+        // Handle dates
+        if (value instanceof Date) {
+            return value.toLocaleDateString();
+        }
+        // Handle booleans
+        if (typeof value === 'boolean') {
+            return value ? 'Yes' : 'No';
+        }
+        // Handle numbers that look like currency
+        if (typeof value === 'number') {
+            const nameLower = fieldName.toLowerCase();
+            if (nameLower.includes('amount') ||
+                nameLower.includes('price') ||
+                nameLower.includes('cost') ||
+                nameLower.includes('total') ||
+                nameLower.includes('value')) {
+                return `$${value.toLocaleString()}`;
+            }
+            return value.toLocaleString();
+        }
+        const strValue = String(value);
+        // Truncate long strings
+        if (strValue.length > 100) {
+            return strValue.substring(0, 100) + '...';
+        }
+        return strValue;
+    }
+    /**
+     * Get record title
+     */
+    get recordTitle() {
+        if (!this.entity || !this.record)
+            return 'Record';
+        if (this.entity.NameField) {
+            const name = this.record.Get(this.entity.NameField.Name);
+            if (name)
+                return String(name);
+        }
+        return this.record.PrimaryKey.ToString();
+    }
+    /**
+     * Handle close button click
+     */
+    onClose() {
+        this.close.emit();
+    }
+    /**
+     * Handle open record button click
+     */
+    onOpenRecord() {
+        if (this.record) {
+            this.openRecord.emit(this.record);
+        }
+    }
+    /**
+     * Copy primary key value to clipboard
+     */
+    copyToClipboard(value, event) {
+        event.stopPropagation();
+        navigator.clipboard.writeText(value).then(() => {
+            // Could add a toast notification here
+            console.log('Copied to clipboard:', value);
+        }).catch(err => {
+            console.error('Failed to copy:', err);
+        });
+    }
+    /**
+     * Open a foreign key record (FK link click)
+     * Emits openForeignKeyRecord event for parent to handle opening the record
+     */
+    onForeignKeyClick(field, event) {
+        event.stopPropagation();
+        if (field.relatedEntityName && field.relatedRecordId) {
+            this.openForeignKeyRecord.emit({
+                entityName: field.relatedEntityName,
+                recordId: field.relatedRecordId
+            });
+        }
+    }
+    /**
+     * Check if a FK display value is different from the raw ID (i.e., we have a name to show)
+     */
+    hasFriendlyName(field) {
+        return field.type === 'foreign-key' &&
+            field.displayValue !== undefined &&
+            field.displayValue !== field.value;
+    }
+    /**
+     * Toggle expansion of related entity section and load records if needed
+     */
+    async toggleRelatedEntityExpansion(relEntity, event) {
+        event.stopPropagation();
+        if (relEntity.count === 0)
+            return;
+        relEntity.isExpanded = !relEntity.isExpanded;
+        // Load records on first expansion
+        if (relEntity.isExpanded && relEntity.records.length === 0 && !relEntity.isLoadingRecords) {
+            await this.loadRelatedRecords(relEntity);
+        }
+    }
+    /**
+     * Load actual records for a related entity
+     */
+    async loadRelatedRecords(relEntity) {
+        if (!this.record)
+            return;
+        const pkValue = this.record.PrimaryKey.KeyValuePairs[0]?.Value;
+        if (!pkValue)
+            return;
+        relEntity.isLoadingRecords = true;
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: relEntity.relationship.RelatedEntity,
+                ExtraFilter: `${relEntity.relationship.RelatedEntityJoinField}='${pkValue}'`,
+                ResultType: 'entity_object',
+                MaxRows: 10 // Limit inline display to 10 records
+            });
+            if (result.Success) {
+                relEntity.records = result.Results;
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to load records for ${relEntity.relatedEntityName}:`, error);
+        }
+        finally {
+            relEntity.isLoadingRecords = false;
+        }
+    }
+    /**
+     * Handle click on individual related record - opens in new tab
+     */
+    onRelatedRecordClick(relEntity, record, event) {
+        event.stopPropagation();
+        this.openRelatedRecord.emit({
+            entityName: relEntity.relatedEntityName,
+            record
+        });
+    }
+    /**
+     * Navigate to view all related records (when count > 10)
+     */
+    onViewAllRelated(relEntity, event) {
+        event.stopPropagation();
+        if (!this.record)
+            return;
+        const pkValue = this.record.PrimaryKey.KeyValuePairs[0]?.Value;
+        if (!pkValue)
+            return;
+        this.navigateToRelated.emit({
+            entityName: relEntity.relatedEntityName,
+            filter: `${relEntity.relationship.RelatedEntityJoinField}='${pkValue}'`
+        });
+    }
+    /**
+     * Get display name for a related record
+     */
+    getRelatedRecordDisplayName(relEntity, record) {
+        const entityInfo = this.metadata.Entities.find(e => e.Name === relEntity.relatedEntityName);
+        if (entityInfo?.NameField) {
+            const name = record.Get(entityInfo.NameField.Name);
+            if (name)
+                return String(name);
+        }
+        return record.PrimaryKey.ToString();
+    }
+    /**
+     * Get subtitle/secondary info for a related record
+     */
+    getRelatedRecordSubtitle(relEntity, record) {
+        const entityInfo = this.metadata.Entities.find(e => e.Name === relEntity.relatedEntityName);
+        if (!entityInfo)
+            return '';
+        // Look for common subtitle fields
+        const subtitleFieldNames = ['Description', 'Status', 'Type', 'Email', 'Date', 'Amount', 'Total'];
+        for (const fieldName of subtitleFieldNames) {
+            const field = entityInfo.Fields.find(f => f.Name.includes(fieldName) && f.Name !== entityInfo.NameField?.Name);
+            if (field) {
+                const value = record.Get(field.Name);
+                if (value !== null && value !== undefined) {
+                    return this.formatFieldValue(value, field.Name);
+                }
+            }
+        }
+        return '';
+    }
+    /**
+     * Toggle section expansion
+     */
+    toggleSection(section) {
+        if (section === 'details') {
+            this.detailsSectionExpanded = !this.detailsSectionExpanded;
+        }
+        else {
+            this.relationshipsSectionExpanded = !this.relationshipsSectionExpanded;
+        }
+    }
+    /**
+     * Get only related entities that have records (count > 0)
+     */
+    get relatedEntitiesWithRecords() {
+        return this.relatedEntities.filter(r => r.count > 0);
+    }
+    /**
+     * Get icon for related entity by looking up EntityInfo from Metadata
+     */
+    getRelatedEntityIcon(relEntity) {
+        const entityInfo = this.metadata.Entities.find(e => e.Name === relEntity.relatedEntityName);
+        if (entityInfo?.Icon) {
+            return this.formatEntityIcon(entityInfo.Icon);
+        }
+        return 'fa-solid fa-table';
+    }
+    /**
+     * Get the icon class for the current entity
+     */
+    getEntityIconClass() {
+        if (!this.entity?.Icon) {
+            return 'fa-solid fa-table';
+        }
+        return this.formatEntityIcon(this.entity.Icon);
+    }
+    /**
+     * Format entity icon to ensure proper Font Awesome class format
+     */
+    formatEntityIcon(icon) {
+        if (!icon) {
+            return 'fa-solid fa-table';
+        }
+        // If icon already has fa- prefix, use it as-is
+        if (icon.startsWith('fa-') || icon.startsWith('fa ')) {
+            // Ensure it has a style prefix (fa-solid, fa-regular, etc.)
+            if (icon.startsWith('fa-solid') || icon.startsWith('fa-regular') ||
+                icon.startsWith('fa-light') || icon.startsWith('fa-brands') ||
+                icon.startsWith('fa ')) {
+                return icon;
+            }
+            // It's just "fa-something", add fa-solid prefix
+            return `fa-solid ${icon}`;
+        }
+        // Check if it's just an icon name like "table" or "users"
+        return `fa-solid fa-${icon}`;
+    }
+    static ɵfac = function EntityRecordDetailPanelComponent_Factory(t) { return new (t || EntityRecordDetailPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityRecordDetailPanelComponent, selectors: [["mj-entity-record-detail-panel"]], inputs: { entity: "entity", record: "record" }, outputs: { close: "close", openRecord: "openRecord", navigateToRelated: "navigateToRelated", openRelatedRecord: "openRelatedRecord", openForeignKeyRecord: "openForeignKeyRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 12, consts: [[1, "entity-record-card-container"], [1, "panel-header"], [1, "panel-title-row"], [1, "entity-icon", 3, "class"], [1, "panel-title"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "section"], [1, "section-header", 3, "click"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "section-title"], [1, "fa-solid", "expand-icon"], [1, "section-content"], [1, "fa-solid", "fa-project-diagram", "section-icon"], [1, "panel-footer"], [1, "open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "entity-icon"], [1, "empty-section"], [1, "field-row", "field-row-pk"], [1, "field-row", "field-row-fk"], [1, "field-row"], [1, "pk-row"], [1, "fa-solid", "fa-key", "pk-icon"], [1, "field-label"], ["title", "Copy ID", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "fk-value-row"], [1, "field-value", "fk-display-value"], [1, "field-value", "fk-id-value"], [1, "fk-link-btn", 3, "title"], [1, "fk-link-btn", 3, "click", "title"], [3, "value"], [1, "field-value"], [1, "relationships-loading"], ["text", "Loading related records...", "size", "small"], [1, "related-entity-group", 3, "expanded"], [1, "related-entity-group"], [1, "related-entity-header", 3, "click"], [1, "fa-solid", "expand-chevron"], [1, "related-entity-name"], [1, "related-entity-count"], [1, "related-records-list"], [1, "records-loading"], ["text", "Loading...", "size", "small"], [1, "related-record-item"], [1, "view-all-link"], [1, "related-record-item", 3, "click"], [1, "record-info"], [1, "record-name"], [1, "record-subtitle"], [1, "fa-solid", "fa-external-link-alt", "record-open-icon"], [1, "view-all-link", 3, "click"], [1, "fa-solid", "fa-arrow-right"]], template: function EntityRecordDetailPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
+            i0.ɵɵtemplate(3, EntityRecordDetailPanelComponent_Conditional_3_Template, 1, 2, "i", 3);
+            i0.ɵɵelementStart(4, "h3", 4);
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_button_click_6_listener() { return ctx.onClose(); });
+            i0.ɵɵelement(7, "i", 6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 7)(9, "div", 8)(10, "div", 9);
+            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_div_click_10_listener() { return ctx.toggleSection("details"); });
+            i0.ɵɵelement(11, "i", 10);
+            i0.ɵɵelementStart(12, "span", 11);
+            i0.ɵɵtext(13, "Details");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(14, "i", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(15, EntityRecordDetailPanelComponent_Conditional_15_Template, 4, 1, "div", 13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "div", 8)(17, "div", 9);
+            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_div_click_17_listener() { return ctx.toggleSection("relationships"); });
+            i0.ɵɵelement(18, "i", 14);
+            i0.ɵɵelementStart(19, "span", 11);
+            i0.ɵɵtext(20, "Related Records");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(21, "i", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(22, EntityRecordDetailPanelComponent_Conditional_22_Template, 4, 1, "div", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(23, "div", 15)(24, "button", 16);
+            i0.ɵɵlistener("click", function EntityRecordDetailPanelComponent_Template_button_click_24_listener() { return ctx.onOpenRecord(); });
+            i0.ɵɵelement(25, "i", 17);
+            i0.ɵɵtext(26, " Open Full Record ");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional((ctx.entity == null ? null : ctx.entity.Icon) ? 3 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.recordTitle);
+            i0.ɵɵadvance(9);
+            i0.ɵɵclassProp("fa-chevron-down", ctx.detailsSectionExpanded)("fa-chevron-right", !ctx.detailsSectionExpanded);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.detailsSectionExpanded ? 15 : -1);
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("fa-chevron-down", ctx.relationshipsSectionExpanded)("fa-chevron-right", !ctx.relationshipsSectionExpanded);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 22 : -1);
+        } }, dependencies: [i1.LoadingComponent, i2.PillComponent], styles: [".entity-record-card-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\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 #e0e0e0;\n  flex-shrink: 0;\n}\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #757575;\n  flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #424242;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  font-size: 14px;\n  color: #757575;\n  margin-right: 10px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n\n.loading-icon[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section[_ngcontent-%COMP%] {\n  padding: 12px 0;\n  text-align: center;\n  color: #9e9e9e;\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading[_ngcontent-%COMP%] {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid #f5f5f5;\n}\n.field-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #424242;\n  word-break: break-word;\n}\n\n\n\n.field-row-pk[_ngcontent-%COMP%] {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.pk-row[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.field-row-fk[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.fk-value-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #333;\n  font-weight: 500;\n}\n\n.fk-link-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n.fk-link-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.fk-id-only[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: #757575;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.related-entity-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  margin-bottom: 8px;\n}\n\n\n\n.related-entity-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n}\n.related-entity-header.loading[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.expand-chevron[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: #757575;\n}\n\n.related-entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #424242;\n}\n\n.related-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #757575;\n  min-width: 24px;\n  text-align: right;\n}\n\n\n\n.related-records-list[_ngcontent-%COMP%] {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: #9e9e9e;\n  font-size: 12px;\n}\n\n.related-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: white;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid #e8e8e8;\n}\n.related-record-item[_ngcontent-%COMP%]:hover {\n  border-color: #1976d2;\n  box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);\n}\n.related-record-item[_ngcontent-%COMP%]:hover   .record-open-icon[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.record-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #bdbdbd;\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1976d2;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: #1976d2;\n  color: white;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn[_ngcontent-%COMP%]:hover {\n  background: #1565c0;\n}\n.open-record-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityRecordDetailPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-record-detail-panel', template: "<div class=\"entity-record-card-container\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-title-row\">\n      @if (entity?.Icon) {\n        <i [class]=\"getEntityIconClass()\" class=\"entity-icon\"></i>\n      }\n      <h3 class=\"panel-title\">{{ recordTitle }}</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Details Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('details')\">\n        <i class=\"fa-solid fa-info-circle section-icon\"></i>\n        <span class=\"section-title\">Details</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"detailsSectionExpanded\" [class.fa-chevron-right]=\"!detailsSectionExpanded\"></i>\n      </div>\n\n      @if (detailsSectionExpanded) {\n        <div class=\"section-content\">\n          @for (field of displayFields; track field.name) {\n            <!-- Primary Key Field - Compact with copy button -->\n            @if (field.type === 'primary-key') {\n              <div class=\"field-row field-row-pk\">\n                <div class=\"pk-row\">\n                  <i class=\"fa-solid fa-key pk-icon\"></i>\n                  <span class=\"field-label\">{{ field.label }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyToClipboard(field.value, $event)\" title=\"Copy ID\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Foreign Key Field - Show friendly name with open button -->\n            @else if (field.type === 'foreign-key') {\n              <div class=\"field-row field-row-fk\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <div class=\"fk-value-row\" [class.fk-id-only]=\"!hasFriendlyName(field)\">\n                  @if (hasFriendlyName(field)) {\n                    <span class=\"field-value fk-display-value\">{{ field.displayValue }}</span>\n                  } @else {\n                    <!-- No friendly name available, show ID in muted style -->\n                    <span class=\"field-value fk-id-value\">{{ field.value }}</span>\n                  }\n                  <!-- Always show open button for FK fields that have a related entity -->\n                  @if (field.relatedEntityName) {\n                    <button class=\"fk-link-btn\" (click)=\"onForeignKeyClick(field, $event)\" title=\"Open {{ field.relatedEntityName }} record\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Enum Field - Show as pill -->\n            @else if (field.type === 'enum') {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <mj-pill [value]=\"field.value\"></mj-pill>\n              </div>\n            }\n            <!-- Regular Field -->\n            @else {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <span class=\"field-value\">{{ field.value }}</span>\n              </div>\n            }\n          }\n\n          @if (displayFields.length === 0) {\n            <div class=\"empty-section\">No details available</div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Relationships Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('relationships')\">\n        <i class=\"fa-solid fa-project-diagram section-icon\"></i>\n        <span class=\"section-title\">Related Records</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"relationshipsSectionExpanded\" [class.fa-chevron-right]=\"!relationshipsSectionExpanded\"></i>\n      </div>\n\n      @if (relationshipsSectionExpanded) {\n        <div class=\"section-content\">\n          @if (isLoadingRelationships) {\n            <div class=\"relationships-loading\">\n              <mj-loading text=\"Loading related records...\" size=\"small\"></mj-loading>\n            </div>\n          } @else if (relatedEntitiesWithRecords.length === 0) {\n            <div class=\"empty-section\">No related records</div>\n          } @else {\n            @for (relEntity of relatedEntitiesWithRecords; track relEntity.relatedEntityName) {\n              <div class=\"related-entity-group\" [class.expanded]=\"relEntity.isExpanded\">\n                <!-- Header row - click to expand -->\n                <div\n                  class=\"related-entity-header\"\n                  [class.clickable]=\"relEntity.count > 0\"\n                  (click)=\"toggleRelatedEntityExpansion(relEntity, $event)\">\n                  <i class=\"fa-solid expand-chevron\"\n                     [class.fa-chevron-down]=\"relEntity.isExpanded\"\n                     [class.fa-chevron-right]=\"!relEntity.isExpanded\"></i>\n                  <i [class]=\"getRelatedEntityIcon(relEntity)\"></i>\n                  <span class=\"related-entity-name\">{{ relEntity.relatedEntityName }}</span>\n                  <span class=\"related-entity-count\">{{ relEntity.count }}</span>\n                </div>\n\n                <!-- Expanded records list -->\n                @if (relEntity.isExpanded) {\n                  <div class=\"related-records-list\">\n                    @if (relEntity.isLoadingRecords) {\n                      <div class=\"records-loading\">\n                        <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                      </div>\n                    } @else {\n                      @for (rec of relEntity.records; track rec.PrimaryKey.ToString()) {\n                        <div class=\"related-record-item\" (click)=\"onRelatedRecordClick(relEntity, rec, $event)\">\n                          <div class=\"record-info\">\n                            <span class=\"record-name\">{{ getRelatedRecordDisplayName(relEntity, rec) }}</span>\n                            @if (getRelatedRecordSubtitle(relEntity, rec); as subtitle) {\n                              <span class=\"record-subtitle\">{{ subtitle }}</span>\n                            }\n                          </div>\n                          <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                        </div>\n                      }\n\n                      <!-- View All link if there are more records -->\n                      @if (relEntity.count > 10) {\n                        <div class=\"view-all-link\" (click)=\"onViewAllRelated(relEntity, $event)\">\n                          <span>View all {{ relEntity.count }} records</span>\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"panel-footer\">\n    <button class=\"open-record-btn\" (click)=\"onOpenRecord()\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n      Open Full Record\n    </button>\n  </div>\n</div>\n", styles: [".entity-record-card-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\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 #e0e0e0;\n  flex-shrink: 0;\n}\n\n.panel-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon {\n  font-size: 18px;\n  color: #757575;\n  flex-shrink: 0;\n}\n\n.panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn:hover {\n  background: #f5f5f5;\n  color: #424242;\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section {\n  margin-bottom: 8px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header:hover {\n  background: #f8f9fa;\n}\n\n.section-icon {\n  width: 20px;\n  font-size: 14px;\n  color: #757575;\n  margin-right: 10px;\n}\n\n.section-title {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n\n.loading-icon {\n  margin-right: 8px;\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.expand-icon {\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.section-content {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section {\n  padding: 12px 0;\n  text-align: center;\n  color: #9e9e9e;\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid #f5f5f5;\n}\n.field-row:last-child {\n  border-bottom: none;\n}\n\n.field-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value {\n  font-size: 14px;\n  color: #424242;\n  word-break: break-word;\n}\n\n/* Primary Key Field - Compact row with key icon and copy button */\n.field-row-pk {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon {\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.pk-row .field-label {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n.copy-btn i {\n  font-size: 12px;\n}\n\n/* Foreign Key Field - Display name with link button */\n.field-row-fk {\n  padding: 8px 0;\n}\n\n.fk-value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value {\n  flex: 1;\n  color: #333;\n  font-weight: 500;\n}\n\n.fk-link-btn {\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n.fk-link-btn i {\n  font-size: 11px;\n}\n\n/* FK without friendly name - show ID in muted style */\n.fk-id-only {\n  background: #f8f9fa;\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value {\n  font-size: 12px;\n  font-family: monospace;\n  color: #757575;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related Entity Group - expandable container */\n.related-entity-group {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded {\n  background: #f8f9fa;\n  margin-bottom: 8px;\n}\n\n/* Header row */\n.related-entity-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable {\n  cursor: pointer;\n}\n.related-entity-header.clickable:hover {\n  background: #f0f0f0;\n}\n.related-entity-header.loading {\n  opacity: 0.7;\n}\n\n.expand-chevron {\n  width: 12px;\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header i:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: #757575;\n}\n\n.related-entity-name {\n  flex: 1;\n  font-size: 13px;\n  color: #424242;\n}\n\n.related-entity-count {\n  font-size: 13px;\n  font-weight: 500;\n  color: #757575;\n  min-width: 24px;\n  text-align: right;\n}\n\n/* Expanded records list */\n.related-records-list {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: #9e9e9e;\n  font-size: 12px;\n}\n\n.related-record-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: white;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid #e8e8e8;\n}\n.related-record-item:hover {\n  border-color: #1976d2;\n  box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);\n}\n.related-record-item:hover .record-open-icon {\n  color: #1976d2;\n}\n\n.record-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle {\n  font-size: 11px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon {\n  font-size: 11px;\n  color: #bdbdbd;\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1976d2;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link:hover {\n  background: #e3f2fd;\n}\n\n.panel-footer {\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.open-record-btn {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: #1976d2;\n  color: white;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn:hover {\n  background: #1565c0;\n}\n.open-record-btn:active {\n  transform: scale(0.98);\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
+            type: Input
+        }], record: [{
+            type: Input
+        }], close: [{
+            type: Output
+        }], openRecord: [{
+            type: Output
+        }], navigateToRelated: [{
+            type: Output
+        }], openRelatedRecord: [{
+            type: Output
+        }], openForeignKeyRecord: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityRecordDetailPanelComponent, { className: "EntityRecordDetailPanelComponent" }); })();
+//# sourceMappingURL=entity-record-detail-panel.component.js.map