@memberjunction/ng-entity-viewer 2.133.0 → 3.0.0

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

@@ -0,0 +1,676 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { RunView } from '@memberjunction/core';
+import { ModuleRegistry, AllCommunityModule, themeAlpine } from 'ag-grid-community';
+import { HighlightUtil } from '../utils/highlight.util';
+import * as i0 from "@angular/core";
+import * as i1 from "ag-grid-angular";
+import * as i2 from "@memberjunction/ng-shared-generic";
+function EntityGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 5);
+    i0.ɵɵelementEnd();
+} }
+function EntityGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ag-grid-angular", 6);
+    i0.ɵɵlistener("gridReady", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_gridReady_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridReady($event)); })("rowClicked", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_rowClicked_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClicked($event)); })("rowDoubleClicked", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_rowDoubleClicked_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowDoubleClicked($event)); })("sortChanged", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_sortChanged_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridSortChanged($event)); })("columnResized", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_columnResized_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColumnResized($event)); })("columnMoved", function EntityGridComponent_Conditional_2_Template_ag_grid_angular_columnMoved_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onColumnMoved($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("theme", ctx_r1.theme)("columnDefs", ctx_r1.columnDefs)("rowData", ctx_r1.rowData)("defaultColDef", ctx_r1.defaultColDef)("rowSelection", ctx_r1.enableSelection ? ctx_r1.rowSelection : undefined)("getRowId", ctx_r1.getRowId)("suppressCellFocus", true);
+} }
+function EntityGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 7);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No records to display");
+    i0.ɵɵelementEnd()();
+} }
+function EntityGridComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "i", 8);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Select an entity to view records");
+    i0.ɵɵelementEnd()();
+} }
+// Register AG Grid modules (required for v34+)
+ModuleRegistry.registerModules([AllCommunityModule]);
+/**
+ * EntityGridComponent - AG Grid based table view for entity records
+ *
+ * This component provides a lightweight, customizable grid view for displaying
+ * entity records. It uses AG Grid Community edition for high-performance rendering.
+ *
+ * Supports two modes:
+ * 1. Parent-managed data: Records are passed in via [records] input
+ * 2. Standalone: Component loads its own data with pagination
+ *
+ * @example
+ * ```html
+ * <mj-entity-grid
+ *   [entity]="selectedEntity"
+ *   [records]="filteredRecords"
+ *   [selectedRecordId]="selectedId"
+ *   [sortState]="currentSort"
+ *   [serverSideSorting]="true"
+ *   (recordSelected)="onRecordSelected($event)"
+ *   (recordOpened)="onRecordOpened($event)"
+ *   (sortChanged)="onSortChanged($event)">
+ * </mj-entity-grid>
+ * ```
+ */
+export class EntityGridComponent {
+    /**
+     * The entity metadata for the records being displayed
+     */
+    entity = null;
+    /**
+     * The records to display in the grid (optional - component can load its own)
+     */
+    records = null;
+    /**
+     * The currently selected record's primary key string
+     */
+    selectedRecordId = null;
+    /**
+     * Custom column definitions (optional - auto-generated if not provided)
+     */
+    columns = [];
+    /**
+     * Height of the grid (CSS value)
+     * @default '100%'
+     */
+    height = '100%';
+    /**
+     * Whether to enable row selection
+     * @default true
+     */
+    enableSelection = true;
+    /**
+     * Filter text for highlighting matches in cells
+     * Supports SQL-style % wildcards
+     */
+    filterText = '';
+    /**
+     * Current sort state (for external control)
+     */
+    sortState = null;
+    /**
+     * Whether sorting is handled server-side
+     * When true, sort changes emit events but don't sort locally
+     * @default true
+     */
+    serverSideSorting = true;
+    /**
+     * Page size for standalone data loading
+     * @default 100
+     */
+    pageSize = 100;
+    /**
+     * Grid state from a User View - controls columns, widths, order, sort
+     * When provided, this takes precedence over auto-generated columns
+     */
+    gridState = null;
+    /**
+     * Emitted when a record is selected (single click)
+     */
+    recordSelected = new EventEmitter();
+    /**
+     * Emitted when a record should be opened (double click)
+     */
+    recordOpened = new EventEmitter();
+    /**
+     * Emitted when sort state changes
+     */
+    sortChanged = new EventEmitter();
+    /**
+     * Emitted when grid state changes (column resize, reorder, etc.)
+     */
+    gridStateChanged = new EventEmitter();
+    /** AG Grid column definitions */
+    columnDefs = [];
+    /** AG Grid row data */
+    rowData = [];
+    /** AG Grid API reference */
+    gridApi = null;
+    /** Internal records when loading standalone */
+    internalRecords = [];
+    /** Track if we're in standalone mode (no external records provided) */
+    standaloneMode = false;
+    /** Loading state for standalone mode */
+    isLoading = false;
+    /** Suppress sort changed events during programmatic sort updates */
+    suppressSortEvents = false;
+    /** Default column settings */
+    defaultColDef = {
+        sortable: true,
+        filter: false, // Filtering is handled at the parent level
+        resizable: true,
+        minWidth: 80
+    };
+    /** AG Grid theme (v34+) */
+    theme = themeAlpine;
+    /** Row selection configuration (v34+ object-based API) */
+    rowSelection = {
+        mode: 'singleRow'
+    };
+    /** Get row ID function for AG Grid */
+    getRowId = (params) => params.data['__pk'];
+    ngOnInit() {
+        this.standaloneMode = this.records === null;
+        this.buildColumnDefs();
+        if (this.standaloneMode && this.entity) {
+            this.loadData();
+        }
+        else {
+            this.buildRowData();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['entity'] || changes['columns'] || changes['gridState']) {
+            this.buildColumnDefs();
+        }
+        if (changes['entity'] && this.standaloneMode && this.entity) {
+            this.loadData();
+        }
+        if (changes['records']) {
+            this.standaloneMode = this.records === null;
+            if (!this.standaloneMode) {
+                this.buildRowData();
+            }
+        }
+        if (changes['selectedRecordId'] && this.gridApi) {
+            this.updateSelection();
+        }
+        // When filter text changes, refresh the grid to update highlighting
+        if (changes['filterText'] && this.gridApi) {
+            this.gridApi.refreshCells({ force: true });
+        }
+        // Handle external sort state changes
+        if (changes['sortState'] && this.gridApi && this.sortState) {
+            this.applySortStateToGrid();
+        }
+        // Handle gridState changes - apply sort if present
+        if (changes['gridState'] && this.gridApi && this.gridState?.sortSettings?.length) {
+            const sortSetting = this.gridState.sortSettings[0];
+            this.sortState = {
+                field: sortSetting.field,
+                direction: sortSetting.dir
+            };
+            this.applySortStateToGrid();
+        }
+    }
+    /**
+     * Get effective records (external or internal)
+     */
+    get effectiveRecords() {
+        return this.records ?? this.internalRecords;
+    }
+    /**
+     * Load data in standalone mode
+     */
+    async loadData() {
+        if (!this.entity)
+            return;
+        this.isLoading = true;
+        try {
+            const rv = new RunView();
+            // Build OrderBy from sort state
+            let orderBy;
+            if (this.sortState?.field && this.sortState.direction) {
+                orderBy = `${this.sortState.field} ${this.sortState.direction.toUpperCase()}`;
+            }
+            const result = await rv.RunView({
+                EntityName: this.entity.Name,
+                ResultType: 'entity_object',
+                MaxRows: this.pageSize,
+                OrderBy: orderBy
+            });
+            if (result.Success) {
+                this.internalRecords = result.Results;
+                this.buildRowData();
+            }
+        }
+        catch (error) {
+            console.error('Error loading grid data:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    /**
+     * Handle AG Grid ready event
+     */
+    onGridReady(event) {
+        this.gridApi = event.api;
+        this.updateSelection();
+        // Apply initial sort state if provided
+        if (this.sortState) {
+            this.applySortStateToGrid();
+        }
+        // Auto-size columns to fit content
+        event.api.sizeColumnsToFit();
+    }
+    /**
+     * Handle AG Grid sort changed event
+     */
+    onGridSortChanged(event) {
+        if (this.suppressSortEvents)
+            return;
+        const sortModel = event.api.getColumnState()
+            .filter(col => col.sort)
+            .map(col => ({ field: col.colId, direction: col.sort }));
+        if (sortModel.length > 0) {
+            const newSort = {
+                field: sortModel[0].field,
+                direction: sortModel[0].direction
+            };
+            this.sortChanged.emit({ sort: newSort });
+            // Also emit as grid state change
+            this.emitGridStateChanged('sort');
+            // If in standalone mode and server-side sorting, reload data
+            if (this.standaloneMode && this.serverSideSorting) {
+                // The parent should handle this, but if standalone, reload
+                this.loadData();
+            }
+        }
+        else {
+            this.sortChanged.emit({ sort: null });
+        }
+    }
+    /**
+     * Handle column resized event
+     */
+    onColumnResized(event) {
+        // Only emit on finished (not during drag)
+        if (event.finished && event.source !== 'api') {
+            this.emitGridStateChanged('columns');
+        }
+    }
+    /**
+     * Handle column moved event
+     */
+    onColumnMoved(event) {
+        // Only emit when the drag is finished
+        if (event.finished && event.source !== 'api') {
+            this.emitGridStateChanged('columns');
+        }
+    }
+    /**
+     * Emit grid state changed event with current column/sort state
+     */
+    emitGridStateChanged(changeType) {
+        if (!this.gridApi || !this.entity)
+            return;
+        const currentState = this.buildCurrentGridState();
+        this.gridStateChanged.emit({
+            gridState: currentState,
+            changeType
+        });
+    }
+    /**
+     * Build current grid state from AG Grid's column state
+     */
+    buildCurrentGridState() {
+        if (!this.gridApi || !this.entity) {
+            return { columnSettings: [], sortSettings: [] };
+        }
+        const columnState = this.gridApi.getColumnState();
+        const columnSettings = [];
+        const sortSettings = [];
+        for (let i = 0; i < columnState.length; i++) {
+            const col = columnState[i];
+            const field = this.entity.Fields.find(f => f.Name === col.colId);
+            if (field) {
+                columnSettings.push({
+                    ID: field.ID,
+                    Name: field.Name,
+                    DisplayName: field.DisplayNameOrName,
+                    hidden: col.hide ?? false,
+                    width: col.width ?? undefined,
+                    orderIndex: i
+                });
+            }
+            // Capture sort settings
+            if (col.sort) {
+                sortSettings.push({
+                    field: col.colId,
+                    dir: col.sort
+                });
+            }
+        }
+        return { columnSettings, sortSettings };
+    }
+    /**
+     * Apply external sort state to the grid
+     */
+    applySortStateToGrid() {
+        if (!this.gridApi || !this.sortState)
+            return;
+        this.suppressSortEvents = true;
+        try {
+            const columnState = this.gridApi.getColumnState().map(col => ({
+                ...col,
+                sort: col.colId === this.sortState.field ? this.sortState.direction : null,
+                sortIndex: col.colId === this.sortState.field ? 0 : null
+            }));
+            this.gridApi.applyColumnState({ state: columnState });
+        }
+        finally {
+            this.suppressSortEvents = false;
+        }
+    }
+    /**
+     * Handle row click event
+     */
+    onRowClicked(event) {
+        if (!this.entity || !event.data)
+            return;
+        const record = this.findRecordByPk(event.data['__pk']);
+        if (!record)
+            return;
+        this.recordSelected.emit({
+            record,
+            entity: this.entity,
+            compositeKey: record.PrimaryKey
+        });
+    }
+    /**
+     * Handle row double-click event
+     */
+    onRowDoubleClicked(event) {
+        if (!this.entity || !event.data)
+            return;
+        const record = this.findRecordByPk(event.data['__pk']);
+        if (!record)
+            return;
+        this.recordOpened.emit({
+            record,
+            entity: this.entity,
+            compositeKey: record.PrimaryKey
+        });
+    }
+    /**
+     * Build AG Grid column definitions from gridState, custom columns, or entity metadata
+     * Priority: gridState > custom columns > auto-generated
+     */
+    buildColumnDefs() {
+        if (this.gridState?.columnSettings && this.gridState.columnSettings.length > 0 && this.entity) {
+            // Use gridState column configuration (from User View)
+            this.columnDefs = this.buildColumnDefsFromGridState(this.gridState.columnSettings);
+        }
+        else if (this.columns.length > 0) {
+            // Use custom column definitions
+            this.columnDefs = this.columns.map(col => this.mapCustomColumnDef(col));
+        }
+        else if (this.entity) {
+            // Auto-generate from entity metadata
+            this.columnDefs = this.generateColumnDefs(this.entity);
+        }
+        else {
+            this.columnDefs = [];
+        }
+    }
+    /**
+     * Build column definitions from gridState column settings
+     */
+    buildColumnDefsFromGridState(columnSettings) {
+        if (!this.entity)
+            return [];
+        // Sort by orderIndex
+        const sortedColumns = [...columnSettings].sort((a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0));
+        const cols = [];
+        for (const colConfig of sortedColumns) {
+            // Skip hidden columns
+            if (colConfig.hidden)
+                continue;
+            // Find the corresponding entity field
+            const field = this.entity.Fields.find(f => f.Name.toLowerCase() === colConfig.Name.toLowerCase());
+            if (!field)
+                continue;
+            const colDef = {
+                field: field.Name,
+                headerName: colConfig.DisplayName || field.DisplayNameOrName,
+                width: colConfig.width || this.estimateColumnWidth(field),
+                sortable: true,
+                resizable: true
+            };
+            // For string fields, use a cell renderer that supports highlighting
+            if (field.TSType === 'string') {
+                colDef.cellRenderer = (params) => this.highlightCellRenderer(params);
+            }
+            else {
+                // For non-string fields, use value formatter
+                colDef.valueFormatter = this.getValueFormatter(field);
+            }
+            cols.push(colDef);
+        }
+        return cols;
+    }
+    /**
+     * Map custom column definition to AG Grid ColDef
+     */
+    mapCustomColumnDef(col) {
+        return {
+            field: col.field,
+            headerName: col.headerName,
+            width: col.width,
+            minWidth: col.minWidth,
+            maxWidth: col.maxWidth,
+            sortable: col.sortable ?? true,
+            filter: false, // Filtering handled at parent level
+            resizable: col.resizable ?? true,
+            hide: col.hide ?? false
+        };
+    }
+    /**
+     * Auto-generate column definitions from entity metadata
+     */
+    generateColumnDefs(entity) {
+        const cols = [];
+        // Filter fields to show
+        const visibleFields = entity.Fields.filter(f => this.shouldShowField(f));
+        for (const field of visibleFields) {
+            const colDef = {
+                field: field.Name,
+                headerName: field.DisplayNameOrName,
+                width: this.estimateColumnWidth(field),
+                sortable: true,
+                resizable: true
+            };
+            // For string fields, use a cell renderer that supports highlighting
+            if (field.TSType === 'string') {
+                colDef.cellRenderer = (params) => this.highlightCellRenderer(params);
+            }
+            else {
+                // For non-string fields, use value formatter
+                colDef.valueFormatter = this.getValueFormatter(field);
+            }
+            cols.push(colDef);
+        }
+        return cols;
+    }
+    /**
+     * Cell renderer that highlights matching text
+     * Uses HighlightUtil which only highlights if the text actually matches the pattern
+     */
+    highlightCellRenderer(params) {
+        const value = params.value;
+        if (value === null || value === undefined)
+            return '';
+        const text = String(value);
+        return HighlightUtil.highlight(text, this.filterText, true);
+    }
+    /**
+     * Determine if a field should be shown in the grid
+     */
+    shouldShowField(field) {
+        // Skip internal MJ fields
+        if (field.Name.startsWith('__mj_'))
+            return false;
+        // Skip primary key if it's a GUID (usually not useful to display)
+        if (field.IsPrimaryKey && field.SQLFullType?.toLowerCase() === 'uniqueidentifier') {
+            return false;
+        }
+        // Prefer DefaultInView fields
+        if (field.DefaultInView === true)
+            return true;
+        // Skip large text fields by default
+        if (field.Length > 500)
+            return false;
+        return true;
+    }
+    /**
+     * Estimate appropriate column width based on field type
+     */
+    estimateColumnWidth(field) {
+        if (field.TSType === 'boolean')
+            return 100;
+        if (field.TSType === 'number')
+            return 120;
+        if (field.TSType === 'Date')
+            return 150;
+        if (field.Name.toLowerCase().includes('id'))
+            return 100;
+        if (field.Name.toLowerCase().includes('email'))
+            return 200;
+        if (field.Name.toLowerCase().includes('name'))
+            return 180;
+        // Default based on length
+        const charWidth = 8;
+        const padding = 20;
+        const estimatedWidth = Math.min(Math.max(field.Length * charWidth / 2, 100), 300) + padding;
+        return estimatedWidth;
+    }
+    /**
+     * Get value formatter for a field based on its type
+     */
+    getValueFormatter(field) {
+        if (field.TSType === 'Date') {
+            return (params) => {
+                if (!params.value)
+                    return '';
+                const date = params.value instanceof Date ? params.value : new Date(params.value);
+                if (isNaN(date.getTime()))
+                    return String(params.value);
+                return date.toLocaleDateString(undefined, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric'
+                });
+            };
+        }
+        if (field.TSType === 'boolean') {
+            return (params) => {
+                if (params.value === null || params.value === undefined)
+                    return '';
+                return params.value ? 'Yes' : 'No';
+            };
+        }
+        if (field.TSType === 'number') {
+            const fieldNameLower = field.Name.toLowerCase();
+            const isCurrency = fieldNameLower.includes('amount') ||
+                fieldNameLower.includes('price') ||
+                fieldNameLower.includes('cost') ||
+                fieldNameLower.includes('total');
+            if (isCurrency) {
+                return (params) => {
+                    if (params.value === null || params.value === undefined)
+                        return '';
+                    const num = Number(params.value);
+                    if (isNaN(num))
+                        return String(params.value);
+                    return `$${num.toLocaleString()}`;
+                };
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Build row data from entity records
+     */
+    buildRowData() {
+        if (!this.entity) {
+            this.rowData = [];
+            return;
+        }
+        const records = this.effectiveRecords;
+        this.rowData = records.map(record => {
+            const row = {
+                __pk: record.PrimaryKey.ToConcatenatedString()
+            };
+            // Copy all field values
+            for (const field of this.entity.Fields) {
+                row[field.Name] = record.Get(field.Name);
+            }
+            return row;
+        });
+    }
+    /**
+     * Update grid selection to match selectedRecordId and scroll to the selected row
+     */
+    updateSelection() {
+        if (!this.gridApi || !this.selectedRecordId) {
+            this.gridApi?.deselectAll();
+            return;
+        }
+        const node = this.gridApi.getRowNode(this.selectedRecordId);
+        if (node) {
+            node.setSelected(true);
+            // Scroll the selected row into view (middle of viewport if possible)
+            this.gridApi.ensureNodeVisible(node, 'middle');
+        }
+    }
+    /**
+     * Find a record by its primary key string
+     */
+    findRecordByPk(pkString) {
+        return this.effectiveRecords.find(r => r.PrimaryKey.ToConcatenatedString() === pkString);
+    }
+    static ɵfac = function EntityGridComponent_Factory(t) { return new (t || EntityGridComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityGridComponent, selectors: [["mj-entity-grid"]], inputs: { entity: "entity", records: "records", selectedRecordId: "selectedRecordId", columns: "columns", height: "height", enableSelection: "enableSelection", filterText: "filterText", sortState: "sortState", serverSideSorting: "serverSideSorting", pageSize: "pageSize", gridState: "gridState" }, outputs: { recordSelected: "recordSelected", recordOpened: "recordOpened", sortChanged: "sortChanged", gridStateChanged: "gridStateChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 3, consts: [[1, "entity-grid-container"], [1, "loading-state"], [1, "entity-grid", 3, "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus"], [1, "no-data"], [1, "no-entity"], ["text", "Loading...", "size", "medium"], [1, "entity-grid", 3, "gridReady", "rowClicked", "rowDoubleClicked", "sortChanged", "columnResized", "columnMoved", "theme", "columnDefs", "rowData", "defaultColDef", "rowSelection", "getRowId", "suppressCellFocus"], [1, "fa-solid", "fa-inbox"], [1, "fa-solid", "fa-database"]], template: function EntityGridComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, EntityGridComponent_Conditional_1_Template, 2, 0, "div", 1)(2, EntityGridComponent_Conditional_2_Template, 1, 7, "ag-grid-angular", 2)(3, EntityGridComponent_Conditional_3_Template, 4, 0, "div", 3)(4, EntityGridComponent_Conditional_4_Template, 4, 0, "div", 4);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("height", ctx.height);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading && ctx.rowData.length === 0 ? 1 : ctx.entity && ctx.rowData.length > 0 ? 2 : ctx.entity && ctx.rowData.length === 0 ? 3 : 4);
+        } }, dependencies: [i1.AgGridAngular, i2.LoadingComponent], styles: [".entity-grid-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.entity-grid[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  min-height: 0;\n}\n\n\n\n.no-data[_ngcontent-%COMP%], \n.no-entity[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 200px;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.no-entity[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.no-entity[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n\n\n  .highlight-match {\n  background-color: #fff176;\n  border-radius: 2px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityGridComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-grid', template: "<div class=\"entity-grid-container\" [style.height]=\"height\">\n  @if (isLoading && rowData.length === 0) {\n    <div class=\"loading-state\">\n      <mj-loading text=\"Loading...\" size=\"medium\"></mj-loading>\n    </div>\n  } @else if (entity && rowData.length > 0) {\n    <ag-grid-angular\n      class=\"entity-grid\"\n      [theme]=\"theme\"\n      [columnDefs]=\"columnDefs\"\n      [rowData]=\"rowData\"\n      [defaultColDef]=\"defaultColDef\"\n      [rowSelection]=\"enableSelection ? rowSelection : undefined\"\n      [getRowId]=\"getRowId\"\n      [suppressCellFocus]=\"true\"\n      (gridReady)=\"onGridReady($event)\"\n      (rowClicked)=\"onRowClicked($event)\"\n      (rowDoubleClicked)=\"onRowDoubleClicked($event)\"\n      (sortChanged)=\"onGridSortChanged($event)\"\n      (columnResized)=\"onColumnResized($event)\"\n      (columnMoved)=\"onColumnMoved($event)\">\n    </ag-grid-angular>\n  } @else if (entity && rowData.length === 0) {\n    <div class=\"no-data\">\n      <i class=\"fa-solid fa-inbox\"></i>\n      <p>No records to display</p>\n    </div>\n  } @else {\n    <div class=\"no-entity\">\n      <i class=\"fa-solid fa-database\"></i>\n      <p>Select an entity to view records</p>\n    </div>\n  }\n</div>\n", styles: [".entity-grid-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.entity-grid {\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Empty states */\n.no-data,\n.no-entity {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 200px;\n  color: #9e9e9e;\n  text-align: center;\n}\n\n.no-data i,\n.no-entity i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.no-data p,\n.no-entity p {\n  margin: 0;\n  font-size: 14px;\n}\n\n/* Highlight matches in grid cells */\n::ng-deep .highlight-match {\n  background-color: #fff176;\n  border-radius: 2px;\n}\n"] }]
+    }], null, { entity: [{
+            type: Input
+        }], records: [{
+            type: Input
+        }], selectedRecordId: [{
+            type: Input
+        }], columns: [{
+            type: Input
+        }], height: [{
+            type: Input
+        }], enableSelection: [{
+            type: Input
+        }], filterText: [{
+            type: Input
+        }], sortState: [{
+            type: Input
+        }], serverSideSorting: [{
+            type: Input
+        }], pageSize: [{
+            type: Input
+        }], gridState: [{
+            type: Input
+        }], recordSelected: [{
+            type: Output
+        }], recordOpened: [{
+            type: Output
+        }], sortChanged: [{
+            type: Output
+        }], gridStateChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityGridComponent, { className: "EntityGridComponent" }); })();
+//# sourceMappingURL=entity-grid.component.js.map