@gp-grid/angular 0.10.3 → 0.11.1

package/src/lib/gp-grid.component.ts

@@ -1,279 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  OnInit,
-  AfterViewInit,
-  OnDestroy,
-  ViewChild,
-  ChangeDetectionStrategy,
-  PLATFORM_ID,
-  inject,
-  input,
-  output,
-  effect,
-} from '@angular/core';
-import type { CellRendererTemplate, EditRendererTemplate, HeaderRendererTemplate, HeaderSortEvent } from './components';
-import type { AngularColumnDefinition } from './types';
-import { isPlatformBrowser } from '@angular/common';
-import type {
-  CellValueChangedEvent,
-  ColumnDefinition,
-  ColumnFilterModel,
-  DataSource,
-  HighlightingOptions,
-  RowId,
-} from '@gp-grid/core';
-import {
-  GridHeaderComponent,
-  GridBodyComponent,
-  GridOverlaysComponent,
-} from './components';
-import type {
-  HeaderPointerDownEvent,
-  FilterPointerDownEvent,
-  ResizePointerDownEvent,
-  CellPointerDownEvent,
-  CellPointerEnterEvent,
-  CellDoubleClickEvent,
-  FillHandlePointerDownEvent,
-} from './components';
-import { GP_GRID_TEMPLATE } from './gp-grid.template';
-import { GpGridViewModel } from './gp-grid-view-model';
-import { GpGridBindings } from './gp-grid-bindings';
-import { buildGridCore } from './gp-grid.factory';
-
-@Component({
-  selector: 'gp-grid',
-  standalone: true,
-  imports: [GridHeaderComponent, GridBodyComponent, GridOverlaysComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`:host { display: block; height: 100%; min-height: 0; }`],
-  template: GP_GRID_TEMPLATE,
-})
-export class GpGridComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('container', { static: true }) container!: ElementRef<HTMLDivElement>;
-  @ViewChild(GridBodyComponent) body!: GridBodyComponent;
-
-  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-
-  columns = input.required<AngularColumnDefinition[]>();
-  rows = input<unknown[]>([]);
-  dataSource = input<DataSource<unknown> | null>(null);
-  getRowId = input<((row: unknown) => RowId) | null>(null);
-  rowHeight = input<number>(32);
-  headerHeight = input<number>(32);
-  darkMode = input<boolean>(false);
-  cellRenderers = input<Record<string, CellRendererTemplate>>({});
-  headerRenderers = input<Record<string, HeaderRendererTemplate>>({});
-  editRenderers = input<Record<string, EditRendererTemplate>>({});
-  cellRenderer = input<CellRendererTemplate | null>(null);
-  headerRenderer = input<HeaderRendererTemplate | null>(null);
-  editRenderer = input<EditRendererTemplate | null>(null);
-  highlighting = input<HighlightingOptions | null>(null);
-  rowDragEntireRow = input<boolean>(false);
-  overscan = input<number>(3);
-  sortingEnabled = input<boolean>(true);
-  wheelDampening = input<number>(0.1);
-  onRowDragEnd = output<{ source: number; target: number }>();
-  onCellValueChanged = output<CellValueChangedEvent<unknown>>();
-  onColumnResized = output<{ colIndex: number; newWidth: number }>();
-  onColumnMoved = output<{ fromIndex: number; toIndex: number }>();
-
-  protected readonly vm = new GpGridViewModel({
-    getColumns: () => this.columns(),
-    getRows: () => this.rows(),
-    getRowHeight: () => this.rowHeight(),
-  });
-
-  private readonly bindings = new GpGridBindings<unknown>({
-    vm: this.vm,
-    isBrowser: this.isBrowser,
-    getContainer: () => this.container?.nativeElement ?? null,
-    getBody: () => this.body?.scrollContainer?.nativeElement ?? null,
-    getRowHeight: () => this.rowHeight(),
-    getHeaderHeight: () => this.headerHeight(),
-  });
-
-  constructor() {
-    effect(() => this.bindings.applyPendingScroll());
-    effect(() => this.bindings.syncHighlighting(this.highlighting()));
-    effect(() => this.bindings.syncColumns(this.columns() as unknown as ColumnDefinition[]));
-    effect(() => this.bindings.syncRows(this.rows(), this.dataSource()));
-  }
-
-  ngOnInit(): void {
-    const core = buildGridCore<unknown>(
-      {
-        columns: this.columns() as unknown as ColumnDefinition[],
-        dataSource: this.bindings.dataSourceOwner.initialize(this.dataSource(), this.rows()),
-        rowHeight: this.rowHeight(),
-        headerHeight: this.headerHeight(),
-        overscan: this.overscan(),
-        sortingEnabled: this.sortingEnabled(),
-        highlighting: (this.highlighting() ?? undefined) as HighlightingOptions<unknown> | undefined,
-        getRowId: this.getRowId() ?? undefined,
-        rowDragEntireRow: this.rowDragEntireRow(),
-      },
-      {
-        onRowDragEnd: (source, target) => this.onRowDragEnd.emit({ source, target }),
-        onCellValueChanged: (event) => this.onCellValueChanged.emit(event),
-        onColumnResized: (colIndex, newWidth) => this.onColumnResized.emit({ colIndex, newWidth }),
-        onColumnMoved: (fromIndex, toIndex) => this.onColumnMoved.emit({ fromIndex, toIndex }),
-      },
-    );
-    this.bindings.attach(core);
-  }
-
-  ngAfterViewInit(): void {
-    if (this.isBrowser === false) return;
-    this.bindings.observeViewport(
-      this.container.nativeElement,
-      this.body.scrollContainer.nativeElement,
-    );
-    document.addEventListener('pointermove', this.onDocumentPointerMove, { passive: false });
-    document.addEventListener('pointerup', this.onDocumentPointerUp);
-  }
-
-  ngOnDestroy(): void {
-    this.bindings.destroy();
-    if (this.isBrowser) {
-      document.removeEventListener('pointermove', this.onDocumentPointerMove);
-      document.removeEventListener('pointerup', this.onDocumentPointerUp);
-    }
-  }
-
-  protected onBodyScroll(scrollLeft: number): void {
-    this.vm.scrollLeft.set(scrollLeft);
-    const el = this.body.scrollContainer.nativeElement;
-    this.bindings.coreRef?.setViewport(el.scrollTop, scrollLeft, el.clientWidth, el.clientHeight);
-  }
-
-  protected onHeaderPointerDown(evt: HeaderPointerDownEvent): void {
-    if (this.bindings.input.headerPointerDown(evt.colIndex, evt.colWidth, evt.colHeight, evt.event)) {
-      evt.event.preventDefault();
-    }
-  }
-
-  protected onFilterPointerDown(evt: FilterPointerDownEvent): void {
-    this.vm.setFilterAnchor(evt.anchorEl);
-    const rect = evt.anchorEl.getBoundingClientRect();
-    this.bindings.coreRef?.openFilterPopup(evt.colIndex, {
-      top: rect.top,
-      left: rect.left,
-      width: rect.width,
-      height: rect.height,
-    });
-  }
-
-  protected onCellPointerDown(evt: CellPointerDownEvent): void {
-    const action = this.bindings.input.cellPointerDown(evt.rowIndex, evt.colIndex, evt.event);
-    if (action.preventDefault) evt.event.preventDefault();
-    if (action.focusContainer) {
-      this.container.nativeElement.focus({ preventScroll: true });
-    }
-  }
-
-  protected onCellPointerEnter(evt: CellPointerEnterEvent): void {
-    this.bindings.input.cellPointerEnter(evt.rowIndex, evt.colIndex);
-  }
-
-  protected onFillHandlePointerDown(evt: FillHandlePointerDownEvent): void {
-    const action = this.bindings.input.fillHandlePointerDown(
-      this.vm.activeCell(),
-      this.vm.selectionRange(),
-      evt.event,
-    );
-    if (action.preventDefault) evt.event.preventDefault();
-    if (action.stopPropagation) evt.event.stopPropagation();
-  }
-
-  protected onCellPointerLeave(): void {
-    this.bindings.input.cellPointerLeave();
-  }
-
-  protected computeRowClassesFn = (rowIndex: number, rowData: unknown): string[] => {
-    return this.bindings.coreRef?.highlight?.computeRowClasses(rowIndex, rowData) ?? [];
-  };
-
-  protected computeCellClassesFn = (
-    rowIndex: number,
-    colIndex: number,
-    column: ColumnDefinition,
-    rowData: unknown,
-  ): string[] => {
-    return this.bindings.coreRef?.highlight?.computeCombinedCellClasses(
-      rowIndex,
-      colIndex,
-      column,
-      rowData,
-    ) ?? [];
-  };
-
-  protected onCellDoubleClick(evt: CellDoubleClickEvent): void {
-    this.bindings.coreRef?.startEdit(evt.rowIndex, evt.colIndex);
-  }
-
-  protected onEditValueChange(value: string): void {
-    this.bindings.coreRef?.updateEditValue(value);
-  }
-
-  protected onEditCommit(): void {
-    this.bindings.coreRef?.commitEdit();
-  }
-
-  protected onEditCancel(): void {
-    this.bindings.coreRef?.cancelEdit();
-  }
-
-  protected onHeaderSort(evt: HeaderSortEvent): void {
-    this.bindings.coreRef?.setSort(evt.colId, evt.direction, evt.addToExisting);
-  }
-
-  protected onWheel(event: WheelEvent): void {
-    const bodyEl = this.body?.scrollContainer?.nativeElement;
-    if (!bodyEl) return;
-    const dampened = this.bindings.input.wheel(event.deltaY, event.deltaX, this.wheelDampening());
-    if (dampened) {
-      event.preventDefault();
-      bodyEl.scrollTop += dampened.dy;
-      bodyEl.scrollLeft += dampened.dx;
-    }
-  }
-
-  protected onKeyDown(event: KeyboardEvent): void {
-    const editing = this.vm.editingCell();
-    const result = this.bindings.input.keyDown(
-      event,
-      this.vm.activeCell(),
-      editing === null ? null : { row: editing.row, col: editing.col },
-      this.vm.filterPopup() !== null,
-    );
-    if (result.preventDefault) event.preventDefault();
-    if (result.scrollToCell) this.bindings.scrollToRow(result.scrollToCell.row);
-  }
-
-  protected onResizePointerDown(evt: ResizePointerDownEvent): void {
-    if (this.bindings.input.resizePointerDown(evt.colIndex, evt.colWidth, evt.event)) {
-      evt.event.preventDefault();
-    }
-  }
-
-  protected onFilterApply(event: { colId: string; filter: ColumnFilterModel | null }): void {
-    this.bindings.coreRef?.setFilter(event.colId, event.filter);
-    this.vm.filterPopup.set(null);
-  }
-
-  protected onFilterClose(): void {
-    this.bindings.coreRef?.closeFilterPopup();
-    this.vm.filterPopup.set(null);
-  }
-
-  private onDocumentPointerMove = (event: PointerEvent): void => {
-    if (this.bindings.input.documentPointerMove(event)) event.preventDefault();
-  };
-
-  private onDocumentPointerUp = (_event: PointerEvent): void => {
-    const { wasRowDrag } = this.bindings.input.documentPointerUp();
-    if (wasRowDrag) this.bindings.pendingRowDrag.releaseLocks();
-  };
-}

package/src/lib/gp-grid.factory.ts

@@ -1,52 +0,0 @@
-import { GridCore } from '@gp-grid/core';
-import type {
-  CellValueChangedEvent,
-  ColumnDefinition,
-  DataSource,
-  HighlightingOptions,
-  RowId,
-} from '@gp-grid/core';
-
-export interface BuildGridCoreInputs<TData> {
-  columns: ColumnDefinition[];
-  dataSource: DataSource<TData>;
-  rowHeight: number;
-  headerHeight: number;
-  overscan: number;
-  sortingEnabled: boolean;
-  highlighting: HighlightingOptions<TData> | undefined;
-  getRowId: ((row: TData) => RowId) | undefined;
-  rowDragEntireRow: boolean;
-}
-
-export interface BuildGridCoreEmitters<TData> {
-  onRowDragEnd: (source: number, target: number) => void;
-  onCellValueChanged: (event: CellValueChangedEvent<TData>) => void;
-  onColumnResized: (colIndex: number, newWidth: number) => void;
-  onColumnMoved: (fromIndex: number, toIndex: number) => void;
-}
-
-export const buildGridCore = <TData>(
-  inputs: BuildGridCoreInputs<TData>,
-  emitters: BuildGridCoreEmitters<TData>,
-): GridCore<TData> => {
-  const cellValueChanged = inputs.getRowId === undefined
-    ? undefined
-    : emitters.onCellValueChanged;
-
-  return new GridCore<TData>({
-    columns: inputs.columns,
-    dataSource: inputs.dataSource,
-    rowHeight: inputs.rowHeight,
-    headerHeight: inputs.headerHeight,
-    overscan: inputs.overscan,
-    sortingEnabled: inputs.sortingEnabled,
-    highlighting: inputs.highlighting,
-    getRowId: inputs.getRowId,
-    rowDragEntireRow: inputs.rowDragEntireRow,
-    onRowDragEnd: emitters.onRowDragEnd,
-    onCellValueChanged: cellValueChanged,
-    onColumnResized: emitters.onColumnResized,
-    onColumnMoved: emitters.onColumnMoved,
-  });
-};

package/src/lib/gp-grid.template.ts

@@ -1,77 +0,0 @@
-export const GP_GRID_TEMPLATE = `
-    <div #container
-      [class]="'gp-grid-container' + (darkMode() ? ' gp-grid-container--dark' : '')"
-      style="width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; outline: none;"
-      tabindex="0"
-      (keydown)="onKeyDown($event)"
-      (wheel)="onWheel($event)"
-    >
-      <gp-grid-header
-        [headerHeight]="headerHeight()"
-        [scrollLeft]="vm.scrollLeft()"
-        [contentWidth]="vm.contentWidth()"
-        [totalWidth]="vm.totalWidth()"
-        [isLoading]="vm.isLoading()"
-        [visibleColumnsWithIndices]="vm.visibleColumnWithIndices()"
-        [columnPositions]="vm.columnPositions()"
-        [columnWidths]="vm.columnWidths()"
-        [headers]="vm.headerState()"
-        [sortingEnabled]="sortingEnabled()"
-        [headerRenderers]="headerRenderers()"
-        [globalHeaderRenderer]="headerRenderer()"
-        (headerPointerDown)="onHeaderPointerDown($event)"
-        (filterPointerDown)="onFilterPointerDown($event)"
-        (resizePointerDown)="onResizePointerDown($event)"
-        (headerSort)="onHeaderSort($event)"
-      />
-      <gp-grid-body
-        [rowHeight]="rowHeight()"
-        [totalHeaderHeight]="headerHeight()"
-        [contentWidth]="vm.contentWidth()"
-        [contentHeight]="vm.contentHeight()"
-        [totalWidth]="vm.totalWidth()"
-        [rowsWrapperOffset]="vm.rowsWrapperOffset()"
-        [slotsArray]="vm.slotsArray()"
-        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
-        [columnPositions]="vm.columnPositions()"
-        [columnWidths]="vm.columnWidths()"
-        [totalRows]="vm.totalRows()"
-        [activeCell]="vm.activeCell()"
-        [selectionRange]="vm.selectionRange()"
-        [editingCell]="vm.editingCell()"
-        [cellRenderers]="cellRenderers()"
-        [globalCellRenderer]="cellRenderer()"
-        [editRenderers]="editRenderers()"
-        [globalEditRenderer]="editRenderer()"
-        [hoverPosition]="vm.hoverPosition()"
-        [computeRowClasses]="computeRowClassesFn"
-        [computeCellClasses]="computeCellClassesFn"
-        [fillHandlePosition]="vm.fillHandlePosition()"
-        [dragState]="vm.dragState()"
-        (scrolled)="onBodyScroll($event)"
-        (cellPointerDown)="onCellPointerDown($event)"
-        (cellPointerEnter)="onCellPointerEnter($event)"
-        (cellPointerLeave)="onCellPointerLeave()"
-        (cellDoubleClick)="onCellDoubleClick($event)"
-        (editValueChange)="onEditValueChange($event)"
-        (editCommit)="onEditCommit()"
-        (editCancel)="onEditCancel()"
-        (fillHandlePointerDown)="onFillHandlePointerDown($event)"
-      />
-      <gp-grid-overlays
-        [filterPopup]="vm.filterPopup()"
-        [isLoading]="vm.isLoading()"
-        [errorMessage]="vm.errorMessage()"
-        [headerHeight]="headerHeight()"
-        [rowHeight]="rowHeight()"
-        [dragState]="vm.dragState()"
-        [visibleColumnWithIndices]="vm.visibleColumnWithIndices()"
-        [columnPositions]="vm.columnPositions()"
-        [scrollLeft]="vm.scrollLeft()"
-        [effectiveColumns]="vm.effectiveColumns()"
-        [totalWidth]="vm.totalWidth()"
-        (filterApply)="onFilterApply($event)"
-        (filterClose)="onFilterClose()"
-      />
-    </div>
-  `;

package/src/lib/types.ts

@@ -1,28 +0,0 @@
-import type { TemplateRef } from '@angular/core';
-import type {
-  ColumnDefinition,
-  CellRendererParams,
-  EditRendererParams,
-  HeaderRendererParams,
-} from '@gp-grid/core';
-
-/**
- * Column definition extended for Angular — allows `cellRenderer`,
- * `editRenderer`, and `headerRenderer` to be passed directly as
- * `TemplateRef` references in addition to the core's string-key / function
- * forms.
- */
-export interface AngularColumnDefinition extends Omit<ColumnDefinition, 'cellRenderer' | 'editRenderer' | 'headerRenderer'> {
-  cellRenderer?:
-    | string
-    | TemplateRef<{ $implicit: CellRendererParams }>
-    | ((params: CellRendererParams) => unknown);
-  editRenderer?:
-    | string
-    | TemplateRef<{ $implicit: EditRendererParams }>
-    | ((params: EditRendererParams) => unknown);
-  headerRenderer?:
-    | string
-    | TemplateRef<{ $implicit: HeaderRendererParams }>
-    | ((params: HeaderRendererParams) => unknown);
-}

package/src/public-api.ts

@@ -1,57 +0,0 @@
-export * from './lib/gp-grid.component';
-export * from './lib/components';
-export * from './lib/types';
-export * from './lib/createGridData';
-
-// Re-export core types for convenience
-export type {
-  // Basic types
-  CellDataType,
-  CellValue,
-  SortDirection,
-  SortModel,
-  FilterModel,
-  FilterCondition,
-  ColumnFilterModel,
-
-  // Column definition
-  ColumnDefinition,
-
-  // Row ID
-  RowId,
-
-  // Cell position & range
-  CellPosition,
-  CellRange,
-
-  // Events
-  CellValueChangedEvent,
-
-  // DataSource
-  DataSource,
-  DataSourceRequest,
-  DataSourceResponse,
-
-  // Renderer params
-  CellRendererParams,
-  EditRendererParams,
-  HeaderRendererParams,
-
-  // Highlighting
-  HighlightingOptions,
-  HighlightContext,
-
-  // Instructions (for advanced use cases)
-  GridInstruction,
-} from '@gp-grid/core';
-
-// Re-export data source factories
-export {
-  createClientDataSource,
-  createServerDataSource,
-  createDataSourceFromArray,
-  createMutableClientDataSource,
-} from '@gp-grid/core';
-
-export type { MutableDataSource } from '@gp-grid/core';
-export { GridCore } from '@gp-grid/core';

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "paths": {
-      "@gp-grid/core": ["../core/src"]
-    }
-  },
-  "include": [
-    "src/**/*.ts"
-  ]
-}

package/tsconfig.lib.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "node",
-    "ignoreDeprecations": "6.0",
-    "declaration": true,
-    "strict": true,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    "outDir": "../../dist/angular",
-    "paths": {
-      "@gp-grid/core": ["../core/src"]
-    }
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
-}