@memberjunction/ng-entity-viewer 5.11.0 → 5.13.0

package/dist/lib/entity-data-grid/models/grid-types.js

@@ -19,12 +19,12 @@ export const DEFAULT_VISUAL_CONFIG = {
     booleanIcons: true,
     clickableUrls: true,
     // Selection - mellow yellow accent (avoids conflict with blue hyperlinks)
-    selectionIndicatorColor: '#f9a825',
+    selectionIndicatorColor: '', // Empty = use CSS variable --mj-status-warning
     selectionIndicatorWidth: 3,
-    selectionBackground: '#fff9e6',
+    selectionBackground: '', // Empty = use CSS variable --mj-status-warning-bg
     // Checkbox - rounded style
     checkboxStyle: 'rounded',
-    checkboxColor: '#2196F3',
+    checkboxColor: '', // Empty = use CSS variable --mj-brand-primary
     // Loading - skeleton for modern feel
     skeletonLoading: true,
     skeletonRowCount: 8,
@@ -32,6 +32,6 @@ export const DEFAULT_VISUAL_CONFIG = {
     borderRadius: 0,
     cellPadding: 'normal',
     // Accent color
-    accentColor: '#2196F3'
+    accentColor: '' // Empty = use CSS variable --mj-brand-primary
 };
 //# sourceMappingURL=grid-types.js.map

package/dist/lib/entity-data-grid/models/grid-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-types.js","sourceRoot":"","sources":["../../../../src/lib/entity-data-grid/models/grid-types.ts"],"names":[],"mappings":"AAglBA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA+B;IAC/D,sCAAsC;IACtC,WAAW,EAAE,UAAU;IACvB,gBAAgB,EAAE,EAAE,EAAG,2BAA2B;IAClD,eAAe,EAAE,EAAE,EAAI,2BAA2B;IAClD,YAAY,EAAE,IAAI;IAElB,yDAAyD;IACzD,aAAa,EAAE,IAAI;IACnB,oBAAoB,EAAE,QAAQ;IAC9B,gBAAgB,EAAE,IAAI;IACtB,uBAAuB,EAAE,GAAG;IAE5B,mCAAmC;IACnC,iBAAiB,EAAE,IAAI;IACvB,aAAa,EAAE,IAAI;IACnB,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;IAEnB,0EAA0E;IAC1E,uBAAuB,EAAE,SAAS;IAClC,uBAAuB,EAAE,CAAC;IAC1B,mBAAmB,EAAE,SAAS;IAE9B,2BAA2B;IAC3B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IAExB,qCAAqC;IACrC,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,CAAC;IAEnB,oBAAoB;IACpB,YAAY,EAAE,CAAC;IACf,WAAW,EAAE,QAAQ;IAErB,eAAe;IACf,WAAW,EAAE,SAAS;CACvB,CAAC","sourcesContent":["import { TemplateRef } from '@angular/core';\n\n// Re-export shared types from the main types file to avoid duplication\n// These are used by both EntityGridComponent and EntityDataGridComponent\nexport {\n  SortDirection,\n  SortState,\n  GridStateChangedEvent,\n  // View grid types - re-exported from types.ts which gets them from core-entities\n  ViewGridColumnSetting,\n  ViewGridSortSetting,\n  ViewGridState\n} from '../../types';\n\n// ========================================\n// Enums and Union Types\n// ========================================\n\n/**\n * Selection mode for the grid\n * - 'none': No selection allowed\n * - 'single': Only one row can be selected at a time\n * - 'multiple': Multiple rows can be selected (click to toggle)\n * - 'checkbox': Checkbox column for selection\n */\nexport type GridSelectionMode = 'none' | 'single' | 'multiple' | 'checkbox';\n\n/**\n * Edit mode for the grid\n * - 'none': No editing allowed\n * - 'cell': Individual cell editing\n * - 'row': Full row editing\n * - 'batch': Batch editing with explicit save\n */\nexport type GridEditMode = 'none' | 'cell' | 'row' | 'batch';\n\n/**\n * Grid lines display mode\n */\nexport type GridLinesMode = 'none' | 'horizontal' | 'vertical' | 'both';\n\n/**\n * Filter operators for column filtering\n */\nexport type FilterOperator =\n  | 'eq' | 'neq'\n  | 'gt' | 'gte' | 'lt' | 'lte'\n  | 'contains' | 'startswith' | 'endswith'\n  | 'isnull' | 'isnotnull'\n  | 'in' | 'notin';\n\n/**\n * Column data type for formatting and editing\n */\nexport type GridColumnType =\n  | 'string'\n  | 'number'\n  | 'boolean'\n  | 'date'\n  | 'datetime'\n  | 'currency'\n  | 'percent'\n  | 'custom';\n\n// ========================================\n// Column Configuration\n// ========================================\n\n/**\n * Configuration for a single grid column\n */\nexport interface GridColumnConfig {\n  /** Field name on the entity */\n  field: string;\n\n  /** Display title (defaults to field name) */\n  title?: string;\n\n  /** Column width in pixels (or 'auto') */\n  width?: number | 'auto';\n\n  /** Minimum width for resizing */\n  minWidth?: number;\n\n  /** Maximum width for resizing */\n  maxWidth?: number;\n\n  /** Column is visible */\n  visible?: boolean;\n\n  /** Column is sortable */\n  sortable?: boolean;\n\n  /** Column is filterable */\n  filterable?: boolean;\n\n  /** Column is editable */\n  editable?: boolean;\n\n  /** Column is resizable */\n  resizable?: boolean;\n\n  /** Column is reorderable */\n  reorderable?: boolean;\n\n  /** Data type for formatting and editing */\n  type?: GridColumnType;\n\n  /** Format string (e.g., 'yyyy-MM-dd' for dates, '#,##0.00' for numbers) */\n  format?: string;\n\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n\n  /** Header alignment (defaults to align) */\n  headerAlign?: 'left' | 'center' | 'right';\n\n  /** CSS class for cells - can be string or function */\n  cellClass?: string | ((row: Record<string, unknown>, column: GridColumnConfig) => string);\n\n  /** CSS class for header */\n  headerClass?: string;\n\n  /** Custom cell template reference */\n  cellTemplate?: TemplateRef<GridCellTemplateContext>;\n\n  /** Custom header template reference */\n  headerTemplate?: TemplateRef<GridHeaderTemplateContext>;\n\n  /** Custom editor template reference */\n  editorTemplate?: TemplateRef<GridEditorTemplateContext>;\n\n  /** Cell value formatter function */\n  formatter?: (value: unknown, row: Record<string, unknown>, column: GridColumnConfig) => string;\n\n  /** Cell style function */\n  cellStyle?: (row: Record<string, unknown>, column: GridColumnConfig) => Record<string, string>;\n\n  /** Whether to show tooltip on hover */\n  showTooltip?: boolean;\n\n  /** Custom tooltip content */\n  tooltip?: string | ((row: Record<string, unknown>, column: GridColumnConfig) => string);\n\n  /** Frozen column position (alias for pinned, for backward compatibility) */\n  frozen?: 'left' | 'right' | false;\n\n  /** Column pinning position (AG Grid terminology) */\n  pinned?: 'left' | 'right' | null;\n\n  /** Flex grow factor for auto-sizing columns */\n  flex?: number;\n\n  /** Column group (for grouped headers) */\n  group?: string;\n\n  /** Filter options for dropdown filters */\n  filterOptions?: Array<{ value: unknown; label: string }>;\n\n  /** Sort order index (for default multi-sort) */\n  sortIndex?: number;\n\n  /** Sort direction (for default sort) */\n  sortDirection?: 'asc' | 'desc';\n}\n\n/**\n * Context provided to custom cell templates\n */\nexport interface GridCellTemplateContext {\n  /** The row data (entity) */\n  row: Record<string, unknown>;\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** The cell value */\n  value: unknown;\n  /** Row index in the current view */\n  rowIndex: number;\n  /** Whether the cell is currently being edited */\n  isEditing: boolean;\n}\n\n/**\n * Context provided to custom header templates\n */\nexport interface GridHeaderTemplateContext {\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** Current sort direction for this column */\n  sortDirection: 'asc' | 'desc' | 'none';\n  /** Current filter value for this column */\n  filterValue: unknown;\n}\n\n/**\n * Context provided to custom editor templates\n */\nexport interface GridEditorTemplateContext {\n  /** The row data (entity) */\n  row: Record<string, unknown>;\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** Current cell value */\n  value: unknown;\n  /** Row index in the current view */\n  rowIndex: number;\n  /** Function to commit the edit with a new value */\n  commitEdit: (newValue: unknown) => void;\n  /** Function to cancel the edit */\n  cancelEdit: () => void;\n}\n\n// ========================================\n// Toolbar Configuration\n// ========================================\n\n/**\n * Configuration for the grid toolbar\n */\nexport interface GridToolbarConfig {\n  /** Show search input */\n  showSearch?: boolean;\n\n  /** Search placeholder text */\n  searchPlaceholder?: string;\n\n  /** Search debounce time in ms */\n  searchDebounce?: number;\n\n  /** Show refresh button */\n  showRefresh?: boolean;\n\n  /** Show add button */\n  showAdd?: boolean;\n\n  /** Show delete button (for selected rows) */\n  showDelete?: boolean;\n\n  /** Show export button */\n  showExport?: boolean;\n\n  /** Export formats available */\n  exportFormats?: Array<'excel' | 'csv' | 'json'>;\n\n  /** Show column chooser button */\n  showColumnChooser?: boolean;\n\n  /** Show filter toggle button */\n  showFilterToggle?: boolean;\n\n  /** Custom toolbar buttons */\n  customButtons?: GridToolbarButton[];\n\n  /** Toolbar position */\n  position?: 'top' | 'bottom' | 'both';\n\n  /** Show row count */\n  showRowCount?: boolean;\n\n  /** Show selection count */\n  showSelectionCount?: boolean;\n}\n\n/**\n * Custom toolbar button configuration\n */\nexport interface GridToolbarButton {\n  /** Unique button ID */\n  id: string;\n\n  /** Button text */\n  text?: string;\n\n  /** Button icon (Font Awesome class) */\n  icon?: string;\n\n  /** Button tooltip */\n  tooltip?: string;\n\n  /** Button is disabled - can be boolean or function */\n  disabled?: boolean | (() => boolean);\n\n  /** Button is visible - can be boolean or function */\n  visible?: boolean | (() => boolean);\n\n  /** Button CSS class */\n  cssClass?: string;\n\n  /** Button position: 'left' | 'right' */\n  position?: 'left' | 'right';\n\n  /** Click handler (if not using event) */\n  onClick?: () => void;\n}\n\n// ========================================\n// State Types (Extended for EntityDataGrid)\n// ========================================\n\n/**\n * Extended sort state with multi-sort index\n * Extends the base SortState from types.ts with an index for multi-sort ordering\n */\nexport interface DataGridSortState {\n  /** Field name being sorted */\n  field: string;\n  /** Sort direction */\n  direction: 'asc' | 'desc';\n  /** Index for multi-sort ordering */\n  index: number;\n}\n\n/**\n * Filter state for a column\n */\nexport interface FilterState {\n  /** Field name being filtered */\n  field: string;\n  /** Filter operator */\n  operator: FilterOperator;\n  /** Filter value */\n  value: unknown;\n}\n\n/**\n * Pending change for batch editing\n */\nexport interface PendingChange {\n  /** Row key (usually ID) */\n  rowKey: string;\n  /** The row entity */\n  row: Record<string, unknown>;\n  /** Field that was changed */\n  field: string;\n  /** Original value */\n  oldValue: unknown;\n  /** New value */\n  newValue: unknown;\n  /** Type of change */\n  changeType: 'update' | 'insert' | 'delete';\n}\n\n/**\n * Complete grid state for persistence (internal to EntityDataGrid)\n * Note: For UserView persistence, use ViewGridState from @memberjunction/core-entities\n */\nexport interface GridState {\n  /** Column states */\n  columns: Array<{\n    field: string;\n    width: number;\n    visible: boolean;\n    order: number;\n    /** Column pinning position */\n    pinned?: 'left' | 'right' | null;\n    /** Flex grow factor for auto-sizing */\n    flex?: number;\n    /** Minimum column width */\n    minWidth?: number;\n    /** Maximum column width */\n    maxWidth?: number;\n  }>;\n  /** Sort state */\n  sort: DataGridSortState[];\n  /** Filter state */\n  filters: FilterState[];\n  /** Selected row keys */\n  selection: string[];\n}\n\n/**\n * Export options for grid data\n */\nexport interface ExportOptions {\n  /** Export only visible columns */\n  visibleColumnsOnly?: boolean;\n\n  /** Export only selected rows */\n  selectedRowsOnly?: boolean;\n\n  /** Include headers */\n  includeHeaders?: boolean;\n\n  /** Custom column mapping */\n  columnMapping?: Record<string, string>;\n}\n\n// ========================================\n// Event Types\n// ========================================\n\n/**\n * Event emitted when a foreign key link is clicked in the grid.\n * The parent component should handle navigation to the related record.\n */\nexport interface ForeignKeyClickEvent {\n  /** The ID of the related entity (from EntityFieldInfo.RelatedEntityID) */\n  relatedEntityId: string;\n  /** The ID of the related record (the FK value) */\n  recordId: string;\n  /** The field name that was clicked */\n  fieldName: string;\n  /** The entity name of the related entity (if available) */\n  relatedEntityName?: string;\n}\n\n// ========================================\n// Internal Types\n// ========================================\n\n/**\n * Internal representation of a rendered row\n */\nexport interface GridRowData {\n  /** Row key (usually ID) */\n  key: string;\n  /** Row index in the data array */\n  index: number;\n  /** The entity object */\n  entity: Record<string, unknown>;\n  /** Whether the row is selected */\n  selected: boolean;\n  /** Whether the row is being edited */\n  editing: boolean;\n  /** Whether the row has unsaved changes */\n  dirty: boolean;\n  /** CSS classes for the row */\n  cssClasses: string[];\n}\n\n/**\n * Virtual scroll viewport info\n */\nexport interface VirtualScrollState {\n  /** First visible row index */\n  startIndex: number;\n  /** Last visible row index */\n  endIndex: number;\n  /** Scroll offset from top */\n  scrollTop: number;\n  /** Total scroll height */\n  totalHeight: number;\n  /** Viewport height */\n  viewportHeight: number;\n  /** Number of buffer rows above and below */\n  bufferSize: number;\n}\n\n/**\n * Column runtime state (internal)\n */\nexport interface ColumnRuntimeState {\n  /** Column configuration */\n  config: GridColumnConfig;\n  /** Computed width */\n  computedWidth: number;\n  /** Current sort direction */\n  sortDirection: 'asc' | 'desc' | 'none';\n  /** Sort index for multi-sort */\n  sortIndex: number;\n  /** Current filter value */\n  filterValue: unknown;\n  /** Current visibility */\n  visible: boolean;\n  /** Current order/position */\n  order: number;\n}\n\n/**\n * RunView parameters subset for data loading\n */\nexport interface GridRunViewParams {\n  /** Entity name */\n  entityName: string;\n  /** Extra filter clause */\n  extraFilter?: string;\n  /** Order by clause */\n  orderBy?: string;\n  /** Maximum rows to fetch */\n  maxRows?: number;\n  /** Fields to retrieve */\n  fields?: string[];\n  /** User search string */\n  searchString?: string;\n}\n\n// ========================================\n// Entity Action Types\n// ========================================\n\n/**\n * Configuration for an entity action displayed in the grid toolbar.\n * This is a simplified representation of EntityAction for the UI layer.\n */\nexport interface EntityActionConfig {\n  /** Unique action ID */\n  id: string;\n  /** Display name */\n  name: string;\n  /** Optional description */\n  description?: string;\n  /** Optional icon (Font Awesome class) */\n  icon?: string;\n  /** Whether the action requires selected records */\n  requiresSelection?: boolean;\n  /** Minimum number of selected records required */\n  minSelectedRecords?: number;\n  /** Maximum number of selected records allowed */\n  maxSelectedRecords?: number;\n  /** Invocation type (e.g., 'View', 'SingleRecord', 'MultiRecord') */\n  invocationType?: string;\n  /** Additional action metadata */\n  metadata?: Record<string, unknown>;\n}\n\n// ========================================\n// Visual Customization Types\n// ========================================\n\n/**\n * Header style preset options\n */\nexport type GridHeaderStyle = 'flat' | 'elevated' | 'gradient' | 'bold';\n\n/**\n * Configuration for grid visual appearance\n * All properties are optional - defaults provide an attractive \"out of the box\" experience\n */\nexport interface GridVisualConfig {\n  // Header Styling\n  /** Header style preset: 'flat' | 'elevated' | 'gradient' | 'bold' */\n  headerStyle?: GridHeaderStyle;\n  /** Custom header background color (overrides preset) */\n  headerBackground?: string;\n  /** Custom header text color */\n  headerTextColor?: string;\n  /** Show bottom shadow/border on header */\n  headerShadow?: boolean;\n\n  // Row Styling\n  /** Enable alternating row colors (zebra striping) */\n  alternateRows?: boolean;\n  /** Contrast level for alternating rows: 'subtle' | 'medium' | 'strong' */\n  alternateRowContrast?: 'subtle' | 'medium' | 'strong';\n  /** Enable smooth hover transitions */\n  hoverTransitions?: boolean;\n  /** Hover transition duration in ms */\n  hoverTransitionDuration?: number;\n\n  // Cell Formatting\n  /** Right-align numeric columns automatically */\n  rightAlignNumbers?: boolean;\n  /** Format dates with a friendly format (e.g., \"Jan 15, 2024\" instead of \"2024-01-15\") */\n  friendlyDates?: boolean;\n  /** Render email cells as clickable mailto links */\n  clickableEmails?: boolean;\n  /** Render boolean cells as checkmark/x icons instead of text */\n  booleanIcons?: boolean;\n  /** Render URL cells as clickable links */\n  clickableUrls?: boolean;\n\n  // Selection Styling\n  /** Color for selection indicator (left border on selected rows) */\n  selectionIndicatorColor?: string;\n  /** Width of selection indicator in pixels */\n  selectionIndicatorWidth?: number;\n  /** Selection background color */\n  selectionBackground?: string;\n\n  // Checkbox Column\n  /** Style for checkbox column: 'default' | 'rounded' | 'filled' */\n  checkboxStyle?: 'default' | 'rounded' | 'filled';\n  /** Checkbox accent color */\n  checkboxColor?: string;\n\n  // Loading States\n  /** Show skeleton loading rows instead of spinner */\n  skeletonLoading?: boolean;\n  /** Number of skeleton rows to show */\n  skeletonRowCount?: number;\n\n  // Borders & Spacing\n  /** Border radius for the grid container */\n  borderRadius?: number;\n  /** Cell padding preset: 'compact' | 'normal' | 'comfortable' */\n  cellPadding?: 'compact' | 'normal' | 'comfortable';\n\n  // Accent Color (used for sort indicators, focus states, etc.)\n  /** Primary accent color for interactive elements */\n  accentColor?: string;\n}\n\n/**\n * Default visual configuration - provides attractive defaults out of the box\n */\nexport const DEFAULT_VISUAL_CONFIG: Required<GridVisualConfig> = {\n  // Header - elevated style with shadow\n  headerStyle: 'elevated',\n  headerBackground: '',  // Empty = use CSS variable\n  headerTextColor: '',   // Empty = use CSS variable\n  headerShadow: true,\n\n  // Rows - medium contrast zebra striping with transitions\n  alternateRows: true,\n  alternateRowContrast: 'medium',\n  hoverTransitions: true,\n  hoverTransitionDuration: 150,\n\n  // Cell formatting - smart defaults\n  rightAlignNumbers: true,\n  friendlyDates: true,\n  clickableEmails: true,\n  booleanIcons: true,\n  clickableUrls: true,\n\n  // Selection - mellow yellow accent (avoids conflict with blue hyperlinks)\n  selectionIndicatorColor: '#f9a825',\n  selectionIndicatorWidth: 3,\n  selectionBackground: '#fff9e6',\n\n  // Checkbox - rounded style\n  checkboxStyle: 'rounded',\n  checkboxColor: '#2196F3',\n\n  // Loading - skeleton for modern feel\n  skeletonLoading: true,\n  skeletonRowCount: 8,\n\n  // Borders & Spacing\n  borderRadius: 0,\n  cellPadding: 'normal',\n\n  // Accent color\n  accentColor: '#2196F3'\n};\n"]}
+{"version":3,"file":"grid-types.js","sourceRoot":"","sources":["../../../../src/lib/entity-data-grid/models/grid-types.ts"],"names":[],"mappings":"AAglBA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA+B;IAC/D,sCAAsC;IACtC,WAAW,EAAE,UAAU;IACvB,gBAAgB,EAAE,EAAE,EAAG,2BAA2B;IAClD,eAAe,EAAE,EAAE,EAAI,2BAA2B;IAClD,YAAY,EAAE,IAAI;IAElB,yDAAyD;IACzD,aAAa,EAAE,IAAI;IACnB,oBAAoB,EAAE,QAAQ;IAC9B,gBAAgB,EAAE,IAAI;IACtB,uBAAuB,EAAE,GAAG;IAE5B,mCAAmC;IACnC,iBAAiB,EAAE,IAAI;IACvB,aAAa,EAAE,IAAI;IACnB,eAAe,EAAE,IAAI;IACrB,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;IAEnB,0EAA0E;IAC1E,uBAAuB,EAAE,EAAE,EAAG,+CAA+C;IAC7E,uBAAuB,EAAE,CAAC;IAC1B,mBAAmB,EAAE,EAAE,EAAG,kDAAkD;IAE5E,2BAA2B;IAC3B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,EAAE,EAAG,8CAA8C;IAElE,qCAAqC;IACrC,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,CAAC;IAEnB,oBAAoB;IACpB,YAAY,EAAE,CAAC;IACf,WAAW,EAAE,QAAQ;IAErB,eAAe;IACf,WAAW,EAAE,EAAE,CAAE,8CAA8C;CAChE,CAAC","sourcesContent":["import { TemplateRef } from '@angular/core';\n\n// Re-export shared types from the main types file to avoid duplication\n// These are used by both EntityGridComponent and EntityDataGridComponent\nexport {\n  SortDirection,\n  SortState,\n  GridStateChangedEvent,\n  // View grid types - re-exported from types.ts which gets them from core-entities\n  ViewGridColumnSetting,\n  ViewGridSortSetting,\n  ViewGridState\n} from '../../types';\n\n// ========================================\n// Enums and Union Types\n// ========================================\n\n/**\n * Selection mode for the grid\n * - 'none': No selection allowed\n * - 'single': Only one row can be selected at a time\n * - 'multiple': Multiple rows can be selected (click to toggle)\n * - 'checkbox': Checkbox column for selection\n */\nexport type GridSelectionMode = 'none' | 'single' | 'multiple' | 'checkbox';\n\n/**\n * Edit mode for the grid\n * - 'none': No editing allowed\n * - 'cell': Individual cell editing\n * - 'row': Full row editing\n * - 'batch': Batch editing with explicit save\n */\nexport type GridEditMode = 'none' | 'cell' | 'row' | 'batch';\n\n/**\n * Grid lines display mode\n */\nexport type GridLinesMode = 'none' | 'horizontal' | 'vertical' | 'both';\n\n/**\n * Filter operators for column filtering\n */\nexport type FilterOperator =\n  | 'eq' | 'neq'\n  | 'gt' | 'gte' | 'lt' | 'lte'\n  | 'contains' | 'startswith' | 'endswith'\n  | 'isnull' | 'isnotnull'\n  | 'in' | 'notin';\n\n/**\n * Column data type for formatting and editing\n */\nexport type GridColumnType =\n  | 'string'\n  | 'number'\n  | 'boolean'\n  | 'date'\n  | 'datetime'\n  | 'currency'\n  | 'percent'\n  | 'custom';\n\n// ========================================\n// Column Configuration\n// ========================================\n\n/**\n * Configuration for a single grid column\n */\nexport interface GridColumnConfig {\n  /** Field name on the entity */\n  field: string;\n\n  /** Display title (defaults to field name) */\n  title?: string;\n\n  /** Column width in pixels (or 'auto') */\n  width?: number | 'auto';\n\n  /** Minimum width for resizing */\n  minWidth?: number;\n\n  /** Maximum width for resizing */\n  maxWidth?: number;\n\n  /** Column is visible */\n  visible?: boolean;\n\n  /** Column is sortable */\n  sortable?: boolean;\n\n  /** Column is filterable */\n  filterable?: boolean;\n\n  /** Column is editable */\n  editable?: boolean;\n\n  /** Column is resizable */\n  resizable?: boolean;\n\n  /** Column is reorderable */\n  reorderable?: boolean;\n\n  /** Data type for formatting and editing */\n  type?: GridColumnType;\n\n  /** Format string (e.g., 'yyyy-MM-dd' for dates, '#,##0.00' for numbers) */\n  format?: string;\n\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n\n  /** Header alignment (defaults to align) */\n  headerAlign?: 'left' | 'center' | 'right';\n\n  /** CSS class for cells - can be string or function */\n  cellClass?: string | ((row: Record<string, unknown>, column: GridColumnConfig) => string);\n\n  /** CSS class for header */\n  headerClass?: string;\n\n  /** Custom cell template reference */\n  cellTemplate?: TemplateRef<GridCellTemplateContext>;\n\n  /** Custom header template reference */\n  headerTemplate?: TemplateRef<GridHeaderTemplateContext>;\n\n  /** Custom editor template reference */\n  editorTemplate?: TemplateRef<GridEditorTemplateContext>;\n\n  /** Cell value formatter function */\n  formatter?: (value: unknown, row: Record<string, unknown>, column: GridColumnConfig) => string;\n\n  /** Cell style function */\n  cellStyle?: (row: Record<string, unknown>, column: GridColumnConfig) => Record<string, string>;\n\n  /** Whether to show tooltip on hover */\n  showTooltip?: boolean;\n\n  /** Custom tooltip content */\n  tooltip?: string | ((row: Record<string, unknown>, column: GridColumnConfig) => string);\n\n  /** Frozen column position (alias for pinned, for backward compatibility) */\n  frozen?: 'left' | 'right' | false;\n\n  /** Column pinning position (AG Grid terminology) */\n  pinned?: 'left' | 'right' | null;\n\n  /** Flex grow factor for auto-sizing columns */\n  flex?: number;\n\n  /** Column group (for grouped headers) */\n  group?: string;\n\n  /** Filter options for dropdown filters */\n  filterOptions?: Array<{ value: unknown; label: string }>;\n\n  /** Sort order index (for default multi-sort) */\n  sortIndex?: number;\n\n  /** Sort direction (for default sort) */\n  sortDirection?: 'asc' | 'desc';\n}\n\n/**\n * Context provided to custom cell templates\n */\nexport interface GridCellTemplateContext {\n  /** The row data (entity) */\n  row: Record<string, unknown>;\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** The cell value */\n  value: unknown;\n  /** Row index in the current view */\n  rowIndex: number;\n  /** Whether the cell is currently being edited */\n  isEditing: boolean;\n}\n\n/**\n * Context provided to custom header templates\n */\nexport interface GridHeaderTemplateContext {\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** Current sort direction for this column */\n  sortDirection: 'asc' | 'desc' | 'none';\n  /** Current filter value for this column */\n  filterValue: unknown;\n}\n\n/**\n * Context provided to custom editor templates\n */\nexport interface GridEditorTemplateContext {\n  /** The row data (entity) */\n  row: Record<string, unknown>;\n  /** Column configuration */\n  column: GridColumnConfig;\n  /** Current cell value */\n  value: unknown;\n  /** Row index in the current view */\n  rowIndex: number;\n  /** Function to commit the edit with a new value */\n  commitEdit: (newValue: unknown) => void;\n  /** Function to cancel the edit */\n  cancelEdit: () => void;\n}\n\n// ========================================\n// Toolbar Configuration\n// ========================================\n\n/**\n * Configuration for the grid toolbar\n */\nexport interface GridToolbarConfig {\n  /** Show search input */\n  showSearch?: boolean;\n\n  /** Search placeholder text */\n  searchPlaceholder?: string;\n\n  /** Search debounce time in ms */\n  searchDebounce?: number;\n\n  /** Show refresh button */\n  showRefresh?: boolean;\n\n  /** Show add button */\n  showAdd?: boolean;\n\n  /** Show delete button (for selected rows) */\n  showDelete?: boolean;\n\n  /** Show export button */\n  showExport?: boolean;\n\n  /** Export formats available */\n  exportFormats?: Array<'excel' | 'csv' | 'json'>;\n\n  /** Show column chooser button */\n  showColumnChooser?: boolean;\n\n  /** Show filter toggle button */\n  showFilterToggle?: boolean;\n\n  /** Custom toolbar buttons */\n  customButtons?: GridToolbarButton[];\n\n  /** Toolbar position */\n  position?: 'top' | 'bottom' | 'both';\n\n  /** Show row count */\n  showRowCount?: boolean;\n\n  /** Show selection count */\n  showSelectionCount?: boolean;\n}\n\n/**\n * Custom toolbar button configuration\n */\nexport interface GridToolbarButton {\n  /** Unique button ID */\n  id: string;\n\n  /** Button text */\n  text?: string;\n\n  /** Button icon (Font Awesome class) */\n  icon?: string;\n\n  /** Button tooltip */\n  tooltip?: string;\n\n  /** Button is disabled - can be boolean or function */\n  disabled?: boolean | (() => boolean);\n\n  /** Button is visible - can be boolean or function */\n  visible?: boolean | (() => boolean);\n\n  /** Button CSS class */\n  cssClass?: string;\n\n  /** Button position: 'left' | 'right' */\n  position?: 'left' | 'right';\n\n  /** Click handler (if not using event) */\n  onClick?: () => void;\n}\n\n// ========================================\n// State Types (Extended for EntityDataGrid)\n// ========================================\n\n/**\n * Extended sort state with multi-sort index\n * Extends the base SortState from types.ts with an index for multi-sort ordering\n */\nexport interface DataGridSortState {\n  /** Field name being sorted */\n  field: string;\n  /** Sort direction */\n  direction: 'asc' | 'desc';\n  /** Index for multi-sort ordering */\n  index: number;\n}\n\n/**\n * Filter state for a column\n */\nexport interface FilterState {\n  /** Field name being filtered */\n  field: string;\n  /** Filter operator */\n  operator: FilterOperator;\n  /** Filter value */\n  value: unknown;\n}\n\n/**\n * Pending change for batch editing\n */\nexport interface PendingChange {\n  /** Row key (usually ID) */\n  rowKey: string;\n  /** The row entity */\n  row: Record<string, unknown>;\n  /** Field that was changed */\n  field: string;\n  /** Original value */\n  oldValue: unknown;\n  /** New value */\n  newValue: unknown;\n  /** Type of change */\n  changeType: 'update' | 'insert' | 'delete';\n}\n\n/**\n * Complete grid state for persistence (internal to EntityDataGrid)\n * Note: For UserView persistence, use ViewGridState from @memberjunction/core-entities\n */\nexport interface GridState {\n  /** Column states */\n  columns: Array<{\n    field: string;\n    width: number;\n    visible: boolean;\n    order: number;\n    /** Column pinning position */\n    pinned?: 'left' | 'right' | null;\n    /** Flex grow factor for auto-sizing */\n    flex?: number;\n    /** Minimum column width */\n    minWidth?: number;\n    /** Maximum column width */\n    maxWidth?: number;\n  }>;\n  /** Sort state */\n  sort: DataGridSortState[];\n  /** Filter state */\n  filters: FilterState[];\n  /** Selected row keys */\n  selection: string[];\n}\n\n/**\n * Export options for grid data\n */\nexport interface ExportOptions {\n  /** Export only visible columns */\n  visibleColumnsOnly?: boolean;\n\n  /** Export only selected rows */\n  selectedRowsOnly?: boolean;\n\n  /** Include headers */\n  includeHeaders?: boolean;\n\n  /** Custom column mapping */\n  columnMapping?: Record<string, string>;\n}\n\n// ========================================\n// Event Types\n// ========================================\n\n/**\n * Event emitted when a foreign key link is clicked in the grid.\n * The parent component should handle navigation to the related record.\n */\nexport interface ForeignKeyClickEvent {\n  /** The ID of the related entity (from EntityFieldInfo.RelatedEntityID) */\n  relatedEntityId: string;\n  /** The ID of the related record (the FK value) */\n  recordId: string;\n  /** The field name that was clicked */\n  fieldName: string;\n  /** The entity name of the related entity (if available) */\n  relatedEntityName?: string;\n}\n\n// ========================================\n// Internal Types\n// ========================================\n\n/**\n * Internal representation of a rendered row\n */\nexport interface GridRowData {\n  /** Row key (usually ID) */\n  key: string;\n  /** Row index in the data array */\n  index: number;\n  /** The entity object */\n  entity: Record<string, unknown>;\n  /** Whether the row is selected */\n  selected: boolean;\n  /** Whether the row is being edited */\n  editing: boolean;\n  /** Whether the row has unsaved changes */\n  dirty: boolean;\n  /** CSS classes for the row */\n  cssClasses: string[];\n}\n\n/**\n * Virtual scroll viewport info\n */\nexport interface VirtualScrollState {\n  /** First visible row index */\n  startIndex: number;\n  /** Last visible row index */\n  endIndex: number;\n  /** Scroll offset from top */\n  scrollTop: number;\n  /** Total scroll height */\n  totalHeight: number;\n  /** Viewport height */\n  viewportHeight: number;\n  /** Number of buffer rows above and below */\n  bufferSize: number;\n}\n\n/**\n * Column runtime state (internal)\n */\nexport interface ColumnRuntimeState {\n  /** Column configuration */\n  config: GridColumnConfig;\n  /** Computed width */\n  computedWidth: number;\n  /** Current sort direction */\n  sortDirection: 'asc' | 'desc' | 'none';\n  /** Sort index for multi-sort */\n  sortIndex: number;\n  /** Current filter value */\n  filterValue: unknown;\n  /** Current visibility */\n  visible: boolean;\n  /** Current order/position */\n  order: number;\n}\n\n/**\n * RunView parameters subset for data loading\n */\nexport interface GridRunViewParams {\n  /** Entity name */\n  entityName: string;\n  /** Extra filter clause */\n  extraFilter?: string;\n  /** Order by clause */\n  orderBy?: string;\n  /** Maximum rows to fetch */\n  maxRows?: number;\n  /** Fields to retrieve */\n  fields?: string[];\n  /** User search string */\n  searchString?: string;\n}\n\n// ========================================\n// Entity Action Types\n// ========================================\n\n/**\n * Configuration for an entity action displayed in the grid toolbar.\n * This is a simplified representation of EntityAction for the UI layer.\n */\nexport interface EntityActionConfig {\n  /** Unique action ID */\n  id: string;\n  /** Display name */\n  name: string;\n  /** Optional description */\n  description?: string;\n  /** Optional icon (Font Awesome class) */\n  icon?: string;\n  /** Whether the action requires selected records */\n  requiresSelection?: boolean;\n  /** Minimum number of selected records required */\n  minSelectedRecords?: number;\n  /** Maximum number of selected records allowed */\n  maxSelectedRecords?: number;\n  /** Invocation type (e.g., 'View', 'SingleRecord', 'MultiRecord') */\n  invocationType?: string;\n  /** Additional action metadata */\n  metadata?: Record<string, unknown>;\n}\n\n// ========================================\n// Visual Customization Types\n// ========================================\n\n/**\n * Header style preset options\n */\nexport type GridHeaderStyle = 'flat' | 'elevated' | 'gradient' | 'bold';\n\n/**\n * Configuration for grid visual appearance\n * All properties are optional - defaults provide an attractive \"out of the box\" experience\n */\nexport interface GridVisualConfig {\n  // Header Styling\n  /** Header style preset: 'flat' | 'elevated' | 'gradient' | 'bold' */\n  headerStyle?: GridHeaderStyle;\n  /** Custom header background color (overrides preset) */\n  headerBackground?: string;\n  /** Custom header text color */\n  headerTextColor?: string;\n  /** Show bottom shadow/border on header */\n  headerShadow?: boolean;\n\n  // Row Styling\n  /** Enable alternating row colors (zebra striping) */\n  alternateRows?: boolean;\n  /** Contrast level for alternating rows: 'subtle' | 'medium' | 'strong' */\n  alternateRowContrast?: 'subtle' | 'medium' | 'strong';\n  /** Enable smooth hover transitions */\n  hoverTransitions?: boolean;\n  /** Hover transition duration in ms */\n  hoverTransitionDuration?: number;\n\n  // Cell Formatting\n  /** Right-align numeric columns automatically */\n  rightAlignNumbers?: boolean;\n  /** Format dates with a friendly format (e.g., \"Jan 15, 2024\" instead of \"2024-01-15\") */\n  friendlyDates?: boolean;\n  /** Render email cells as clickable mailto links */\n  clickableEmails?: boolean;\n  /** Render boolean cells as checkmark/x icons instead of text */\n  booleanIcons?: boolean;\n  /** Render URL cells as clickable links */\n  clickableUrls?: boolean;\n\n  // Selection Styling\n  /** Color for selection indicator (left border on selected rows) */\n  selectionIndicatorColor?: string;\n  /** Width of selection indicator in pixels */\n  selectionIndicatorWidth?: number;\n  /** Selection background color */\n  selectionBackground?: string;\n\n  // Checkbox Column\n  /** Style for checkbox column: 'default' | 'rounded' | 'filled' */\n  checkboxStyle?: 'default' | 'rounded' | 'filled';\n  /** Checkbox accent color */\n  checkboxColor?: string;\n\n  // Loading States\n  /** Show skeleton loading rows instead of spinner */\n  skeletonLoading?: boolean;\n  /** Number of skeleton rows to show */\n  skeletonRowCount?: number;\n\n  // Borders & Spacing\n  /** Border radius for the grid container */\n  borderRadius?: number;\n  /** Cell padding preset: 'compact' | 'normal' | 'comfortable' */\n  cellPadding?: 'compact' | 'normal' | 'comfortable';\n\n  // Accent Color (used for sort indicators, focus states, etc.)\n  /** Primary accent color for interactive elements */\n  accentColor?: string;\n}\n\n/**\n * Default visual configuration - provides attractive defaults out of the box\n */\nexport const DEFAULT_VISUAL_CONFIG: Required<GridVisualConfig> = {\n  // Header - elevated style with shadow\n  headerStyle: 'elevated',\n  headerBackground: '',  // Empty = use CSS variable\n  headerTextColor: '',   // Empty = use CSS variable\n  headerShadow: true,\n\n  // Rows - medium contrast zebra striping with transitions\n  alternateRows: true,\n  alternateRowContrast: 'medium',\n  hoverTransitions: true,\n  hoverTransitionDuration: 150,\n\n  // Cell formatting - smart defaults\n  rightAlignNumbers: true,\n  friendlyDates: true,\n  clickableEmails: true,\n  booleanIcons: true,\n  clickableUrls: true,\n\n  // Selection - mellow yellow accent (avoids conflict with blue hyperlinks)\n  selectionIndicatorColor: '',  // Empty = use CSS variable --mj-status-warning\n  selectionIndicatorWidth: 3,\n  selectionBackground: '',  // Empty = use CSS variable --mj-status-warning-bg\n\n  // Checkbox - rounded style\n  checkboxStyle: 'rounded',\n  checkboxColor: '',  // Empty = use CSS variable --mj-brand-primary\n\n  // Loading - skeleton for modern feel\n  skeletonLoading: true,\n  skeletonRowCount: 8,\n\n  // Borders & Spacing\n  borderRadius: 0,\n  cellPadding: 'normal',\n\n  // Accent color\n  accentColor: ''  // Empty = use CSS variable --mj-brand-primary\n};\n"]}

package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js

@@ -781,11 +781,11 @@ export class EntityRecordDetailPanelComponent {
             i0.ɵɵclassProp("fa-chevron-down", ctx.relationshipsSectionExpanded)("fa-chevron-right", !ctx.relationshipsSectionExpanded);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 22 : -1);
-        } }, dependencies: [i1.LoadingComponent, i2.PillComponent], styles: [".entity-record-card-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #757575;\n  flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n  color: #424242;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  font-size: 14px;\n  color: #757575;\n  margin-right: 10px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n\n.loading-icon[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section[_ngcontent-%COMP%] {\n  padding: 12px 0;\n  text-align: center;\n  color: #9e9e9e;\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading[_ngcontent-%COMP%] {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid #f5f5f5;\n}\n.field-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #424242;\n  word-break: break-word;\n}\n\n\n\n.field-row-pk[_ngcontent-%COMP%] {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.pk-row[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\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: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.field-row-fk[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.fk-value-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #333;\n  font-weight: 500;\n}\n\n.fk-link-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\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: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n.fk-link-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.fk-id-only[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: #757575;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.related-entity-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  margin-bottom: 8px;\n}\n\n\n\n.related-entity-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n}\n.related-entity-header.loading[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.expand-chevron[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: #757575;\n}\n\n.related-entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: #424242;\n}\n\n.related-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #757575;\n  min-width: 24px;\n  text-align: right;\n}\n\n\n\n.related-records-list[_ngcontent-%COMP%] {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: #9e9e9e;\n  font-size: 12px;\n}\n\n.related-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: white;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid #e8e8e8;\n}\n.related-record-item[_ngcontent-%COMP%]:hover {\n  border-color: #1976d2;\n  box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);\n}\n.related-record-item[_ngcontent-%COMP%]:hover   .record-open-icon[_ngcontent-%COMP%] {\n  color: #1976d2;\n}\n\n.record-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #bdbdbd;\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1976d2;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link[_ngcontent-%COMP%]:hover {\n  background: #e3f2fd;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: #1976d2;\n  color: white;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn[_ngcontent-%COMP%]:hover {\n  background: #1565c0;\n}\n.open-record-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}"] });
+        } }, dependencies: [i1.LoadingComponent, i2.PillComponent], styles: [".entity-record-card-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\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  flex-shrink: 0;\n}\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  width: 20px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-right: 10px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.loading-icon[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section[_ngcontent-%COMP%] {\n  padding: 12px 0;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading[_ngcontent-%COMP%] {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n\n\n.field-row-pk[_ngcontent-%COMP%] {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\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-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.field-row-fk[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.fk-value-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value[_ngcontent-%COMP%] {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\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-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n\n.fk-id-only[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.related-entity-group[_ngcontent-%COMP%] {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n\n\n.related-entity-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.related-entity-header.clickable[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading[_ngcontent-%COMP%] {\n  opacity: 0.7;\n}\n\n.expand-chevron[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n\n\n.related-records-list[_ngcontent-%COMP%] {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item[_ngcontent-%COMP%]:hover   .record-open-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.record-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityRecordDetailPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-record-detail-panel', template: "<div class=\"entity-record-card-container\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-title-row\">\n      @if (entity?.Icon) {\n        <i [class]=\"getEntityIconClass()\" class=\"entity-icon\"></i>\n      }\n      <h3 class=\"panel-title\">{{ recordTitle }}</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Details Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('details')\">\n        <i class=\"fa-solid fa-info-circle section-icon\"></i>\n        <span class=\"section-title\">Details</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"detailsSectionExpanded\" [class.fa-chevron-right]=\"!detailsSectionExpanded\"></i>\n      </div>\n\n      @if (detailsSectionExpanded) {\n        <div class=\"section-content\">\n          @for (field of displayFields; track field.name) {\n            <!-- Primary Key Field - Compact with copy button -->\n            @if (field.type === 'primary-key') {\n              <div class=\"field-row field-row-pk\">\n                <div class=\"pk-row\">\n                  <i class=\"fa-solid fa-key pk-icon\"></i>\n                  <span class=\"field-label\">{{ field.label }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyToClipboard(field.value, $event)\" title=\"Copy ID\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Foreign Key Field - Show friendly name with open button -->\n            @else if (field.type === 'foreign-key') {\n              <div class=\"field-row field-row-fk\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <div class=\"fk-value-row\" [class.fk-id-only]=\"!hasFriendlyName(field)\">\n                  @if (hasFriendlyName(field)) {\n                    <span class=\"field-value fk-display-value\">{{ field.displayValue }}</span>\n                  } @else {\n                    <!-- No friendly name available, show ID in muted style -->\n                    <span class=\"field-value fk-id-value\">{{ field.value }}</span>\n                  }\n                  <!-- Always show open button for FK fields that have a related entity -->\n                  @if (field.relatedEntityName) {\n                    <button class=\"fk-link-btn\" (click)=\"onForeignKeyClick(field, $event)\" title=\"Open {{ field.relatedEntityName }} record\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Enum Field - Show as pill -->\n            @else if (field.type === 'enum') {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <mj-pill [value]=\"field.value\"></mj-pill>\n              </div>\n            }\n            <!-- Regular Field -->\n            @else {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <span class=\"field-value\">{{ field.value }}</span>\n              </div>\n            }\n          }\n\n          @if (displayFields.length === 0) {\n            <div class=\"empty-section\">No details available</div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Relationships Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('relationships')\">\n        <i class=\"fa-solid fa-project-diagram section-icon\"></i>\n        <span class=\"section-title\">Related Records</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"relationshipsSectionExpanded\" [class.fa-chevron-right]=\"!relationshipsSectionExpanded\"></i>\n      </div>\n\n      @if (relationshipsSectionExpanded) {\n        <div class=\"section-content\">\n          @if (isLoadingRelationships) {\n            <div class=\"relationships-loading\">\n              <mj-loading text=\"Loading related records...\" size=\"small\"></mj-loading>\n            </div>\n          } @else if (relatedEntitiesWithRecords.length === 0) {\n            <div class=\"empty-section\">No related records</div>\n          } @else {\n            @for (relEntity of relatedEntitiesWithRecords; track relEntity.relatedEntityName) {\n              <div class=\"related-entity-group\" [class.expanded]=\"relEntity.isExpanded\">\n                <!-- Header row - click to expand -->\n                <div\n                  class=\"related-entity-header\"\n                  [class.clickable]=\"relEntity.count > 0\"\n                  (click)=\"toggleRelatedEntityExpansion(relEntity, $event)\">\n                  <i class=\"fa-solid expand-chevron\"\n                     [class.fa-chevron-down]=\"relEntity.isExpanded\"\n                     [class.fa-chevron-right]=\"!relEntity.isExpanded\"></i>\n                  <i [class]=\"getRelatedEntityIcon(relEntity)\"></i>\n                  <span class=\"related-entity-name\">{{ relEntity.relatedEntityName }}</span>\n                  <span class=\"related-entity-count\">{{ relEntity.count }}</span>\n                </div>\n\n                <!-- Expanded records list -->\n                @if (relEntity.isExpanded) {\n                  <div class=\"related-records-list\">\n                    @if (relEntity.isLoadingRecords) {\n                      <div class=\"records-loading\">\n                        <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                      </div>\n                    } @else {\n                      @for (rec of relEntity.records; track $index) {\n                        <div class=\"related-record-item\" (click)=\"onRelatedRecordClick(relEntity, rec, $event)\">\n                          <div class=\"record-info\">\n                            <span class=\"record-name\">{{ getRelatedRecordDisplayName(relEntity, rec) }}</span>\n                            @if (getRelatedRecordSubtitle(relEntity, rec); as subtitle) {\n                              <span class=\"record-subtitle\">{{ subtitle }}</span>\n                            }\n                          </div>\n                          <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                        </div>\n                      }\n\n                      <!-- View All link if there are more records -->\n                      @if (relEntity.count > 10) {\n                        <div class=\"view-all-link\" (click)=\"onViewAllRelated(relEntity, $event)\">\n                          <span>View all {{ relEntity.count }} records</span>\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"panel-footer\">\n    <button class=\"open-record-btn\" (click)=\"onOpenRecord()\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n      Open Full Record\n    </button>\n  </div>\n</div>\n", styles: [".entity-record-card-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.panel-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon {\n  font-size: 18px;\n  color: #757575;\n  flex-shrink: 0;\n}\n\n.panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.close-btn:hover {\n  background: #f5f5f5;\n  color: #424242;\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section {\n  margin-bottom: 8px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header:hover {\n  background: #f8f9fa;\n}\n\n.section-icon {\n  width: 20px;\n  font-size: 14px;\n  color: #757575;\n  margin-right: 10px;\n}\n\n.section-title {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: #424242;\n}\n\n.loading-icon {\n  margin-right: 8px;\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.expand-icon {\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.section-content {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section {\n  padding: 12px 0;\n  text-align: center;\n  color: #9e9e9e;\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid #f5f5f5;\n}\n.field-row:last-child {\n  border-bottom: none;\n}\n\n.field-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: #9e9e9e;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value {\n  font-size: 14px;\n  color: #424242;\n  word-break: break-word;\n}\n\n/* Primary Key Field - Compact row with key icon and copy button */\n.field-row-pk {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon {\n  font-size: 12px;\n  color: #9e9e9e;\n}\n\n.pk-row .field-label {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn {\n  width: 28px;\n  height: 28px;\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: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n.copy-btn i {\n  font-size: 12px;\n}\n\n/* Foreign Key Field - Display name with link button */\n.field-row-fk {\n  padding: 8px 0;\n}\n\n.fk-value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value {\n  flex: 1;\n  color: #333;\n  font-weight: 500;\n}\n\n.fk-link-btn {\n  width: 28px;\n  height: 28px;\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: #9e9e9e;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn:hover {\n  background: #e3f2fd;\n  color: #1976d2;\n}\n.fk-link-btn i {\n  font-size: 11px;\n}\n\n/* FK without friendly name - show ID in muted style */\n.fk-id-only {\n  background: #f8f9fa;\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value {\n  font-size: 12px;\n  font-family: monospace;\n  color: #757575;\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related Entity Group - expandable container */\n.related-entity-group {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded {\n  background: #f8f9fa;\n  margin-bottom: 8px;\n}\n\n/* Header row */\n.related-entity-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable {\n  cursor: pointer;\n}\n.related-entity-header.clickable:hover {\n  background: #f0f0f0;\n}\n.related-entity-header.loading {\n  opacity: 0.7;\n}\n\n.expand-chevron {\n  width: 12px;\n  font-size: 10px;\n  color: #9e9e9e;\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header i:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: #757575;\n}\n\n.related-entity-name {\n  flex: 1;\n  font-size: 13px;\n  color: #424242;\n}\n\n.related-entity-count {\n  font-size: 13px;\n  font-weight: 500;\n  color: #757575;\n  min-width: 24px;\n  text-align: right;\n}\n\n/* Expanded records list */\n.related-records-list {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: #9e9e9e;\n  font-size: 12px;\n}\n\n.related-record-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: white;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid #e8e8e8;\n}\n.related-record-item:hover {\n  border-color: #1976d2;\n  box-shadow: 0 1px 4px rgba(25, 118, 210, 0.15);\n}\n.related-record-item:hover .record-open-icon {\n  color: #1976d2;\n}\n\n.record-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle {\n  font-size: 11px;\n  color: #757575;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon {\n  font-size: 11px;\n  color: #bdbdbd;\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #1976d2;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link:hover {\n  background: #e3f2fd;\n}\n\n.panel-footer {\n  padding: 16px 20px;\n  border-top: 1px solid #e0e0e0;\n  flex-shrink: 0;\n}\n\n.open-record-btn {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: #1976d2;\n  color: white;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn:hover {\n  background: #1565c0;\n}\n.open-record-btn:active {\n  transform: scale(0.98);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-record-detail-panel', template: "<div class=\"entity-record-card-container\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"panel-title-row\">\n      @if (entity?.Icon) {\n        <i [class]=\"getEntityIconClass()\" class=\"entity-icon\"></i>\n      }\n      <h3 class=\"panel-title\">{{ recordTitle }}</h3>\n    </div>\n    <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"panel-content\">\n    <!-- Details Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('details')\">\n        <i class=\"fa-solid fa-info-circle section-icon\"></i>\n        <span class=\"section-title\">Details</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"detailsSectionExpanded\" [class.fa-chevron-right]=\"!detailsSectionExpanded\"></i>\n      </div>\n\n      @if (detailsSectionExpanded) {\n        <div class=\"section-content\">\n          @for (field of displayFields; track field.name) {\n            <!-- Primary Key Field - Compact with copy button -->\n            @if (field.type === 'primary-key') {\n              <div class=\"field-row field-row-pk\">\n                <div class=\"pk-row\">\n                  <i class=\"fa-solid fa-key pk-icon\"></i>\n                  <span class=\"field-label\">{{ field.label }}</span>\n                  <button class=\"copy-btn\" (click)=\"copyToClipboard(field.value, $event)\" title=\"Copy ID\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                </div>\n              </div>\n            }\n            <!-- Foreign Key Field - Show friendly name with open button -->\n            @else if (field.type === 'foreign-key') {\n              <div class=\"field-row field-row-fk\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <div class=\"fk-value-row\" [class.fk-id-only]=\"!hasFriendlyName(field)\">\n                  @if (hasFriendlyName(field)) {\n                    <span class=\"field-value fk-display-value\">{{ field.displayValue }}</span>\n                  } @else {\n                    <!-- No friendly name available, show ID in muted style -->\n                    <span class=\"field-value fk-id-value\">{{ field.value }}</span>\n                  }\n                  <!-- Always show open button for FK fields that have a related entity -->\n                  @if (field.relatedEntityName) {\n                    <button class=\"fk-link-btn\" (click)=\"onForeignKeyClick(field, $event)\" title=\"Open {{ field.relatedEntityName }} record\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Enum Field - Show as pill -->\n            @else if (field.type === 'enum') {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <mj-pill [value]=\"field.value\"></mj-pill>\n              </div>\n            }\n            <!-- Regular Field -->\n            @else {\n              <div class=\"field-row\">\n                <span class=\"field-label\">{{ field.label }}</span>\n                <span class=\"field-value\">{{ field.value }}</span>\n              </div>\n            }\n          }\n\n          @if (displayFields.length === 0) {\n            <div class=\"empty-section\">No details available</div>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Relationships Section -->\n    <div class=\"section\">\n      <div class=\"section-header\" (click)=\"toggleSection('relationships')\">\n        <i class=\"fa-solid fa-project-diagram section-icon\"></i>\n        <span class=\"section-title\">Related Records</span>\n        <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"relationshipsSectionExpanded\" [class.fa-chevron-right]=\"!relationshipsSectionExpanded\"></i>\n      </div>\n\n      @if (relationshipsSectionExpanded) {\n        <div class=\"section-content\">\n          @if (isLoadingRelationships) {\n            <div class=\"relationships-loading\">\n              <mj-loading text=\"Loading related records...\" size=\"small\"></mj-loading>\n            </div>\n          } @else if (relatedEntitiesWithRecords.length === 0) {\n            <div class=\"empty-section\">No related records</div>\n          } @else {\n            @for (relEntity of relatedEntitiesWithRecords; track relEntity.relatedEntityName) {\n              <div class=\"related-entity-group\" [class.expanded]=\"relEntity.isExpanded\">\n                <!-- Header row - click to expand -->\n                <div\n                  class=\"related-entity-header\"\n                  [class.clickable]=\"relEntity.count > 0\"\n                  (click)=\"toggleRelatedEntityExpansion(relEntity, $event)\">\n                  <i class=\"fa-solid expand-chevron\"\n                     [class.fa-chevron-down]=\"relEntity.isExpanded\"\n                     [class.fa-chevron-right]=\"!relEntity.isExpanded\"></i>\n                  <i [class]=\"getRelatedEntityIcon(relEntity)\"></i>\n                  <span class=\"related-entity-name\">{{ relEntity.relatedEntityName }}</span>\n                  <span class=\"related-entity-count\">{{ relEntity.count }}</span>\n                </div>\n\n                <!-- Expanded records list -->\n                @if (relEntity.isExpanded) {\n                  <div class=\"related-records-list\">\n                    @if (relEntity.isLoadingRecords) {\n                      <div class=\"records-loading\">\n                        <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                      </div>\n                    } @else {\n                      @for (rec of relEntity.records; track $index) {\n                        <div class=\"related-record-item\" (click)=\"onRelatedRecordClick(relEntity, rec, $event)\">\n                          <div class=\"record-info\">\n                            <span class=\"record-name\">{{ getRelatedRecordDisplayName(relEntity, rec) }}</span>\n                            @if (getRelatedRecordSubtitle(relEntity, rec); as subtitle) {\n                              <span class=\"record-subtitle\">{{ subtitle }}</span>\n                            }\n                          </div>\n                          <i class=\"fa-solid fa-external-link-alt record-open-icon\"></i>\n                        </div>\n                      }\n\n                      <!-- View All link if there are more records -->\n                      @if (relEntity.count > 10) {\n                        <div class=\"view-all-link\" (click)=\"onViewAllRelated(relEntity, $event)\">\n                          <span>View all {{ relEntity.count }} records</span>\n                          <i class=\"fa-solid fa-arrow-right\"></i>\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Footer -->\n  <div class=\"panel-footer\">\n    <button class=\"open-record-btn\" (click)=\"onOpenRecord()\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n      Open Full Record\n    </button>\n  </div>\n</div>\n", styles: [".entity-record-card-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.panel-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.entity-icon {\n  font-size: 18px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n.panel-title {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.close-btn {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\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  flex-shrink: 0;\n}\n.close-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n}\n\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.section {\n  margin-bottom: 8px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  padding: 12px 20px;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s ease;\n}\n.section-header:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.section-icon {\n  width: 20px;\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  margin-right: 10px;\n}\n\n.section-title {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.loading-icon {\n  margin-right: 8px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.expand-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.section-content {\n  padding: 0 20px 12px 20px;\n}\n\n.empty-section {\n  padding: 12px 0;\n  text-align: center;\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n.relationships-loading {\n  padding: 20px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.field-row {\n  display: flex;\n  flex-direction: column;\n  padding: 8px 0;\n  border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n.field-row:last-child {\n  border-bottom: none;\n}\n\n.field-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 2px;\n}\n\n.field-value {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n}\n\n/* Primary Key Field - Compact row with key icon and copy button */\n.field-row-pk {\n  flex-direction: row;\n  padding: 6px 0;\n}\n\n.pk-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.pk-icon {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.pk-row .field-label {\n  margin-bottom: 0;\n  flex: 1;\n}\n\n.copy-btn {\n  width: 28px;\n  height: 28px;\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-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.copy-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n.copy-btn i {\n  font-size: 12px;\n}\n\n/* Foreign Key Field - Display name with link button */\n.field-row-fk {\n  padding: 8px 0;\n}\n\n.fk-value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fk-display-value {\n  flex: 1;\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.fk-link-btn {\n  width: 28px;\n  height: 28px;\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-disabled);\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n.fk-link-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.fk-link-btn i {\n  font-size: 11px;\n}\n\n/* FK without friendly name - show ID in muted style */\n.fk-id-only {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n  padding: 4px 8px;\n}\n\n.fk-id-value {\n  font-size: 12px;\n  font-family: monospace;\n  color: var(--mj-text-muted);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Related Entity Group - expandable container */\n.related-entity-group {\n  margin-bottom: 4px;\n  border-radius: 6px;\n  overflow: hidden;\n}\n.related-entity-group.expanded {\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n/* Header row */\n.related-entity-header {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  gap: 8px;\n  transition: background 0.15s ease;\n}\n.related-entity-header.clickable {\n  cursor: pointer;\n}\n.related-entity-header.clickable:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.related-entity-header.loading {\n  opacity: 0.7;\n}\n\n.expand-chevron {\n  width: 12px;\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.related-entity-header i:nth-child(2) {\n  width: 16px;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n}\n\n.related-entity-name {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.related-entity-count {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-muted);\n  min-width: 24px;\n  text-align: right;\n}\n\n/* Expanded records list */\n.related-records-list {\n  padding: 4px 8px 8px 32px;\n}\n\n.records-loading {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 0;\n  color: var(--mj-text-disabled);\n  font-size: 12px;\n}\n\n.related-record-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  margin-bottom: 2px;\n  background: var(--mj-bg-surface);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid var(--mj-border-default);\n}\n.related-record-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 1px 4px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.related-record-item:hover .record-open-icon {\n  color: var(--mj-brand-primary);\n}\n\n.record-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.record-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.record-open-icon {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-left: 8px;\n  flex-shrink: 0;\n  transition: color 0.15s ease;\n}\n\n.view-all-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 10px;\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s ease;\n}\n.view-all-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.panel-footer {\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.open-record-btn {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition: all 0.15s ease;\n}\n.open-record-btn:hover {\n  background: var(--mj-brand-primary-hover);\n}\n.open-record-btn:active {\n  transform: scale(0.98);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { entity: [{
             type: Input
         }], record: [{

package/dist/lib/entity-viewer/entity-viewer.component.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, NgZone } from '@angular/core';
 import { EntityInfo, EntityFieldInfo, RunViewParams } from '@memberjunction/core';
 import { MJUserViewEntityExtended } from '@memberjunction/core-entities';
+import { PageChangeEvent } from '@memberjunction/ng-pagination';
 import { TimelineGroup, TimeSegmentGrouping, TimelineSortOrder, AfterEventClickArgs } from '@memberjunction/ng-timeline';
 import { EntityViewMode, EntityViewerConfig, RecordSelectedEvent, RecordOpenedEvent, DataLoadedEvent, FilteredCountChangedEvent, CardTemplate, GridColumnDef, SortState, SortChangedEvent, PaginationState, ViewGridState, GridStateChangedEvent, TimelineOrientation, TimelineState } from '../types';
 import { AfterRowClickEventArgs, AfterRowDoubleClickEventArgs, AfterSortEventArgs } from '../entity-data-grid/events/grid-events';
@@ -375,9 +376,9 @@ export declare class EntityViewerComponent implements OnInit, OnDestroy {
      */
     loadData(): Promise<void>;
     /**
-     * Load more records (next page)
+     * Handle page change from PaginationComponent
      */
-    loadMore(): void;
+    onPageChange(event: PageChangeEvent): void;
     /**
      * Refresh data (re-load from server, starting at page 1)
      * Keeps existing records visible during refresh for better UX
@@ -412,9 +413,9 @@ export declare class EntityViewerComponent implements OnInit, OnDestroy {
      */
     onGridStateChanged(event: GridStateChangedEvent): void;
     /**
-     * Handle load more from pagination component
+     * Handle page change from the data grid's pager
      */
-    onLoadMore(): void;
+    onGridPageChange(event: PageChangeEvent): void;
     /**
      * Handle row click from mj-entity-data-grid
      * Maps to recordSelected event for parent components

package/dist/lib/entity-viewer/entity-viewer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-viewer.component.d.ts","sourceRoot":"","sources":["../../../src/lib/entity-viewer/entity-viewer.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"entity-viewer.component.d.ts","sourceRoot":"","sources":["../../../src/lib/entity-viewer/entity-viewer.component.ts"],"names":[],"mappings":"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"}