@memberjunction/ng-entity-viewer 0.0.1 → 2.122.0

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

@@ -0,0 +1,883 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { RunView } from '@memberjunction/core';
+import { DEFAULT_VIEWER_CONFIG } from '../types';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared-generic";
+import * as i2 from "../entity-grid/entity-grid.component";
+import * as i3 from "../entity-cards/entity-cards.component";
+import * as i4 from "../pagination/pagination.component";
+import * as i5 from "@angular/common";
+function EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 12);
+    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", 13);
+    i0.ɵɵelementEnd();
+} }
+function EntityViewerComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "i", 9);
+    i0.ɵɵelementStart(2, "input", 10);
+    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.ɵɵtemplate(3, EntityViewerComponent_Conditional_1_Conditional_1_Conditional_3_Template, 2, 0, "button", 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("placeholder", ctx_r1.effectiveConfig.filterPlaceholder)("value", ctx_r1.effectiveFilterText);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.effectiveFilterText ? 3 : -1);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵpipe(3, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r1.filteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r1.totalRecordCount), " records");
+} }
+function EntityViewerComponent_Conditional_1_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    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", 7);
+    i0.ɵɵtemplate(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) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredRecordCount !== ctx_r1.totalRecordCount ? 1 : 2);
+} }
+function EntityViewerComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "button", 14);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("grid")); });
+    i0.ɵɵelement(2, "i", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 16);
+    i0.ɵɵlistener("click", function EntityViewerComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setViewMode("cards")); });
+    i0.ɵɵelement(4, "i", 17);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "grid");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.effectiveViewMode === "cards");
+} }
+function EntityViewerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Conditional_1_Template, 4, 3, "div", 6)(2, EntityViewerComponent_Conditional_1_Conditional_2_Template, 3, 1, "div", 7)(3, EntityViewerComponent_Conditional_1_Conditional_3_Template, 5, 4, "div", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.effectiveConfig.showFilter ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.effectiveConfig.showRecordCount && ctx_r1.entity ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.effectiveConfig.showViewModeToggle ? 3 : -1);
+} }
+function EntityViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "mj-loading", 18);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("text", ctx_r1.loadingMessage);
+} }
+function EntityViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Select an entity to view records");
+    i0.ɵɵelementEnd()();
+} }
+function EntityViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.debouncedFilterText ? "No matching records" : "No records found");
+} }
+function EntityViewerComponent_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-grid", 23);
+    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); })("sortChanged", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSortChanged($event)); })("gridStateChanged", function EntityViewerComponent_Conditional_6_Conditional_0_Template_mj_entity_grid_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("columns", ctx_r1.gridColumns)("height", "100%")("filterText", ctx_r1.debouncedFilterText)("sortState", ctx_r1.effectiveSortState)("serverSideSorting", ctx_r1.effectiveConfig.serverSideSorting)("gridState", ctx_r1.gridState);
+} }
+function EntityViewerComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-cards", 24);
+    i0.ɵɵlistener("recordSelected", function EntityViewerComponent_Conditional_6_Conditional_1_Template_mj_entity_cards_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordSelected($event)); })("recordOpened", function EntityViewerComponent_Conditional_6_Conditional_1_Template_mj_entity_cards_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRecordOpened($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("entity", ctx_r1.entity)("records", ctx_r1.filteredRecords)("selectedRecordId", ctx_r1.selectedRecordId)("cardTemplate", ctx_r1.cardTemplate)("hiddenFieldMatches", ctx_r1.hiddenFieldMatches)("filterText", ctx_r1.debouncedFilterText);
+} }
+function EntityViewerComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, EntityViewerComponent_Conditional_6_Conditional_0_Template, 1, 9, "mj-entity-grid", 21)(1, EntityViewerComponent_Conditional_6_Conditional_1_Template, 1, 6, "mj-entity-cards", 22);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.effectiveViewMode === "grid" ? 0 : 1);
+} }
+function EntityViewerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-pagination", 25);
+    i0.ɵɵlistener("loadMore", function EntityViewerComponent_Conditional_7_Template_mj_pagination_loadMore_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLoadMore()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("pagination", ctx_r1.pagination)("loadedRecordCount", ctx_r1.filteredRecords.length);
+} }
+/**
+ * EntityViewerComponent - Full-featured composite component for viewing entity data
+ *
+ * This component provides a complete data viewing experience with:
+ * - Switchable grid (AG Grid) and card views
+ * - Server-side filtering with UserSearchString
+ * - Server-side pagination with StartRow/MaxRows
+ * - Server-side sorting with OrderBy
+ * - Selection handling with configurable behavior
+ * - Loading, empty, and error states
+ * - Beautiful pagination UI with "Load More" pattern
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage - loads data automatically -->
+ * <mj-entity-viewer
+ *   [entity]="selectedEntity"
+ *   (recordSelected)="onRecordSelected($event)"
+ *   (recordOpened)="onRecordOpened($event)">
+ * </mj-entity-viewer>
+ *
+ * <!-- With external state control (like Data Explorer) -->
+ * <mj-entity-viewer
+ *   [entity]="selectedEntity"
+ *   [(viewMode)]="state.viewMode"
+ *   [filterText]="state.filterText"
+ *   [selectedRecordId]="state.selectedRecordId"
+ *   (recordSelected)="onRecordSelected($event)"
+ *   (recordOpened)="onRecordOpened($event)"
+ *   (sortChanged)="onSortChanged($event)">
+ * </mj-entity-viewer>
+ * ```
+ */
+export class EntityViewerComponent {
+    cdr;
+    // ========================================
+    // INPUTS
+    // ========================================
+    /**
+     * The entity to display records for
+     */
+    entity = null;
+    /**
+     * Pre-loaded records (optional - if not provided, component loads data)
+     */
+    records = null;
+    /**
+     * Configuration options for the viewer
+     */
+    config = {};
+    /**
+     * Currently selected record ID (primary key string)
+     */
+    selectedRecordId = null;
+    /**
+     * External view mode - allows parent to control view mode
+     * Supports two-way binding: [(viewMode)]="state.viewMode"
+     */
+    viewMode = null;
+    /**
+     * External filter text - allows parent to control filter
+     * Supports two-way binding: [(filterText)]="state.filterText"
+     */
+    filterText = null;
+    /**
+     * External sort state - allows parent to control sorting
+     */
+    sortState = null;
+    /**
+     * Custom grid column definitions
+     */
+    gridColumns = [];
+    /**
+     * Custom card template
+     */
+    cardTemplate = null;
+    /**
+     * Optional User View entity that provides view configuration
+     * When provided, the component will use the view's WhereClause, GridState, SortState, etc.
+     * The view's filter is additive - UserSearchString is applied ON TOP of the view's WhereClause
+     */
+    viewEntity = null;
+    /**
+     * Grid state configuration from a User View
+     * Controls column visibility, widths, order, and sort settings
+     */
+    gridState = null;
+    // ========================================
+    // OUTPUTS
+    // ========================================
+    /**
+     * Emitted when a record is selected (single click)
+     */
+    recordSelected = new EventEmitter();
+    /**
+     * Emitted when a record should be opened (double-click or open button)
+     */
+    recordOpened = new EventEmitter();
+    /**
+     * Emitted when data is loaded
+     */
+    dataLoaded = new EventEmitter();
+    /**
+     * Emitted when the view mode changes (for two-way binding)
+     */
+    viewModeChange = new EventEmitter();
+    /**
+     * Emitted when filter text changes (for two-way binding)
+     */
+    filterTextChange = new EventEmitter();
+    /**
+     * Emitted when filtered count changes
+     */
+    filteredCountChanged = new EventEmitter();
+    /**
+     * Emitted when sort state changes
+     */
+    sortChanged = new EventEmitter();
+    /**
+     * Emitted when grid state changes (column resize, reorder, etc.)
+     */
+    gridStateChanged = new EventEmitter();
+    // ========================================
+    // INTERNAL STATE
+    // ========================================
+    internalViewMode = 'grid';
+    internalFilterText = '';
+    debouncedFilterText = '';
+    isLoading = false;
+    loadingMessage = 'Loading...';
+    internalRecords = [];
+    totalRecordCount = 0;
+    filteredRecordCount = 0;
+    /** Track which records matched on hidden (non-visible) fields */
+    hiddenFieldMatches = new Map();
+    /** Current sort state */
+    internalSortState = null;
+    /** Pagination state */
+    pagination = {
+        currentPage: 0,
+        pageSize: 100,
+        totalRecords: 0,
+        hasMore: false,
+        isLoading: false
+    };
+    destroy$ = new Subject();
+    filterInput$ = new Subject();
+    /** Track if this is the first load (vs. load more) */
+    isInitialLoad = true;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    // ========================================
+    // COMPUTED PROPERTIES
+    // ========================================
+    /**
+     * Get the effective view mode (external or internal)
+     */
+    get effectiveViewMode() {
+        return this.viewMode ?? this.internalViewMode;
+    }
+    /**
+     * Get the effective filter text (external or internal)
+     */
+    get effectiveFilterText() {
+        return this.filterText ?? this.internalFilterText;
+    }
+    /**
+     * Get the effective sort state (external or internal)
+     */
+    get effectiveSortState() {
+        return this.sortState ?? this.internalSortState;
+    }
+    /**
+     * Get merged configuration with defaults
+     */
+    get effectiveConfig() {
+        return { ...DEFAULT_VIEWER_CONFIG, ...this.config };
+    }
+    /**
+     * Get the records to display (external or internal)
+     */
+    get displayRecords() {
+        return this.records ?? this.internalRecords;
+    }
+    /**
+     * Get filtered records - when using server-side filtering, records are already filtered
+     * When using client-side filtering, apply filter locally
+     */
+    get filteredRecords() {
+        const records = this.displayRecords;
+        // If server-side filtering is enabled, records are already filtered
+        if (this.effectiveConfig.serverSideFiltering) {
+            return records;
+        }
+        // Client-side filtering fallback
+        const filterText = this.debouncedFilterText?.trim().toLowerCase();
+        this.hiddenFieldMatches.clear();
+        if (!filterText || !this.entity) {
+            return records;
+        }
+        const visibleFields = this.getVisibleFieldNames();
+        return records.filter(record => {
+            const matchResult = this.recordMatchesFilter(record, filterText, visibleFields);
+            if (matchResult.matches && matchResult.matchedField && !matchResult.matchedInVisibleField) {
+                const recordKey = record.PrimaryKey.ToConcatenatedString();
+                this.hiddenFieldMatches.set(recordKey, matchResult.matchedField);
+            }
+            return matchResult.matches;
+        });
+    }
+    /**
+     * Check if a record matches the filter text (client-side)
+     */
+    recordMatchesFilter(record, filterText, visibleFields) {
+        if (!this.entity)
+            return { matches: true, matchedField: null, matchedInVisibleField: false };
+        let matchedField = null;
+        let matchedInVisibleField = false;
+        for (const field of this.entity.Fields) {
+            if (!this.shouldSearchField(field))
+                continue;
+            const value = record.Get(field.Name);
+            if (value == null)
+                continue;
+            const stringValue = String(value).toLowerCase();
+            if (this.matchesSearchTerm(stringValue, filterText)) {
+                matchedField = field.Name;
+                if (visibleFields.has(field.Name)) {
+                    matchedInVisibleField = true;
+                    break;
+                }
+            }
+        }
+        return {
+            matches: matchedField !== null,
+            matchedField,
+            matchedInVisibleField
+        };
+    }
+    /**
+     * Determine if a field should be included in search
+     */
+    shouldSearchField(field) {
+        if (field.Name.startsWith('__mj_'))
+            return false;
+        if (field.TSType === 'Date')
+            return false;
+        if (field.SQLFullType?.trim().toLowerCase() === 'uniqueidentifier')
+            return false;
+        return true;
+    }
+    /**
+     * Check if a value matches the search term (supports SQL-style % wildcards)
+     */
+    matchesSearchTerm(value, searchTerm) {
+        if (!searchTerm.includes('%')) {
+            return value.includes(searchTerm);
+        }
+        const fragments = searchTerm.split('%').filter(s => s.length > 0);
+        if (fragments.length === 0)
+            return true;
+        let searchStartIndex = 0;
+        for (const fragment of fragments) {
+            const foundIndex = value.indexOf(fragment, searchStartIndex);
+            if (foundIndex === -1)
+                return false;
+            searchStartIndex = foundIndex + fragment.length;
+        }
+        return true;
+    }
+    /**
+     * Get set of field names that are visible in the current view
+     */
+    getVisibleFieldNames() {
+        const visible = new Set();
+        if (!this.entity)
+            return visible;
+        for (const field of this.entity.Fields) {
+            if (field.DefaultInView === true) {
+                visible.add(field.Name);
+            }
+        }
+        if (this.entity.NameField) {
+            visible.add(this.entity.NameField.Name);
+        }
+        return visible;
+    }
+    /**
+     * Check if a record matched on a hidden field
+     */
+    hasHiddenFieldMatch(record) {
+        if (!this.debouncedFilterText)
+            return false;
+        return this.hiddenFieldMatches.has(record.PrimaryKey.ToConcatenatedString());
+    }
+    /**
+     * Get the name of the hidden field that matched for display
+     */
+    getHiddenMatchFieldName(record) {
+        const fieldName = this.hiddenFieldMatches.get(record.PrimaryKey.ToConcatenatedString());
+        if (!fieldName || !this.entity)
+            return '';
+        const field = this.entity.Fields.find(f => f.Name === fieldName);
+        return field ? field.DisplayNameOrName : fieldName;
+    }
+    // ========================================
+    // LIFECYCLE HOOKS
+    // ========================================
+    ngOnInit() {
+        this.applyConfig();
+        this.setupFilterDebounce();
+        // Initialize debounced filter from external filter text if provided
+        if (this.filterText !== null) {
+            this.debouncedFilterText = this.filterText;
+        }
+        // Initialize sort state from config
+        if (this.effectiveConfig.defaultSortField) {
+            this.internalSortState = {
+                field: this.effectiveConfig.defaultSortField,
+                direction: this.effectiveConfig.defaultSortDirection ?? 'asc'
+            };
+        }
+        // Note: We don't call loadData() here because ngOnChanges runs before ngOnInit
+        // and already handles the initial entity binding. Calling loadData() here would
+        // result in duplicate data loading (200 records instead of 100).
+    }
+    ngOnChanges(changes) {
+        if (changes['config']) {
+            this.applyConfig();
+        }
+        if (changes['entity']) {
+            if (this.entity && !this.records) {
+                // Reset state for new entity - synchronously clear all data and force change detection
+                // before starting the async load to prevent stale data display
+                this.resetPaginationState();
+                this.cdr.detectChanges();
+                this.loadData();
+            }
+            else if (!this.entity) {
+                this.internalRecords = [];
+                this.totalRecordCount = 0;
+                this.filteredRecordCount = 0;
+                this.resetPaginationState();
+                this.cdr.detectChanges();
+            }
+        }
+        if (changes['records'] && this.records) {
+            this.internalRecords = this.records;
+            this.totalRecordCount = this.records.length;
+            this.filteredRecordCount = this.records.length;
+        }
+        // Handle external filter text changes (from parent component)
+        if (changes['filterText']) {
+            const newFilter = this.filterText ?? '';
+            const oldFilter = this.debouncedFilterText;
+            this.internalFilterText = newFilter;
+            this.debouncedFilterText = newFilter;
+            // If server-side filtering and filter changed, reload from page 1
+            if (this.effectiveConfig.serverSideFiltering && newFilter !== oldFilter && !this.records) {
+                this.resetPaginationState();
+                this.loadData();
+            }
+            else {
+                this.updateFilteredCount();
+            }
+            this.cdr.detectChanges();
+        }
+        // Handle external view mode changes
+        if (changes['viewMode'] && this.viewMode !== null) {
+            this.internalViewMode = this.viewMode;
+        }
+        // Handle external sort state changes
+        if (changes['sortState'] && this.sortState !== null) {
+            const oldSort = this.internalSortState;
+            this.internalSortState = this.sortState;
+            // If sort changed and using server-side sorting, reload
+            if (this.effectiveConfig.serverSideSorting && !this.records) {
+                const sortChanged = !oldSort || !this.sortState ||
+                    oldSort.field !== this.sortState.field ||
+                    oldSort.direction !== this.sortState.direction;
+                if (sortChanged) {
+                    this.resetPaginationState();
+                    this.loadData();
+                }
+            }
+        }
+        // Handle viewEntity changes - reload data when view changes
+        if (changes['viewEntity']) {
+            if (this.entity && !this.records) {
+                // Apply view's sort state if available
+                if (this.viewEntity) {
+                    const viewSortInfo = this.viewEntity.ViewSortInfo;
+                    if (viewSortInfo && viewSortInfo.length > 0) {
+                        this.internalSortState = {
+                            field: viewSortInfo[0].field,
+                            direction: viewSortInfo[0].direction === 'Desc' ? 'desc' : 'asc'
+                        };
+                    }
+                }
+                this.resetPaginationState();
+                this.loadData();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ========================================
+    // CONFIGURATION
+    // ========================================
+    applyConfig() {
+        const config = this.effectiveConfig;
+        this.pagination.pageSize = config.pageSize;
+        if (this.viewMode === null) {
+            this.internalViewMode = config.defaultViewMode;
+        }
+    }
+    setupFilterDebounce() {
+        this.filterInput$
+            .pipe(debounceTime(this.effectiveConfig.filterDebounceMs), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe(filterText => {
+            const oldFilter = this.debouncedFilterText;
+            this.debouncedFilterText = filterText;
+            this.filterTextChange.emit(filterText);
+            // If server-side filtering and filter changed, reload from page 1
+            if (this.effectiveConfig.serverSideFiltering && filterText !== oldFilter && !this.records) {
+                this.resetPaginationState();
+                this.loadData();
+            }
+            else {
+                this.updateFilteredCount();
+            }
+            this.cdr.detectChanges();
+        });
+    }
+    /**
+     * Update the filtered record count and emit event
+     */
+    updateFilteredCount() {
+        const newCount = this.filteredRecords.length;
+        if (this.filteredRecordCount !== newCount) {
+            this.filteredRecordCount = newCount;
+            this.filteredCountChanged.emit({
+                filteredCount: newCount,
+                totalCount: this.totalRecordCount
+            });
+        }
+    }
+    /**
+     * Reset pagination state for a fresh load.
+     * Clears all record data and counts to prevent stale data display during entity switches.
+     */
+    resetPaginationState() {
+        this.pagination = {
+            currentPage: 0,
+            pageSize: this.effectiveConfig.pageSize,
+            totalRecords: 0,
+            hasMore: false,
+            isLoading: false
+        };
+        this.internalRecords = [];
+        this.totalRecordCount = 0;
+        this.filteredRecordCount = 0;
+        this.isInitialLoad = true;
+    }
+    // ========================================
+    // DATA LOADING
+    // ========================================
+    /**
+     * Load data for the current entity with server-side filtering/sorting/pagination
+     */
+    async loadData() {
+        if (!this.entity) {
+            this.internalRecords = [];
+            this.totalRecordCount = 0;
+            this.filteredRecordCount = 0;
+            return;
+        }
+        // Prevent concurrent loads which can cause duplicate records
+        if (this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        this.pagination.isLoading = true;
+        this.loadingMessage = this.isInitialLoad
+            ? `Loading ${this.entity.Name}...`
+            : 'Loading more records...';
+        this.cdr.detectChanges();
+        const startTime = Date.now();
+        const config = this.effectiveConfig;
+        try {
+            const rv = new RunView();
+            // Build OrderBy clause
+            // Priority: 1) External sort state 2) View's OrderByClause 3) undefined
+            let orderBy;
+            const sortState = this.effectiveSortState;
+            if (config.serverSideSorting && sortState?.field && sortState.direction) {
+                orderBy = `${sortState.field} ${sortState.direction.toUpperCase()}`;
+            }
+            else if (this.viewEntity?.OrderByClause) {
+                orderBy = this.viewEntity.OrderByClause;
+            }
+            // Calculate StartRow for pagination
+            const startRow = this.pagination.currentPage * config.pageSize;
+            // Build ExtraFilter from view's WhereClause if available
+            // The view's WhereClause is the "business filter" - UserSearchString is additive
+            const extraFilter = this.viewEntity?.WhereClause || undefined;
+            const result = await rv.RunView({
+                EntityName: this.entity.Name,
+                ResultType: 'entity_object',
+                MaxRows: config.pageSize,
+                StartRow: startRow,
+                OrderBy: orderBy,
+                ExtraFilter: extraFilter,
+                UserSearchString: config.serverSideFiltering ? this.debouncedFilterText || undefined : undefined
+            });
+            if (result.Success) {
+                // Append or replace records based on whether this is initial load
+                if (this.isInitialLoad) {
+                    this.internalRecords = result.Results;
+                }
+                else {
+                    this.internalRecords = [...this.internalRecords, ...result.Results];
+                }
+                this.totalRecordCount = result.TotalRowCount;
+                this.filteredRecordCount = this.internalRecords.length;
+                // Update pagination state
+                this.pagination.totalRecords = result.TotalRowCount;
+                this.pagination.hasMore = this.internalRecords.length < result.TotalRowCount;
+                this.dataLoaded.emit({
+                    totalRowCount: result.TotalRowCount,
+                    loadedRowCount: this.internalRecords.length,
+                    loadTime: Date.now() - startTime,
+                    records: this.internalRecords
+                });
+                this.filteredCountChanged.emit({
+                    filteredCount: this.internalRecords.length,
+                    totalCount: result.TotalRowCount
+                });
+            }
+            else {
+                console.error('Failed to load records:', result.ErrorMessage);
+                if (this.isInitialLoad) {
+                    this.internalRecords = [];
+                }
+                this.totalRecordCount = 0;
+                this.filteredRecordCount = 0;
+            }
+        }
+        catch (error) {
+            console.error('Error loading records:', error);
+            if (this.isInitialLoad) {
+                this.internalRecords = [];
+            }
+            this.totalRecordCount = 0;
+            this.filteredRecordCount = 0;
+        }
+        finally {
+            this.isLoading = false;
+            this.pagination.isLoading = false;
+            this.isInitialLoad = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Load more records (next page)
+     */
+    loadMore() {
+        if (this.pagination.isLoading || !this.pagination.hasMore) {
+            return;
+        }
+        this.pagination.currentPage++;
+        this.loadData();
+    }
+    /**
+     * Refresh data (re-load from server, starting at page 1)
+     */
+    refresh() {
+        if (!this.records) {
+            this.resetPaginationState();
+            this.loadData();
+        }
+    }
+    // ========================================
+    // VIEW MODE
+    // ========================================
+    /**
+     * Set the view mode and emit change event
+     */
+    setViewMode(mode) {
+        if (this.effectiveViewMode !== mode) {
+            this.internalViewMode = mode;
+            this.viewModeChange.emit(mode);
+            this.cdr.detectChanges();
+        }
+    }
+    // ========================================
+    // FILTERING
+    // ========================================
+    /**
+     * Handle filter input change
+     */
+    onFilterChange(value) {
+        this.internalFilterText = value;
+        this.filterInput$.next(value);
+    }
+    /**
+     * Clear the filter
+     */
+    clearFilter() {
+        this.internalFilterText = '';
+        this.filterInput$.next('');
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // SORTING
+    // ========================================
+    /**
+     * Handle sort change from grid component
+     */
+    onSortChanged(event) {
+        const oldSort = this.internalSortState;
+        this.internalSortState = event.sort;
+        this.sortChanged.emit(event);
+        // If server-side sorting, reload from page 1
+        if (this.effectiveConfig.serverSideSorting && !this.records) {
+            const sortChanged = !oldSort || !event.sort ||
+                oldSort.field !== event.sort?.field ||
+                oldSort.direction !== event.sort?.direction;
+            if (sortChanged) {
+                this.resetPaginationState();
+                this.loadData();
+            }
+        }
+    }
+    // ========================================
+    // EVENT HANDLERS
+    // ========================================
+    /**
+     * Handle record selection from child components (grid or cards)
+     */
+    onRecordSelected(event) {
+        this.recordSelected.emit(event);
+    }
+    /**
+     * Handle record opened from child components (grid or cards)
+     */
+    onRecordOpened(event) {
+        this.recordOpened.emit(event);
+    }
+    /**
+     * Handle grid state changes (column resize, reorder, etc.)
+     */
+    onGridStateChanged(event) {
+        this.gridStateChanged.emit(event);
+    }
+    /**
+     * Handle load more from pagination component
+     */
+    onLoadMore() {
+        this.loadMore();
+    }
+    static ɵfac = function EntityViewerComponent_Factory(t) { return new (t || EntityViewerComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityViewerComponent, selectors: [["mj-entity-viewer"]], hostAttrs: [2, "display", "block", "height", "100%"], inputs: { entity: "entity", records: "records", config: "config", selectedRecordId: "selectedRecordId", viewMode: "viewMode", filterText: "filterText", sortState: "sortState", gridColumns: "gridColumns", cardTemplate: "cardTemplate", viewEntity: "viewEntity", gridState: "gridState" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", dataLoaded: "dataLoaded", viewModeChange: "viewModeChange", filterTextChange: "filterTextChange", filteredCountChanged: "filteredCountChanged", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 5, consts: [[1, "entity-viewer-container"], [1, "viewer-header"], [1, "viewer-content"], [1, "loading-container"], [1, "empty-state"], [3, "pagination", "loadedRecordCount"], [1, "filter-container"], [1, "record-count"], [1, "view-mode-toggle"], [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"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-inbox"], [3, "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "recordSelected", "recordOpened", "sortChanged", "gridStateChanged", "entity", "records", "selectedRecordId", "columns", "height", "filterText", "sortState", "serverSideSorting", "gridState"], [3, "recordSelected", "recordOpened", "entity", "records", "selectedRecordId", "cardTemplate", "hiddenFieldMatches", "filterText"], [3, "loadMore", "pagination", "loadedRecordCount"]], template: function EntityViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, EntityViewerComponent_Conditional_1_Template, 4, 3, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵtemplate(3, EntityViewerComponent_Conditional_3_Template, 2, 1, "div", 3)(4, EntityViewerComponent_Conditional_4_Template, 4, 0, "div", 4)(5, EntityViewerComponent_Conditional_5_Template, 4, 1, "div", 4)(6, EntityViewerComponent_Conditional_6_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, EntityViewerComponent_Conditional_7_Template, 1, 2, "mj-pagination", 5);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("height", ctx.effectiveConfig.height);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.effectiveConfig.showFilter || ctx.effectiveConfig.showViewModeToggle || ctx.effectiveConfig.showRecordCount ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading && ctx.filteredRecords.length === 0 ? 3 : !ctx.entity ? 4 : ctx.filteredRecords.length === 0 && !ctx.isLoading ? 5 : 6);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.effectiveConfig.showPagination && ctx.entity && (ctx.pagination.hasMore || ctx.pagination.totalRecords > ctx.effectiveConfig.pageSize) ? 7 : -1);
+        } }, dependencies: [i1.LoadingComponent, i2.EntityGridComponent, i3.EntityCardsComponent, i4.PaginationComponent, i5.DecimalPipe], styles: [".entity-viewer-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\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: white;\n  border-bottom: 1px solid #e0e0e0;\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: #9e9e9e;\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 #e0e0e0;\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: #1976d2;\n}\n\n.filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #9e9e9e;\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: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f5f5f5;\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: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #424242;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.viewer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\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.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: #9e9e9e;\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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityViewerComponent, [{
+        type: Component,
+        args: [{ 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 && entity) {\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 Mode Toggle -->\n      @if (effectiveConfig.showViewModeToggle) {\n        <div class=\"view-mode-toggle\">\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            class=\"toggle-btn\"\n            [class.active]=\"effectiveViewMode === 'cards'\"\n            (click)=\"setViewMode('cards')\"\n            title=\"Cards View\">\n            <i class=\"fa-solid fa-grip\"></i>\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"viewer-content\">\n    @if (isLoading && filteredRecords.length === 0) {\n      <!-- Initial loading state -->\n      <div class=\"loading-container\">\n        <mj-loading [text]=\"loadingMessage\" size=\"medium\"></mj-loading>\n      </div>\n    } @else if (!entity) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-database\"></i>\n        <p>Select an entity to view records</p>\n      </div>\n    } @else if (filteredRecords.length === 0 && !isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-inbox\"></i>\n        <p>{{ debouncedFilterText ? 'No matching records' : 'No records found' }}</p>\n      </div>\n    } @else {\n      @if (effectiveViewMode === 'grid') {\n        <mj-entity-grid\n          [entity]=\"entity\"\n          [records]=\"filteredRecords\"\n          [selectedRecordId]=\"selectedRecordId\"\n          [columns]=\"gridColumns\"\n          [height]=\"'100%'\"\n          [filterText]=\"debouncedFilterText\"\n          [sortState]=\"effectiveSortState\"\n          [serverSideSorting]=\"effectiveConfig.serverSideSorting\"\n          [gridState]=\"gridState\"\n          (recordSelected)=\"onRecordSelected($event)\"\n          (recordOpened)=\"onRecordOpened($event)\"\n          (sortChanged)=\"onSortChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\">\n        </mj-entity-grid>\n      } @else {\n        <mj-entity-cards\n          [entity]=\"entity\"\n          [records]=\"filteredRecords\"\n          [selectedRecordId]=\"selectedRecordId\"\n          [cardTemplate]=\"cardTemplate\"\n          [hiddenFieldMatches]=\"hiddenFieldMatches\"\n          [filterText]=\"debouncedFilterText\"\n          (recordSelected)=\"onRecordSelected($event)\"\n          (recordOpened)=\"onRecordOpened($event)\">\n        </mj-entity-cards>\n      }\n    }\n  </div>\n\n  <!-- Pagination - only show when there's more data to load OR we've loaded more than one page -->\n  @if (effectiveConfig.showPagination && entity && (pagination.hasMore || pagination.totalRecords > effectiveConfig.pageSize)) {\n    <mj-pagination\n      [pagination]=\"pagination\"\n      [loadedRecordCount]=\"filteredRecords.length\"\n      (loadMore)=\"onLoadMore()\">\n    </mj-pagination>\n  }\n</div>\n", styles: [".entity-viewer-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background: #fafafa;\n}\n\n/* Header */\n.viewer-header {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 12px 16px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\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: #9e9e9e;\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 #e0e0e0;\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: #1976d2;\n}\n\n.filter-input::placeholder {\n  color: #9e9e9e;\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: #9e9e9e;\n  transition: all 0.15s ease;\n}\n\n.clear-filter-btn:hover {\n  background: #f5f5f5;\n  color: #616161;\n}\n\n/* Record Count */\n.record-count {\n  font-size: 13px;\n  color: #757575;\n  white-space: nowrap;\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background: #f5f5f5;\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: #757575;\n  transition: all 0.15s ease;\n}\n\n.toggle-btn:hover {\n  color: #424242;\n}\n\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Content */\n.viewer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\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: #9e9e9e;\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"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
+            type: Input
+        }], records: [{
+            type: Input
+        }], config: [{
+            type: Input
+        }], selectedRecordId: [{
+            type: Input
+        }], viewMode: [{
+            type: Input
+        }], filterText: [{
+            type: Input
+        }], sortState: [{
+            type: Input
+        }], gridColumns: [{
+            type: Input
+        }], cardTemplate: [{
+            type: Input
+        }], viewEntity: [{
+            type: Input
+        }], gridState: [{
+            type: Input
+        }], recordSelected: [{
+            type: Output
+        }], recordOpened: [{
+            type: Output
+        }], dataLoaded: [{
+            type: Output
+        }], viewModeChange: [{
+            type: Output
+        }], filterTextChange: [{
+            type: Output
+        }], filteredCountChanged: [{
+            type: Output
+        }], sortChanged: [{
+            type: Output
+        }], gridStateChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityViewerComponent, { className: "EntityViewerComponent", filePath: "src/lib/entity-viewer/entity-viewer.component.ts", lineNumber: 65 }); })();
+//# sourceMappingURL=entity-viewer.component.js.map