@memberjunction/ng-entity-viewer 5.39.0 → 5.40.1

package/dist/lib/view-types/renderers/timeline-view-renderer.component.js

@@ -0,0 +1,535 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ViewEncapsulation, inject, } from '@angular/core';
+import { EntityFieldTSType } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { TimelineGroup, } from '@memberjunction/ng-timeline';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-timeline";
+const _forTrack0 = ($index, $item) => $item.Name;
+function TimelineViewRendererComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.SelectedDateFieldDisplayName);
+} }
+function TimelineViewRendererComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 11);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", field_r3.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r3.DisplayNameOrName);
+} }
+function TimelineViewRendererComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "select", 10);
+    i0.ɵɵlistener("change", function TimelineViewRendererComponent_Conditional_4_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetTimelineDateField($event.target.value)); });
+    i0.ɵɵrepeaterCreate(1, TimelineViewRendererComponent_Conditional_4_For_2_Template, 2, 2, "option", 11, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("value", ctx_r0.SelectedTimelineDateField);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.AvailableDateFields);
+} }
+function TimelineViewRendererComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-timeline", 12);
+    i0.ɵɵlistener("afterEventClick", function TimelineViewRendererComponent_Conditional_11_Template_mj_timeline_afterEventClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTimelineEventClick($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("groups", ctx_r0.TimelineGroups)("orientation", ctx_r0.TimelineOrientationState)("layout", ctx_r0.TimelineOrientationState === "vertical" ? "alternating" : "single")("sortOrder", ctx_r0.TimelineSortOrderState)("segmentGrouping", ctx_r0.TimelineSegmentGrouping)("segmentsCollapsible", true)("segmentsDefaultExpanded", true)("selectedEventId", ctx_r0.TimelineSelectedEventID);
+} }
+function TimelineViewRendererComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "i", 13);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "This entity has no date fields to plot on a timeline.");
+    i0.ɵɵelementEnd()();
+} }
+/**
+ * TimelineViewRendererComponent
+ * -----------------------------
+ * The Timeline **view type** as a self-contained {@link IViewRenderer} plug-in. Where the
+ * Timeline view used to be hard-wired into the generic `mj-entity-viewer` host (which owned
+ * the date-field detection, the record→{@link TimelineGroup} transformation, and the
+ * date-field / orientation / sort chrome), this component now OWNS all of it. The host simply
+ * dynamic-mounts this renderer when Timeline is the active view type and feeds it the standard
+ * renderer inputs (`entity` / `records` / `selectedRecordId` / `filterText` / `config`).
+ *
+ * It renders a small chrome header row (date-field selector + orientation toggle + sort toggle)
+ * above a flex-filling `<mj-timeline>`, exactly reproducing the host's previous timeline chrome
+ * and bindings. Because the host only mounts this plug-in when Timeline is active, the chrome
+ * always renders — no extra `EffectiveViewMode === 'timeline'` guard is needed.
+ *
+ * **What was absorbed from the host** (`EntityViewerComponent`): `detectDateFields()`,
+ * `sortDateFieldsByPriority()`, `AvailableDateFields`/`HasDateFields`, `configureTimeline()`,
+ * `updateTimelineGroups()` (+ `findTitleField`/`findDescriptionField`/`findSubtitleField`),
+ * `ToggleTimelineOrientation()`, `ToggleTimelineSortOrder()`, `SetTimelineDateField()`,
+ * `SelectedDateFieldDisplayName`, `OnTimelineEventClick()`, and the `TimelineSelectedEventID`
+ * composite-key→raw-id derivation.
+ *
+ * Inputs use the camelCase names mandated by the {@link IViewRenderer} contract (the host binds
+ * them by those exact names) rather than MJ's usual PascalCase for public members.
+ */
+export class TimelineViewRendererComponent extends BaseAngularComponent {
+    // ========================================
+    // IViewRenderer inputs (camelCase per the host contract)
+    // ========================================
+    _entity = null;
+    /** The entity whose records are being rendered. Re-detects date fields + rebuilds groups on change. */
+    set entity(value) {
+        const changed = !UUIDsEqual(value?.ID, this._entity?.ID);
+        this._entity = value;
+        if (changed) {
+            this.detectDateFields();
+            this.cdr.detectChanges();
+        }
+    }
+    get entity() {
+        return this._entity;
+    }
+    _records = [];
+    /** The records to render (already loaded/filtered by the host). Rebuilds groups on change. */
+    set records(value) {
+        this._records = value ?? [];
+        this.updateTimelineGroups();
+        this.cdr.detectChanges();
+    }
+    get records() {
+        return this._records;
+    }
+    /** Primary-key string of the currently selected record, if any (composite-key encoded). */
+    selectedRecordId = null;
+    /** Active filter text — accepted for contract uniformity; the host pre-filters `records`. */
+    filterText = null;
+    _config = {};
+    /**
+     * This view's persisted configuration. Seeding the chrome controls from it is deferred to
+     * {@link applyConfigToState}, called both here (for late updates) and in {@link ngOnInit}
+     * (for the initial mount, where the host sets `config` via `setInput` before init runs).
+     */
+    set config(value) {
+        this._config = value ?? {};
+        if (this._initialized) {
+            this.applyConfigToState();
+            this.cdr.detectChanges();
+        }
+    }
+    get config() {
+        return this._config;
+    }
+    // ========================================
+    // IViewRenderer outputs
+    // ========================================
+    /** Emitted when a timeline event is clicked — payload is the RAW record object. */
+    recordSelected = new EventEmitter();
+    /** Emitted when a record should be opened — payload is the RAW record object. */
+    recordOpened = new EventEmitter();
+    /** Emitted (with the FULL updated config) whenever the user changes a chrome control. */
+    configChanged = new EventEmitter();
+    // ========================================
+    // RENDER STATE (absorbed from the host)
+    // ========================================
+    /** Whether the current entity has any date fields available for timeline view. */
+    HasDateFields = false;
+    /** Available date fields from the entity, sorted by priority. */
+    AvailableDateFields = [];
+    /** The currently selected date field name for the timeline. */
+    SelectedTimelineDateField = null;
+    /** The built timeline groups handed to `<mj-timeline>`. */
+    TimelineGroups = [];
+    /**
+     * Timeline sort order. Named `…State` (not `TimelineSortOrder`) to avoid colliding with the
+     * imported {@link TimelineSortOrder} type symbol used in the template / signatures.
+     */
+    TimelineSortOrderState = 'desc';
+    /** Timeline segment grouping (day/week/month/...). */
+    TimelineSegmentGrouping = 'month';
+    /**
+     * Timeline orientation. Named `…State` to avoid colliding with the imported
+     * {@link TimelineOrientation} type symbol.
+     */
+    TimelineOrientationState = 'vertical';
+    _initialized = false;
+    cdr = inject(ChangeDetectorRef);
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    ngOnInit() {
+        // The host sets entity/records/config via setInput BEFORE ngOnInit, so detection may have
+        // already run. Apply the seeded config now (controls + defaults), then (re)build groups.
+        this._initialized = true;
+        this.applyConfigToState();
+        this.detectDateFields();
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // COMPUTED
+    // ========================================
+    /** Display name of the currently selected timeline date field. */
+    get SelectedDateFieldDisplayName() {
+        if (!this.SelectedTimelineDateField) {
+            return '';
+        }
+        const field = this.AvailableDateFields.find((f) => f.Name === this.SelectedTimelineDateField);
+        return field?.DisplayNameOrName || this.SelectedTimelineDateField;
+    }
+    /**
+     * The raw ID value derived from {@link selectedRecordId} for timeline selection. The host
+     * passes the selection in composite-key format (`ID|abc-123` or `ID=abc-123`), but the
+     * timeline stores just the raw ID value — so strip the field-name prefix.
+     */
+    get TimelineSelectedEventID() {
+        if (!this.selectedRecordId) {
+            return null;
+        }
+        if (this.selectedRecordId.includes('|')) {
+            const parts = this.selectedRecordId.split('|');
+            return parts.length > 1 ? parts[1] : this.selectedRecordId;
+        }
+        if (this.selectedRecordId.includes('=')) {
+            const parts = this.selectedRecordId.split('=');
+            return parts.length > 1 ? parts[1] : this.selectedRecordId;
+        }
+        return this.selectedRecordId;
+    }
+    // ========================================
+    // CHROME ACTIONS (absorbed from the host)
+    // ========================================
+    /** Toggle timeline orientation between vertical and horizontal, then persist via config. */
+    ToggleTimelineOrientation() {
+        this.TimelineOrientationState = this.TimelineOrientationState === 'vertical' ? 'horizontal' : 'vertical';
+        this.emitConfigChange();
+        this.cdr.detectChanges();
+    }
+    /** Toggle timeline sort order between newest-first (desc) and oldest-first (asc), then persist. */
+    ToggleTimelineSortOrder() {
+        this.TimelineSortOrderState = this.TimelineSortOrderState === 'desc' ? 'asc' : 'desc';
+        this.emitConfigChange();
+        this.cdr.detectChanges();
+    }
+    /** Change the date field used for the timeline, rebuild groups, then persist via config. */
+    SetTimelineDateField(fieldName) {
+        if (this.AvailableDateFields.some((f) => f.Name === fieldName)) {
+            this.SelectedTimelineDateField = fieldName;
+            this.updateTimelineGroups();
+            this.emitConfigChange();
+            this.cdr.detectChanges();
+        }
+    }
+    // ========================================
+    // TIMELINE EVENT → RECORD MAPPING
+    // ========================================
+    /**
+     * Handle a timeline event click. Maps the {@link AfterEventClickArgs} to the underlying raw
+     * record (`event.event.entity`) and emits it on {@link recordSelected}. The host's dynamic
+     * handler builds the composite key from the raw record, so we emit the record object as-is.
+     */
+    OnTimelineEventClick(event) {
+        const record = event.event.entity;
+        if (record) {
+            this.recordSelected.emit(record);
+        }
+    }
+    // ========================================
+    // CONFIG <-> STATE
+    // ========================================
+    /**
+     * Seed the chrome control state from {@link config}, applying sensible defaults where the
+     * config is silent (vertical orientation, descending sort, monthly segments). The selected
+     * date field is resolved against the currently-available date fields in {@link detectDateFields}.
+     */
+    applyConfigToState() {
+        const c = this._config;
+        this.TimelineOrientationState = c.orientation ?? 'vertical';
+        this.TimelineSortOrderState = c.sortOrder ?? 'desc';
+        this.TimelineSegmentGrouping = c.segmentGrouping ?? 'month';
+    }
+    /** Emit the FULL current config object so the host can persist the change. */
+    emitConfigChange() {
+        this._config = {
+            dateFieldName: this.SelectedTimelineDateField ?? undefined,
+            orientation: this.TimelineOrientationState,
+            sortOrder: this.TimelineSortOrderState,
+            segmentGrouping: this.TimelineSegmentGrouping,
+        };
+        this.configChanged.emit(this._config);
+    }
+    // ========================================
+    // DATE-FIELD DETECTION (absorbed from the host)
+    // ========================================
+    /**
+     * Detect the entity's date fields and configure the timeline. Resolves the selected date
+     * field (preferring the configured one, falling back to the highest-priority available field)
+     * and rebuilds the groups. No-ops to an empty state when the entity has no date fields.
+     */
+    detectDateFields() {
+        if (!this._entity) {
+            this.HasDateFields = false;
+            this.AvailableDateFields = [];
+            this.TimelineGroups = [];
+            return;
+        }
+        const dateFields = this._entity.Fields.filter((f) => f.TSType === EntityFieldTSType.Date);
+        if (dateFields.length === 0) {
+            this.HasDateFields = false;
+            this.AvailableDateFields = [];
+            this.TimelineGroups = [];
+            return;
+        }
+        this.AvailableDateFields = this.sortDateFieldsByPriority(dateFields);
+        this.HasDateFields = true;
+        this.SelectedTimelineDateField = this.getEffectiveTimelineDateField();
+        this.updateTimelineGroups();
+    }
+    /**
+     * Sort date fields by priority: `DefaultInView` fields first (by Sequence), then the rest
+     * (by Sequence).
+     */
+    sortDateFieldsByPriority(dateFields) {
+        const defaultInView = dateFields.filter((f) => f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
+        const others = dateFields.filter((f) => !f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);
+        return [...defaultInView, ...others];
+    }
+    /**
+     * Resolve which date field to use: the configured `dateFieldName` when it's still a valid
+     * available field, otherwise the first (highest-priority) available date field.
+     */
+    getEffectiveTimelineDateField() {
+        if (this._config.dateFieldName) {
+            const configField = this.AvailableDateFields.find((f) => f.Name === this._config.dateFieldName);
+            if (configField) {
+                return configField.Name;
+            }
+        }
+        return this.AvailableDateFields[0].Name;
+    }
+    // ========================================
+    // GROUP BUILDING (absorbed from the host)
+    // ========================================
+    /**
+     * Build the single {@link TimelineGroup} for the current entity + records + selected date
+     * field, mirroring the host's previous `updateTimelineGroups()`. No-ops to an empty state
+     * when there is no entity or no selected date field.
+     */
+    updateTimelineGroups() {
+        // Emit NO group until there is an entity, a resolved date field, AND records. Emitting an empty
+        // group (records not loaded yet) makes the inner <mj-timeline> run its first refresh with zero
+        // events and mark itself loaded; the later records-populated update can then be dropped by its
+        // concurrent-refresh / already-loaded guards, leaving "No events to display". Waiting for records
+        // means its first real load happens with data.
+        if (!this._entity || !this.SelectedTimelineDateField || this._records.length === 0) {
+            this.TimelineGroups = [];
+            return;
+        }
+        const titleField = this.findTitleField();
+        const group = new TimelineGroup();
+        group.DataSourceType = 'array';
+        group.EntityObjects = this._records;
+        group.TitleFieldName = titleField;
+        group.DateFieldName = this.SelectedTimelineDateField;
+        group.IdFieldName = 'ID';
+        group.GroupLabel = this._entity.Name;
+        const descField = this.findDescriptionField();
+        if (descField) {
+            group.DescriptionFieldName = descField;
+        }
+        const subtitleField = this.findSubtitleField(titleField);
+        if (subtitleField) {
+            group.SubtitleFieldName = subtitleField;
+        }
+        group.CardConfig = {
+            collapsible: true,
+            defaultExpanded: false,
+            showDate: true,
+            dateFormat: 'MMM d, yyyy h:mm a',
+        };
+        this.TimelineGroups = [group];
+    }
+    /**
+     * Find the best field to use as the event title: the entity's NameField, then a
+     * `DefaultInView` string field matching a common name pattern, then the first string field.
+     */
+    findTitleField() {
+        if (!this._entity) {
+            return 'ID';
+        }
+        if (this._entity.NameField) {
+            return this._entity.NameField.Name;
+        }
+        const stringFields = this._entity.Fields.filter((f) => f.TSType === EntityFieldTSType.String && f.DefaultInView && !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
+        const namePatterns = ['name', 'title', 'subject', 'label'];
+        for (const pattern of namePatterns) {
+            const match = stringFields.find((f) => f.Name.toLowerCase().includes(pattern));
+            if (match) {
+                return match.Name;
+            }
+        }
+        return stringFields.length > 0 ? stringFields[0].Name : 'ID';
+    }
+    /** Find a suitable description field by common naming pattern, or null. */
+    findDescriptionField() {
+        if (!this._entity) {
+            return null;
+        }
+        const descPatterns = ['description', 'notes', 'summary', 'content', 'body', 'details'];
+        const textFields = this._entity.Fields.filter((f) => f.TSType === EntityFieldTSType.String && !f.Name.startsWith('__mj_'));
+        for (const pattern of descPatterns) {
+            const match = textFields.find((f) => f.Name.toLowerCase().includes(pattern));
+            if (match) {
+                return match.Name;
+            }
+        }
+        return null;
+    }
+    /**
+     * Find a suitable subtitle field (different from the title): a `DefaultInView` string field
+     * matching a classification pattern (status/type/category/...), else the first other string
+     * field, else null.
+     */
+    findSubtitleField(excludeField) {
+        if (!this._entity) {
+            return null;
+        }
+        const patterns = ['status', 'type', 'category', 'state', 'priority'];
+        const fields = this._entity.Fields.filter((f) => f.TSType === EntityFieldTSType.String &&
+            f.DefaultInView &&
+            f.Name !== excludeField &&
+            !f.Name.startsWith('__mj_')).sort((a, b) => a.Sequence - b.Sequence);
+        for (const pattern of patterns) {
+            const match = fields.find((f) => f.Name.toLowerCase().includes(pattern));
+            if (match) {
+                return match.Name;
+            }
+        }
+        const firstOther = fields.find((f) => f.Name !== excludeField);
+        return firstOther?.Name || null;
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTimelineViewRendererComponent_BaseFactory; return function TimelineViewRendererComponent_Factory(__ngFactoryType__) { return (ɵTimelineViewRendererComponent_BaseFactory || (ɵTimelineViewRendererComponent_BaseFactory = i0.ɵɵgetInheritedFactory(TimelineViewRendererComponent)))(__ngFactoryType__ || TimelineViewRendererComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimelineViewRendererComponent, selectors: [["mj-timeline-view-renderer"]], inputs: { entity: "entity", records: "records", selectedRecordId: "selectedRecordId", filterText: "filterText", config: "config" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", configChanged: "configChanged" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 8, consts: [[1, "timeline-view-chrome"], [1, "timeline-date-selector"], [1, "fa-solid", "fa-calendar-days"], [1, "date-field-label"], [1, "date-field-select", 3, "value"], [1, "timeline-orientation-toggle"], [1, "toggle-btn", 3, "click", "title"], [1, "timeline-sort-toggle"], [3, "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [1, "timeline-view-empty"], [1, "date-field-select", 3, "change", "value"], [3, "value"], [3, "afterEventClick", "groups", "orientation", "layout", "sortOrder", "segmentGrouping", "segmentsCollapsible", "segmentsDefaultExpanded", "selectedEventId"], [1, "fa-solid", "fa-calendar-xmark"]], template: function TimelineViewRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "i", 2);
+            i0.ɵɵconditionalCreate(3, TimelineViewRendererComponent_Conditional_3_Template, 2, 1, "span", 3)(4, TimelineViewRendererComponent_Conditional_4_Template, 3, 1, "select", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
+            i0.ɵɵlistener("click", function TimelineViewRendererComponent_Template_button_click_6_listener() { return ctx.ToggleTimelineOrientation(); });
+            i0.ɵɵelement(7, "i");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 7)(9, "button", 6);
+            i0.ɵɵlistener("click", function TimelineViewRendererComponent_Template_button_click_9_listener() { return ctx.ToggleTimelineSortOrder(); });
+            i0.ɵɵelement(10, "i");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(11, TimelineViewRendererComponent_Conditional_11_Template, 1, 8, "mj-timeline", 8)(12, TimelineViewRendererComponent_Conditional_12_Template, 4, 0, "div", 9);
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.AvailableDateFields.length === 1 ? 3 : ctx.AvailableDateFields.length > 1 ? 4 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("title", ctx.TimelineOrientationState === "vertical" ? "Switch to Horizontal" : "Switch to Vertical");
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.TimelineOrientationState === "vertical" ? "fa-solid fa-ellipsis-vertical" : "fa-solid fa-ellipsis");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("title", ctx.TimelineSortOrderState === "desc" ? "Showing Newest First (click for Oldest First)" : "Showing Oldest First (click for Newest First)");
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.TimelineSortOrderState === "desc" ? "fa-solid fa-arrow-down-wide-short" : "fa-solid fa-arrow-up-wide-short");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.HasDateFields ? 11 : 12);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i2.TimelineComponent], styles: ["\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .timeline-view-chrome {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 8px 12px;\n        flex: 0 0 auto;\n      }\n\n      .timeline-view-renderer mj-timeline,\n      :host mj-timeline {\n        flex: 1 1 auto;\n        min-height: 0;\n      }\n\n      /* Timeline Date Field Selector */\n      .timeline-date-selector {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 13px;\n        color: var(--mj-text-secondary);\n      }\n\n      .timeline-date-selector i {\n        color: var(--mj-text-disabled);\n      }\n\n      .date-field-label {\n        color: var(--mj-text-secondary);\n        font-weight: 500;\n      }\n\n      .date-field-select {\n        padding: 4px 8px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        font-size: 13px;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-secondary);\n        cursor: pointer;\n        outline: none;\n        transition: border-color 0.15s ease;\n      }\n\n      .date-field-select:hover {\n        border-color: var(--mj-border-strong);\n      }\n\n      .date-field-select:focus {\n        border-color: var(--mj-brand-primary);\n      }\n\n      /* Orientation / Sort toggles */\n      .timeline-orientation-toggle,\n      .timeline-sort-toggle {\n        display: flex;\n        background: var(--mj-bg-surface-card);\n        border-radius: 6px;\n        padding: 2px;\n      }\n\n      .toggle-btn {\n        width: 32px;\n        height: 32px;\n        border: none;\n        background: transparent;\n        border-radius: 4px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--mj-text-muted);\n        transition: all 0.15s ease;\n      }\n\n      .toggle-btn:hover {\n        color: var(--mj-text-secondary);\n      }\n\n      .toggle-btn.active {\n        background: var(--mj-bg-surface);\n        color: var(--mj-brand-primary);\n        box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n      }\n\n      .timeline-view-empty {\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        color: var(--mj-text-muted);\n        padding: 32px;\n        text-align: center;\n      }\n\n      .timeline-view-empty i {\n        font-size: 32px;\n        opacity: 0.6;\n      }\n    "], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineViewRendererComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-timeline-view-renderer', encapsulation: ViewEncapsulation.None, template: `
+    <!-- Chrome row: date-field selector + orientation toggle + sort toggle.
+         Always rendered — this plug-in only mounts when Timeline is the active view. -->
+    <div class="timeline-view-chrome">
+      <!-- Date Field Selector -->
+      <div class="timeline-date-selector">
+        <i class="fa-solid fa-calendar-days"></i>
+        @if (AvailableDateFields.length === 1) {
+          <span class="date-field-label">{{ SelectedDateFieldDisplayName }}</span>
+        } @else if (AvailableDateFields.length > 1) {
+          <select
+            class="date-field-select"
+            [value]="SelectedTimelineDateField"
+            (change)="SetTimelineDateField($any($event.target).value)">
+            @for (field of AvailableDateFields; track field.Name) {
+              <option [value]="field.Name">{{ field.DisplayNameOrName }}</option>
+            }
+          </select>
+        }
+      </div>
+
+      <!-- Orientation Toggle -->
+      <div class="timeline-orientation-toggle">
+        <button
+          class="toggle-btn"
+          (click)="ToggleTimelineOrientation()"
+          [title]="TimelineOrientationState === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'">
+          <i [class]="TimelineOrientationState === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'"></i>
+        </button>
+      </div>
+
+      <!-- Sort Order Toggle -->
+      <div class="timeline-sort-toggle">
+        <button
+          class="toggle-btn"
+          (click)="ToggleTimelineSortOrder()"
+          [title]="TimelineSortOrderState === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'">
+          <i [class]="TimelineSortOrderState === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'"></i>
+        </button>
+      </div>
+    </div>
+
+    @if (HasDateFields) {
+      <mj-timeline
+        [groups]="TimelineGroups"
+        [orientation]="TimelineOrientationState"
+        [layout]="TimelineOrientationState === 'vertical' ? 'alternating' : 'single'"
+        [sortOrder]="TimelineSortOrderState"
+        [segmentGrouping]="TimelineSegmentGrouping"
+        [segmentsCollapsible]="true"
+        [segmentsDefaultExpanded]="true"
+        [selectedEventId]="TimelineSelectedEventID"
+        (afterEventClick)="OnTimelineEventClick($event)">
+      </mj-timeline>
+    } @else {
+      <div class="timeline-view-empty">
+        <i class="fa-solid fa-calendar-xmark"></i>
+        <span>This entity has no date fields to plot on a timeline.</span>
+      </div>
+    }
+  `, styles: ["\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .timeline-view-chrome {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 8px 12px;\n        flex: 0 0 auto;\n      }\n\n      .timeline-view-renderer mj-timeline,\n      :host mj-timeline {\n        flex: 1 1 auto;\n        min-height: 0;\n      }\n\n      /* Timeline Date Field Selector */\n      .timeline-date-selector {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 13px;\n        color: var(--mj-text-secondary);\n      }\n\n      .timeline-date-selector i {\n        color: var(--mj-text-disabled);\n      }\n\n      .date-field-label {\n        color: var(--mj-text-secondary);\n        font-weight: 500;\n      }\n\n      .date-field-select {\n        padding: 4px 8px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        font-size: 13px;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-secondary);\n        cursor: pointer;\n        outline: none;\n        transition: border-color 0.15s ease;\n      }\n\n      .date-field-select:hover {\n        border-color: var(--mj-border-strong);\n      }\n\n      .date-field-select:focus {\n        border-color: var(--mj-brand-primary);\n      }\n\n      /* Orientation / Sort toggles */\n      .timeline-orientation-toggle,\n      .timeline-sort-toggle {\n        display: flex;\n        background: var(--mj-bg-surface-card);\n        border-radius: 6px;\n        padding: 2px;\n      }\n\n      .toggle-btn {\n        width: 32px;\n        height: 32px;\n        border: none;\n        background: transparent;\n        border-radius: 4px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--mj-text-muted);\n        transition: all 0.15s ease;\n      }\n\n      .toggle-btn:hover {\n        color: var(--mj-text-secondary);\n      }\n\n      .toggle-btn.active {\n        background: var(--mj-bg-surface);\n        color: var(--mj-brand-primary);\n        box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n      }\n\n      .timeline-view-empty {\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        color: var(--mj-text-muted);\n        padding: 32px;\n        text-align: center;\n      }\n\n      .timeline-view-empty i {\n        font-size: 32px;\n        opacity: 0.6;\n      }\n    "] }]
+    }], null, { entity: [{
+            type: Input
+        }], records: [{
+            type: Input
+        }], selectedRecordId: [{
+            type: Input
+        }], filterText: [{
+            type: Input
+        }], config: [{
+            type: Input
+        }], recordSelected: [{
+            type: Output
+        }], recordOpened: [{
+            type: Output
+        }], configChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimelineViewRendererComponent, { className: "TimelineViewRendererComponent", filePath: "src/lib/view-types/renderers/timeline-view-renderer.component.ts", lineNumber: 248 }); })();
+/**
+ * Tree-shaking guard. Force-references the component class so bundlers don't drop this module
+ * when it's only mounted dynamically via the view-type descriptor's `RendererComponent`.
+ */
+export function LoadTimelineViewRenderer() {
+    // no-op; presence prevents tree-shaking of the dynamically-mounted renderer
+    void TimelineViewRendererComponent;
+}
+//# sourceMappingURL=timeline-view-renderer.component.js.map

package/dist/lib/view-types/renderers/timeline-view-renderer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-view-renderer.component.js","sourceRoot":"","sources":["../../../../src/lib/view-types/renderers/timeline-view-renderer.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Input,\n  Output,\n  EventEmitter,\n  ChangeDetectorRef,\n  OnInit,\n  ViewEncapsulation,\n  inject,\n} from '@angular/core';\nimport { EntityInfo, EntityFieldInfo, EntityFieldTSType } from '@memberjunction/core';\nimport { UUIDsEqual } from '@memberjunction/global';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport {\n  TimelineGroup,\n  TimeSegmentGrouping,\n  TimelineSortOrder,\n  AfterEventClickArgs,\n} from '@memberjunction/ng-timeline';\nimport { TimelineOrientation } from '../../types';\nimport { IViewRenderer } from '../view-type.contracts';\n\n/**\n * The persisted configuration shape for the Timeline view type.\n *\n * This is the `config` payload the host hands to the renderer on mount and that the\n * renderer emits back (in full) via {@link TimelineViewRendererComponent.configChanged}\n * whenever the user changes any of the timeline chrome controls. The host treats it as an\n * opaque blob — only this renderer (and an eventual prop-sheet) understands its keys — and\n * persists it per `MJ: View Types` row.\n *\n * All fields are optional: on first mount the renderer falls back to sensible defaults\n * (first available date field, vertical orientation, descending sort, monthly segments).\n */\nexport interface TimelineViewConfig {\n  /** The entity date-field used to place records on the timeline (e.g. `__mj_CreatedAt`). */\n  dateFieldName?: string;\n  /** Vertical (alternating) vs. horizontal (single-row) timeline layout. */\n  orientation?: TimelineOrientation;\n  /** Newest-first (`desc`) vs. oldest-first (`asc`) event ordering. */\n  sortOrder?: TimelineSortOrder;\n  /** How events are bucketed into collapsible segments (day/week/month/...). */\n  segmentGrouping?: TimeSegmentGrouping;\n}\n\n/**\n * TimelineViewRendererComponent\n * -----------------------------\n * The Timeline **view type** as a self-contained {@link IViewRenderer} plug-in. Where the\n * Timeline view used to be hard-wired into the generic `mj-entity-viewer` host (which owned\n * the date-field detection, the record→{@link TimelineGroup} transformation, and the\n * date-field / orientation / sort chrome), this component now OWNS all of it. The host simply\n * dynamic-mounts this renderer when Timeline is the active view type and feeds it the standard\n * renderer inputs (`entity` / `records` / `selectedRecordId` / `filterText` / `config`).\n *\n * It renders a small chrome header row (date-field selector + orientation toggle + sort toggle)\n * above a flex-filling `<mj-timeline>`, exactly reproducing the host's previous timeline chrome\n * and bindings. Because the host only mounts this plug-in when Timeline is active, the chrome\n * always renders — no extra `EffectiveViewMode === 'timeline'` guard is needed.\n *\n * **What was absorbed from the host** (`EntityViewerComponent`): `detectDateFields()`,\n * `sortDateFieldsByPriority()`, `AvailableDateFields`/`HasDateFields`, `configureTimeline()`,\n * `updateTimelineGroups()` (+ `findTitleField`/`findDescriptionField`/`findSubtitleField`),\n * `ToggleTimelineOrientation()`, `ToggleTimelineSortOrder()`, `SetTimelineDateField()`,\n * `SelectedDateFieldDisplayName`, `OnTimelineEventClick()`, and the `TimelineSelectedEventID`\n * composite-key→raw-id derivation.\n *\n * Inputs use the camelCase names mandated by the {@link IViewRenderer} contract (the host binds\n * them by those exact names) rather than MJ's usual PascalCase for public members.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-timeline-view-renderer',\n  encapsulation: ViewEncapsulation.None,\n  template: `\n    <!-- Chrome row: date-field selector + orientation toggle + sort toggle.\n         Always rendered — this plug-in only mounts when Timeline is the active view. -->\n    <div class=\"timeline-view-chrome\">\n      <!-- Date Field Selector -->\n      <div class=\"timeline-date-selector\">\n        <i class=\"fa-solid fa-calendar-days\"></i>\n        @if (AvailableDateFields.length === 1) {\n          <span class=\"date-field-label\">{{ SelectedDateFieldDisplayName }}</span>\n        } @else if (AvailableDateFields.length > 1) {\n          <select\n            class=\"date-field-select\"\n            [value]=\"SelectedTimelineDateField\"\n            (change)=\"SetTimelineDateField($any($event.target).value)\">\n            @for (field of AvailableDateFields; track field.Name) {\n              <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n            }\n          </select>\n        }\n      </div>\n\n      <!-- Orientation Toggle -->\n      <div class=\"timeline-orientation-toggle\">\n        <button\n          class=\"toggle-btn\"\n          (click)=\"ToggleTimelineOrientation()\"\n          [title]=\"TimelineOrientationState === 'vertical' ? 'Switch to Horizontal' : 'Switch to Vertical'\">\n          <i [class]=\"TimelineOrientationState === 'vertical' ? 'fa-solid fa-ellipsis-vertical' : 'fa-solid fa-ellipsis'\"></i>\n        </button>\n      </div>\n\n      <!-- Sort Order Toggle -->\n      <div class=\"timeline-sort-toggle\">\n        <button\n          class=\"toggle-btn\"\n          (click)=\"ToggleTimelineSortOrder()\"\n          [title]=\"TimelineSortOrderState === 'desc' ? 'Showing Newest First (click for Oldest First)' : 'Showing Oldest First (click for Newest First)'\">\n          <i [class]=\"TimelineSortOrderState === 'desc' ? 'fa-solid fa-arrow-down-wide-short' : 'fa-solid fa-arrow-up-wide-short'\"></i>\n        </button>\n      </div>\n    </div>\n\n    @if (HasDateFields) {\n      <mj-timeline\n        [groups]=\"TimelineGroups\"\n        [orientation]=\"TimelineOrientationState\"\n        [layout]=\"TimelineOrientationState === 'vertical' ? 'alternating' : 'single'\"\n        [sortOrder]=\"TimelineSortOrderState\"\n        [segmentGrouping]=\"TimelineSegmentGrouping\"\n        [segmentsCollapsible]=\"true\"\n        [segmentsDefaultExpanded]=\"true\"\n        [selectedEventId]=\"TimelineSelectedEventID\"\n        (afterEventClick)=\"OnTimelineEventClick($event)\">\n      </mj-timeline>\n    } @else {\n      <div class=\"timeline-view-empty\">\n        <i class=\"fa-solid fa-calendar-xmark\"></i>\n        <span>This entity has no date fields to plot on a timeline.</span>\n      </div>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .timeline-view-chrome {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 8px 12px;\n        flex: 0 0 auto;\n      }\n\n      .timeline-view-renderer mj-timeline,\n      :host mj-timeline {\n        flex: 1 1 auto;\n        min-height: 0;\n      }\n\n      /* Timeline Date Field Selector */\n      .timeline-date-selector {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 13px;\n        color: var(--mj-text-secondary);\n      }\n\n      .timeline-date-selector i {\n        color: var(--mj-text-disabled);\n      }\n\n      .date-field-label {\n        color: var(--mj-text-secondary);\n        font-weight: 500;\n      }\n\n      .date-field-select {\n        padding: 4px 8px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        font-size: 13px;\n        background: var(--mj-bg-surface);\n        color: var(--mj-text-secondary);\n        cursor: pointer;\n        outline: none;\n        transition: border-color 0.15s ease;\n      }\n\n      .date-field-select:hover {\n        border-color: var(--mj-border-strong);\n      }\n\n      .date-field-select:focus {\n        border-color: var(--mj-brand-primary);\n      }\n\n      /* Orientation / Sort toggles */\n      .timeline-orientation-toggle,\n      .timeline-sort-toggle {\n        display: flex;\n        background: var(--mj-bg-surface-card);\n        border-radius: 6px;\n        padding: 2px;\n      }\n\n      .toggle-btn {\n        width: 32px;\n        height: 32px;\n        border: none;\n        background: transparent;\n        border-radius: 4px;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--mj-text-muted);\n        transition: all 0.15s ease;\n      }\n\n      .toggle-btn:hover {\n        color: var(--mj-text-secondary);\n      }\n\n      .toggle-btn.active {\n        background: var(--mj-bg-surface);\n        color: var(--mj-brand-primary);\n        box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n      }\n\n      .timeline-view-empty {\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        color: var(--mj-text-muted);\n        padding: 32px;\n        text-align: center;\n      }\n\n      .timeline-view-empty i {\n        font-size: 32px;\n        opacity: 0.6;\n      }\n    `,\n  ],\n})\nexport class TimelineViewRendererComponent\n  extends BaseAngularComponent\n  implements IViewRenderer<TimelineViewConfig>, OnInit\n{\n  // ========================================\n  // IViewRenderer inputs (camelCase per the host contract)\n  // ========================================\n\n  private _entity: EntityInfo | null = null;\n  /** The entity whose records are being rendered. Re-detects date fields + rebuilds groups on change. */\n  @Input()\n  set entity(value: EntityInfo | null) {\n    const changed = !UUIDsEqual(value?.ID, this._entity?.ID);\n    this._entity = value;\n    if (changed) {\n      this.detectDateFields();\n      this.cdr.detectChanges();\n    }\n  }\n  get entity(): EntityInfo | null {\n    return this._entity;\n  }\n\n  private _records: Record<string, unknown>[] = [];\n  /** The records to render (already loaded/filtered by the host). Rebuilds groups on change. */\n  @Input()\n  set records(value: Record<string, unknown>[]) {\n    this._records = value ?? [];\n    this.updateTimelineGroups();\n    this.cdr.detectChanges();\n  }\n  get records(): Record<string, unknown>[] {\n    return this._records;\n  }\n\n  /** Primary-key string of the currently selected record, if any (composite-key encoded). */\n  @Input() selectedRecordId: string | null = null;\n\n  /** Active filter text — accepted for contract uniformity; the host pre-filters `records`. */\n  @Input() filterText: string | null = null;\n\n  private _config: TimelineViewConfig = {};\n  /**\n   * This view's persisted configuration. Seeding the chrome controls from it is deferred to\n   * {@link applyConfigToState}, called both here (for late updates) and in {@link ngOnInit}\n   * (for the initial mount, where the host sets `config` via `setInput` before init runs).\n   */\n  @Input()\n  set config(value: TimelineViewConfig) {\n    this._config = value ?? {};\n    if (this._initialized) {\n      this.applyConfigToState();\n      this.cdr.detectChanges();\n    }\n  }\n  get config(): TimelineViewConfig {\n    return this._config;\n  }\n\n  // ========================================\n  // IViewRenderer outputs\n  // ========================================\n\n  /** Emitted when a timeline event is clicked — payload is the RAW record object. */\n  @Output() recordSelected = new EventEmitter<unknown>();\n\n  /** Emitted when a record should be opened — payload is the RAW record object. */\n  @Output() recordOpened = new EventEmitter<unknown>();\n\n  /** Emitted (with the FULL updated config) whenever the user changes a chrome control. */\n  @Output() configChanged = new EventEmitter<TimelineViewConfig>();\n\n  // ========================================\n  // RENDER STATE (absorbed from the host)\n  // ========================================\n\n  /** Whether the current entity has any date fields available for timeline view. */\n  public HasDateFields = false;\n\n  /** Available date fields from the entity, sorted by priority. */\n  public AvailableDateFields: EntityFieldInfo[] = [];\n\n  /** The currently selected date field name for the timeline. */\n  public SelectedTimelineDateField: string | null = null;\n\n  /** The built timeline groups handed to `<mj-timeline>`. */\n  public TimelineGroups: TimelineGroup<Record<string, unknown>>[] = [];\n\n  /**\n   * Timeline sort order. Named `…State` (not `TimelineSortOrder`) to avoid colliding with the\n   * imported {@link TimelineSortOrder} type symbol used in the template / signatures.\n   */\n  public TimelineSortOrderState: TimelineSortOrder = 'desc';\n\n  /** Timeline segment grouping (day/week/month/...). */\n  public TimelineSegmentGrouping: TimeSegmentGrouping = 'month';\n\n  /**\n   * Timeline orientation. Named `…State` to avoid colliding with the imported\n   * {@link TimelineOrientation} type symbol.\n   */\n  public TimelineOrientationState: TimelineOrientation = 'vertical';\n\n  private _initialized = false;\n  private cdr = inject(ChangeDetectorRef);\n\n  // ========================================\n  // LIFECYCLE\n  // ========================================\n\n  ngOnInit(): void {\n    // The host sets entity/records/config via setInput BEFORE ngOnInit, so detection may have\n    // already run. Apply the seeded config now (controls + defaults), then (re)build groups.\n    this._initialized = true;\n    this.applyConfigToState();\n    this.detectDateFields();\n    this.cdr.detectChanges();\n  }\n\n  // ========================================\n  // COMPUTED\n  // ========================================\n\n  /** Display name of the currently selected timeline date field. */\n  get SelectedDateFieldDisplayName(): string {\n    if (!this.SelectedTimelineDateField) {\n      return '';\n    }\n    const field = this.AvailableDateFields.find((f) => f.Name === this.SelectedTimelineDateField);\n    return field?.DisplayNameOrName || this.SelectedTimelineDateField;\n  }\n\n  /**\n   * The raw ID value derived from {@link selectedRecordId} for timeline selection. The host\n   * passes the selection in composite-key format (`ID|abc-123` or `ID=abc-123`), but the\n   * timeline stores just the raw ID value — so strip the field-name prefix.\n   */\n  get TimelineSelectedEventID(): string | null {\n    if (!this.selectedRecordId) {\n      return null;\n    }\n    if (this.selectedRecordId.includes('|')) {\n      const parts = this.selectedRecordId.split('|');\n      return parts.length > 1 ? parts[1] : this.selectedRecordId;\n    }\n    if (this.selectedRecordId.includes('=')) {\n      const parts = this.selectedRecordId.split('=');\n      return parts.length > 1 ? parts[1] : this.selectedRecordId;\n    }\n    return this.selectedRecordId;\n  }\n\n  // ========================================\n  // CHROME ACTIONS (absorbed from the host)\n  // ========================================\n\n  /** Toggle timeline orientation between vertical and horizontal, then persist via config. */\n  ToggleTimelineOrientation(): void {\n    this.TimelineOrientationState = this.TimelineOrientationState === 'vertical' ? 'horizontal' : 'vertical';\n    this.emitConfigChange();\n    this.cdr.detectChanges();\n  }\n\n  /** Toggle timeline sort order between newest-first (desc) and oldest-first (asc), then persist. */\n  ToggleTimelineSortOrder(): void {\n    this.TimelineSortOrderState = this.TimelineSortOrderState === 'desc' ? 'asc' : 'desc';\n    this.emitConfigChange();\n    this.cdr.detectChanges();\n  }\n\n  /** Change the date field used for the timeline, rebuild groups, then persist via config. */\n  SetTimelineDateField(fieldName: string): void {\n    if (this.AvailableDateFields.some((f) => f.Name === fieldName)) {\n      this.SelectedTimelineDateField = fieldName;\n      this.updateTimelineGroups();\n      this.emitConfigChange();\n      this.cdr.detectChanges();\n    }\n  }\n\n  // ========================================\n  // TIMELINE EVENT → RECORD MAPPING\n  // ========================================\n\n  /**\n   * Handle a timeline event click. Maps the {@link AfterEventClickArgs} to the underlying raw\n   * record (`event.event.entity`) and emits it on {@link recordSelected}. The host's dynamic\n   * handler builds the composite key from the raw record, so we emit the record object as-is.\n   */\n  OnTimelineEventClick(event: AfterEventClickArgs): void {\n    const record = event.event.entity as Record<string, unknown> | undefined;\n    if (record) {\n      this.recordSelected.emit(record);\n    }\n  }\n\n  // ========================================\n  // CONFIG <-> STATE\n  // ========================================\n\n  /**\n   * Seed the chrome control state from {@link config}, applying sensible defaults where the\n   * config is silent (vertical orientation, descending sort, monthly segments). The selected\n   * date field is resolved against the currently-available date fields in {@link detectDateFields}.\n   */\n  private applyConfigToState(): void {\n    const c = this._config;\n    this.TimelineOrientationState = c.orientation ?? 'vertical';\n    this.TimelineSortOrderState = c.sortOrder ?? 'desc';\n    this.TimelineSegmentGrouping = c.segmentGrouping ?? 'month';\n  }\n\n  /** Emit the FULL current config object so the host can persist the change. */\n  private emitConfigChange(): void {\n    this._config = {\n      dateFieldName: this.SelectedTimelineDateField ?? undefined,\n      orientation: this.TimelineOrientationState,\n      sortOrder: this.TimelineSortOrderState,\n      segmentGrouping: this.TimelineSegmentGrouping,\n    };\n    this.configChanged.emit(this._config);\n  }\n\n  // ========================================\n  // DATE-FIELD DETECTION (absorbed from the host)\n  // ========================================\n\n  /**\n   * Detect the entity's date fields and configure the timeline. Resolves the selected date\n   * field (preferring the configured one, falling back to the highest-priority available field)\n   * and rebuilds the groups. No-ops to an empty state when the entity has no date fields.\n   */\n  private detectDateFields(): void {\n    if (!this._entity) {\n      this.HasDateFields = false;\n      this.AvailableDateFields = [];\n      this.TimelineGroups = [];\n      return;\n    }\n\n    const dateFields = this._entity.Fields.filter((f) => f.TSType === EntityFieldTSType.Date);\n    if (dateFields.length === 0) {\n      this.HasDateFields = false;\n      this.AvailableDateFields = [];\n      this.TimelineGroups = [];\n      return;\n    }\n\n    this.AvailableDateFields = this.sortDateFieldsByPriority(dateFields);\n    this.HasDateFields = true;\n    this.SelectedTimelineDateField = this.getEffectiveTimelineDateField();\n    this.updateTimelineGroups();\n  }\n\n  /**\n   * Sort date fields by priority: `DefaultInView` fields first (by Sequence), then the rest\n   * (by Sequence).\n   */\n  private sortDateFieldsByPriority(dateFields: EntityFieldInfo[]): EntityFieldInfo[] {\n    const defaultInView = dateFields.filter((f) => f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);\n    const others = dateFields.filter((f) => !f.DefaultInView).sort((a, b) => a.Sequence - b.Sequence);\n    return [...defaultInView, ...others];\n  }\n\n  /**\n   * Resolve which date field to use: the configured `dateFieldName` when it's still a valid\n   * available field, otherwise the first (highest-priority) available date field.\n   */\n  private getEffectiveTimelineDateField(): string {\n    if (this._config.dateFieldName) {\n      const configField = this.AvailableDateFields.find((f) => f.Name === this._config.dateFieldName);\n      if (configField) {\n        return configField.Name;\n      }\n    }\n    return this.AvailableDateFields[0].Name;\n  }\n\n  // ========================================\n  // GROUP BUILDING (absorbed from the host)\n  // ========================================\n\n  /**\n   * Build the single {@link TimelineGroup} for the current entity + records + selected date\n   * field, mirroring the host's previous `updateTimelineGroups()`. No-ops to an empty state\n   * when there is no entity or no selected date field.\n   */\n  private updateTimelineGroups(): void {\n    // Emit NO group until there is an entity, a resolved date field, AND records. Emitting an empty\n    // group (records not loaded yet) makes the inner <mj-timeline> run its first refresh with zero\n    // events and mark itself loaded; the later records-populated update can then be dropped by its\n    // concurrent-refresh / already-loaded guards, leaving \"No events to display\". Waiting for records\n    // means its first real load happens with data.\n    if (!this._entity || !this.SelectedTimelineDateField || this._records.length === 0) {\n      this.TimelineGroups = [];\n      return;\n    }\n\n    const titleField = this.findTitleField();\n\n    const group = new TimelineGroup<Record<string, unknown>>();\n    group.DataSourceType = 'array';\n    group.EntityObjects = this._records;\n    group.TitleFieldName = titleField;\n    group.DateFieldName = this.SelectedTimelineDateField;\n    group.IdFieldName = 'ID';\n    group.GroupLabel = this._entity.Name;\n\n    const descField = this.findDescriptionField();\n    if (descField) {\n      group.DescriptionFieldName = descField;\n    }\n\n    const subtitleField = this.findSubtitleField(titleField);\n    if (subtitleField) {\n      group.SubtitleFieldName = subtitleField;\n    }\n\n    group.CardConfig = {\n      collapsible: true,\n      defaultExpanded: false,\n      showDate: true,\n      dateFormat: 'MMM d, yyyy h:mm a',\n    };\n\n    this.TimelineGroups = [group];\n  }\n\n  /**\n   * Find the best field to use as the event title: the entity's NameField, then a\n   * `DefaultInView` string field matching a common name pattern, then the first string field.\n   */\n  private findTitleField(): string {\n    if (!this._entity) {\n      return 'ID';\n    }\n    if (this._entity.NameField) {\n      return this._entity.NameField.Name;\n    }\n\n    const stringFields = this._entity.Fields.filter(\n      (f) => f.TSType === EntityFieldTSType.String && f.DefaultInView && !f.Name.startsWith('__mj_'),\n    ).sort((a, b) => a.Sequence - b.Sequence);\n\n    const namePatterns = ['name', 'title', 'subject', 'label'];\n    for (const pattern of namePatterns) {\n      const match = stringFields.find((f) => f.Name.toLowerCase().includes(pattern));\n      if (match) {\n        return match.Name;\n      }\n    }\n\n    return stringFields.length > 0 ? stringFields[0].Name : 'ID';\n  }\n\n  /** Find a suitable description field by common naming pattern, or null. */\n  private findDescriptionField(): string | null {\n    if (!this._entity) {\n      return null;\n    }\n    const descPatterns = ['description', 'notes', 'summary', 'content', 'body', 'details'];\n    const textFields = this._entity.Fields.filter(\n      (f) => f.TSType === EntityFieldTSType.String && !f.Name.startsWith('__mj_'),\n    );\n    for (const pattern of descPatterns) {\n      const match = textFields.find((f) => f.Name.toLowerCase().includes(pattern));\n      if (match) {\n        return match.Name;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Find a suitable subtitle field (different from the title): a `DefaultInView` string field\n   * matching a classification pattern (status/type/category/...), else the first other string\n   * field, else null.\n   */\n  private findSubtitleField(excludeField: string): string | null {\n    if (!this._entity) {\n      return null;\n    }\n    const patterns = ['status', 'type', 'category', 'state', 'priority'];\n    const fields = this._entity.Fields.filter(\n      (f) =>\n        f.TSType === EntityFieldTSType.String &&\n        f.DefaultInView &&\n        f.Name !== excludeField &&\n        !f.Name.startsWith('__mj_'),\n    ).sort((a, b) => a.Sequence - b.Sequence);\n\n    for (const pattern of patterns) {\n      const match = fields.find((f) => f.Name.toLowerCase().includes(pattern));\n      if (match) {\n        return match.Name;\n      }\n    }\n\n    const firstOther = fields.find((f) => f.Name !== excludeField);\n    return firstOther?.Name || null;\n  }\n}\n\n/**\n * Tree-shaking guard. Force-references the component class so bundlers don't drop this module\n * when it's only mounted dynamically via the view-type descriptor's `RendererComponent`.\n */\nexport function LoadTimelineViewRenderer(): void {\n  // no-op; presence prevents tree-shaking of the dynamically-mounted renderer\n  void TimelineViewRendererComponent;\n}\n"]}