@memberjunction/ng-entity-viewer 6.1.4 → 6.2.0-edge.1

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

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { EntityFieldValueListType, RunView, CoerceImageSrc } from '@memberjunction/core';
-import { buildCompositeKey, buildPkString, computeFieldsList } from '../utils/record.util';
+import { EntityFieldValueListType, RunView, CoerceImageSrc, IsDateOnlySQLType, FormatDateOnly } from '@memberjunction/core';
+import { BuildCompositeKey, BuildPkString, ComputeFieldsList } from '../utils/record.util';
 import { PillColorUtil } from '../pill/pill.component';
 import { HighlightUtil } from '../utils/highlight.util';
 import * as i0 from "@angular/core";
@@ -203,11 +203,14 @@ function EntityCardsComponent_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1
 } }
 function EntityCardsComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 5);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Title", ctx_r2.entity ? "No " + ctx_r2.entity.DisplayNamePlural + " to display" : "No records to display");
 } }
 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);
-    i0.ɵɵconditionalCreate(3, EntityCardsComponent_Conditional_2_Conditional_3_Template, 1, 0, "mj-empty-state", 5);
+    i0.ɵɵconditionalCreate(3, EntityCardsComponent_Conditional_2_Conditional_3_Template, 1, 1, "mj-empty-state", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -260,12 +263,28 @@ export class EntityCardsComponent extends BaseAngularComponent {
     /**
      * Custom card template (optional - auto-generated if not provided)
      */
-    cardTemplate = null;
+    CardTemplate = null;
+    /** @deprecated Use {@link CardTemplate}. */
+    set cardTemplate(value) {
+        this.CardTemplate = value;
+    }
+    /** @deprecated Use {@link CardTemplate}. */
+    get cardTemplate() {
+        return this.CardTemplate;
+    }
     /**
      * 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();
+    HiddenFieldMatches = new Map();
+    /** @deprecated Use {@link HiddenFieldMatches}. */
+    set hiddenFieldMatches(value) {
+        this.HiddenFieldMatches = value;
+    }
+    /** @deprecated Use {@link HiddenFieldMatches}. */
+    get hiddenFieldMatches() {
+        return this.HiddenFieldMatches;
+    }
     /**
      * Current filter text for highlighting matches
      * Supports SQL-style % wildcards
@@ -285,7 +304,15 @@ export class EntityCardsComponent extends BaseAngularComponent {
      */
     recordOpened = new EventEmitter();
     /** Auto-generated card template */
-    autoCardTemplate = null;
+    AutoCardTemplate = null;
+    /** @deprecated Use {@link AutoCardTemplate}. */
+    get autoCardTemplate() {
+        return this.AutoCardTemplate;
+    }
+    /** @deprecated Use {@link AutoCardTemplate}. */
+    set autoCardTemplate(value) {
+        this.AutoCardTemplate = value;
+    }
     /** Internal records when loading standalone */
     internalRecords = [];
     /** Track if we're in standalone mode */
@@ -301,11 +328,19 @@ export class EntityCardsComponent extends BaseAngularComponent {
      * buildPkString() allocations + 4 RegExp-building highlight calls that the
      * previous per-card-per-CD method bindings incurred.
      */
-    cardViewModels = [];
+    CardViewModels = [];
+    /** @deprecated Use {@link CardViewModels}. */
+    get cardViewModels() {
+        return this.CardViewModels;
+    }
+    /** @deprecated Use {@link CardViewModels}. */
+    set cardViewModels(value) {
+        this.CardViewModels = value;
+    }
     ngOnInit() {
         this.standaloneMode = this.records === null;
-        if (this.entity?.Fields && !this.effectiveTemplate) {
-            this.autoCardTemplate = this.generateCardTemplate(this.entity);
+        if (this.entity?.Fields && !this.EffectiveTemplate) {
+            this.AutoCardTemplate = this.generateCardTemplate(this.entity);
         }
         if (this.standaloneMode && this.entity) {
             this.loadData();
@@ -314,10 +349,10 @@ export class EntityCardsComponent extends BaseAngularComponent {
     }
     ngOnChanges(changes) {
         if (changes['entity'] && this.entity?.Fields) {
-            this.autoCardTemplate = this.generateCardTemplate(this.entity);
+            this.AutoCardTemplate = this.generateCardTemplate(this.entity);
         }
         else if (changes['entity'] && !this.entity) {
-            this.autoCardTemplate = null;
+            this.AutoCardTemplate = null;
         }
         if (changes['entity'] && this.standaloneMode && this.entity) {
             this.loadData();
@@ -374,9 +409,13 @@ export class EntityCardsComponent extends BaseAngularComponent {
     /**
      * Get effective records (external or internal)
      */
-    get effectiveRecords() {
+    get EffectiveRecords() {
         return this.records ?? this.internalRecords;
     }
+    /** @deprecated Use {@link EffectiveRecords}. */
+    get effectiveRecords() {
+        return this.EffectiveRecords;
+    }
     /**
      * Load data in standalone mode
      */
@@ -389,7 +428,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
             const result = await rv.RunView({
                 EntityName: this.entity.Name,
                 ResultType: 'simple',
-                Fields: computeFieldsList(this.entity),
+                Fields: ComputeFieldsList(this.entity),
                 MaxRows: this.pageSize
             });
             if (result.Success) {
@@ -407,8 +446,12 @@ export class EntityCardsComponent extends BaseAngularComponent {
     /**
      * Get the effective card template (custom or auto-generated)
      */
+    get EffectiveTemplate() {
+        return this.CardTemplate || this.AutoCardTemplate;
+    }
+    /** @deprecated Use {@link EffectiveTemplate}. */
     get effectiveTemplate() {
-        return this.cardTemplate || this.autoCardTemplate;
+        return this.EffectiveTemplate;
     }
     // ========================================
     // TEMPLATE GENERATION
@@ -491,7 +534,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
             displayFields.push({
                 name: field.Name,
                 type: this.getFieldType(field),
-                label: this.getFieldLabel(field)
+                label: this.GetFieldLabel(field)
             });
         }
         if (displayFields.length >= 2)
@@ -506,7 +549,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
                 displayFields.push({
                     name: field.Name,
                     type: this.getFieldType(field),
-                    label: this.getFieldLabel(field)
+                    label: this.GetFieldLabel(field)
                 });
             }
         }
@@ -547,7 +590,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
     // ========================================
     // VALUE FORMATTING
     // ========================================
-    getFieldValue(record, fieldName) {
+    GetFieldValue(record, fieldName) {
         if (!fieldName)
             return '';
         const value = record[fieldName];
@@ -555,7 +598,11 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return '';
         return String(value);
     }
-    getNumericValue(record, fieldName) {
+    /** @deprecated Use {@link GetFieldValue}. */
+    getFieldValue(record, fieldName) {
+        return this.GetFieldValue(record, fieldName);
+    }
+    GetNumericValue(record, fieldName) {
         const value = record[fieldName];
         if (value === null || value === undefined)
             return '-';
@@ -572,7 +619,11 @@ export class EntityCardsComponent extends BaseAngularComponent {
         }
         return num.toLocaleString();
     }
-    getBooleanValue(record, fieldName) {
+    /** @deprecated Use {@link GetNumericValue}. */
+    getNumericValue(record, fieldName) {
+        return this.GetNumericValue(record, fieldName);
+    }
+    GetBooleanValue(record, fieldName) {
         const value = record[fieldName];
         if (value === null || value === undefined)
             return false;
@@ -584,15 +635,23 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return value.toLowerCase() === 'true' || value === '1';
         return Boolean(value);
     }
-    getTextValue(record, fieldName, maxLength = 50) {
-        const value = this.getFieldValue(record, fieldName);
+    /** @deprecated Use {@link GetBooleanValue}. */
+    getBooleanValue(record, fieldName) {
+        return this.GetBooleanValue(record, fieldName);
+    }
+    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) {
+    /** @deprecated Use {@link GetTextValue}. */
+    getTextValue(record, fieldName, maxLength = 50) {
+        return this.GetTextValue(record, fieldName, maxLength);
+    }
+    GetDateValue(record, fieldName) {
         const value = record[fieldName];
         if (value === null || value === undefined)
             return '-';
@@ -600,56 +659,89 @@ export class EntityCardsComponent extends BaseAngularComponent {
             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' });
+            const options = { month: 'short', day: 'numeric', year: 'numeric' };
+            // A `date` column is a calendar day that arrives as UTC midnight; a local-zone formatter
+            // would land on the previous day for every reader west of Greenwich (MJ#4210). A timestamp
+            // names an instant and stays in local time.
+            if (this.isDateOnlyField(fieldName))
+                return FormatDateOnly(date, options);
+            return date.toLocaleDateString(undefined, options);
         }
         catch {
             return String(value);
         }
     }
+    /** @deprecated Use {@link GetDateValue}. */
+    getDateValue(record, fieldName) {
+        return this.GetDateValue(record, fieldName);
+    }
+    isDateOnlyField(fieldName) {
+        return IsDateOnlySQLType(this.entity?.Fields.find(f => f.Name === fieldName)?.Type);
+    }
     /**
      * Get display label for a field using EntityFieldInfo's built-in DisplayNameOrName property
      */
-    getFieldLabel(field) {
+    GetFieldLabel(field) {
         return field.DisplayNameOrName;
     }
+    /** @deprecated Use {@link GetFieldLabel}. */
+    getFieldLabel(field) {
+        return this.GetFieldLabel(field);
+    }
     // ========================================
     // CARD DISPLAY HELPERS
     // ========================================
-    getRecordTrackId(record, index) {
+    GetRecordTrackId(record, index) {
         if (!this.entity)
             return `record_${index}`;
         try {
-            const pk = buildPkString(record, this.entity);
+            const pk = BuildPkString(record, this.entity);
             if (pk && pk.trim().length > 0)
                 return pk;
         }
         catch { /* ignore */ }
         return `record_${index}`;
     }
-    isSelected(record) {
+    /** @deprecated Use {@link GetRecordTrackId}. */
+    getRecordTrackId(record, index) {
+        return this.GetRecordTrackId(record, index);
+    }
+    IsSelected(record) {
         if (!this.entity)
             return false;
-        return buildPkString(record, this.entity) === this.selectedRecordId;
+        return BuildPkString(record, this.entity) === this.selectedRecordId;
     }
-    onCardClick(record) {
+    /** @deprecated Use {@link IsSelected}. */
+    isSelected(record) {
+        return this.IsSelected(record);
+    }
+    OnCardClick(record) {
         if (!this.entity)
             return;
         this.recordSelected.emit({
             record,
             entity: this.entity,
-            compositeKey: buildCompositeKey(record, this.entity)
+            compositeKey: BuildCompositeKey(record, this.entity)
         });
     }
-    onOpenClick(event, record) {
+    /** @deprecated Use {@link OnCardClick}. */
+    onCardClick(record) {
+        return this.OnCardClick(record);
+    }
+    OnOpenClick(event, record) {
         event.stopPropagation();
         if (!this.entity)
             return;
         this.recordOpened.emit({
             record,
             entity: this.entity,
-            compositeKey: buildCompositeKey(record, this.entity)
+            compositeKey: BuildCompositeKey(record, this.entity)
         });
     }
+    /** @deprecated Use {@link OnOpenClick}. */
+    onOpenClick(event, record) {
+        return this.OnOpenClick(event, record);
+    }
     // ========================================
     // PRECOMPUTED VIEW-MODELS (perf)
     // ========================================
@@ -660,8 +752,8 @@ export class EntityCardsComponent extends BaseAngularComponent {
      * 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));
+        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,
@@ -672,7 +764,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
      * compare per card with zero allocation or regex work.
      */
     updateSelectionFlags() {
-        for (const vm of this.cardViewModels) {
+        for (const vm of this.CardViewModels) {
             vm.isSelected = vm.pkString.length > 0 && vm.pkString === this.selectedRecordId;
         }
     }
@@ -683,9 +775,9 @@ export class EntityCardsComponent extends BaseAngularComponent {
     buildCardViewModel(record, index) {
         const pkString = this.computePkString(record);
         const trackId = pkString && pkString.trim().length > 0 ? pkString : `record_${index}`;
-        const template = this.effectiveTemplate;
+        const template = this.EffectiveTemplate;
         const subtitleField = template?.subtitleField ?? null;
-        const subtitleValue = subtitleField ? this.getFieldValue(record, subtitleField) : '';
+        const subtitleValue = subtitleField ? this.GetFieldValue(record, subtitleField) : '';
         const descriptionField = template?.descriptionField ?? null;
         return {
             record,
@@ -693,17 +785,17 @@ export class EntityCardsComponent extends BaseAngularComponent {
             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)),
+            thumbnailType: this.GetThumbnailType(record),
+            thumbnailUrl: this.GetThumbnailUrl(record),
+            initials: this.GetInitials(record),
+            highlightedTitle: this.HighlightMatch(this.GetCombinedTitle(record)),
             subtitleValue,
-            highlightedSubtitle: this.highlightMatch(subtitleValue),
+            highlightedSubtitle: this.HighlightMatch(subtitleValue),
             highlightedDescription: descriptionField
-                ? this.highlightMatch(this.getTextValue(record, descriptionField, 100))
+                ? this.HighlightMatch(this.GetTextValue(record, descriptionField, 100))
                 : '',
             displayFields: this.buildDisplayFieldVMs(record, template),
-            badgeValue: template?.badgeField ? this.getFieldValue(record, template.badgeField) : '',
+            badgeValue: template?.badgeField ? this.GetFieldValue(record, template.badgeField) : '',
             hasHiddenFieldMatch: this.computeHasHiddenFieldMatch(pkString),
             hiddenMatchFieldName: this.computeHiddenMatchFieldName(pkString)
         };
@@ -716,10 +808,10 @@ export class EntityCardsComponent extends BaseAngularComponent {
             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))
+            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))
         }));
     }
     /**
@@ -730,7 +822,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
         if (!this.entity)
             return '';
         try {
-            return buildPkString(record, this.entity);
+            return BuildPkString(record, this.entity);
         }
         catch {
             return '';
@@ -755,7 +847,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
     computeHasHiddenFieldMatch(pkString) {
         if (!this.entity || !pkString)
             return false;
-        return this.hiddenFieldMatches.has(pkString);
+        return this.HiddenFieldMatches.has(pkString);
     }
     /**
      * Resolve the display name of the hidden field that matched, from a PK string.
@@ -763,7 +855,7 @@ export class EntityCardsComponent extends BaseAngularComponent {
     computeHiddenMatchFieldName(pkString) {
         if (!this.entity || !pkString)
             return '';
-        const fieldName = this.hiddenFieldMatches.get(pkString);
+        const fieldName = this.HiddenFieldMatches.get(pkString);
         if (!fieldName)
             return '';
         const field = this.entity.Fields.find(f => f.Name === fieldName);
@@ -773,17 +865,21 @@ export class EntityCardsComponent extends BaseAngularComponent {
      * Get the combined title from all title fields for a record.
      * Joins multiple IsNameField values with spaces (e.g., "Elizabeth Rodriguez").
      */
-    getCombinedTitle(record) {
-        const template = this.effectiveTemplate;
+    GetCombinedTitle(record) {
+        const template = this.EffectiveTemplate;
         if (!template?.titleFields || template.titleFields.length === 0)
             return '';
         const parts = template.titleFields
-            .map(f => this.getFieldValue(record, f))
+            .map(f => this.GetFieldValue(record, f))
             .filter(v => v && v.trim().length > 0);
         return parts.length > 0 ? parts.join(' ') : '';
     }
-    getInitials(record) {
-        const title = this.getCombinedTitle(record);
+    /** @deprecated Use {@link GetCombinedTitle}. */
+    getCombinedTitle(record) {
+        return this.GetCombinedTitle(record);
+    }
+    GetInitials(record) {
+        const title = this.GetCombinedTitle(record);
         if (!title)
             return '?';
         const words = title.split(/\s+/).filter(w => w.length > 0);
@@ -791,10 +887,14 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return words[0].substring(0, 2).toUpperCase();
         return (words[0][0] + words[words.length - 1][0]).toUpperCase();
     }
+    /** @deprecated Use {@link GetInitials}. */
+    getInitials(record) {
+        return this.GetInitials(record);
+    }
     /**
      * Get the thumbnail type for a record, with per-record fallback through thumbnailFields
      */
-    getThumbnailType(record) {
+    GetThumbnailType(record) {
         const fieldInfo = this.getEffectiveThumbnailField(record);
         if (!fieldInfo)
             return 'none';
@@ -810,26 +910,34 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return 'icon';
         return 'none';
     }
+    /** @deprecated Use {@link GetThumbnailType}. */
+    getThumbnailType(record) {
+        return this.GetThumbnailType(record);
+    }
     /**
      * Get the thumbnail URL/value for a record, with per-record fallback
      */
-    getThumbnailUrl(record) {
+    GetThumbnailUrl(record) {
         const fieldInfo = this.getEffectiveThumbnailField(record);
         if (!fieldInfo)
             return '';
         return CoerceImageSrc(fieldInfo.value) || fieldInfo.value;
     }
+    /** @deprecated Use {@link GetThumbnailUrl}. */
+    getThumbnailUrl(record) {
+        return this.GetThumbnailUrl(record);
+    }
     /**
      * 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;
+        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);
+            const value = this.GetFieldValue(record, fieldName);
             if (value && value.trim() !== '') {
                 return { fieldName, value };
             }
@@ -853,10 +961,14 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return true;
         return false;
     }
-    getRecordColor(record) {
+    GetRecordColor(record) {
         return this.computeRecordColor(this.computePkString(record));
     }
-    isEnumField(fieldName) {
+    /** @deprecated Use {@link GetRecordColor}. */
+    getRecordColor(record) {
+        return this.GetRecordColor(record);
+    }
+    IsEnumField(fieldName) {
         if (!this.entity)
             return false;
         const field = this.entity.Fields.find(f => f.Name === fieldName);
@@ -864,45 +976,69 @@ export class EntityCardsComponent extends BaseAngularComponent {
             return false;
         return field.ValueListTypeEnum !== EntityFieldValueListType.None && field.EntityFieldValues.length > 0;
     }
-    get subtitleIsPill() {
-        const template = this.effectiveTemplate;
+    /** @deprecated Use {@link IsEnumField}. */
+    isEnumField(fieldName) {
+        return this.IsEnumField(fieldName);
+    }
+    get SubtitleIsPill() {
+        const template = this.EffectiveTemplate;
         if (!template?.subtitleField || !this.entity)
             return false;
-        return this.isEnumField(template.subtitleField);
+        return this.IsEnumField(template.subtitleField);
     }
-    getPillColorType(value) {
+    /** @deprecated Use {@link SubtitleIsPill}. */
+    get subtitleIsPill() {
+        return this.SubtitleIsPill;
+    }
+    GetPillColorType(value) {
         return PillColorUtil.getColorType(value);
     }
+    /** @deprecated Use {@link GetPillColorType}. */
+    getPillColorType(value) {
+        return this.GetPillColorType(value);
+    }
     /**
      * Check if a record matched on a hidden field
      */
-    hasHiddenFieldMatch(record) {
+    HasHiddenFieldMatch(record) {
         if (!this.entity)
             return false;
-        return this.hiddenFieldMatches.has(buildPkString(record, this.entity));
+        return this.HiddenFieldMatches.has(BuildPkString(record, this.entity));
+    }
+    /** @deprecated Use {@link HasHiddenFieldMatch}. */
+    hasHiddenFieldMatch(record) {
+        return this.HasHiddenFieldMatch(record);
     }
     /**
      * Get the display name of the hidden field that matched
      */
-    getHiddenMatchFieldName(record) {
+    GetHiddenMatchFieldName(record) {
         if (!this.entity)
             return '';
-        const fieldName = this.hiddenFieldMatches.get(buildPkString(record, this.entity));
+        const fieldName = this.HiddenFieldMatches.get(BuildPkString(record, this.entity));
         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;
     }
+    /** @deprecated Use {@link GetHiddenMatchFieldName}. */
+    getHiddenMatchFieldName(record) {
+        return this.GetHiddenMatchFieldName(record);
+    }
     /**
      * 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) {
+    HighlightMatch(text) {
         return HighlightUtil.highlight(text, this.filterText, false);
     }
+    /** @deprecated Use {@link HighlightMatch}. */
+    highlightMatch(text) {
+        return this.HighlightMatch(text);
+    }
     static ɵfac = function EntityCardsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, 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"], ["Variant", "no-results", "Title", "No records to display", 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"]], template: function EntityCardsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityCardsComponent, selectors: [["mj-entity-cards"]], inputs: { entity: "entity", records: "records", selectedRecordId: "selectedRecordId", CardTemplate: "CardTemplate", cardTemplate: "cardTemplate", HiddenFieldMatches: "HiddenFieldMatches", hiddenFieldMatches: "hiddenFieldMatches", filterText: "filterText", pageSize: "pageSize" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, 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"], ["Variant", "no-results", 1, "no-results", 3, "Title"], [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"]], template: function EntityCardsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, EntityCardsComponent_Conditional_1_Template, 2, 0, "div", 1)(2, EntityCardsComponent_Conditional_2_Template, 4, 1, "div", 2);
             i0.ɵɵelementEnd();
@@ -913,15 +1049,19 @@ 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 (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      <mj-empty-state\n        class=\"no-results\"\n        Variant=\"no-results\"\n        Title=\"No records to display\" />\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: 50%;\n  overflow: hidden;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\nmj-entity-cards .card-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n}\n\nmj-entity-cards .card-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\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 \u2014 span the full grid width */\nmj-entity-cards .no-results {\n  grid-column: 1 / -1;\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      <mj-empty-state\n        class=\"no-results\"\n        Variant=\"no-results\"\n        [Title]=\"entity ? 'No ' + entity.DisplayNamePlural + ' to display' : 'No records to display'\" />\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: 50%;\n  overflow: hidden;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\nmj-entity-cards .card-thumbnail img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  display: block;\n}\n\nmj-entity-cards .card-avatar {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\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 \u2014 span the full grid width */\nmj-entity-cards .no-results {\n  grid-column: 1 / -1;\n}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], { entity: [{
             type: Input
         }], records: [{
             type: Input
         }], selectedRecordId: [{
             type: Input
+        }], CardTemplate: [{
+            type: Input
         }], cardTemplate: [{
             type: Input
+        }], HiddenFieldMatches: [{
+            type: Input
         }], hiddenFieldMatches: [{
             type: Input
         }], filterText: [{