@memberjunction/ng-entity-viewer 0.0.1 → 2.121.0

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

@@ -0,0 +1,797 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { EntityFieldValueListType, RunView } from '@memberjunction/core';
+import { PillColorUtil } from '../pill/pill.component';
+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;
+function EntityCardsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 3);
+    i0.ɵɵelementEnd();
+} }
+function EntityCardsComponent_Conditional_2_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "img", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const record_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r2.getThumbnailUrl(record_r2), 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));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getThumbnailUrl(record_r2));
+} }
+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));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getInitials(record_r2), " ");
+} }
+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));
+} }
+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);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(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);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional(ctx_r2.subtitleIsPill ? 0 : 1);
+} }
+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);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+    i0.ɵɵelementStart(1, "span", 26);
+    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));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r5.label);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 26);
+    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);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.getNumericValue(record_r2, field_r5.name));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r5.label);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 28);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 26);
+    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);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.getDateValue(record_r2, field_r5.name));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(field_r5.label);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    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);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r5.label);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getTextValue(record_r2, field_r5.name, 40)), i0.ɵɵsanitizeHtml);
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵtemplate(1, EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_1_Template, 3, 11)(2, EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_2_Template, 4, 2)(3, EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_3_Template, 4, 2)(4, EntityCardsComponent_Conditional_2_For_2_Conditional_12_For_2_Case_4_Template, 3, 2);
+    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");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_24_0 = field_r5.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);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.effectiveTemplate.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);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.getFieldValue(record_r2, ctx));
+} }
+function EntityCardsComponent_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "span");
+    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));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.getHiddenMatchFieldName(record_r2));
+} }
+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.ɵɵelementStart(1, "div", 7);
+    i0.ɵɵtemplate(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);
+    i0.ɵɵelement(6, "h3", 11);
+    i0.ɵɵtemplate(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.ɵɵelement(9, "i", 13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 14);
+    i0.ɵɵtemplate(11, EntityCardsComponent_Conditional_2_For_2_Conditional_11_Template, 1, 1, "p", 15)(12, EntityCardsComponent_Conditional_2_For_2_Conditional_12_Template, 3, 0, "div", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, EntityCardsComponent_Conditional_2_For_2_Conditional_13_Template, 2, 1, "div", 17)(14, EntityCardsComponent_Conditional_2_For_2_Conditional_14_Template, 4, 2, "div", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_12_0;
+    let tmp_13_0;
+    let tmp_14_0;
+    let tmp_15_0;
+    let tmp_17_0;
+    const record_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r2.isSelected(record_r2));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r2.getThumbnailType(record_r2)) === "image" ? 2 : tmp_12_0 === "icon" ? 3 : 4);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("innerHTML", ctx_r2.highlightMatch(ctx_r2.getFieldValue(record_r2, (tmp_13_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.titleField) !== null && tmp_13_0 !== undefined ? tmp_13_0 : null)), i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_14_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.subtitleField) ? 7 : -1, tmp_14_0);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((tmp_15_0 = ctx_r2.effectiveTemplate == null ? null : ctx_r2.effectiveTemplate.descriptionField) ? 11 : -1, tmp_15_0);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.effectiveTemplate && ctx_r2.effectiveTemplate.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.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.hasHiddenFieldMatch(record_r2) ? 14 : -1);
+} }
+function EntityCardsComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No records to display");
+    i0.ɵɵelementEnd()();
+} }
+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.ɵɵtemplate(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.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.effectiveRecords.length === 0 ? 3 : -1);
+} }
+/**
+ * EntityCardsComponent - Card-based view for entity records
+ *
+ * This component provides an auto-generated card layout for displaying
+ * entity records. Cards are automatically structured based on entity metadata.
+ *
+ * Supports two modes:
+ * 1. Parent-managed data: Records are passed in via [records] input
+ * 2. Standalone: Component loads its own data with pagination
+ *
+ * @example
+ * ```html
+ * <mj-entity-cards
+ *   [entity]="selectedEntity"
+ *   [records]="filteredRecords"
+ *   [selectedRecordId]="selectedId"
+ *   (recordSelected)="onRecordSelected($event)"
+ *   (recordOpened)="onRecordOpened($event)">
+ * </mj-entity-cards>
+ * ```
+ */
+export class EntityCardsComponent {
+    elementRef;
+    cdr;
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+    }
+    /**
+     * The entity metadata for the records being displayed
+     */
+    entity = null;
+    /**
+     * The records to display as cards (optional - component can load its own)
+     */
+    records = null;
+    /**
+     * The currently selected record's primary key string
+     */
+    selectedRecordId = null;
+    /**
+     * Custom card template (optional - auto-generated if not provided)
+     */
+    cardTemplate = null;
+    /**
+     * Map of record IDs to hidden field names that matched the filter
+     * Used to display an indicator when a match occurred in a non-visible field
+     */
+    hiddenFieldMatches = new Map();
+    /**
+     * Current filter text for highlighting matches
+     * Supports SQL-style % wildcards
+     */
+    filterText = '';
+    /**
+     * Page size for standalone data loading
+     * @default 100
+     */
+    pageSize = 100;
+    /**
+     * Emitted when a record is selected (single click)
+     */
+    recordSelected = new EventEmitter();
+    /**
+     * Emitted when a record should be opened (double click or open button)
+     */
+    recordOpened = new EventEmitter();
+    /** Auto-generated card template */
+    autoCardTemplate = null;
+    /** Internal records when loading standalone */
+    internalRecords = [];
+    /** Track if we're in standalone mode */
+    standaloneMode = false;
+    /** Loading state for standalone mode */
+    isLoading = false;
+    /** Flag to trigger scroll to selected card after view renders */
+    pendingScrollToSelected = false;
+    ngOnInit() {
+        this.standaloneMode = this.records === null;
+        if (this.entity?.Fields && !this.effectiveTemplate) {
+            this.autoCardTemplate = this.generateCardTemplate(this.entity);
+        }
+        if (this.standaloneMode && this.entity) {
+            this.loadData();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['entity'] && this.entity?.Fields) {
+            this.autoCardTemplate = this.generateCardTemplate(this.entity);
+        }
+        else if (changes['entity'] && !this.entity) {
+            this.autoCardTemplate = null;
+        }
+        if (changes['entity'] && this.standaloneMode && this.entity) {
+            this.loadData();
+        }
+        if (changes['records']) {
+            this.standaloneMode = this.records === null;
+            // When records change and we have a selection, scroll to it
+            if (this.selectedRecordId) {
+                this.pendingScrollToSelected = true;
+            }
+        }
+        // When selectedRecordId changes programmatically, scroll to the selected card
+        if (changes['selectedRecordId'] && this.selectedRecordId) {
+            this.pendingScrollToSelected = true;
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.pendingScrollToSelected && this.selectedRecordId) {
+            this.pendingScrollToSelected = false;
+            // Delay scroll to allow detail panel animation to complete and layout to stabilize
+            // This ensures the scroll happens after the viewport width has adjusted
+            setTimeout(() => this.scrollToSelectedCard(), 350);
+        }
+    }
+    /**
+     * Scroll the selected card into view
+     */
+    scrollToSelectedCard() {
+        if (!this.selectedRecordId)
+            return;
+        // Find the selected card element using the CSS class
+        const selectedCard = this.elementRef.nativeElement.querySelector('.data-card.selected');
+        if (selectedCard) {
+            selectedCard.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        }
+    }
+    /**
+     * Get effective records (external or internal)
+     */
+    get effectiveRecords() {
+        return this.records ?? this.internalRecords;
+    }
+    /**
+     * Load data in standalone mode
+     */
+    async loadData() {
+        if (!this.entity)
+            return;
+        this.isLoading = true;
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: this.entity.Name,
+                ResultType: 'entity_object',
+                MaxRows: this.pageSize
+            });
+            if (result.Success) {
+                this.internalRecords = result.Results;
+            }
+        }
+        catch (error) {
+            console.error('Error loading cards data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    /**
+     * Get the effective card template (custom or auto-generated)
+     */
+    get effectiveTemplate() {
+        return this.cardTemplate || this.autoCardTemplate;
+    }
+    // ========================================
+    // TEMPLATE GENERATION
+    // ========================================
+    /**
+     * Generate card template from entity metadata
+     */
+    generateCardTemplate(entity) {
+        const fields = entity.Fields;
+        if (!fields || fields.length === 0)
+            return null;
+        return {
+            titleField: this.findTitleField(entity, fields),
+            subtitleField: this.findSubtitleField(fields),
+            descriptionField: this.findDescriptionField(fields),
+            displayFields: this.findDisplayFields(fields),
+            thumbnailFields: this.findThumbnailFields(fields),
+            badgeField: this.findBadgeField(fields)
+        };
+    }
+    findTitleField(entity, fields) {
+        if (entity.NameField)
+            return entity.NameField.Name;
+        const nameField = fields.find(f => f.Name.toLowerCase() === 'name' || f.Name.toLowerCase() === 'title');
+        if (nameField)
+            return nameField.Name;
+        const endsWithName = fields.find(f => f.Name.toLowerCase().endsWith('name') &&
+            f.TSType === 'string' &&
+            !f.Name.toLowerCase().includes('file') &&
+            !f.IsPrimaryKey);
+        if (endsWithName)
+            return endsWithName.Name;
+        const firstString = fields.find(f => f.TSType === 'string' && !f.IsPrimaryKey && !f.Name.toLowerCase().includes('id'));
+        if (firstString)
+            return firstString.Name;
+        const pk = fields.find(f => f.IsPrimaryKey);
+        return pk?.Name || 'ID';
+    }
+    findSubtitleField(fields) {
+        const keywords = ['status', 'type', 'category', 'state', 'stage'];
+        for (const keyword of keywords) {
+            const field = fields.find(f => f.Name.toLowerCase().includes(keyword) && f.TSType === 'string' && !f.IsPrimaryKey);
+            if (field)
+                return field.Name;
+        }
+        return null;
+    }
+    findDescriptionField(fields) {
+        const keywords = ['description', 'desc', 'summary', 'notes', 'comments'];
+        for (const keyword of keywords) {
+            const field = fields.find(f => f.Name.toLowerCase().includes(keyword) && f.TSType === 'string');
+            if (field)
+                return field.Name;
+        }
+        return null;
+    }
+    findDisplayFields(fields) {
+        const displayFields = [];
+        const excludePatterns = ['id', 'name', 'title', 'description', 'desc', 'summary', 'notes',
+            'status', 'type', 'category', 'state', 'stage', 'password', 'secret',
+            '__mj_', 'createdat', 'updatedat', 'createdby', 'updatedby'];
+        const defaultInViewFields = fields.filter(f => f.DefaultInView === true && !f.IsPrimaryKey &&
+            !excludePatterns.some(p => f.Name.toLowerCase().includes(p)));
+        for (const field of defaultInViewFields) {
+            if (displayFields.length >= 4)
+                break;
+            displayFields.push({
+                name: field.Name,
+                type: this.getFieldType(field),
+                label: this.getFieldLabel(field)
+            });
+        }
+        if (displayFields.length >= 2)
+            return displayFields;
+        const metricKeywords = ['amount', 'total', 'count', 'value', 'price', 'cost', 'quantity', 'qty', 'balance', 'revenue', 'score'];
+        for (const field of fields) {
+            if (displayFields.length >= 4)
+                break;
+            if (displayFields.some(df => df.name === field.Name))
+                continue;
+            if (metricKeywords.some(kw => field.Name.toLowerCase().includes(kw))) {
+                displayFields.push({
+                    name: field.Name,
+                    type: this.getFieldType(field),
+                    label: this.getFieldLabel(field)
+                });
+            }
+        }
+        return displayFields;
+    }
+    /**
+     * Find all potential thumbnail fields in priority order
+     * Returns an array so we can fall back per-record if one is empty
+     */
+    findThumbnailFields(fields) {
+        const imageKeywords = ['image', 'photo', 'picture', 'thumbnail', 'avatar', 'logo', 'icon'];
+        const foundFields = [];
+        const foundFieldNames = new Set();
+        for (const keyword of imageKeywords) {
+            const matchingFields = fields.filter(f => f.Name.toLowerCase().includes(keyword) &&
+                f.TSType === 'string' &&
+                !foundFieldNames.has(f.Name));
+            for (const field of matchingFields) {
+                foundFields.push(field.Name);
+                foundFieldNames.add(field.Name);
+            }
+        }
+        return foundFields;
+    }
+    findBadgeField(fields) {
+        const keywords = ['priority', 'severity', 'importance', 'rating', 'rank', 'level'];
+        for (const keyword of keywords) {
+            const field = fields.find(f => f.Name.toLowerCase().includes(keyword));
+            if (field)
+                return field.Name;
+        }
+        return null;
+    }
+    getFieldType(field) {
+        if (field.TSType === 'boolean' || field.Type?.toLowerCase() === 'bit')
+            return 'boolean';
+        if (field.TSType === 'number')
+            return 'number';
+        if (field.TSType === 'Date' || field.Type?.toLowerCase().includes('date'))
+            return 'date';
+        return 'text';
+    }
+    // ========================================
+    // VALUE FORMATTING
+    // ========================================
+    getFieldValue(record, fieldName) {
+        if (!fieldName)
+            return '';
+        const value = record.Get(fieldName);
+        if (value === null || value === undefined)
+            return '';
+        return String(value);
+    }
+    getNumericValue(record, fieldName) {
+        const value = record.Get(fieldName);
+        if (value === null || value === undefined)
+            return '-';
+        const num = Number(value);
+        if (isNaN(num))
+            return String(value);
+        if (num >= 1000000)
+            return `${(num / 1000000).toFixed(1)}M`;
+        if (num >= 1000)
+            return `${(num / 1000).toFixed(1)}K`;
+        const fieldNameLower = fieldName.toLowerCase();
+        if (['amount', 'price', 'cost', 'value', 'revenue', 'total'].some(k => fieldNameLower.includes(k))) {
+            return `$${num.toLocaleString()}`;
+        }
+        return num.toLocaleString();
+    }
+    getBooleanValue(record, fieldName) {
+        const value = record.Get(fieldName);
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'number')
+            return value !== 0;
+        if (typeof value === 'string')
+            return value.toLowerCase() === 'true' || value === '1';
+        return Boolean(value);
+    }
+    getTextValue(record, fieldName, maxLength = 50) {
+        const value = this.getFieldValue(record, fieldName);
+        if (!value)
+            return '-';
+        if (value.length <= maxLength)
+            return value;
+        return value.substring(0, maxLength) + '...';
+    }
+    getDateValue(record, fieldName) {
+        const value = record.Get(fieldName);
+        if (value === null || value === undefined)
+            return '-';
+        try {
+            const date = value instanceof Date ? value : new Date(value);
+            if (isNaN(date.getTime()))
+                return String(value);
+            return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+        }
+        catch {
+            return String(value);
+        }
+    }
+    /**
+     * Get display label for a field using EntityFieldInfo's built-in DisplayNameOrName property
+     */
+    getFieldLabel(field) {
+        return field.DisplayNameOrName;
+    }
+    // ========================================
+    // CARD DISPLAY HELPERS
+    // ========================================
+    getRecordTrackId(record, index) {
+        try {
+            const pk = record?.PrimaryKey?.ToString();
+            if (pk && pk.trim().length > 0)
+                return pk;
+        }
+        catch { /* ignore */ }
+        return `record_${index}`;
+    }
+    isSelected(record) {
+        return record.PrimaryKey.ToConcatenatedString() === this.selectedRecordId;
+    }
+    onCardClick(record) {
+        if (!this.entity)
+            return;
+        this.recordSelected.emit({
+            record,
+            entity: this.entity,
+            compositeKey: record.PrimaryKey
+        });
+    }
+    onOpenClick(event, record) {
+        event.stopPropagation();
+        if (!this.entity)
+            return;
+        this.recordOpened.emit({
+            record,
+            entity: this.entity,
+            compositeKey: record.PrimaryKey
+        });
+    }
+    getInitials(record) {
+        const template = this.effectiveTemplate;
+        if (!template?.titleField)
+            return '?';
+        const title = this.getFieldValue(record, template.titleField);
+        if (!title)
+            return '?';
+        const words = title.split(/\s+/).filter(w => w.length > 0);
+        if (words.length === 1)
+            return words[0].substring(0, 2).toUpperCase();
+        return (words[0][0] + words[1][0]).toUpperCase();
+    }
+    /**
+     * Get the thumbnail type for a record, with per-record fallback through thumbnailFields
+     */
+    getThumbnailType(record) {
+        const fieldInfo = this.getEffectiveThumbnailField(record);
+        if (!fieldInfo)
+            return 'none';
+        const { fieldName, value } = fieldInfo;
+        // Check if value is an image URL
+        if (this.isImageValue(value))
+            return 'image';
+        // Check if value looks like an icon class
+        if (this.isIconClass(value))
+            return 'icon';
+        // If field name suggests it's an icon field, treat non-URL values as icon classes
+        const fieldNameLower = fieldName.toLowerCase();
+        if (fieldNameLower.includes('icon') || fieldNameLower.includes('class')) {
+            return 'icon';
+        }
+        return 'none';
+    }
+    /**
+     * Get the thumbnail URL/value for a record, with per-record fallback
+     */
+    getThumbnailUrl(record) {
+        const fieldInfo = this.getEffectiveThumbnailField(record);
+        return fieldInfo?.value || '';
+    }
+    /**
+     * Find the first thumbnail field that has a value for this record
+     * Returns both the field name and value for type determination
+     */
+    getEffectiveThumbnailField(record) {
+        const template = this.effectiveTemplate;
+        if (!template?.thumbnailFields || template.thumbnailFields.length === 0)
+            return null;
+        // Try each field in priority order until we find one with a value
+        for (const fieldName of template.thumbnailFields) {
+            const value = this.getFieldValue(record, fieldName);
+            if (value && value.trim() !== '') {
+                return { fieldName, value };
+            }
+        }
+        return null;
+    }
+    isImageValue(value) {
+        if (!value)
+            return false;
+        const trimmed = value.trim();
+        if (trimmed.startsWith('data:image/'))
+            return true;
+        if (trimmed.startsWith('http://') || trimmed.startsWith('https://'))
+            return true;
+        return false;
+    }
+    isIconClass(value) {
+        if (!value)
+            return false;
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed.startsWith('fa-') || trimmed.startsWith('fa ') ||
+            trimmed.startsWith('fas ') || trimmed.startsWith('far ') ||
+            trimmed.startsWith('fal ') || trimmed.startsWith('fab '))
+            return true;
+        if (trimmed.includes('material-icons') || trimmed.startsWith('mat-icon'))
+            return true;
+        if (trimmed.startsWith('bi-') || trimmed.startsWith('bi '))
+            return true;
+        return false;
+    }
+    getRecordColor(record) {
+        const colors = ['#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#c2185b', '#0097a7', '#5d4037', '#455a64'];
+        const pk = record.PrimaryKey.ToString();
+        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];
+    }
+    isEnumField(fieldName) {
+        if (!this.entity)
+            return false;
+        const field = this.entity.Fields.find(f => f.Name === fieldName);
+        if (!field)
+            return false;
+        return field.ValueListTypeEnum !== EntityFieldValueListType.None && field.EntityFieldValues.length > 0;
+    }
+    get subtitleIsPill() {
+        const template = this.effectiveTemplate;
+        if (!template?.subtitleField || !this.entity)
+            return false;
+        return this.isEnumField(template.subtitleField);
+    }
+    getPillColorType(value) {
+        return PillColorUtil.getColorType(value);
+    }
+    /**
+     * Check if a record matched on a hidden field
+     */
+    hasHiddenFieldMatch(record) {
+        return this.hiddenFieldMatches.has(record.PrimaryKey.ToConcatenatedString());
+    }
+    /**
+     * Get the display name of the hidden field that matched
+     */
+    getHiddenMatchFieldName(record) {
+        const fieldName = this.hiddenFieldMatches.get(record.PrimaryKey.ToConcatenatedString());
+        if (!fieldName || !this.entity)
+            return '';
+        // Look up the field in entity metadata and use DisplayNameOrName
+        const field = this.entity.Fields.find(f => f.Name === fieldName);
+        return field ? field.DisplayNameOrName : fieldName;
+    }
+    /**
+     * Highlight matching text in a string based on the filter text
+     * Uses HighlightUtil which only highlights if the text actually matches the pattern
+     */
+    highlightMatch(text) {
+        return HighlightUtil.highlight(text, this.filterText, false);
+    }
+    static ɵfac = function EntityCardsComponent_Factory(t) { return new (t || EntityCardsComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityCardsComponent, selectors: [["mj-entity-cards"]], inputs: { entity: "entity", records: "records", selectedRecordId: "selectedRecordId", cardTemplate: "cardTemplate", hiddenFieldMatches: "hiddenFieldMatches", filterText: "filterText", pageSize: "pageSize" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 1, consts: [[1, "cards-view-wrapper"], [1, "loading-container"], [1, "cards-container"], ["text", "Loading records..."], [1, "data-card", 3, "selected"], [1, "no-results"], [1, "data-card", 3, "click"], [1, "card-header"], [1, "card-thumbnail"], [1, "card-avatar", 3, "background-color"], [1, "card-header-content"], [1, "card-title", 3, "innerHTML"], ["title", "Open Record", 1, "card-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "card-body"], [1, "card-description", 3, "innerHTML"], [1, "card-fields"], [1, "card-footer"], [1, "hidden-match-indicator", 3, "title"], ["alt", "", 3, "src"], [1, "card-avatar"], [3, "value"], [1, "card-subtitle", 3, "innerHTML"], [1, "field-item", 3, "field-boolean", "field-text"], [1, "field-item"], [1, "field-icon"], [1, "field-label"], [1, "field-value"], [1, "field-value", "field-date"], [1, "field-text-value", 3, "innerHTML"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fa-solid", "fa-inbox"]], template: function EntityCardsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, EntityCardsComponent_Conditional_1_Template, 2, 0, "div", 1)(2, EntityCardsComponent_Conditional_2_Template, 4, 1, "div", 2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading && ctx.effectiveRecords.length === 0 ? 1 : 2);
+        } }, dependencies: [i1.LoadingComponent, i2.PillComponent], styles: [".cards-view-wrapper[_ngcontent-%COMP%] {\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.cards-container[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 20px;\n  padding: 4px;\n}\n\n.data-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n\n.data-card[_ngcontent-%COMP%]:hover:not(.selected) {\n  border-color: #bdbdbd;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n.data-card[_ngcontent-%COMP%]:hover   .card-open-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n.data-card.selected[_ngcontent-%COMP%] {\n  border-color: #1976d2;\n}\n\n.data-card.selected[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n  color: #1565c0;\n}\n\n\n\n.data-card.selected[_ngcontent-%COMP%]:hover {\n  border-color: #1976d2;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 12px;\n}\n\n.card-thumbnail[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.card-thumbnail[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.card-avatar[_ngcontent-%COMP%] {\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: white;\n  flex-shrink: 0;\n}\n\n.card-header-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #212121;\n  line-height: 1.3;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.card-subtitle[_ngcontent-%COMP%] {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-open-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: #9e9e9e;\n  opacity: 0;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.card-open-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #1976d2;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  padding: 0 16px 16px 16px;\n}\n\n.card-description[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #616161;\n  line-height: 1.5;\n}\n\n\n\n.card-fields[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding-top: 12px;\n  border-top: 1px solid #f0f0f0;\n}\n\n.field-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 60px;\n}\n\n.field-item[_ngcontent-%COMP%]   .field-value[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: #212121;\n}\n\n.field-item[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n\n\n.field-item.field-boolean[_ngcontent-%COMP%] {\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: auto;\n}\n\n.field-item.field-boolean[_ngcontent-%COMP%]   .field-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.field-item.field-boolean[_ngcontent-%COMP%]   .field-icon.bool-true[_ngcontent-%COMP%] {\n  color: #2e7d32;\n}\n\n.field-item.field-boolean[_ngcontent-%COMP%]   .field-icon.bool-false[_ngcontent-%COMP%] {\n  color: #bdbdbd;\n}\n\n.field-item.field-boolean[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  text-transform: none;\n  color: #616161;\n}\n\n\n\n.field-item.field-text[_ngcontent-%COMP%] {\n  flex: 1 1 100%;\n  max-width: 100%;\n}\n\n.field-item[_ngcontent-%COMP%]   .field-text-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #424242;\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n\n\n.field-item[_ngcontent-%COMP%]   .field-date[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.card-footer[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: #fafafa;\n  border-top: 1px solid #f0f0f0;\n}\n\n\n\n  .highlight-match {\n  background-color: #fff176;\n  border-radius: 2px;\n}\n\n\n\n.card-header-content[_ngcontent-%COMP%]   mj-pill[_ngcontent-%COMP%] {\n  display: block;\n  margin-top: 4px;\n}\n\n\n\n.hidden-match-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: #fff8e1;\n  border-top: 1px solid #ffe082;\n  font-size: 11px;\n  color: #f57c00;\n}\n\n.hidden-match-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.hidden-match-indicator[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  padding: 40px;\n}\n\n\n\n.no-results[_ngcontent-%COMP%] {\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: #9e9e9e;\n  text-align: center;\n}\n.no-results[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n.no-results[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityCardsComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-cards', 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(getFieldValue(record, effectiveTemplate?.titleField ?? null))\"></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: [".cards-view-wrapper {\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.cards-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 20px;\n  padding: 4px;\n}\n\n.data-card {\n  background: white;\n  border-radius: 12px;\n  border: 1px solid #e0e0e0;\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n/* Hover state for unselected cards */\n.data-card:hover:not(.selected) {\n  border-color: #bdbdbd;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n.data-card:hover .card-open-btn {\n  opacity: 1;\n}\n\n/* Selected state - subtle but clear */\n.data-card.selected {\n  border-color: #1976d2;\n}\n\n.data-card.selected .card-title {\n  color: #1565c0;\n}\n\n/* Selected + hover state - same as regular hover */\n.data-card.selected:hover {\n  border-color: #1976d2;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n  transform: translateY(-2px);\n}\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 12px;\n}\n\n.card-thumbnail {\n  width: 48px;\n  height: 48px;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.card-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.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: white;\n  flex-shrink: 0;\n}\n\n.card-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #212121;\n  line-height: 1.3;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.card-subtitle {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.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: #9e9e9e;\n  opacity: 0;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.card-open-btn:hover {\n  background: #f5f5f5;\n  color: #1976d2;\n}\n\n.card-body {\n  padding: 0 16px 16px 16px;\n}\n\n.card-description {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: #616161;\n  line-height: 1.5;\n}\n\n/* Card Display Fields */\n.card-fields {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding-top: 12px;\n  border-top: 1px solid #f0f0f0;\n}\n\n.field-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 60px;\n}\n\n.field-item .field-value {\n  font-size: 15px;\n  font-weight: 600;\n  color: #212121;\n}\n\n.field-item .field-label {\n  font-size: 10px;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n/* Boolean fields */\n.field-item.field-boolean {\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  min-width: auto;\n}\n\n.field-item.field-boolean .field-icon {\n  font-size: 14px;\n}\n\n.field-item.field-boolean .field-icon.bool-true {\n  color: #2e7d32;\n}\n\n.field-item.field-boolean .field-icon.bool-false {\n  color: #bdbdbd;\n}\n\n.field-item.field-boolean .field-label {\n  font-size: 12px;\n  text-transform: none;\n  color: #616161;\n}\n\n/* Text fields */\n.field-item.field-text {\n  flex: 1 1 100%;\n  max-width: 100%;\n}\n\n.field-item .field-text-value {\n  font-size: 13px;\n  color: #424242;\n  line-height: 1.4;\n  word-break: break-word;\n}\n\n/* Date fields */\n.field-item .field-date {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.card-footer {\n  padding: 12px 16px;\n  background: #fafafa;\n  border-top: 1px solid #f0f0f0;\n}\n\n/* Highlight matches */\n::ng-deep .highlight-match {\n  background-color: #fff176;\n  border-radius: 2px;\n}\n\n/* Pill spacing when used as subtitle */\n.card-header-content mj-pill {\n  display: block;\n  margin-top: 4px;\n}\n\n/* Hidden field match indicator */\n.hidden-match-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: #fff8e1;\n  border-top: 1px solid #ffe082;\n  font-size: 11px;\n  color: #f57c00;\n}\n\n.hidden-match-indicator i {\n  font-size: 10px;\n}\n\n.hidden-match-indicator span {\n  font-weight: 500;\n}\n\n/* Loading state */\n.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 */\n.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: #9e9e9e;\n  text-align: center;\n}\n.no-results i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n.no-results p {\n  margin: 0;\n  font-size: 14px;\n}\n"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], { entity: [{
+            type: Input
+        }], records: [{
+            type: Input
+        }], selectedRecordId: [{
+            type: Input
+        }], cardTemplate: [{
+            type: Input
+        }], hiddenFieldMatches: [{
+            type: Input
+        }], filterText: [{
+            type: Input
+        }], pageSize: [{
+            type: Input
+        }], recordSelected: [{
+            type: Output
+        }], recordOpened: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityCardsComponent, { className: "EntityCardsComponent" }); })();
+//# sourceMappingURL=entity-cards.component.js.map