npm - @memberjunction/ng-entity-viewer - Versions diffs - 5.40.2 → 5.41.0 - Mend

@memberjunction/ng-entity-viewer 5.40.2 → 5.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/lib/entity-cards/entity-cards.component.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { HighlightUtil } from '../utils/highlight.util';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
 import * as i2 from "../pill/pill.component";
-function _forTrack0($index, $item) { return this.getRecordTrackId($item, $index); }
-const _forTrack1 = ($index, $item) => $item.name;
+const _forTrack0 = ($index, $item) => $item.trackId;
+const _forTrack1 = ($index, $item) => $item.field.name;
 function EntityCardsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "mj-loading", 3);
@@ -19,48 +19,41 @@ function EntityCardsComponent_Conditional_2_For_2_Case_2_Template(rf, ctx) { if
     i0.ɵɵelement(1, "img", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("src", ctx_r2.getThumbnailUrl(record_r2), i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", vm_r2.thumbnailUrl, i0.ɵɵsanitizeUrl);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getRecordColor(record_r2));
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("background-color", vm_r2.color);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getThumbnailUrl(record_r2));
+    i0.ɵɵclassMap(vm_r2.thumbnailUrl);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getRecordColor(record_r2));
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵstyleProp("background-color", vm_r2.color);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getInitials(record_r2), " ");
+    i0.ɵɵtextInterpolate1(" ", vm_r2.initials, " ");
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-pill", 21);
 } if (rf & 2) {
-    const subField_r4 = i0.ɵɵnextContext();
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.getFieldValue(record_r2, subField_r4));
+    const vm_r2 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", vm_r2.subtitleValue);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
 } if (rf & 2) {
-    const subField_r4 = i0.ɵɵnextContext();
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getFieldValue(record_r2, subField_r4)), i0.ɵɵsanitizeHtml);
+    const vm_r2 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("innerHTML", vm_r2.highlightedSubtitle, i0.ɵɵsanitizeHtml);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, EntityCardsComponent_Conditional_2_For_2_Conditional_7_Conditional_0_Template, 1, 1, "mj-pill", 21)(1, EntityCardsComponent_Conditional_2_For_2_Conditional_7_Conditional_1_Template, 1, 1, "span", 22);
@@ -71,9 +64,8 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_7_Template(rf, ctx
 function EntityCardsComponent_Conditional_2_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "p", 15);
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getTextValue(record_r2, ctx, 100)), i0.ɵɵsanitizeHtml);
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("innerHTML", vm_r2.highlightedDescription, i0.ɵɵsanitizeHtml);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 25);
@@ -81,12 +73,10 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_1_Te
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r5 = i0.ɵɵnextContext().$implicit;
-    const record_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("fa-solid", true)("fa-check", ctx_r2.getBooleanValue(record_r2, field_r5.name))("fa-minus", !ctx_r2.getBooleanValue(record_r2, field_r5.name))("bool-true", ctx_r2.getBooleanValue(record_r2, field_r5.name))("bool-false", !ctx_r2.getBooleanValue(record_r2, field_r5.name));
+    const df_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("fa-solid", true)("fa-check", df_r4.booleanValue)("fa-minus", !df_r4.booleanValue)("bool-true", df_r4.booleanValue)("bool-false", !df_r4.booleanValue);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r5.label);
+    i0.ɵɵtextInterpolate(df_r4.field.label);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 27);
@@ -96,13 +86,11 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_2_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r5 = i0.ɵɵnextContext().$implicit;
-    const record_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const df_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getNumericValue(record_r2, field_r5.name));
+    i0.ɵɵtextInterpolate(df_r4.numericValue);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r5.label);
+    i0.ɵɵtextInterpolate(df_r4.field.label);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 28);
@@ -112,13 +100,11 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_3_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const field_r5 = i0.ɵɵnextContext().$implicit;
-    const record_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const df_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.getDateValue(record_r2, field_r5.name));
+    i0.ɵɵtextInterpolate(df_r4.dateValue);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(field_r5.label);
+    i0.ɵɵtextInterpolate(df_r4.field.label);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 26);
@@ -126,13 +112,11 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_4_Te
     i0.ɵɵelementEnd();
     i0.ɵɵelement(2, "span", 29);
 } if (rf & 2) {
-    const field_r5 = i0.ɵɵnextContext().$implicit;
-    const record_r2 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const df_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(field_r5.label);
+    i0.ɵɵtextInterpolate(df_r4.field.label);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getTextValue(record_r2, field_r5.name, 40)), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", df_r4.highlightedText, i0.ɵɵsanitizeHtml);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24);
@@ -140,29 +124,28 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Template(
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_24_0;
-    const field_r5 = ctx.$implicit;
-    i0.ɵɵclassProp("field-boolean", field_r5.type === "boolean")("field-text", field_r5.type === "text");
+    const df_r4 = ctx.$implicit;
+    i0.ɵɵclassProp("field-boolean", df_r4.field.type === "boolean")("field-text", df_r4.field.type === "text");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_24_0 = field_r5.type) === "boolean" ? 1 : tmp_24_0 === "number" ? 2 : tmp_24_0 === "date" ? 3 : 4);
+    i0.ɵɵconditional((tmp_24_0 = df_r4.field.type) === "boolean" ? 1 : tmp_24_0 === "number" ? 2 : tmp_24_0 === "date" ? 3 : 4);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵrepeaterCreate(1, EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Template, 5, 5, "div", 23, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.effectiveTemplate.displayFields);
+    i0.ɵɵrepeater(vm_r2.displayFields);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
     i0.ɵɵelement(1, "mj-pill", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r2.getFieldValue(record_r2, ctx));
+    i0.ɵɵproperty("value", vm_r2.badgeValue);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18);
@@ -171,16 +154,15 @@ function EntityCardsComponent_Conditional_2_For_2_Conditional_14_Template(rf, ct
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const record_r2 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", "Matched in: " + ctx_r2.getHiddenMatchFieldName(record_r2));
+    const vm_r2 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", "Matched in: " + vm_r2.hiddenMatchFieldName);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r2.getHiddenMatchFieldName(record_r2));
+    i0.ɵɵtextInterpolate(vm_r2.hiddenMatchFieldName);
 } }
 function EntityCardsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵlistener("click", function EntityCardsComponent_Conditional_2_For_2_Template_div_click_0_listener() { const record_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCardClick(record_r2)); });
+    i0.ɵɵlistener("click", function EntityCardsComponent_Conditional_2_For_2_Template_div_click_0_listener() { const vm_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCardClick(vm_r2.record)); });
     i0.ɵɵelementStart(1, "div", 7);
     i0.ɵɵconditionalCreate(2, EntityCardsComponent_Conditional_2_For_2_Case_2_Template, 2, 1, "div", 8)(3, EntityCardsComponent_Conditional_2_For_2_Case_3_Template, 2, 4, "div", 9)(4, EntityCardsComponent_Conditional_2_For_2_Case_4_Template, 2, 3, "div", 9);
     i0.ɵɵelementStart(5, "div", 10);
@@ -188,7 +170,7 @@ function EntityCardsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵconditionalCreate(7, EntityCardsComponent_Conditional_2_For_2_Conditional_7_Template, 2, 1);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "button", 12);
-    i0.ɵɵlistener("click", function EntityCardsComponent_Conditional_2_For_2_Template_button_click_8_listener($event) { const record_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOpenClick($event, record_r2)); });
+    i0.ɵɵlistener("click", function EntityCardsComponent_Conditional_2_For_2_Template_button_click_8_listener($event) { const vm_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOpenClick($event, vm_r2.record)); });
     i0.ɵɵelement(9, "i", 13);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "div", 14);
@@ -200,26 +182,23 @@ function EntityCardsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    let tmp_14_0;
-    let tmp_15_0;
-    let tmp_17_0;
-    const record_r2 = ctx.$implicit;
+    const vm_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r2.isSelected(record_r2));
+    i0.ɵɵclassProp("selected", vm_r2.isSelected);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_12_0 = ctx_r2.getThumbnailType(record_r2)) === "image" ? 2 : tmp_12_0 === "icon" ? 3 : 4);
+    i0.ɵɵconditional((tmp_12_0 = vm_r2.thumbnailType) === "image" ? 2 : tmp_12_0 === "icon" ? 3 : 4);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getCombinedTitle(record_r2)), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", vm_r2.highlightedTitle, i0.ɵɵsanitizeHtml);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_14_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.subtitleField) ? 7 : -1, tmp_14_0);
+    i0.ɵɵconditional((ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.subtitleField) ? 7 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional((tmp_15_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.descriptionField) ? 11 : -1, tmp_15_0);
+    i0.ɵɵconditional((ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.descriptionField) ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.effectiveTemplate && ctx_r2.effectiveTemplate.displayFields.length > 0 ? 12 : -1);
+    i0.ɵɵconditional(vm_r2.displayFields.length > 0 ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_17_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.badgeField) ? 13 : -1, tmp_17_0);
+    i0.ɵɵconditional((ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.badgeField) ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.hasHiddenFieldMatch(record_r2) ? 14 : -1);
+    i0.ɵɵconditional(vm_r2.hasHiddenFieldMatch ? 14 : -1);
 } }
 function EntityCardsComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -230,13 +209,13 @@ function EntityCardsComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if
 } }
 function EntityCardsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, EntityCardsComponent_Conditional_2_For_2_Template, 15, 9, "div", 4, _forTrack0, true);
+    i0.ɵɵrepeaterCreate(1, EntityCardsComponent_Conditional_2_For_2_Template, 15, 9, "div", 4, _forTrack0);
     i0.ɵɵconditionalCreate(3, EntityCardsComponent_Conditional_2_Conditional_3_Template, 4, 0, "div", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.effectiveRecords);
+    i0.ɵɵrepeater(ctx_r2.cardViewModels);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.effectiveRecords.length === 0 ? 3 : -1);
 } }
@@ -318,6 +297,14 @@ export class EntityCardsComponent extends BaseAngularComponent {
     isLoading = false;
     /** Flag to trigger scroll to selected card after view renders */
     pendingScrollToSelected = false;
+    /**
+     * Precomputed per-record view-models bound by the template's @for. Rebuilt
+     * only when the source records, filter, selection, hidden matches, or template
+     * change — never per change-detection cycle. This eliminates the 4-5
+     * buildPkString() allocations + 4 RegExp-building highlight calls that the
+     * previous per-card-per-CD method bindings incurred.
+     */
+    cardViewModels = [];
     ngOnInit() {
         this.standaloneMode = this.records === null;
         if (this.entity?.Fields && !this.effectiveTemplate) {
@@ -326,6 +313,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
         if (this.standaloneMode && this.entity) {
             this.loadData();
         }
+        this.buildCardViewModels();
     }
     ngOnChanges(changes) {
         if (changes['entity'] && this.entity?.Fields) {
@@ -348,6 +336,23 @@ export class EntityCardsComponent extends BaseAngularComponent {
         if (changes['selectedRecordId'] && this.selectedRecordId) {
             this.pendingScrollToSelected = true;
         }
+        // Rebuild the precomputed VMs whenever any input that affects card *content*
+        // changes. cardTemplate is included because effectiveTemplate derives from it.
+        // A selection-only change must NOT trigger a full rebuild — that would re-run
+        // the expensive per-card buildPkString()/CompositeKey allocations and the 4
+        // RegExp-building highlightMatch() calls for every card on every selection
+        // click (O(n) heavy work). Instead we only flip the cheap isSelected flags.
+        const contentChanged = !!(changes['records'] || changes['filterText'] ||
+            changes['hiddenFieldMatches'] || changes['entity'] || changes['cardTemplate']);
+        if (contentChanged) {
+            // Full rebuild also recomputes isSelected correctly (buildCardViewModel does).
+            this.buildCardViewModels();
+        }
+        else if (changes['selectedRecordId']) {
+            // Selection-only change: just update the isSelected flags on the existing
+            // VMs (string compare per card — no rebuild, no regex, no allocation).
+            this.updateSelectionFlags();
+        }
     }
     ngAfterViewChecked() {
         if (this.pendingScrollToSelected && this.selectedRecordId) {
@@ -392,6 +397,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
             });
             if (result.Success) {
                 this.internalRecords = result.Results;
+                this.buildCardViewModels();
             }
         }
         catch (error) {
@@ -652,6 +658,125 @@ export class EntityCardsComponent extends BaseAngularComponent {
             compositeKey: buildCompositeKey(record, this.entity)
         });
     }
+    // ========================================
+    // PRECOMPUTED VIEW-MODELS (perf)
+    // ========================================
+    /**
+     * Rebuild the precomputed per-record view-models. Called from ngOnInit,
+     * ngOnChanges (on any render-affecting input), and after standalone loadData.
+     * Doing this work here — once per data/filter/selection change — instead of via
+     * template method bindings avoids re-running it on every Angular CD cycle.
+     */
+    buildCardViewModels() {
+        const records = this.effectiveRecords;
+        this.cardViewModels = records.map((record, index) => this.buildCardViewModel(record, index));
+    }
+    /**
+     * Cheaply update the isSelected flag on the EXISTING card view-models in place,
+     * preserving the array and every VM object reference. Called when ONLY
+     * selectedRecordId changes — avoids a full buildCardViewModels() rebuild (which
+     * re-runs buildPkString() allocations + RegExp-building highlightMatch() calls
+     * per card). Uses the already-computed vm.pkString, so this is a plain string
+     * compare per card with zero allocation or regex work.
+     */
+    updateSelectionFlags() {
+        for (const vm of this.cardViewModels) {
+            vm.isSelected = vm.pkString.length > 0 && vm.pkString === this.selectedRecordId;
+        }
+    }
+    /**
+     * Build a single card view-model, computing the PK string exactly once and
+     * reusing it for selection, color, hidden-match, and track-id derivation.
+     */
+    buildCardViewModel(record, index) {
+        const pkString = this.computePkString(record);
+        const trackId = pkString && pkString.trim().length > 0 ? pkString : `record_${index}`;
+        const template = this.effectiveTemplate;
+        const subtitleField = template?.subtitleField ?? null;
+        const subtitleValue = subtitleField ? this.getFieldValue(record, subtitleField) : '';
+        const descriptionField = template?.descriptionField ?? null;
+        return {
+            record,
+            pkString,
+            trackId,
+            isSelected: pkString.length > 0 && pkString === this.selectedRecordId,
+            color: this.computeRecordColor(pkString),
+            thumbnailType: this.getThumbnailType(record),
+            thumbnailUrl: this.getThumbnailUrl(record),
+            initials: this.getInitials(record),
+            highlightedTitle: this.highlightMatch(this.getCombinedTitle(record)),
+            subtitleValue,
+            highlightedSubtitle: this.highlightMatch(subtitleValue),
+            highlightedDescription: descriptionField
+                ? this.highlightMatch(this.getTextValue(record, descriptionField, 100))
+                : '',
+            displayFields: this.buildDisplayFieldVMs(record, template),
+            badgeValue: template?.badgeField ? this.getFieldValue(record, template.badgeField) : '',
+            hasHiddenFieldMatch: this.computeHasHiddenFieldMatch(pkString),
+            hiddenMatchFieldName: this.computeHiddenMatchFieldName(pkString)
+        };
+    }
+    /**
+     * Precompute the display-field VMs for a record, in template order.
+     */
+    buildDisplayFieldVMs(record, template) {
+        if (!template || template.displayFields.length === 0)
+            return [];
+        return template.displayFields.map(field => ({
+            field,
+            booleanValue: this.getBooleanValue(record, field.name),
+            numericValue: this.getNumericValue(record, field.name),
+            dateValue: this.getDateValue(record, field.name),
+            highlightedText: this.highlightMatch(this.getTextValue(record, field.name, 40))
+        }));
+    }
+    /**
+     * Compute the PK concatenated string for a record. Returns '' when no entity
+     * or on error, so callers can treat it as "no stable key".
+     */
+    computePkString(record) {
+        if (!this.entity)
+            return '';
+        try {
+            return buildPkString(record, this.entity);
+        }
+        catch {
+            return '';
+        }
+    }
+    /**
+     * Derive the avatar/background color from an already-computed PK string.
+     */
+    computeRecordColor(pkString) {
+        if (!this.entity || !pkString)
+            return 'var(--mj-brand-primary)';
+        const colors = ['var(--mj-brand-primary)', 'var(--mj-status-success)', 'var(--mj-status-warning)', 'var(--mj-brand-primary)', 'var(--mj-status-error)', 'var(--mj-brand-primary)', 'var(--mj-text-muted)', 'var(--mj-text-secondary)'];
+        let hash = 0;
+        for (let i = 0; i < pkString.length; i++) {
+            hash = pkString.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }
+    /**
+     * Whether the record (by PK string) matched on a hidden field.
+     */
+    computeHasHiddenFieldMatch(pkString) {
+        if (!this.entity || !pkString)
+            return false;
+        return this.hiddenFieldMatches.has(pkString);
+    }
+    /**
+     * Resolve the display name of the hidden field that matched, from a PK string.
+     */
+    computeHiddenMatchFieldName(pkString) {
+        if (!this.entity || !pkString)
+            return '';
+        const fieldName = this.hiddenFieldMatches.get(pkString);
+        if (!fieldName)
+            return '';
+        const field = this.entity.Fields.find(f => f.Name === fieldName);
+        return field ? field.DisplayNameOrName : fieldName;
+    }
     /**
      * Get the combined title from all title fields for a record.
      * Joins multiple IsNameField values with spaces (e.g., "Elizabeth Rodriguez").
@@ -744,15 +869,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
         return false;
     }
     getRecordColor(record) {
-        if (!this.entity)
-            return 'var(--mj-brand-primary)';
-        const colors = ['var(--mj-brand-primary)', 'var(--mj-status-success)', 'var(--mj-status-warning)', 'var(--mj-brand-primary)', 'var(--mj-status-error)', 'var(--mj-brand-primary)', 'var(--mj-text-muted)', 'var(--mj-text-secondary)'];
-        const pk = buildPkString(record, this.entity);
-        let hash = 0;
-        for (let i = 0; i < pk.length; i++) {
-            hash = pk.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        return colors[Math.abs(hash) % colors.length];
+        return this.computeRecordColor(this.computePkString(record));
     }
     isEnumField(fieldName) {
         if (!this.entity)
@@ -811,7 +928,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityCardsComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-cards', encapsulation: ViewEncapsulation.None, template: "<div class=\"cards-view-wrapper\">\n  @if (isLoading && effectiveRecords.length === 0) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading records...\"></mj-loading>\n    </div>\n  } @else {\n    <div class=\"cards-container\">\n      @for (record of effectiveRecords; track getRecordTrackId(record, $index)) {\n    <div\n      class=\"data-card\"\n      [class.selected]=\"isSelected(record)\"\n      (click)=\"onCardClick(record)\">\n\n      <!-- Card Header with Avatar/Icon -->\n      <div class=\"card-header\">\n        @switch (getThumbnailType(record)) {\n          @case ('image') {\n            <div class=\"card-thumbnail\">\n              <img [src]=\"getThumbnailUrl(record)\" alt=\"\" />\n            </div>\n          }\n          @case ('icon') {\n            <div class=\"card-avatar\" [style.background-color]=\"getRecordColor(record)\">\n              <i [class]=\"getThumbnailUrl(record)\"></i>\n            </div>\n          }\n          @default {\n            <div class=\"card-avatar\" [style.background-color]=\"getRecordColor(record)\">\n              {{ getInitials(record) }}\n            </div>\n          }\n        }\n\n        <div class=\"card-header-content\">\n          <h3 class=\"card-title\" [innerHTML]=\"highlightMatch(getCombinedTitle(record))\"></h3>\n          @if (effectiveTemplate?.subtitleField; as subField) {\n            @if (subtitleIsPill) {\n              <mj-pill [value]=\"getFieldValue(record, subField)\"></mj-pill>\n            } @else {\n              <span class=\"card-subtitle\" [innerHTML]=\"highlightMatch(getFieldValue(record, subField))\"></span>\n            }\n          }\n        </div>\n\n        <button class=\"card-open-btn\" (click)=\"onOpenClick($event, record)\" title=\"Open Record\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n        </button>\n      </div>\n\n      <!-- Card Body -->\n      <div class=\"card-body\">\n        @if (effectiveTemplate?.descriptionField; as descField) {\n          <p class=\"card-description\" [innerHTML]=\"highlightMatch(getTextValue(record, descField, 100))\"></p>\n        }\n\n        <!-- Display Fields -->\n        @if (effectiveTemplate && effectiveTemplate.displayFields.length > 0) {\n          <div class=\"card-fields\">\n            @for (field of effectiveTemplate.displayFields; track field.name) {\n              <div class=\"field-item\" [class.field-boolean]=\"field.type === 'boolean'\" [class.field-text]=\"field.type === 'text'\">\n                @switch (field.type) {\n                  @case ('boolean') {\n                    <i class=\"field-icon\" [class.fa-solid]=\"true\"\n                       [class.fa-check]=\"getBooleanValue(record, field.name)\"\n                       [class.fa-minus]=\"!getBooleanValue(record, field.name)\"\n                       [class.bool-true]=\"getBooleanValue(record, field.name)\"\n                       [class.bool-false]=\"!getBooleanValue(record, field.name)\"></i>\n                    <span class=\"field-label\">{{ field.label }}</span>\n                  }\n                  @case ('number') {\n                    <span class=\"field-value\">{{ getNumericValue(record, field.name) }}</span>\n                    <span class=\"field-label\">{{ field.label }}</span>\n                  }\n                  @case ('date') {\n                    <span class=\"field-value field-date\">{{ getDateValue(record, field.name) }}</span>\n                    <span class=\"field-label\">{{ field.label }}</span>\n                  }\n                  @default {\n                    <span class=\"field-label\">{{ field.label }}</span>\n                    <span class=\"field-text-value\" [innerHTML]=\"highlightMatch(getTextValue(record, field.name, 40))\"></span>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Card Footer with Badge -->\n      @if (effectiveTemplate?.badgeField; as badgeField) {\n        <div class=\"card-footer\">\n          <mj-pill [value]=\"getFieldValue(record, badgeField)\"></mj-pill>\n        </div>\n      }\n\n      <!-- Hidden field match indicator -->\n      @if (hasHiddenFieldMatch(record)) {\n        <div class=\"hidden-match-indicator\" [title]=\"'Matched in: ' + getHiddenMatchFieldName(record)\">\n          <i class=\"fa-solid fa-magnifying-glass\"></i>\n          <span>{{ getHiddenMatchFieldName(record) }}</span>\n        </div>\n      }\n    </div>\n    }\n\n    @if (effectiveRecords.length === 0) {\n      <div class=\"no-results\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>No records to display</p>\n      </div>\n    }\n    </div>\n  }\n</div>\n", styles: ["/* Scoped to mj-entity-cards to prevent style leakage with ViewEncapsulation.None */\nmj-entity-cards .cards-view-wrapper {\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\nmj-entity-cards .cards-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 20px;\n  padding: 4px;\n}\n\nmj-entity-cards .data-card {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n/* Hover state for unselected cards */\nmj-entity-cards .data-card:hover:not(.selected) {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\nmj-entity-cards .data-card:hover .card-open-btn {\n  opacity: 1;\n}\n\n/* Selected state - subtle but clear */\nmj-entity-cards .data-card.selected {\n  border-color: var(--mj-brand-primary);\n}\n\nmj-entity-cards .data-card.selected .card-title {\n  color: var(--mj-brand-primary-hover);\n}\n\n/* Selected + hover state - same as regular hover */\nmj-entity-cards .data-card.selected:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n\nmj-entity-cards .card-header {\n  display: flex;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 12px;\n}\n\nmj-entity-cards .card-thumbnail {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\nmj-entity-cards .card-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\nmj-entity-cards .card-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\nmj-entity-cards .card-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\nmj-entity-cards .card-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\nmj-entity-cards .card-subtitle {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nmj-entity-cards .card-open-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: var(--mj-text-muted);\n  opacity: 0;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\nmj-entity-cards .card-open-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n}\n\nmj-entity-cards .card-body {\n  padding: 0 16px 16px 16px;\n}\n\nmj-entity-cards .card-description {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n/* Card Display Fields */\nmj-entity-cards .card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\nmj-entity-cards .field-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 60px;\n}\n\nmj-entity-cards .field-item .field-value {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\nmj-entity-cards .field-item .field-label {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Boolean fields */\nmj-entity-cards .field-item.field-boolean {\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: auto;\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon {\n  font-size: 14px;\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon.bool-true {\n  color: var(--mj-status-success);\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon.bool-false {\n  color: var(--mj-text-muted);\n}\n\nmj-entity-cards .field-item.field-boolean .field-label {\n  font-size: 12px;\n  text-transform: none;\n  color: var(--mj-text-secondary);\n}\n\n/* Text fields */\nmj-entity-cards .field-item.field-text {\n  flex: 1 1 100%;\n  max-width: 100%;\n}\n\nmj-entity-cards .field-item .field-text-value {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n/* Date fields */\nmj-entity-cards .field-item .field-date {\n  font-size: 13px;\n  font-weight: 500;\n}\n\nmj-entity-cards .card-footer {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Highlight matches - scoped to work with innerHTML */\nmj-entity-cards .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n}\n\n/* Pill spacing when used as subtitle */\nmj-entity-cards .card-header-content mj-pill {\n  display: block;\n  margin-top: 4px;\n}\n\n/* Hidden field match indicator */\nmj-entity-cards .hidden-match-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: var(--mj-status-warning-bg);\n  border-top: 1px solid var(--mj-status-warning-border);\n  font-size: 11px;\n  color: var(--mj-status-warning);\n}\n\nmj-entity-cards .hidden-match-indicator i {\n  font-size: 10px;\n}\n\nmj-entity-cards .hidden-match-indicator span {\n  font-weight: 500;\n}\n\n/* Loading state */\nmj-entity-cards .loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  padding: 40px;\n}\n\n/* No results state */\nmj-entity-cards .no-results {\n  grid-column: 1 / -1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\nmj-entity-cards .no-results i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\nmj-entity-cards .no-results p {\n  margin: 0;\n  font-size: 14px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-cards', encapsulation: ViewEncapsulation.None, template: "<div class=\"cards-view-wrapper\">\n  @if (isLoading && effectiveRecords.length === 0) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading records...\"></mj-loading>\n    </div>\n  } @else {\n    <div class=\"cards-container\">\n      @for (vm of cardViewModels; track vm.trackId) {\n    <div\n      class=\"data-card\"\n      [class.selected]=\"vm.isSelected\"\n      (click)=\"onCardClick(vm.record)\">\n\n      <!-- Card Header with Avatar/Icon -->\n      <div class=\"card-header\">\n        @switch (vm.thumbnailType) {\n          @case ('image') {\n            <div class=\"card-thumbnail\">\n              <img [src]=\"vm.thumbnailUrl\" alt=\"\" />\n            </div>\n          }\n          @case ('icon') {\n            <div class=\"card-avatar\" [style.background-color]=\"vm.color\">\n              <i [class]=\"vm.thumbnailUrl\"></i>\n            </div>\n          }\n          @default {\n            <div class=\"card-avatar\" [style.background-color]=\"vm.color\">\n              {{ vm.initials }}\n            </div>\n          }\n        }\n\n        <div class=\"card-header-content\">\n          <h3 class=\"card-title\" [innerHTML]=\"vm.highlightedTitle\"></h3>\n          @if (effectiveTemplate?.subtitleField) {\n            @if (subtitleIsPill) {\n              <mj-pill [value]=\"vm.subtitleValue\"></mj-pill>\n            } @else {\n              <span class=\"card-subtitle\" [innerHTML]=\"vm.highlightedSubtitle\"></span>\n            }\n          }\n        </div>\n\n        <button class=\"card-open-btn\" (click)=\"onOpenClick($event, vm.record)\" title=\"Open Record\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n        </button>\n      </div>\n\n      <!-- Card Body -->\n      <div class=\"card-body\">\n        @if (effectiveTemplate?.descriptionField) {\n          <p class=\"card-description\" [innerHTML]=\"vm.highlightedDescription\"></p>\n        }\n\n        <!-- Display Fields -->\n        @if (vm.displayFields.length > 0) {\n          <div class=\"card-fields\">\n            @for (df of vm.displayFields; track df.field.name) {\n              <div class=\"field-item\" [class.field-boolean]=\"df.field.type === 'boolean'\" [class.field-text]=\"df.field.type === 'text'\">\n                @switch (df.field.type) {\n                  @case ('boolean') {\n                    <i class=\"field-icon\" [class.fa-solid]=\"true\"\n                       [class.fa-check]=\"df.booleanValue\"\n                       [class.fa-minus]=\"!df.booleanValue\"\n                       [class.bool-true]=\"df.booleanValue\"\n                       [class.bool-false]=\"!df.booleanValue\"></i>\n                    <span class=\"field-label\">{{ df.field.label }}</span>\n                  }\n                  @case ('number') {\n                    <span class=\"field-value\">{{ df.numericValue }}</span>\n                    <span class=\"field-label\">{{ df.field.label }}</span>\n                  }\n                  @case ('date') {\n                    <span class=\"field-value field-date\">{{ df.dateValue }}</span>\n                    <span class=\"field-label\">{{ df.field.label }}</span>\n                  }\n                  @default {\n                    <span class=\"field-label\">{{ df.field.label }}</span>\n                    <span class=\"field-text-value\" [innerHTML]=\"df.highlightedText\"></span>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Card Footer with Badge -->\n      @if (effectiveTemplate?.badgeField) {\n        <div class=\"card-footer\">\n          <mj-pill [value]=\"vm.badgeValue\"></mj-pill>\n        </div>\n      }\n\n      <!-- Hidden field match indicator -->\n      @if (vm.hasHiddenFieldMatch) {\n        <div class=\"hidden-match-indicator\" [title]=\"'Matched in: ' + vm.hiddenMatchFieldName\">\n          <i class=\"fa-solid fa-magnifying-glass\"></i>\n          <span>{{ vm.hiddenMatchFieldName }}</span>\n        </div>\n      }\n    </div>\n    }\n\n    @if (effectiveRecords.length === 0) {\n      <div class=\"no-results\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>No records to display</p>\n      </div>\n    }\n    </div>\n  }\n</div>\n", styles: ["/* Scoped to mj-entity-cards to prevent style leakage with ViewEncapsulation.None */\nmj-entity-cards .cards-view-wrapper {\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\nmj-entity-cards .cards-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 20px;\n  padding: 4px;\n}\n\nmj-entity-cards .data-card {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n/* Hover state for unselected cards */\nmj-entity-cards .data-card:hover:not(.selected) {\n  border-color: var(--mj-border-strong);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\nmj-entity-cards .data-card:hover .card-open-btn {\n  opacity: 1;\n}\n\n/* Selected state - subtle but clear */\nmj-entity-cards .data-card.selected {\n  border-color: var(--mj-brand-primary);\n}\n\nmj-entity-cards .data-card.selected .card-title {\n  color: var(--mj-brand-primary-hover);\n}\n\n/* Selected + hover state - same as regular hover */\nmj-entity-cards .data-card.selected:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n\nmj-entity-cards .card-header {\n  display: flex;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 12px;\n}\n\nmj-entity-cards .card-thumbnail {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\nmj-entity-cards .card-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\nmj-entity-cards .card-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-inverse);\n  flex-shrink: 0;\n}\n\nmj-entity-cards .card-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\nmj-entity-cards .card-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\nmj-entity-cards .card-subtitle {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\nmj-entity-cards .card-open-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: var(--mj-text-muted);\n  opacity: 0;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\nmj-entity-cards .card-open-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n}\n\nmj-entity-cards .card-body {\n  padding: 0 16px 16px 16px;\n}\n\nmj-entity-cards .card-description {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n/* Card Display Fields */\nmj-entity-cards .card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\nmj-entity-cards .field-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 60px;\n}\n\nmj-entity-cards .field-item .field-value {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\nmj-entity-cards .field-item .field-label {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Boolean fields */\nmj-entity-cards .field-item.field-boolean {\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: auto;\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon {\n  font-size: 14px;\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon.bool-true {\n  color: var(--mj-status-success);\n}\n\nmj-entity-cards .field-item.field-boolean .field-icon.bool-false {\n  color: var(--mj-text-muted);\n}\n\nmj-entity-cards .field-item.field-boolean .field-label {\n  font-size: 12px;\n  text-transform: none;\n  color: var(--mj-text-secondary);\n}\n\n/* Text fields */\nmj-entity-cards .field-item.field-text {\n  flex: 1 1 100%;\n  max-width: 100%;\n}\n\nmj-entity-cards .field-item .field-text-value {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n/* Date fields */\nmj-entity-cards .field-item .field-date {\n  font-size: 13px;\n  font-weight: 500;\n}\n\nmj-entity-cards .card-footer {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n/* Highlight matches - scoped to work with innerHTML */\nmj-entity-cards .highlight-match {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  border-radius: 2px;\n}\n\n/* Pill spacing when used as subtitle */\nmj-entity-cards .card-header-content mj-pill {\n  display: block;\n  margin-top: 4px;\n}\n\n/* Hidden field match indicator */\nmj-entity-cards .hidden-match-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: var(--mj-status-warning-bg);\n  border-top: 1px solid var(--mj-status-warning-border);\n  font-size: 11px;\n  color: var(--mj-status-warning);\n}\n\nmj-entity-cards .hidden-match-indicator i {\n  font-size: 10px;\n}\n\nmj-entity-cards .hidden-match-indicator span {\n  font-weight: 500;\n}\n\n/* Loading state */\nmj-entity-cards .loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  padding: 40px;\n}\n\n/* No results state */\nmj-entity-cards .no-results {\n  grid-column: 1 / -1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\nmj-entity-cards .no-results i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\nmj-entity-cards .no-results p {\n  margin: 0;\n  font-size: 14px;\n}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], { entity: [{
             type: Input
         }], records: [{
@@ -831,5 +948,5 @@ export class EntityCardsComponent extends BaseAngularComponent {
         }], recordOpened: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityCardsComponent, { className: "EntityCardsComponent", filePath: "src/lib/entity-cards/entity-cards.component.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityCardsComponent, { className: "EntityCardsComponent", filePath: "src/lib/entity-cards/entity-cards.component.ts", lineNumber: 95 }); })();
 //# sourceMappingURL=entity-cards.component.js.map