@gp-grid/angular 0.10.3 → 0.11.2

package/src/lib/components/grid-body.component.ts

@@ -1,284 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, input, output, TemplateRef, ViewChild } from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import {
-  formatCellValue,
-  getFieldValue,
-  buildCellClasses,
-  isCellActive,
-  isCellEditing,
-  isCellInFillPreview,
-  isCellSelected,
-  SlotData,
-  VisibleColumnInfo,
-  CellPosition,
-  CellRange,
-  CellValue,
-  ColumnDefinition,
-  CellRendererParams,
-  EditRendererParams,
-  FillHandlePosition,
-  DragState,
-} from "@gp-grid/core";
-import { GRID_BODY_TEMPLATE } from "./grid-body.template";
-
-export type RowClassFn = (rowIndex: number, rowData: unknown) => string[];
-export type CellClassFn = (
-  rowIndex: number,
-  colIndex: number,
-  column: ColumnDefinition,
-  rowData: unknown,
-) => string[];
-
-export type CellRendererTemplate = TemplateRef<{ $implicit: CellRendererParams }>;
-export type EditRendererTemplate = TemplateRef<{ $implicit: EditRendererParams }>;
-
-export interface FillHandlePointerDownEvent {
-  event: PointerEvent;
-}
-
-export interface CellPointerDownEvent {
-  rowIndex: number;
-  colIndex: number;
-  event: PointerEvent;
-}
-
-export interface CellPointerEnterEvent {
-  rowIndex: number;
-  colIndex: number;
-}
-
-export interface CellDoubleClickEvent {
-  rowIndex: number;
-  colIndex: number;
-}
-
-export interface EditingCellState {
-  row: number;
-  col: number;
-  initialValue: CellValue;
-}
-
-@Component({
-  selector: "gp-grid-body",
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`:host { display: flex; flex: 1; min-height: 0; overflow: hidden; }`],
-  template: GRID_BODY_TEMPLATE,
-})
-export class GridBodyComponent {
-  @ViewChild("scrollContainer") scrollContainer!: ElementRef<HTMLDivElement>;
-  rowHeight = input.required<number>();
-  totalHeaderHeight = input.required<number>();
-  contentWidth = input.required<number>();
-  contentHeight = input.required<number>();
-  rowsWrapperOffset = input.required<number>();
-  slotsArray = input.required<SlotData[]>();
-  visibleColumnWithIndices = input.required<VisibleColumnInfo[]>();
-  totalWidth = input.required<number>();
-  columnPositions = input.required<number[]>();
-  columnWidths = input.required<number[]>();
-  totalRows = input.required<number>();
-  activeCell = input<CellPosition | null>(null);
-  selectionRange = input<CellRange | null>(null);
-  editingCell = input<EditingCellState | null>(null);
-  cellRenderers = input<Record<string, CellRendererTemplate>>({});
-  globalCellRenderer = input<CellRendererTemplate | null>(null);
-  editRenderers = input<Record<string, EditRendererTemplate>>({});
-  globalEditRenderer = input<EditRendererTemplate | null>(null);
-  hoverPosition = input<CellPosition | null>(null);
-  computeRowClasses = input<RowClassFn | null>(null);
-  computeCellClasses = input<CellClassFn | null>(null);
-  fillHandlePosition = input<FillHandlePosition | null>(null);
-  dragState = input<DragState | null>(null);
-
-  scrolled = output<number>();
-  cellPointerDown = output<CellPointerDownEvent>();
-  cellPointerEnter = output<CellPointerEnterEvent>();
-  cellPointerLeave = output<void>();
-  cellDoubleClick = output<CellDoubleClickEvent>();
-  editValueChange = output<string>();
-  editCommit = output<void>();
-  editCancel = output<void>();
-  fillHandlePointerDown = output<FillHandlePointerDownEvent>();
-
-  protected innerWidth = computed(() =>
-    Math.max(this.contentWidth(), this.totalWidth()),
-  );
-
-  protected sizerHeight = computed(() =>
-    Math.max(this.contentHeight() - this.totalHeaderHeight(), 0),
-  );
-
-  protected rowDropIndicator = computed(() => {
-    const ds = this.dragState();
-    if (ds?.dragType !== 'row-drag') return null;
-    if (ds.rowDrag === null || ds.rowDrag.dropTargetIndex === null) return null;
-    return ds.rowDrag;
-  });
-
-  protected rowDropIndicatorWidth = computed(() =>
-    Math.max(this.contentWidth(), this.totalWidth()),
-  );
-
-  protected wrapperTransform = computed(() =>
-    `translateY(${this.rowsWrapperOffset()}px)`);
-
-  protected onScroll(): void {
-    const el = this.scrollContainer.nativeElement;
-    this.scrolled.emit(el.scrollLeft);
-  }
-
-  protected cellParams(
-    rowData: unknown,
-    column: ColumnDefinition,
-    rowIndex: number,
-    colIndex: number,
-  ): CellRendererParams {
-    return {
-      value: getFieldValue(rowData, column.field),
-      rowData,
-      column,
-      rowIndex,
-      colIndex,
-      isActive: isCellActive(rowIndex, colIndex, this.activeCell()),
-      isSelected: isCellSelected(rowIndex, colIndex, this.selectionRange()),
-      isEditing: false,
-    };
-  }
-
-  protected cellTemplate(column: ColumnDefinition): CellRendererTemplate | null {
-    const renderer: unknown = column.cellRenderer;
-    if (renderer instanceof TemplateRef) {
-      return renderer as CellRendererTemplate;
-    }
-    if (typeof renderer === 'string') {
-      const registered = this.cellRenderers()[renderer];
-      if (registered) return registered;
-    }
-    return this.globalCellRenderer();
-  }
-
-  protected editTemplate(column: ColumnDefinition): EditRendererTemplate | null {
-    const renderer: unknown = (column as { editRenderer?: unknown }).editRenderer;
-    if (renderer instanceof TemplateRef) {
-      return renderer as EditRendererTemplate;
-    }
-    if (typeof renderer === 'string') {
-      const registered = this.editRenderers()[renderer];
-      if (registered) return registered;
-    }
-    return this.globalEditRenderer();
-  }
-
-  protected editParams(
-    rowData: unknown,
-    column: ColumnDefinition,
-    rowIndex: number,
-    colIndex: number,
-  ): EditRendererParams {
-    const ec = this.editingCell();
-    return {
-      value: getFieldValue(rowData, column.field),
-      rowData,
-      column,
-      rowIndex,
-      colIndex,
-      isActive: true,
-      isSelected: true,
-      isEditing: true,
-      initialValue: ec?.initialValue ?? null,
-      onValueChange: (newValue) => {
-        const s = newValue === null || newValue === undefined ? '' : String(newValue);
-        this.editValueChange.emit(s);
-      },
-      onCommit: () => this.editCommit.emit(),
-      onCancel: () => this.editCancel.emit(),
-    };
-  }
-
-  protected cellDisplay(
-    rowData: unknown,
-    column: ColumnDefinition,
-    rowIndex: number,
-    colIndex: number,
-  ): string {
-    const renderer = column.cellRenderer;
-    const value = getFieldValue(rowData, column.field);
-    if (typeof renderer === 'function') {
-      const params = this.cellParams(rowData, column, rowIndex, colIndex);
-      const result = renderer(params);
-      return result === null || result === undefined ? '' : String(result);
-    }
-    return formatCellValue(value, column.valueFormatter);
-  }
-
-  protected cellClass(
-    rowIndex: number,
-    colIndex: number,
-    column: ColumnDefinition,
-    rowData: unknown,
-  ): string {
-    const editingCell = this.editingCell();
-    // Read hoverPosition to register this signal as a dep so Angular re-renders on hover change.
-    this.hoverPosition();
-    const ds = this.dragState();
-    const inFillPreview = isCellInFillPreview(
-      rowIndex,
-      colIndex,
-      ds?.dragType === "fill",
-      ds?.fillSourceRange ?? null,
-      ds?.fillTarget ?? null,
-    );
-    const base = buildCellClasses(
-      isCellActive(rowIndex, colIndex, this.activeCell()),
-      isCellSelected(rowIndex, colIndex, this.selectionRange()),
-      isCellEditing(rowIndex, colIndex, editingCell),
-      inFillPreview,
-    );
-    const withHandle = column.rowDrag === true
-      ? `${base} gp-grid-cell--row-drag-handle`
-      : base;
-    const fn = this.computeCellClasses();
-    if (fn === null) return withHandle;
-    const extra = fn(rowIndex, colIndex, column, rowData);
-    if (extra.length === 0) return withHandle;
-    return `${withHandle} ${extra.join(' ')}`;
-  }
-
-  protected rowClass(rowIndex: number, rowData: unknown): string {
-    this.hoverPosition();
-    const fn = this.computeRowClasses();
-    if (fn === null) return 'gp-grid-row';
-    const extra = fn(rowIndex, rowData);
-    if (extra.length === 0) return 'gp-grid-row';
-    return `gp-grid-row ${extra.join(' ')}`;
-  }
-
-  protected isEditing(rowIndex: number, colIndex: number): boolean {
-    return isCellEditing(rowIndex, colIndex, this.editingCell());
-  }
-
-  protected editInitialValue(): string {
-    const ec = this.editingCell();
-    if (ec === null || ec.initialValue === null || ec.initialValue === undefined) return '';
-    return String(ec.initialValue);
-  }
-
-  protected asInput(event: Event): HTMLInputElement {
-    return event.target as HTMLInputElement;
-  }
-
-  protected onEditFocus(event: FocusEvent): void {
-    (event.target as HTMLInputElement).select();
-  }
-
-  protected onEditKeyDown(event: KeyboardEvent): void {
-    event.stopPropagation();
-    if (event.key === 'Enter') {
-      this.editCommit.emit();
-    } else if (event.key === 'Escape') {
-      this.editCancel.emit();
-    }
-  }
-}

package/src/lib/components/grid-body.template.ts

@@ -1,93 +0,0 @@
-export const GRID_BODY_TEMPLATE = `<div
-  #scrollContainer
-  style="height: 100%; overflow: auto; position: relative;"
-  (scroll)="onScroll()">
-    <div
-      style="position: relative; min-width: 100%"
-      [style.width.px]="innerWidth()"
-      [style.height.px]="sizerHeight()">
-      <div
-        class="gp-grid-rows-wrapper"
-        [style.width.px]="innerWidth()"
-        [style.transform]="wrapperTransform()">
-        @for (slot of slotsArray(); track slot.slotId) {
-          @if (slot.rowIndex >= 0) {
-            <div
-              [class]="rowClass(slot.rowIndex, slot.rowData)"
-              style="position: absolute; top: 0; left: 0"
-              [style.transform]="'translateY(' + slot.translateY + 'px)'"
-              [style.width.px]="innerWidth()"
-              [style.height.px]="rowHeight()"
-            >
-              @for (entry of visibleColumnWithIndices(); track entry.originalIndex; let i = $index) {
-                @let editing = isEditing(slot.rowIndex, entry.originalIndex);
-                <div
-                  [class]="cellClass(slot.rowIndex, entry.originalIndex, entry.column, slot.rowData)"
-                  style="position: absolute; top: 0;"
-                  [attr.data-row-index]="slot.rowIndex"
-                  [attr.data-col-index]="entry.originalIndex"
-                  [style.left.px]="columnPositions()[i]"
-                  [style.width.px]="columnWidths()[i]"
-                  [style.height.px]="rowHeight()"
-                  (pointerdown)="cellPointerDown.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex, event: $event })"
-                  (mouseenter)="cellPointerEnter.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
-                  (mouseleave)="cellPointerLeave.emit()"
-                  (dblclick)="cellDoubleClick.emit({ rowIndex: slot.rowIndex, colIndex: entry.originalIndex })"
-                >
-                  @if (editing) {
-                    @let etpl = editTemplate(entry.column);
-                    @if (etpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="etpl"
-                        [ngTemplateOutletContext]="{ $implicit: editParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
-                      </ng-container>
-                    } @else {
-                      <input
-                        class="gp-grid-edit-input"
-                        type="text"
-                        [value]="editInitialValue()"
-                        autofocus
-                        (focus)="onEditFocus($event)"
-                        (input)="editValueChange.emit(asInput($event).value)"
-                        (keydown)="onEditKeyDown($event)"
-                        (blur)="editCommit.emit()" />
-                    }
-                  } @else {
-                    @let tpl = cellTemplate(entry.column);
-                    @if (tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: cellParams(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }">
-                      </ng-container>
-                    } @else {
-                      {{ cellDisplay(slot.rowData, entry.column, slot.rowIndex, entry.originalIndex) }}
-                    }
-                  }
-                </div>
-              }
-            </div>
-          }
-        }
-        @if (fillHandlePosition(); as fhp) {
-          @if (editingCell() === null) {
-            <div
-              class="gp-grid-fill-handle"
-              [style.top.px]="fhp.top"
-              [style.left.px]="fhp.left"
-              (pointerdown)="fillHandlePointerDown.emit({ event: $event })">
-            </div>
-          }
-        }
-        @if (rowDropIndicator(); as rd) {
-          <div
-            class="gp-grid-row-drop-indicator"
-            [style.transform]="'translateY(' + rd.dropIndicatorY + 'px)'"
-            [style.width.px]="rowDropIndicatorWidth()"></div>
-        }
-      </div>
-    </div>
-    @if (totalRows() === 0) {
-      <div class="gp-grid-empty">No data to display</div>
-    }
-  </div>
-`;

package/src/lib/components/grid-header.component.ts

@@ -1,206 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  input,
-  output,
-  computed,
-  TemplateRef,
-} from "@angular/core";
-import { NgTemplateOutlet } from "@angular/common";
-import type {
-  HeaderData,
-  VisibleColumnInfo,
-  ColumnDefinition,
-  HeaderRendererParams,
-  SortDirection,
-} from '@gp-grid/core';
-
-export type HeaderRendererTemplate = TemplateRef<{ $implicit: HeaderRendererParams }>;
-
-export interface HeaderSortEvent {
-  colId: string;
-  direction: SortDirection | null;
-  addToExisting: boolean;
-}
-
-export interface HeaderPointerDownEvent {
-  colIndex: number;
-  colWidth: number;
-  colHeight: number;
-  event: PointerEvent;
-}
-
-export interface FilterPointerDownEvent {
-  colIndex: number;
-  anchorEl: HTMLElement;
-}
-
-export interface ResizePointerDownEvent {
-  colIndex: number;
-  colWidth: number;
-  event: PointerEvent;
-}
-
-const TEMPLATE = `
-  <div
-    class="gp-grid-header"
-    [class.gp-grid-header--loading]="isLoading()"
-    [style.height.px]="headerHeight()">
-    <div
-      style="position: absolute; top: 0; left: 0;"
-      [style.transform]="transformStyle()"
-      [style.width.px]="innerWidth()"
-      [style.height.px]="headerHeight()">
-      @for (entry of visibleColumnsWithIndices(); track entry.originalIndex; let i = $index) {
-        @let colW = columnWidths()[i] ?? 0;
-        @let headerData = headers().get(entry.originalIndex);
-        @let tpl = headerTemplate(entry.column);
-        <div
-          class="gp-grid-header-cell"
-          [attr.data-col-index]="entry.originalIndex"
-          [style.left.px]="columnPositions()[i]"
-          [style.width.px]="colW"
-          [style.height.px]="headerHeight()"
-          (pointerdown)="onHeaderPointerDown($event, entry.originalIndex, colW)">
-          @if (tpl) {
-            <ng-container
-              [ngTemplateOutlet]="tpl"
-              [ngTemplateOutletContext]="{ $implicit: headerParams(entry.column, entry.originalIndex, headerData) }">
-            </ng-container>
-          } @else {
-            <span class="gp-grid-header-text">{{ entry.column.headerName ?? entry.column.field }}</span>
-            <span class="gp-grid-header-icons">
-              @if (sortingEnabled() && entry.column.sortable !== false) {
-                <span class="gp-grid-sort-arrows">
-                  <span class="gp-grid-sort-arrows-stack">
-                    <svg
-                      [class]="'gp-grid-sort-arrow-up' + (headerData?.sortDirection === 'asc' ? ' active' : '')"
-                      width="8" height="6" viewBox="0 0 8 6">
-                      <path d="M4 0L8 6H0L4 0Z" fill="currentColor"/>
-                    </svg>
-                    <svg
-                      [class]="'gp-grid-sort-arrow-down' + (headerData?.sortDirection === 'desc' ? ' active' : '')"
-                      width="8" height="6" viewBox="0 0 8 6">
-                      <path d="M4 6L0 0H8L4 6Z" fill="currentColor"/>
-                    </svg>
-                  </span>
-                  @if ((headerData?.sortIndex ?? 0) > 0) {
-                    <span class="gp-grid-sort-index">{{ headerData?.sortIndex }}</span>
-                  }
-                </span>
-              }
-              @if (entry.column.filterable) {
-                <span
-                  [class]="'gp-grid-filter-icon' + (headerData?.hasFilter ? ' active' : '')"
-                  (pointerdown)="onFilterPointerDown($event, entry.originalIndex)">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M4 4h16l-6 8v5l-4 2v-7L4 4z"/>
-                  </svg>
-                </span>
-              }
-            </span>
-          }
-          @if (entry.column.resizable !== false) {
-            <div
-              class="gp-grid-header-resize-handle"
-              (pointerdown)="onResizePointerDown($event, entry.originalIndex, colW)">
-            </div>
-          }
-        </div>
-      }
-    </div>
-  </div>
-`;
-
-@Component({
-  selector: 'gp-grid-header',
-  standalone: true,
-  imports: [NgTemplateOutlet],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: TEMPLATE,
-})
-export class GridHeaderComponent {
-  headerHeight = input.required<number>();
-  scrollLeft = input.required<number>();
-  contentWidth = input.required<number>();
-  totalWidth = input.required<number>();
-  isLoading = input.required<boolean>();
-  visibleColumnsWithIndices = input.required<VisibleColumnInfo[]>();
-  columnPositions = input.required<number[]>();
-  columnWidths = input.required<number[]>();
-  headers = input.required<Map<number, HeaderData>>();
-  sortingEnabled = input<boolean>(true);
-  headerRenderers = input<Record<string, HeaderRendererTemplate>>({});
-  globalHeaderRenderer = input<HeaderRendererTemplate | null>(null);
-
-  headerPointerDown = output<HeaderPointerDownEvent>();
-  filterPointerDown = output<FilterPointerDownEvent>();
-  resizePointerDown = output<ResizePointerDownEvent>();
-  headerSort = output<HeaderSortEvent>();
-  headerFilterOpen = output<{ colIndex: number; anchorEl: HTMLElement }>();
-
-  protected innerWidth = computed(() =>
-    Math.max(this.contentWidth(), this.totalWidth())
-  );
-
-  protected transformStyle = computed(() =>
-    `translateX(${-this.scrollLeft()}px)`
-  );
-
-  protected onHeaderPointerDown(event: PointerEvent, colIndex: number, colWidth: number): void {
-    this.headerPointerDown.emit({ colIndex, colWidth, colHeight: this.headerHeight(), event });
-  }
-
-  protected onFilterPointerDown(event: PointerEvent, colIndex: number): void {
-    event.stopPropagation();
-    const cell = (event.currentTarget as HTMLElement).closest('.gp-grid-header-cell') as HTMLElement | null;
-    if (cell) {
-      this.filterPointerDown.emit({ colIndex, anchorEl: cell });
-    }
-  }
-
-  protected onResizePointerDown(event: PointerEvent, colIndex: number, colWidth: number): void {
-    event.stopPropagation();
-    this.resizePointerDown.emit({ colIndex, colWidth, event });
-  }
-
-  protected headerTemplate(column: ColumnDefinition): HeaderRendererTemplate | null {
-    const renderer: unknown = column.headerRenderer;
-    if (renderer instanceof TemplateRef) {
-      return renderer as HeaderRendererTemplate;
-    }
-    if (typeof renderer === 'string') {
-      const registered = this.headerRenderers()[renderer];
-      if (registered) return registered;
-    }
-    return this.globalHeaderRenderer();
-  }
-
-  protected headerParams(
-    column: ColumnDefinition,
-    colIndex: number,
-    headerData: HeaderData | undefined,
-  ): HeaderRendererParams {
-    const sortable = this.sortingEnabled() && column.sortable !== false;
-    const filterable = column.filterable === true;
-    return {
-      column,
-      colIndex,
-      sortDirection: headerData?.sortDirection,
-      sortIndex: headerData?.sortIndex,
-      sortable,
-      filterable,
-      hasFilter: headerData?.hasFilter ?? false,
-      onSort: (direction, addToExisting) => {
-        if (sortable) {
-          const colId = column.colId ?? column.field;
-          this.headerSort.emit({ colId, direction, addToExisting });
-        }
-      },
-      onFilterClick: () => {
-        // The anchor is looked up via data-col-index — same pattern as the default filter icon.
-        // No-op here; consumers using a custom header template should use the exposed callback.
-      },
-    };
-  }
-}