@memberjunction/ng-entity-card 0.0.1 → 5.24.0

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

@@ -0,0 +1,582 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { Metadata } from '@memberjunction/core';
+import { GenerateCardTemplate, GenerateCardTemplateFromMetadata, CombineTitleFields, FormatKeyAsLabel, } from './entity-card.types';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.Name;
+function MJEntityCardComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10);
+    i0.ɵɵdomElement(1, "img", 12);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("src", ctx_r0.ThumbnailValue, i0.ɵɵsanitizeUrl);
+} }
+function MJEntityCardComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13);
+    i0.ɵɵdomElement(1, "i");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background", ctx_r0.AvatarColor);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.ThumbnailValue);
+} }
+function MJEntityCardComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13);
+    i0.ɵɵdomElement(1, "i");
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background", ctx_r0.AvatarColor);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.EntityIcon);
+} }
+function MJEntityCardComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background", ctx_r0.AvatarColor);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.Initials, " ");
+} }
+function MJEntityCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1);
+    i0.ɵɵconditionalCreate(1, MJEntityCardComponent_Conditional_1_Conditional_1_Template, 2, 1, "div", 10)(2, MJEntityCardComponent_Conditional_1_Conditional_2_Template, 2, 4, "div", 11)(3, MJEntityCardComponent_Conditional_1_Conditional_3_Template, 2, 4, "div", 11)(4, MJEntityCardComponent_Conditional_1_Conditional_4_Template, 2, 3, "div", 11);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.HasThumbnail && ctx_r0.ThumbnailIsImage ? 1 : ctx_r0.HasThumbnail && ctx_r0.ThumbnailIsIcon ? 2 : ctx_r0.EntityIcon ? 3 : 4);
+} }
+function MJEntityCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.EntityDisplayName);
+} }
+function MJEntityCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Subtitle);
+} }
+function MJEntityCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.Description);
+} }
+function MJEntityCardComponent_Conditional_9_For_2_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const field_r2 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r2.Label);
+} }
+function MJEntityCardComponent_Conditional_9_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 15);
+    i0.ɵɵconditionalCreate(1, MJEntityCardComponent_Conditional_9_For_2_Conditional_0_Conditional_1_Template, 2, 1, "span", 16);
+    i0.ɵɵdomElementStart(2, "span", 17);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ShouldShowLabels ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx);
+} }
+function MJEntityCardComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJEntityCardComponent_Conditional_9_For_2_Conditional_0_Template, 4, 2, "div", 15);
+} if (rf & 2) {
+    let tmp_11_0;
+    const field_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_11_0 = ctx_r0.GetFieldValue(field_r2)) ? 0 : -1, tmp_11_0);
+} }
+function MJEntityCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 14);
+    i0.ɵɵrepeaterCreate(1, MJEntityCardComponent_Conditional_9_For_2_Template, 1, 1, null, null, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("mj-ec-fields--labeled", ctx_r0.ShouldShowLabels);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.DisplayFields);
+} }
+function MJEntityCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 18);
+    i0.ɵɵdomListener("click", function MJEntityCardComponent_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnOpenClick($event)); });
+    i0.ɵɵdomElement(1, "i", 19);
+    i0.ɵɵdomElementEnd();
+} }
+/**
+ * `MJEntityCardComponent` — A generic, metadata-driven entity record card.
+ *
+ * Renders a single entity record as a visual card with automatically prioritized
+ * fields based on MemberJunction entity metadata (`IsNameField`, `DefaultInView`,
+ * `Sequence`). Designed to work with both full entity records and sparse vector
+ * metadata from the Knowledge Hub.
+ *
+ * ## Variants
+ * - `compact` — Tooltip-sized. Title + 2-3 key fields. No avatar.
+ * - `card` — Grid card. Avatar + title + subtitle + display fields + badge.
+ * - `detail` — Full panel. All available fields with labels.
+ *
+ * ## Field Resolution
+ * 1. **Title**: All `IsNameField` fields combined in Sequence order
+ * 2. **Primary fields**: `DefaultInView=true` sorted by Sequence
+ * 3. **Fallback**: First 5 non-PK/FK fields when no metadata flags are set
+ *
+ * ## Events
+ * All interactions follow the `BeforeXXX` / `AfterXXX` cancelable event pattern.
+ * Set `event.Cancel = true` in a `BeforeXXX` handler to prevent the default action.
+ *
+ * @example
+ * ```html
+ * <!-- From entity name + vector metadata -->
+ * <mj-entity-card
+ *     [EntityName]="'Members'"
+ *     [Record]="vectorMetadata"
+ *     Variant="card"
+ *     (CardClicked)="onCardClick($event)">
+ * </mj-entity-card>
+ *
+ * <!-- From EntityInfo + full record -->
+ * <mj-entity-card
+ *     [Entity]="entityInfo"
+ *     [Record]="record.GetAll()"
+ *     Variant="detail"
+ *     [ShowOpenButton]="true"
+ *     (OpenRequested)="onOpen($event)">
+ * </mj-entity-card>
+ * ```
+ *
+ * @selector mj-entity-card
+ */
+export class MJEntityCardComponent {
+    cdr = inject(ChangeDetectorRef);
+    // ================================================================
+    // Data Inputs
+    // ================================================================
+    /**
+     * The entity name (e.g., "Members"). Used to look up `EntityInfo` from
+     * the MJ Metadata cache. Mutually exclusive with `Entity` — if both are
+     * provided, `Entity` takes precedence.
+     */
+    EntityName = null;
+    /**
+     * Pre-resolved EntityInfo object. Takes precedence over `EntityName`.
+     * Use this when you already have the EntityInfo to avoid a redundant lookup.
+     */
+    Entity = null;
+    /**
+     * The record data as a plain key-value object. Works with both full entity
+     * records (`record.GetAll()`) and sparse vector metadata.
+     *
+     * Fields not present in the record are gracefully skipped in the display.
+     */
+    Record = {};
+    /**
+     * Visual variant controlling size, layout, and detail level.
+     * @default 'card'
+     */
+    Variant = 'card';
+    // ================================================================
+    // Customization Inputs
+    // ================================================================
+    /**
+     * Custom card template. When provided, overrides the auto-generated template.
+     * Use `GenerateCardTemplate()` from the types module to build one programmatically.
+     */
+    Template = null;
+    /**
+     * Maximum number of display fields in the card body.
+     * Only applies when using the auto-generated template.
+     * @default 4 for 'card', 2 for 'compact', unlimited for 'detail'
+     */
+    MaxDisplayFields = null;
+    /**
+     * Whether to show the entity icon/avatar.
+     * @default true for 'card', false for 'compact', true for 'detail'
+     */
+    ShowAvatar = null;
+    /**
+     * Whether to show the "Open Record" button.
+     * @default false
+     */
+    ShowOpenButton = false;
+    /**
+     * Whether to show field labels alongside values.
+     * @default true for 'detail', false for 'compact', true for 'card'
+     */
+    ShowFieldLabels = null;
+    /**
+     * CSS class to apply to the outer container for custom styling.
+     */
+    CssClass = '';
+    // ================================================================
+    // Events — BeforeXXX / AfterXXX Pattern
+    // ================================================================
+    /**
+     * Fires before the card is clicked. Set `Cancel = true` to prevent
+     * the `CardClicked` event from firing.
+     */
+    BeforeCardClick = new EventEmitter();
+    /** Fires after the card is clicked (if not canceled). */
+    CardClicked = new EventEmitter();
+    /**
+     * Fires before the "Open Record" button is clicked. Set `Cancel = true`
+     * to prevent the `OpenRequested` event from firing.
+     */
+    BeforeOpen = new EventEmitter();
+    /** Fires when the "Open Record" button is clicked (if not canceled). */
+    OpenRequested = new EventEmitter();
+    // ================================================================
+    // Computed State
+    // ================================================================
+    /** The resolved EntityInfo (from Entity input or EntityName lookup) */
+    ResolvedEntity = null;
+    /** The effective card template (custom or auto-generated) */
+    EffectiveTemplate = null;
+    /** The combined title string */
+    Title = '';
+    /** The entity icon class (from vector metadata or entity info) */
+    EntityIcon = '';
+    /** Resolved entity display name */
+    EntityDisplayName = '';
+    // ================================================================
+    // Lifecycle
+    // ================================================================
+    ngOnChanges(changes) {
+        if (changes['Entity'] || changes['EntityName'] || changes['Record'] || changes['Template'] || changes['Variant']) {
+            this.resolve();
+        }
+    }
+    // ================================================================
+    // Event Handlers
+    // ================================================================
+    /** @internal Handle card click with cancelable before/after pattern */
+    OnCardClick() {
+        const payload = this.BuildEventPayload();
+        const cancelable = { Data: payload, Cancel: false };
+        this.BeforeCardClick.emit(cancelable);
+        if (!cancelable.Cancel) {
+            this.CardClicked.emit(payload);
+        }
+    }
+    /** @internal Handle open button click with cancelable before/after pattern */
+    OnOpenClick(event) {
+        event.stopPropagation();
+        const payload = this.BuildEventPayload();
+        const cancelable = { Data: payload, Cancel: false };
+        this.BeforeOpen.emit(cancelable);
+        if (!cancelable.Cancel) {
+            this.OpenRequested.emit(payload);
+        }
+    }
+    // ================================================================
+    // Display Helpers (used in template)
+    // ================================================================
+    /** Get the resolved display fields, respecting maxFields for variant */
+    get DisplayFields() {
+        if (!this.EffectiveTemplate)
+            return [];
+        const max = this.ResolvedMaxFields;
+        return this.EffectiveTemplate.DisplayFields.slice(0, max);
+    }
+    /** Whether to show the avatar based on variant and input */
+    get ShouldShowAvatar() {
+        if (this.ShowAvatar != null)
+            return this.ShowAvatar;
+        return this.Variant !== 'compact';
+    }
+    /** Whether to show field labels based on variant and input */
+    get ShouldShowLabels() {
+        if (this.ShowFieldLabels != null)
+            return this.ShowFieldLabels;
+        return this.Variant !== 'compact';
+    }
+    /** Get formatted value for a display field */
+    GetFieldValue(field) {
+        const value = this.Record[field.Name];
+        if (value == null || String(value).trim() === '')
+            return '';
+        return this.FormatValue(value, field);
+    }
+    /** Get the label for a field */
+    GetFieldLabel(fieldName) {
+        return this.EffectiveTemplate?.FieldLabels[fieldName] ?? FormatKeyAsLabel(fieldName);
+    }
+    /** Get initials from the title for avatar fallback */
+    get Initials() {
+        if (!this.Title || this.Title === 'Unknown')
+            return '?';
+        const words = this.Title.split(/\s+/).filter(w => w.length > 0);
+        if (words.length === 1)
+            return words[0].substring(0, 2).toUpperCase();
+        return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+    }
+    /** Get a deterministic color for the avatar based on the record */
+    get AvatarColor() {
+        const colors = [
+            'var(--mj-brand-primary)', 'var(--mj-status-success)',
+            'var(--mj-status-warning)', 'var(--mj-status-info)',
+        ];
+        let hash = 0;
+        const key = this.Title + (this.Record['RecordID'] ?? '');
+        for (let i = 0; i < key.length; i++) {
+            hash = key.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    }
+    /** Get the subtitle value */
+    get Subtitle() {
+        if (!this.EffectiveTemplate?.SubtitleField)
+            return '';
+        const v = this.Record[this.EffectiveTemplate.SubtitleField];
+        return v != null ? String(v) : '';
+    }
+    /** Get the description value */
+    get Description() {
+        if (!this.EffectiveTemplate?.DescriptionField)
+            return '';
+        const v = this.Record[this.EffectiveTemplate.DescriptionField];
+        if (v == null)
+            return '';
+        const s = String(v);
+        return s.length > 120 ? s.substring(0, 120) + '...' : s;
+    }
+    /** Check if a thumbnail is available */
+    get HasThumbnail() {
+        if (!this.EffectiveTemplate?.ThumbnailFields)
+            return false;
+        return this.EffectiveTemplate.ThumbnailFields.some(f => {
+            const v = this.Record[f];
+            return v != null && String(v).trim() !== '';
+        });
+    }
+    /** Get the thumbnail URL or icon class */
+    get ThumbnailValue() {
+        if (!this.EffectiveTemplate?.ThumbnailFields)
+            return '';
+        for (const f of this.EffectiveTemplate.ThumbnailFields) {
+            const v = this.Record[f];
+            if (v != null && String(v).trim() !== '')
+                return String(v);
+        }
+        return '';
+    }
+    /** Whether the thumbnail is an image URL */
+    get ThumbnailIsImage() {
+        const v = this.ThumbnailValue;
+        return v.startsWith('http://') || v.startsWith('https://') || v.startsWith('data:image/');
+    }
+    /** Whether the thumbnail is an icon class */
+    get ThumbnailIsIcon() {
+        const v = this.ThumbnailValue.toLowerCase();
+        return v.startsWith('fa-') || v.startsWith('fa ') || v.startsWith('fas ') || v.startsWith('far ');
+    }
+    // ================================================================
+    // Private Methods
+    // ================================================================
+    get ResolvedMaxFields() {
+        if (this.MaxDisplayFields != null)
+            return this.MaxDisplayFields;
+        switch (this.Variant) {
+            case 'compact': return 3;
+            case 'card': return 4;
+            case 'detail': return 999;
+        }
+    }
+    resolve() {
+        this.ResolvedEntity = this.resolveEntity();
+        this.EffectiveTemplate = this.resolveTemplate();
+        this.Title = this.resolveTitle();
+        this.EntityIcon = this.resolveEntityIcon();
+        this.EntityDisplayName = this.resolveEntityDisplayName();
+        this.cdr.markForCheck();
+    }
+    resolveEntity() {
+        if (this.Entity)
+            return this.Entity;
+        if (!this.EntityName)
+            return null;
+        try {
+            const md = new Metadata();
+            return md.Entities.find(e => e.Name === this.EntityName) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    resolveTemplate() {
+        if (this.Template)
+            return this.Template;
+        const entityName = this.Entity?.Name ?? this.EntityName;
+        if (!entityName)
+            return null;
+        const metadataKeys = Object.keys(this.Record);
+        if (this.ResolvedEntity) {
+            const full = GenerateCardTemplate(this.ResolvedEntity, this.ResolvedMaxFields);
+            // Filter to fields present in the record
+            const keySet = new Set(metadataKeys);
+            return {
+                ...full,
+                TitleFields: full.TitleFields.filter(f => keySet.has(f)),
+                DisplayFields: full.DisplayFields.filter(f => keySet.has(f.Name)),
+                SubtitleField: full.SubtitleField && keySet.has(full.SubtitleField) ? full.SubtitleField : null,
+                DescriptionField: full.DescriptionField && keySet.has(full.DescriptionField) ? full.DescriptionField : null,
+                ThumbnailFields: full.ThumbnailFields.filter(f => keySet.has(f)),
+                BadgeField: full.BadgeField && keySet.has(full.BadgeField) ? full.BadgeField : null,
+            };
+        }
+        return GenerateCardTemplateFromMetadata(entityName, metadataKeys, this.ResolvedMaxFields);
+    }
+    resolveTitle() {
+        if (!this.EffectiveTemplate || this.EffectiveTemplate.TitleFields.length === 0) {
+            return String(this.Record['Name'] ?? this.Record['Title'] ?? 'Unknown');
+        }
+        return CombineTitleFields(this.Record, this.EffectiveTemplate.TitleFields);
+    }
+    resolveEntityIcon() {
+        // From vector metadata first
+        const metaIcon = this.Record['EntityIcon'];
+        if (metaIcon && typeof metaIcon === 'string')
+            return metaIcon;
+        // From entity info
+        if (this.ResolvedEntity?.Icon)
+            return this.ResolvedEntity.Icon;
+        return 'fa-solid fa-table';
+    }
+    resolveEntityDisplayName() {
+        const metaEntity = this.Record['Entity'];
+        if (metaEntity && typeof metaEntity === 'string')
+            return metaEntity;
+        return this.ResolvedEntity?.Name ?? this.EntityName ?? '';
+    }
+    FormatValue(value, field) {
+        switch (field.Type) {
+            case 'number': {
+                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 nameLower = field.Name.toLowerCase();
+                if (['amount', 'price', 'cost', 'value', 'revenue', 'total'].some(k => nameLower.includes(k))) {
+                    return `$${num.toLocaleString()}`;
+                }
+                return num.toLocaleString();
+            }
+            case 'boolean':
+                return value ? 'Yes' : 'No';
+            case 'date': {
+                try {
+                    const d = value instanceof Date ? value : new Date(value);
+                    if (isNaN(d.getTime()))
+                        return String(value);
+                    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+                }
+                catch {
+                    return String(value);
+                }
+            }
+            default: {
+                const s = String(value);
+                return s.length > 60 ? s.substring(0, 60) + '...' : s;
+            }
+        }
+    }
+    BuildEventPayload() {
+        return {
+            EntityName: this.EntityDisplayName,
+            Record: this.Record,
+            RecordID: String(this.Record['RecordID'] ?? this.Record['ID'] ?? ''),
+        };
+    }
+    static ɵfac = function MJEntityCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJEntityCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEntityCardComponent, selectors: [["mj-entity-card"]], inputs: { EntityName: "EntityName", Entity: "Entity", Record: "Record", Variant: "Variant", Template: "Template", MaxDisplayFields: "MaxDisplayFields", ShowAvatar: "ShowAvatar", ShowOpenButton: "ShowOpenButton", ShowFieldLabels: "ShowFieldLabels", CssClass: "CssClass" }, outputs: { BeforeCardClick: "BeforeCardClick", CardClicked: "CardClicked", BeforeOpen: "BeforeOpen", OpenRequested: "OpenRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 11, vars: 9, consts: [[1, "mj-entity-card", 3, "click"], [1, "mj-ec-avatar-area"], [1, "mj-ec-content"], [1, "mj-ec-header"], [1, "mj-ec-title"], [1, "mj-ec-entity"], [1, "mj-ec-subtitle"], [1, "mj-ec-description"], [1, "mj-ec-fields", 3, "mj-ec-fields--labeled"], ["title", "Open record", 1, "mj-ec-open-btn"], [1, "mj-ec-thumbnail"], [1, "mj-ec-avatar", 3, "background"], ["alt", "", 3, "src"], [1, "mj-ec-avatar"], [1, "mj-ec-fields"], [1, "mj-ec-field"], [1, "mj-ec-field-label"], [1, "mj-ec-field-value"], ["title", "Open record", 1, "mj-ec-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"]], template: function MJEntityCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵdomListener("click", function MJEntityCardComponent_Template_div_click_0_listener() { return ctx.OnCardClick(); });
+            i0.ɵɵconditionalCreate(1, MJEntityCardComponent_Conditional_1_Template, 5, 1, "div", 1);
+            i0.ɵɵdomElementStart(2, "div", 2)(3, "div", 3)(4, "div", 4);
+            i0.ɵɵtext(5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(6, MJEntityCardComponent_Conditional_6_Template, 2, 1, "div", 5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(7, MJEntityCardComponent_Conditional_7_Template, 2, 1, "div", 6);
+            i0.ɵɵconditionalCreate(8, MJEntityCardComponent_Conditional_8_Template, 2, 1, "div", 7);
+            i0.ɵɵconditionalCreate(9, MJEntityCardComponent_Conditional_9_Template, 3, 2, "div", 8);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(10, MJEntityCardComponent_Conditional_10_Template, 2, 0, "button", 9);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap("mj-entity-card--" + ctx.Variant + " " + ctx.CssClass);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShouldShowAvatar ? 1 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.Title);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.EntityDisplayName && ctx.Variant !== "compact" ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Subtitle && ctx.Variant !== "compact" ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Description && ctx.Variant === "detail" ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.DisplayFields.length > 0 ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowOpenButton ? 10 : -1);
+        } }, styles: ["\n\n\n\n\n.mj-entity-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;\n    position: relative;\n}\n\n.mj-entity-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n\n\n\n.mj-entity-card--compact[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    gap: 8px;\n    border-radius: 6px;\n}\n\n.mj-entity-card--compact[_ngcontent-%COMP%]   .mj-ec-title[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-entity-card--compact[_ngcontent-%COMP%]   .mj-ec-fields[_ngcontent-%COMP%] {\n    gap: 4px;\n}\n\n.mj-entity-card--compact[_ngcontent-%COMP%]   .mj-ec-field-value[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n}\n\n\n\n\n.mj-entity-card--card[_ngcontent-%COMP%] {\n    padding: 14px;\n}\n\n\n\n\n.mj-entity-card--detail[_ngcontent-%COMP%] {\n    padding: 16px;\n    flex-direction: column;\n    gap: 14px;\n    cursor: default;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-avatar-area[_ngcontent-%COMP%] {\n    align-self: flex-start;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-content[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-fields[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-field[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-field[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-field-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.mj-entity-card--detail[_ngcontent-%COMP%]   .mj-ec-field-value[_ngcontent-%COMP%] {\n    text-align: right;\n    word-break: break-word;\n}\n\n\n\n\n.mj-ec-avatar-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.mj-ec-avatar[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-inverse, white);\n    font-size: 0.8rem;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n}\n\n.mj-ec-thumbnail[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.mj-ec-thumbnail[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n\n\n\n.mj-ec-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.mj-ec-header[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n}\n\n.mj-ec-title[_ngcontent-%COMP%] {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.mj-ec-entity[_ngcontent-%COMP%] {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 1px;\n}\n\n.mj-ec-subtitle[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mj-ec-description[_ngcontent-%COMP%] {\n    font-size: 0.82rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.45;\n    margin-bottom: 8px;\n}\n\n\n\n\n.mj-ec-fields[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px 12px;\n    margin-top: 6px;\n}\n\n.mj-ec-fields--labeled[_ngcontent-%COMP%]   .mj-ec-field[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 1px;\n}\n\n.mj-ec-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.mj-ec-field-label[_ngcontent-%COMP%] {\n    font-size: 0.68rem;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.mj-ec-field-value[_ngcontent-%COMP%] {\n    font-size: 0.82rem;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 200px;\n}\n\n\n\n\n.mj-ec-open-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    width: 26px;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    background: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;\n    font-size: 0.75rem;\n}\n\n.mj-entity-card[_ngcontent-%COMP%]:hover   .mj-ec-open-btn[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.mj-ec-open-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEntityCardComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-entity-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-entity-card\"\n     [class]=\"'mj-entity-card--' + Variant + ' ' + CssClass\"\n     (click)=\"OnCardClick()\">\n\n    <!-- Avatar / Thumbnail -->\n    @if (ShouldShowAvatar) {\n        <div class=\"mj-ec-avatar-area\">\n            @if (HasThumbnail && ThumbnailIsImage) {\n                <div class=\"mj-ec-thumbnail\">\n                    <img [src]=\"ThumbnailValue\" alt=\"\" />\n                </div>\n            } @else if (HasThumbnail && ThumbnailIsIcon) {\n                <div class=\"mj-ec-avatar\" [style.background]=\"AvatarColor\">\n                    <i [class]=\"ThumbnailValue\"></i>\n                </div>\n            } @else if (EntityIcon) {\n                <div class=\"mj-ec-avatar\" [style.background]=\"AvatarColor\">\n                    <i [class]=\"EntityIcon\"></i>\n                </div>\n            } @else {\n                <div class=\"mj-ec-avatar\" [style.background]=\"AvatarColor\">\n                    {{ Initials }}\n                </div>\n            }\n        </div>\n    }\n\n    <!-- Content -->\n    <div class=\"mj-ec-content\">\n        <!-- Header: Title + Entity -->\n        <div class=\"mj-ec-header\">\n            <div class=\"mj-ec-title\">{{ Title }}</div>\n            @if (EntityDisplayName && Variant !== 'compact') {\n                <div class=\"mj-ec-entity\">{{ EntityDisplayName }}</div>\n            }\n        </div>\n\n        <!-- Subtitle -->\n        @if (Subtitle && Variant !== 'compact') {\n            <div class=\"mj-ec-subtitle\">{{ Subtitle }}</div>\n        }\n\n        <!-- Description (detail variant only) -->\n        @if (Description && Variant === 'detail') {\n            <div class=\"mj-ec-description\">{{ Description }}</div>\n        }\n\n        <!-- Display Fields -->\n        @if (DisplayFields.length > 0) {\n            <div class=\"mj-ec-fields\" [class.mj-ec-fields--labeled]=\"ShouldShowLabels\">\n                @for (field of DisplayFields; track field.Name) {\n                    @if (GetFieldValue(field); as value) {\n                        <div class=\"mj-ec-field\">\n                            @if (ShouldShowLabels) {\n                                <span class=\"mj-ec-field-label\">{{ field.Label }}</span>\n                            }\n                            <span class=\"mj-ec-field-value\">{{ value }}</span>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n\n    <!-- Open Button -->\n    @if (ShowOpenButton) {\n        <button class=\"mj-ec-open-btn\" (click)=\"OnOpenClick($event)\" title=\"Open record\">\n            <i class=\"fa-solid fa-external-link-alt\"></i>\n        </button>\n    }\n</div>\n", styles: ["/* ================================================================\n   MJ Entity Card \u2014 Design Token Compliant\n   ================================================================ */\n\n.mj-entity-card {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;\n    position: relative;\n}\n\n.mj-entity-card:hover {\n    border-color: var(--mj-border-strong);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n/* \u2500\u2500 Compact variant \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-entity-card--compact {\n    padding: 8px 10px;\n    gap: 8px;\n    border-radius: 6px;\n}\n\n.mj-entity-card--compact .mj-ec-title {\n    font-size: 0.85rem;\n}\n\n.mj-entity-card--compact .mj-ec-fields {\n    gap: 4px;\n}\n\n.mj-entity-card--compact .mj-ec-field-value {\n    font-size: 0.75rem;\n}\n\n/* \u2500\u2500 Card variant (default) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-entity-card--card {\n    padding: 14px;\n}\n\n/* \u2500\u2500 Detail variant \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-entity-card--detail {\n    padding: 16px;\n    flex-direction: column;\n    gap: 14px;\n    cursor: default;\n}\n\n.mj-entity-card--detail .mj-ec-avatar-area {\n    align-self: flex-start;\n}\n\n.mj-entity-card--detail .mj-ec-content {\n    width: 100%;\n}\n\n.mj-entity-card--detail .mj-ec-fields {\n    flex-direction: column;\n    gap: 8px;\n}\n\n.mj-entity-card--detail .mj-ec-field {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 6px 0;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.mj-entity-card--detail .mj-ec-field:last-child {\n    border-bottom: none;\n}\n\n.mj-entity-card--detail .mj-ec-field-label {\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    min-width: 120px;\n    flex-shrink: 0;\n}\n\n.mj-entity-card--detail .mj-ec-field-value {\n    text-align: right;\n    word-break: break-word;\n}\n\n/* \u2500\u2500 Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-ec-avatar-area {\n    flex-shrink: 0;\n}\n\n.mj-ec-avatar {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-inverse, white);\n    font-size: 0.8rem;\n    font-weight: 700;\n    letter-spacing: 0.5px;\n}\n\n.mj-ec-thumbnail {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.mj-ec-thumbnail img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-ec-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.mj-ec-header {\n    margin-bottom: 4px;\n}\n\n.mj-ec-title {\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1.3;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.mj-ec-entity {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 1px;\n}\n\n.mj-ec-subtitle {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-bottom: 6px;\n}\n\n.mj-ec-description {\n    font-size: 0.82rem;\n    color: var(--mj-text-secondary);\n    line-height: 1.45;\n    margin-bottom: 8px;\n}\n\n/* \u2500\u2500 Display Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-ec-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px 12px;\n    margin-top: 6px;\n}\n\n.mj-ec-fields--labeled .mj-ec-field {\n    flex-direction: column;\n    gap: 1px;\n}\n\n.mj-ec-field {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n}\n\n.mj-ec-field-label {\n    font-size: 0.68rem;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.mj-ec-field-value {\n    font-size: 0.82rem;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 200px;\n}\n\n/* \u2500\u2500 Open Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-ec-open-btn {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    width: 26px;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 6px;\n    background: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;\n    font-size: 0.75rem;\n}\n\n.mj-entity-card:hover .mj-ec-open-btn {\n    opacity: 1;\n}\n\n.mj-ec-open-btn:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n"] }]
+    }], null, { EntityName: [{
+            type: Input
+        }], Entity: [{
+            type: Input
+        }], Record: [{
+            type: Input
+        }], Variant: [{
+            type: Input
+        }], Template: [{
+            type: Input
+        }], MaxDisplayFields: [{
+            type: Input
+        }], ShowAvatar: [{
+            type: Input
+        }], ShowOpenButton: [{
+            type: Input
+        }], ShowFieldLabels: [{
+            type: Input
+        }], CssClass: [{
+            type: Input
+        }], BeforeCardClick: [{
+            type: Output
+        }], CardClicked: [{
+            type: Output
+        }], BeforeOpen: [{
+            type: Output
+        }], OpenRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEntityCardComponent, { className: "MJEntityCardComponent", filePath: "lib/entity-card.component.ts", lineNumber: 64 }); })();
+//# sourceMappingURL=entity-card.component.js.map