@memberjunction/ng-entity-viewer 5.43.0 → 5.45.0

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

@@ -10,25 +10,26 @@ import { DEFAULT_VIEWER_CONFIG } from '../types';
 import { ViewTypeEngine } from '../view-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "../recycle-bin/recycle-bin-chip.component";
-import * as i3 from "../view-type-switcher/view-type-switcher.component";
-import * as i4 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "../recycle-bin/recycle-bin-chip.component";
+import * as i4 from "../view-type-switcher/view-type-switcher.component";
+import * as i5 from "@angular/common";
 const _c0 = ["dynamicViewHost"];
 function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵelementStart(0, "button", 18);
     i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearFilter()); });
-    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementEnd();
 } }
 function EntityViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 16);
-    i0.ɵɵelementStart(2, "input", 17);
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "input", 16);
     i0.ɵɵlistener("input", function EntityViewerComponent_Conditional_1_Conditional_1_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnFilterChange($event.target.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 18);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 17);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -59,7 +60,7 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Templat
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.TotalRecordCount), " records");
 } }
 function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelementStart(0, "div", 12);
     i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Template, 4, 6, "span")(2, EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Template, 3, 3, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -69,7 +70,7 @@ function EntityViewerComponent_Conditional_1_Conditional_2_Template(rf, ctx) { i
 } }
 function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-view-type-switcher", 21);
+    i0.ɵɵelementStart(0, "mj-view-type-switcher", 20);
     i0.ɵɵlistener("ViewTypeSelected", function EntityViewerComponent_Conditional_1_Conditional_3_Template_mj_view_type_switcher_ViewTypeSelected_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SelectViewTypeById($event.viewTypeId)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -77,17 +78,17 @@ function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { i
     i0.ɵɵproperty("Provider", ctx_r1.Provider)("Entity", ctx_r1.EffectiveEntity)("ActiveViewTypeID", ctx_r1.ActiveViewTypeId);
 } }
 function EntityViewerComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-recycle-bin-chip", 15);
+    i0.ɵɵelement(0, "mj-recycle-bin-chip", 14);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("EntityName", (ctx_r1.EffectiveEntity == null ? null : ctx_r1.EffectiveEntity.Name) ?? null);
 } }
 function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 12);
-    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 13);
-    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 1, 3, "mj-view-type-switcher", 14);
-    i0.ɵɵconditionalCreate(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 1, 1, "mj-recycle-bin-chip", 15);
+    i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 11);
+    i0.ɵɵconditionalCreate(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 12);
+    i0.ɵɵconditionalCreate(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 1, 3, "mj-view-type-switcher", 13);
+    i0.ɵɵconditionalCreate(4, EntityViewerComponent_Conditional_1_Conditional_4_Template, 1, 1, "mj-recycle-bin-chip", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -100,7 +101,16 @@ function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ShowRecycleBin ? 4 : -1);
 } }
-function EntityViewerComponent_ng_template_16_Template(rf, ctx) { }
+function EntityViewerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 8);
+} }
+function EntityViewerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 9);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Variant", ctx_r1.IsNoRecordsFiltered ? "no-results" : "empty")("Title", ctx_r1.NoRecordsTitle);
+} }
+function EntityViewerComponent_ng_template_10_Template(rf, ctx) { }
 /**
  * EntityViewerComponent - Full-featured composite component for viewing entity data
  *
@@ -394,11 +404,28 @@ export class EntityViewerComponent extends BaseAngularComponent {
             this.deferReload();
         }
     }
+    _gridState = null;
     /**
-     * Grid state configuration from a User View
-     * Controls column visibility, widths, order, and sort settings
+     * Canonical grid state for the current view — the single, framework-wide source of truth for a
+     * view's columns (visibility / order / width / formatting), sort, filter and aggregates. It is
+     * the `UserView.GridState` column, also read by `MJUserViewEntity.Columns`, the GraphQL data
+     * provider's server-side field list, the config panel, and export.
+     *
+     * Any view type that {@link IViewTypeDescriptor.UsesCanonicalGridState} is backed by this store
+     * rather than by an opaque per-view-type blob (see {@link effectiveRendererConfig}). Reactive:
+     * when the host updates this after the renderer is mounted (e.g. the config panel just saved new
+     * columns), we re-push the active renderer's config so the change reflects without a full reload.
      */
-    GridState = null;
+    set GridState(value) {
+        const previous = this._gridState;
+        this._gridState = value;
+        if (this._initialized && value !== previous) {
+            this.refreshCanonicalGridStateRenderer();
+        }
+    }
+    get GridState() {
+        return this._gridState;
+    }
     /**
      * Whether to render the Recycle Bin chip in the viewer header.
      * The chip auto-hides itself when the entity has no deleted records,
@@ -443,6 +470,12 @@ export class EntityViewerComponent extends BaseAngularComponent {
      * the outer app; the container forwards it without acting on it.
      */
     CreateRecordRequested = new EventEmitter();
+    /**
+     * Bubbled up from a plug-in renderer asking the host to open this view's configuration UI
+     * (e.g. the grid's "Manage Columns" affordance). The host (the view workspace) owns the config
+     * panel; the container just forwards the request. See {@link IViewRenderer.configureRequested}.
+     */
+    ConfigureRequested = new EventEmitter();
     /**
      * The initial/active view type to open in, by `MJ: View Types` row ID. Hosts that persist
      * the selection (e.g. Explorer's `UserView.ViewTypeID`) bind this so the viewer opens in the
@@ -616,6 +649,14 @@ export class EntityViewerComponent extends BaseAngularComponent {
         }
         return null;
     }
+    /** Title shown in the "no records" empty state — varies with the active filter. */
+    get NoRecordsTitle() {
+        return this.DebouncedFilterText ? 'No matching records' : 'No records found';
+    }
+    /** True when the "no records" empty state is the result of an active filter. */
+    get IsNoRecordsFiltered() {
+        return !!this.DebouncedFilterText;
+    }
     /**
      * Gets EntityInfo from a ViewEntity with multiple fallback strategies.
      * Priority: 1) ViewEntityInfo property (set by Load)
@@ -1157,6 +1198,118 @@ export class EntityViewerComponent extends BaseAngularComponent {
         }
     }
     // ========================================
+    // PROGRAMMATIC GRID CONTROL (agent / external driver)
+    // ========================================
+    // These thin, public methods expose the same pagination/sort the user drives
+    // interactively so an external driver (e.g. the AI agent, via the dashboard's
+    // ViewWorkspace passthrough) can page and sort the grid. They are no-ops when
+    // records are externally supplied (no internal RunView to retrigger).
+    /** Current (1-based) page number the grid is showing. Internally stored 0-based. */
+    get CurrentPageNumber() {
+        return this.Pagination.currentPage + 1;
+    }
+    /** Number of records loaded per page. */
+    get CurrentPageSize() {
+        return this.Pagination.pageSize;
+    }
+    /** Total records available for the current entity/view/filter (from the server). */
+    get TotalRecords() {
+        return this.Pagination.totalRecords;
+    }
+    /** The grid's active sort state, or null when unsorted. */
+    get CurrentSortState() {
+        return this.InternalSortState;
+    }
+    /**
+     * Navigate to a specific (1-based) page. Clamps to the valid range. Returns the
+     * page actually navigated to, or null when paging isn't applicable (externally
+     * supplied records).
+     */
+    GoToPageNumber(pageNumber) {
+        if (this._records) {
+            return null;
+        }
+        const totalPages = this.TotalPageCount;
+        const clamped = Math.min(Math.max(1, Math.floor(pageNumber)), Math.max(1, totalPages));
+        this.OnPageChange({ PageNumber: clamped, PageSize: this.Pagination.pageSize });
+        return clamped;
+    }
+    /** Total page count derived from total records and page size (min 1). */
+    get TotalPageCount() {
+        const size = this.Pagination.pageSize;
+        if (size <= 0 || this.Pagination.totalRecords <= 0) {
+            return 1;
+        }
+        return Math.ceil(this.Pagination.totalRecords / size);
+    }
+    /** Advance to the next page (no-op past the last page). Returns the new 1-based page or null. */
+    NextPage() {
+        return this.GoToPageNumber(this.CurrentPageNumber + 1);
+    }
+    /** Go to the previous page (no-op before the first page). Returns the new 1-based page or null. */
+    PreviousPage() {
+        return this.GoToPageNumber(this.CurrentPageNumber - 1);
+    }
+    /**
+     * Set the server-side page size and reload from page 1. Returns the size applied,
+     * or null when paging isn't applicable (externally supplied records).
+     */
+    SetServerPageSize(pageSize) {
+        if (this._records || !Number.isFinite(pageSize) || pageSize <= 0) {
+            return null;
+        }
+        const size = Math.floor(pageSize);
+        this.Pagination.pageSize = size;
+        this.OnPageChange({ PageNumber: 1, PageSize: size });
+        return size;
+    }
+    /**
+     * Apply a server-side sort by field + direction and reload. Returns true when the
+     * sort was applied, false when sorting isn't applicable (externally supplied records).
+     */
+    ApplySort(field, direction) {
+        if (this._records) {
+            return false;
+        }
+        // Drive through the public SortState input so the reload logic stays in one place.
+        this.SortState = { field, direction };
+        return true;
+    }
+    /**
+     * Programmatically select a record — the no-UI equivalent of a user row-click. Highlights
+     * the row (by pushing {@link SelectedRecordID} down to the active renderer) AND emits
+     * {@link RecordSelected} so the host runs its selection path (open the detail panel, etc.).
+     * Returns false when there's no entity context. This is the entry point for an external
+     * driver (the AI agent's SelectRecord tool); the record must be one of the loaded rows.
+     *
+     * @param record - a record from the currently-loaded set
+     * @returns true when selection was applied, false when no entity context is available
+     */
+    SelectRecord(record) {
+        const entity = this.EffectiveEntity;
+        if (!entity || !record) {
+            return false;
+        }
+        const compositeKey = buildCompositeKey(record, entity);
+        // Drive the highlight through the same input the user-click path uses.
+        this.SelectedRecordID = compositeKey.ToConcatenatedString();
+        this.RecordSelected.emit({ record, entity, compositeKey });
+        return true;
+    }
+    /**
+     * Export the current view's records via the active renderer's optional imperative export
+     * ({@link IViewRenderer.exportRecords}). Returns false when no renderer is mounted or the
+     * active view type doesn't support export (e.g. timeline/map). The grid renderer downloads
+     * the file itself; this is the no-UI entry point for an external driver (the AI agent).
+     */
+    async ExportRecords(format) {
+        const renderer = this.dynamicRendererRef?.instance;
+        if (!renderer || typeof renderer.exportRecords !== 'function') {
+            return false;
+        }
+        return renderer.exportRecords(format);
+    }
+    // ========================================
     // VIEW MODE
     // ========================================
     /**
@@ -1520,6 +1673,9 @@ export class EntityViewerComponent extends BaseAngularComponent {
         inst.dataRequest
             ?.pipe(takeUntil(this.destroy$))
             .subscribe((req) => this.onDynamicDataRequest(req));
+        inst.configureRequested
+            ?.pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.ConfigureRequested.emit());
         const created = { ref, inputs };
         this.dynamicRendererCache.set(option.viewTypeId, created);
         return created;
@@ -1572,12 +1728,90 @@ export class EntityViewerComponent extends BaseAngularComponent {
         this.setDynamicInput(ref, 'records', this.FilteredRecords);
         this.setDynamicInput(ref, 'selectedRecordId', this.SelectedRecordID);
         this.setDynamicInput(ref, 'filterText', this.DebouncedFilterText);
-        this.setDynamicInput(ref, 'config', this.viewTypeConfigById.get(option.viewTypeId) ?? {});
+        this.setDynamicInput(ref, 'config', this.effectiveRendererConfig(option));
         this.setDynamicInput(ref, 'totalRecordCount', this.TotalRecordCount);
         this.setDynamicInput(ref, 'page', this.Pagination.currentPage + 1);
         this.setDynamicInput(ref, 'pageSize', this.Pagination.pageSize);
         this.setDynamicInput(ref, 'isLoading', this.IsLoading);
     }
+    // ========================================
+    // CANONICAL GRID-STATE BRIDGE
+    // (keeps view types that render the view's columns reading/writing the one source of truth —
+    //  UserView.GridState — instead of a divergent per-view-type copy in DisplayState.viewTypeConfigs)
+    // ========================================
+    /**
+     * The config object pushed to {@link option}'s renderer. For a view type that
+     * {@link IViewTypeDescriptor.UsesCanonicalGridState}, its `gridState` is backed by the canonical
+     * store ({@link GridState}) so the grid renders the same columns the config panel, the server
+     * query, and export use — rather than the opaque per-view-type blob. All other view types get
+     * their per-view-type config verbatim.
+     */
+    effectiveRendererConfig(option) {
+        const base = this.viewTypeConfigById.get(option.viewTypeId) ?? {};
+        if (!option.descriptor.UsesCanonicalGridState) {
+            return base;
+        }
+        const gridState = this.resolveCanonicalGridState(base);
+        return gridState ? { ...base, gridState } : base;
+    }
+    /**
+     * Resolve the grid state a canonical view type should render, preferring the canonical store: the
+     * explicit {@link GridState} input (hosts that own persistence, e.g. the view workspace, feed it),
+     * else the loaded `UserView` record's GridState column (hosts that pass only `[viewEntity]`, e.g.
+     * Explorer's view-resource). Falls back to any columns the per-view-type blob carried — a one-time
+     * migration for views whose in-grid column edits landed in `DisplayState.viewTypeConfigs` before
+     * this bridge existed; once such a view is re-saved, its columns persist to the canonical store.
+     */
+    resolveCanonicalGridState(base) {
+        const canonical = this._gridState ?? this.viewRecordGridState();
+        if (canonical?.columnSettings?.length) {
+            return canonical;
+        }
+        const fromBlob = base['gridState'];
+        if (fromBlob?.columnSettings?.length) {
+            return fromBlob;
+        }
+        // Neither has columns — return canonical (may still carry sort/aggregates) or nothing.
+        return canonical ?? null;
+    }
+    /**
+     * The canonical grid state off the loaded `UserView` record's GridState column, surfaced as a
+     * {@link ViewGridState}. `GridStateObject` (`MJUserViewEntity_IGridState`) and `ViewGridState`
+     * share the same persisted shape — the grid and config panel treat them interchangeably.
+     */
+    viewRecordGridState() {
+        const obj = this._viewEntity?.GridStateObject;
+        return obj ? obj : null;
+    }
+    /**
+     * Re-push the active renderer's config when the canonical {@link GridState} changes after mount
+     * (e.g. the config panel saved new columns). No-op unless a renderer is mounted and the active
+     * view type uses the canonical grid state — so non-grid view types and the pre-mount phase are
+     * unaffected. Pushing a fresh `config` object reference triggers the renderer's input-change path.
+     */
+    refreshCanonicalGridStateRenderer() {
+        const ref = this.dynamicRendererRef;
+        const option = this.ActiveDynamicOption;
+        if (!ref || !option?.descriptor.UsesCanonicalGridState) {
+            return;
+        }
+        this.setDynamicInput(ref, 'config', this.effectiveRendererConfig(option));
+        ref.changeDetectorRef.detectChanges();
+    }
+    /**
+     * Persist a canonical grid-state change to the loaded `UserView` record's GridState column — the
+     * same canonical store the config panel writes to. Only the record target reaches here (the
+     * per-user default-view case is handled by the existing user-settings persistence). Logs (does
+     * not throw) on failure, mirroring {@link saveViewEntity}.
+     */
+    async persistCanonicalGridState(gridState) {
+        const ve = this._viewEntity;
+        if (!gridState || !ve?.ID) {
+            return;
+        }
+        ve.GridStateObject = gridState;
+        await this.saveViewEntity(ve);
+    }
     /**
      * Guarded `setInput`: lean plug-ins implement only the core contract, so we only set an input the
      * mounted plug-in actually declares (per {@link dynamicInputNames}, captured at mount via
@@ -1610,6 +1844,25 @@ export class EntityViewerComponent extends BaseAngularComponent {
             return;
         }
         this.viewTypeConfigById.set(viewTypeId, config);
+        // For a canonical-grid-state view type (e.g. the grid), the columns/sort the renderer just
+        // changed belong in the canonical `UserView.GridState` store — the same place the config panel,
+        // the server-side field list, and export read. Mirror it into the input so re-pushes/reads stay
+        // fresh, and (for a saved view record) persist to the GridState column instead of the opaque
+        // per-view-type blob. The per-user default-view case has no record, so it keeps the existing
+        // user-settings persistence (which already captures the full config including gridState).
+        const usesCanonicalGridState = this.AvailableViewTypes.find(o => o.viewTypeId === viewTypeId)
+            ?.descriptor.UsesCanonicalGridState === true;
+        if (usesCanonicalGridState) {
+            const newGridState = config['gridState'];
+            if (newGridState) {
+                this._gridState = newGridState;
+            }
+            if (this.AutoSaveView && this.persistenceTarget() === 'record') {
+                void this.persistCanonicalGridState(newGridState);
+                this.AfterViewTypeConfigChange.emit({ ViewTypeID: viewTypeId, Config: config, Cancel: false });
+                return;
+            }
+        }
         if (this.AutoSaveView) {
             void this.persistViewTypeConfig(viewTypeId);
         }
@@ -1684,7 +1937,7 @@ export class EntityViewerComponent extends BaseAngularComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dynamicViewHost = _t.first);
-        } }, hostAttrs: [2, "display", "block", "height", "100%"], inputs: { Entity: "Entity", EntityName: "EntityName", EntityID: "EntityID", ViewID: "ViewID", Records: "Records", Config: "Config", SelectedRecordID: "SelectedRecordID", FilterText: "FilterText", SortState: "SortState", ViewEntity: "ViewEntity", GridState: "GridState", ShowRecycleBin: "ShowRecycleBin", ViewTypeID: "ViewTypeID", ViewTypeConfigs: "ViewTypeConfigs", AutoSaveView: "AutoSaveView" }, outputs: { RecordSelected: "RecordSelected", RecordOpened: "RecordOpened", DataLoaded: "DataLoaded", FilterTextChange: "FilterTextChange", FilteredCountChanged: "FilteredCountChanged", OpenRelatedRecordRequested: "OpenRelatedRecordRequested", CreateRecordRequested: "CreateRecordRequested", BeforeViewTypeChange: "BeforeViewTypeChange", AfterViewTypeChange: "AfterViewTypeChange", BeforeViewTypeConfigChange: "BeforeViewTypeConfigChange", AfterViewTypeConfigChange: "AfterViewTypeConfigChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 11, consts: [["dynamicViewHost", ""], [1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container", 3, "hidden"], ["size", "medium", 3, "text"], [1, "loading-overlay", 3, "hidden"], ["size", "small", 3, "text"], [1, "empty-state", 3, "hidden"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [1, "dynamic-view-host", 3, "hidden"], [1, "filter-container"], [1, "record-count"], [3, "Provider", "Entity", "ActiveViewTypeID"], [3, "EntityName"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "ViewTypeSelected", "Provider", "Entity", "ActiveViewTypeID"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [2, "display", "block", "height", "100%"], inputs: { Entity: "Entity", EntityName: "EntityName", EntityID: "EntityID", ViewID: "ViewID", Records: "Records", Config: "Config", SelectedRecordID: "SelectedRecordID", FilterText: "FilterText", SortState: "SortState", ViewEntity: "ViewEntity", GridState: "GridState", ShowRecycleBin: "ShowRecycleBin", ViewTypeID: "ViewTypeID", ViewTypeConfigs: "ViewTypeConfigs", AutoSaveView: "AutoSaveView" }, outputs: { RecordSelected: "RecordSelected", RecordOpened: "RecordOpened", DataLoaded: "DataLoaded", FilterTextChange: "FilterTextChange", FilteredCountChanged: "FilteredCountChanged", OpenRelatedRecordRequested: "OpenRelatedRecordRequested", CreateRecordRequested: "CreateRecordRequested", ConfigureRequested: "ConfigureRequested", BeforeViewTypeChange: "BeforeViewTypeChange", AfterViewTypeChange: "AfterViewTypeChange", BeforeViewTypeConfigChange: "BeforeViewTypeConfigChange", AfterViewTypeConfigChange: "AfterViewTypeConfigChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 10, consts: [["dynamicViewHost", ""], [1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container", 3, "hidden"], ["size", "medium", 3, "text"], [1, "loading-overlay", 3, "hidden"], ["size", "small", 3, "text"], ["Icon", "fa-solid fa-database", "Title", "Select an entity to view records", 1, "empty-state-fill"], [1, "empty-state-fill", 3, "Variant", "Title"], [1, "dynamic-view-host", 3, "hidden"], [1, "filter-container"], [1, "record-count"], [3, "Provider", "Entity", "ActiveViewTypeID"], [3, "EntityName"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", 1, "filter-input", 3, "input", "placeholder", "value"], ["title", "Clear filter", 1, "clear-filter-btn"], ["title", "Clear filter", 1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "ViewTypeSelected", "Provider", "Entity", "ActiveViewTypeID"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵconditionalCreate(1, EntityViewerComponent_Conditional_1_Template, 5, 4, "div", 2);
             i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
@@ -1693,18 +1946,10 @@ export class EntityViewerComponent extends BaseAngularComponent {
             i0.ɵɵelementStart(5, "div", 6);
             i0.ɵɵelement(6, "mj-loading", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 8);
-            i0.ɵɵelement(8, "i", 9);
-            i0.ɵɵelementStart(9, "p");
-            i0.ɵɵtext(10, "Select an entity to view records");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 8);
-            i0.ɵɵelement(12, "i", 10);
-            i0.ɵɵelementStart(13, "p");
-            i0.ɵɵtext(14);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(15, "div", 11);
-            i0.ɵɵtemplate(16, EntityViewerComponent_ng_template_16_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(7, EntityViewerComponent_Conditional_7_Template, 1, 0, "mj-empty-state", 8);
+            i0.ɵɵconditionalCreate(8, EntityViewerComponent_Conditional_8_Template, 1, 2, "mj-empty-state", 9);
+            i0.ɵɵelementStart(9, "div", 10);
+            i0.ɵɵtemplate(10, EntityViewerComponent_ng_template_10_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵstyleProp("height", ctx.EffectiveConfig.height);
@@ -1719,20 +1964,18 @@ export class EntityViewerComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("text", ctx.LoadingMessage);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("hidden", !!ctx.EffectiveEntity);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("hidden", !ctx.EffectiveEntity || ctx.FilteredRecords.length > 0 || ctx.IsLoading || ctx.IsDynamicViewActive);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.DebouncedFilterText ? "No matching records" : "No records found");
+            i0.ɵɵconditional(!ctx.EffectiveEntity ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.EffectiveEntity && ctx.FilteredRecords.length === 0 && !ctx.IsLoading && !ctx.IsDynamicViewActive ? 8 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("hidden", !ctx.EffectiveEntity);
-        } }, dependencies: [i1.LoadingComponent, i2.RecycleBinChipComponent, i3.ViewTypeSwitcherComponent, i4.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.view-type-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger[_ngcontent-%COMP%] {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n}\n\n\n\n.dynamic-view-host[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[hidden][_ngcontent-%COMP%], \n.loading-overlay[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n.dynamic-view-host[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}"] });
+        } }, dependencies: [i1.LoadingComponent, i2.MJEmptyStateComponent, i3.RecycleBinChipComponent, i4.ViewTypeSwitcherComponent, i5.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n\n\n.viewer-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n\n\n.filter-container[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: var(--mj-bg-surface-card);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.view-type-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger[_ngcontent-%COMP%] {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n}\n\n\n\n.dynamic-view-host[_ngcontent-%COMP%] {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\n.loading-container[hidden][_ngcontent-%COMP%], \n.loading-overlay[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}\n\n\n\n.empty-state-fill[_ngcontent-%COMP%] {\n  height: 100%;\n}\n\n\n\n.dynamic-view-host[hidden][_ngcontent-%COMP%] {\n  display: none !important;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-entity-viewer', host: {
                     'style': 'display: block; height: 100%;'
-                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"EffectiveConfig.height\">\n  <!-- Header -->\n  @if (EffectiveConfig.showFilter || EffectiveConfig.showViewModeToggle || EffectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (EffectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"EffectiveConfig.filterPlaceholder\"\n            [value]=\"EffectiveFilterText\"\n            (input)=\"OnFilterChange($any($event.target).value)\"\n          />\n          @if (EffectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"ClearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (EffectiveConfig.showRecordCount && EffectiveEntity) {\n        <div class=\"record-count\">\n          @if (FilteredRecordCount !== TotalRecordCount) {\n            <span>{{ FilteredRecordCount | number }} of {{ TotalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ TotalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Type Toggle \u2014 the reusable switcher, driven entirely by the MJ: View Types\n           registry (ViewTypeEngine). The available types and their icons come from metadata\n           (ViewType.Icon), filtered by each descriptor's availability predicate. Selecting routes\n           back through SelectViewTypeById, which mounts the chosen descriptor's RendererComponent\n           into #dynamicViewHost. The container has zero knowledge of any view type's chrome. -->\n      @if (EffectiveConfig.showViewModeToggle) {\n        <mj-view-type-switcher\n          [Provider]=\"Provider\"\n          [Entity]=\"EffectiveEntity\"\n          [ActiveViewTypeID]=\"ActiveViewTypeId\"\n          (ViewTypeSelected)=\"SelectViewTypeById($event.viewTypeId)\">\n        </mj-view-type-switcher>\n      }\n\n      <!-- Recycle Bin chip (auto-hides when entity has no deleted records, no tracking,\n           or user lacks Delete permission) -->\n      @if (ShowRecycleBin) {\n        <mj-recycle-bin-chip [EntityName]=\"EffectiveEntity?.Name ?? null\"></mj-recycle-bin-chip>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    <!-- Loading container - full page when no data exists -->\n    <div class=\"loading-container\" [hidden]=\"!(IsLoading && FilteredRecords.length === 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Loading overlay - shown on top of content when loading with existing data -->\n    <div class=\"loading-overlay\" [hidden]=\"!(IsLoading && FilteredRecords.length > 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"small\"></mj-loading>\n    </div>\n\n    <!-- Empty state: no entity selected -->\n    <div class=\"empty-state\" [hidden]=\"!!EffectiveEntity\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Select an entity to view records</p>\n    </div>\n\n    <!-- Empty state: no records found. Suppressed while a plug-in is active \u2014 every plug-in renders\n         its own empty/loading state, so the container never shows a generic \"no records\" over it. -->\n    <div class=\"empty-state\" [hidden]=\"!EffectiveEntity || FilteredRecords.length > 0 || IsLoading || IsDynamicViewActive\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <p>{{ DebouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n    </div>\n\n    <!-- Plug-in (dynamic) view renderer host \u2014 the ONLY render path. The active descriptor's\n         RendererComponent is created into #dynamicViewHost via ViewContainerRef and fed the generic\n         IViewRenderer contract. Shown whenever there's an entity; the plug-in owns all its chrome. -->\n    <div class=\"dynamic-view-host\" [hidden]=\"!EffectiveEntity\">\n      <ng-template #dynamicViewHost></ng-template>\n    </div>\n  </div>\n\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-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 rgba(0, 0, 0, 0.1);\n}\n\n/* Compact view-type dropdown \u2014 used when there are more view types than the strip threshold */\n.view-type-dropdown {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item i {\n  width: 16px;\n  text-align: center;\n}\n\n/* Host for dynamically-mounted plug-in view renderers (Cluster, third-party) */\n.dynamic-view-host {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State - full-page centered loading for initial load when no data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay - semi-transparent overlay on top of existing content during refresh */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Ensure [hidden] attribute works properly on loading elements */\n.loading-container[hidden],\n.loading-overlay[hidden] {\n  display: none !important;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--mj-text-disabled);\n  text-align: center;\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Hide the dynamic host when no plug-in is mounted (no entity) */\n.dynamic-view-host[hidden] {\n  display: none !important;\n}\n"] }]
+                }, template: "<div class=\"entity-viewer-container\" [style.height]=\"EffectiveConfig.height\">\n  <!-- Header -->\n  @if (EffectiveConfig.showFilter || EffectiveConfig.showViewModeToggle || EffectiveConfig.showRecordCount) {\n    <div class=\"viewer-header\">\n      <!-- Filter Input -->\n      @if (EffectiveConfig.showFilter) {\n        <div class=\"filter-container\">\n          <i class=\"fa-solid fa-search filter-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"EffectiveConfig.filterPlaceholder\"\n            [value]=\"EffectiveFilterText\"\n            (input)=\"OnFilterChange($any($event.target).value)\"\n          />\n          @if (EffectiveFilterText) {\n            <button class=\"clear-filter-btn\" (click)=\"ClearFilter()\" title=\"Clear filter\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Record Count -->\n      @if (EffectiveConfig.showRecordCount && EffectiveEntity) {\n        <div class=\"record-count\">\n          @if (FilteredRecordCount !== TotalRecordCount) {\n            <span>{{ FilteredRecordCount | number }} of {{ TotalRecordCount | number }} records</span>\n          } @else {\n            <span>{{ TotalRecordCount | number }} records</span>\n          }\n        </div>\n      }\n\n      <!-- View Type Toggle \u2014 the reusable switcher, driven entirely by the MJ: View Types\n           registry (ViewTypeEngine). The available types and their icons come from metadata\n           (ViewType.Icon), filtered by each descriptor's availability predicate. Selecting routes\n           back through SelectViewTypeById, which mounts the chosen descriptor's RendererComponent\n           into #dynamicViewHost. The container has zero knowledge of any view type's chrome. -->\n      @if (EffectiveConfig.showViewModeToggle) {\n        <mj-view-type-switcher\n          [Provider]=\"Provider\"\n          [Entity]=\"EffectiveEntity\"\n          [ActiveViewTypeID]=\"ActiveViewTypeId\"\n          (ViewTypeSelected)=\"SelectViewTypeById($event.viewTypeId)\">\n        </mj-view-type-switcher>\n      }\n\n      <!-- Recycle Bin chip (auto-hides when entity has no deleted records, no tracking,\n           or user lacks Delete permission) -->\n      @if (ShowRecycleBin) {\n        <mj-recycle-bin-chip [EntityName]=\"EffectiveEntity?.Name ?? null\"></mj-recycle-bin-chip>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    <!-- Loading container - full page when no data exists -->\n    <div class=\"loading-container\" [hidden]=\"!(IsLoading && FilteredRecords.length === 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"medium\"></mj-loading>\n    </div>\n\n    <!-- Loading overlay - shown on top of content when loading with existing data -->\n    <div class=\"loading-overlay\" [hidden]=\"!(IsLoading && FilteredRecords.length > 0)\">\n      <mj-loading [text]=\"LoadingMessage\" size=\"small\"></mj-loading>\n    </div>\n\n    <!-- Empty state: no entity selected -->\n    @if (!EffectiveEntity) {\n      <mj-empty-state\n        class=\"empty-state-fill\"\n        Icon=\"fa-solid fa-database\"\n        Title=\"Select an entity to view records\" />\n    }\n\n    <!-- Empty state: no records found. Suppressed while a plug-in is active \u2014 every plug-in renders\n         its own empty/loading state, so the container never shows a generic \"no records\" over it. -->\n    @if (EffectiveEntity && FilteredRecords.length === 0 && !IsLoading && !IsDynamicViewActive) {\n      <mj-empty-state\n        class=\"empty-state-fill\"\n        [Variant]=\"IsNoRecordsFiltered ? 'no-results' : 'empty'\"\n        [Title]=\"NoRecordsTitle\" />\n    }\n\n    <!-- Plug-in (dynamic) view renderer host \u2014 the ONLY render path. The active descriptor's\n         RendererComponent is created into #dynamicViewHost via ViewContainerRef and fed the generic\n         IViewRenderer contract. Shown whenever there's an entity; the plug-in owns all its chrome. -->\n    <div class=\"dynamic-view-host\" [hidden]=\"!EffectiveEntity\">\n      <ng-template #dynamicViewHost></ng-template>\n    </div>\n  </div>\n\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n/* Filter */\n.filter-container {\n  flex: 1;\n  max-width: 400px;\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.filter-icon {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.filter-input {\n  width: 100%;\n  padding: 8px 36px 8px 36px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.filter-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.filter-input::placeholder {\n  color: var(--mj-text-disabled);\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-disabled);\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-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 rgba(0, 0, 0, 0.1);\n}\n\n/* Compact view-type dropdown \u2014 used when there are more view types than the strip threshold */\n.view-type-dropdown {\n  position: relative;\n  display: inline-flex;\n}\n\n.view-type-dropdown-trigger {\n  width: auto;\n  gap: 6px;\n  padding: 0 10px;\n}\n\n.view-type-dropdown-label {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.view-type-dropdown-caret {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.view-type-dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  z-index: 20;\n  min-width: 180px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-text-primary) 14%, transparent);\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.view-type-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 10px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n\n.view-type-dropdown-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.view-type-dropdown-item.active {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.view-type-dropdown-item i {\n  width: 16px;\n  text-align: center;\n}\n\n/* Host for dynamically-mounted plug-in view renderers (Cluster, third-party) */\n.dynamic-view-host {\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  background: var(--mj-bg-surface);\n}\n\n/* Loading State - full-page centered loading for initial load when no data exists */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* Loading overlay - semi-transparent overlay on top of existing content during refresh */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Ensure [hidden] attribute works properly on loading elements */\n.loading-container[hidden],\n.loading-overlay[hidden] {\n  display: none !important;\n}\n\n/* Empty State \u2014 fill the content pane vertically */\n.empty-state-fill {\n  height: 100%;\n}\n\n/* Hide the dynamic host when no plug-in is mounted (no entity) */\n.dynamic-view-host[hidden] {\n  display: none !important;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Entity: [{
             type: Input
         }], EntityName: [{
@@ -1771,6 +2014,8 @@ export class EntityViewerComponent extends BaseAngularComponent {
             type: Output
         }], CreateRecordRequested: [{
             type: Output
+        }], ConfigureRequested: [{
+            type: Output
         }], ViewTypeID: [{
             type: Input
         }], ViewTypeConfigs: [{
@@ -1789,5 +2034,5 @@ export class EntityViewerComponent extends BaseAngularComponent {
             type: ViewChild,
             args: ['dynamicViewHost', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 133 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 134 }); })();
 //# sourceMappingURL=entity-viewer.component.js.map