@gp-grid/angular 0.10.3

package/src/lib/components/filter-popup.component.ts

@@ -0,0 +1,236 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  output,
+  signal,
+  effect,
+  AfterViewInit,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
+import { calculateFilterPopupPosition } from '@gp-grid/core';
+import type {
+  ColumnDefinition,
+  CellValue,
+  ColumnFilterModel,
+} from '@gp-grid/core';
+import { FILTER_POPUP_TEMPLATE } from './filter-popup.template';
+import {
+  MAX_CHECKBOX_VALUES,
+  NUMBER_OPERATORS,
+  TEXT_OPERATORS,
+  type FilterMode,
+  type NumberConditionState,
+  type TextConditionState,
+  buildNumberFilter,
+  buildTextFilter,
+  computeUniqueValues,
+  defaultNumberCondition,
+  defaultTextCondition,
+  initNumberConditions,
+  initTextState,
+  isNumberColumn as columnIsNumber,
+  isValueLessNumberOp,
+  isValueLessTextOp,
+  resolveColId,
+} from './filter-popup/filter-logic';
+
+@Component({
+  selector: 'gp-grid-filter-popup',
+  standalone: true,
+  imports: [],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: FILTER_POPUP_TEMPLATE,
+})
+export class FilterPopupComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('popupEl', { static: false }) popupEl!: ElementRef<HTMLDivElement>;
+
+  column = input.required<ColumnDefinition>();
+  colIndex = input.required<number>();
+  anchorEl = input.required<HTMLElement>();
+  distinctValues = input.required<CellValue[]>();
+  currentFilter = input<ColumnFilterModel | undefined>(undefined);
+
+  apply = output<{ colId: string; filter: ColumnFilterModel | null }>();
+  close = output<void>();
+
+  popupTop = signal(0);
+  popupLeft = signal(0);
+  popupMinWidth = signal(200);
+  positioned = signal(false);
+
+  filterMode: FilterMode = 'values';
+  searchText = '';
+  selectedValues = new Set<string>();
+  includeBlanks = true;
+  textConditions: TextConditionState[] = [defaultTextCondition()];
+  numberConditions: NumberConditionState[] = [defaultNumberCondition()];
+
+  readonly textOperators = TEXT_OPERATORS;
+  readonly numberOperators = NUMBER_OPERATORS;
+
+  protected readonly isValueLessTextOp = isValueLessTextOp;
+  protected readonly isValueLessNumberOp = isValueLessNumberOp;
+
+  constructor() {
+    effect(() => {
+      this.anchorEl();
+      this.currentFilter();
+      this.initFromCurrentFilter();
+      requestAnimationFrame(() => this.updatePosition());
+    });
+  }
+
+  ngAfterViewInit(): void {
+    requestAnimationFrame(() => {
+      document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+    });
+    window.addEventListener('resize', this.onWindowResize);
+  }
+
+  ngOnDestroy(): void {
+    document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
+    window.removeEventListener('resize', this.onWindowResize);
+  }
+
+  @HostListener('keydown.escape')
+  onEscape(): void {
+    this.close.emit();
+  }
+
+  isNumberColumn(): boolean {
+    return columnIsNumber(this.column());
+  }
+
+  showValuesMode(): boolean {
+    return this.uniqueValues().length <= MAX_CHECKBOX_VALUES;
+  }
+
+  uniqueValues(): string[] {
+    return computeUniqueValues(this.distinctValues());
+  }
+
+  filteredUniqueValues(): string[] {
+    const search = this.searchText.toLowerCase();
+    if (!search) return this.uniqueValues();
+    return this.uniqueValues().filter(v => v.toLowerCase().includes(search));
+  }
+
+  toggleValue(val: string, checked: boolean): void {
+    if (checked) {
+      this.selectedValues.add(val);
+    } else {
+      this.selectedValues.delete(val);
+    }
+  }
+
+  selectAll(): void {
+    this.includeBlanks = true;
+    for (const v of this.uniqueValues()) this.selectedValues.add(v);
+  }
+
+  deselectAll(): void {
+    this.includeBlanks = false;
+    this.selectedValues.clear();
+  }
+
+  onTextOperatorChange(index: number, value: string): void {
+    setField(this.textConditions, index, 'operator', value);
+  }
+
+  onNumberOperatorChange(index: number, value: string): void {
+    setField(this.numberConditions, index, 'operator', value);
+  }
+
+  addTextCondition(): void {
+    this.textConditions.push(defaultTextCondition());
+  }
+
+  addNumberCondition(): void {
+    this.numberConditions.push(defaultNumberCondition());
+  }
+
+  removeTextCondition(index: number): void {
+    this.textConditions.splice(index, 1);
+  }
+
+  removeNumberCondition(index: number): void {
+    this.numberConditions.splice(index, 1);
+  }
+
+  setTextNextOp(index: number, value: 'and' | 'or'): void {
+    setField(this.textConditions, index, 'nextOperator', value);
+  }
+
+  setNumberNextOp(index: number, value: 'and' | 'or'): void {
+    setField(this.numberConditions, index, 'nextOperator', value);
+  }
+
+  handleApply(): void {
+    this.apply.emit({
+      colId: resolveColId(this.column()),
+      filter: this.buildFilter(),
+    });
+  }
+
+  handleClear(): void {
+    this.apply.emit({ colId: resolveColId(this.column()), filter: null });
+  }
+
+  private buildFilter(): ColumnFilterModel | null {
+    if (this.isNumberColumn()) return buildNumberFilter(this.numberConditions);
+    return buildTextFilter({
+      filterMode: this.filterMode,
+      uniqueValues: this.uniqueValues(),
+      selectedValues: this.selectedValues,
+      includeBlanks: this.includeBlanks,
+      textConditions: this.textConditions,
+    });
+  }
+
+  private initFromCurrentFilter(): void {
+    const filter = this.currentFilter();
+    if (this.isNumberColumn()) {
+      this.numberConditions = initNumberConditions(filter);
+      return;
+    }
+    const state = initTextState(filter, this.uniqueValues());
+    this.filterMode = state.filterMode;
+    this.selectedValues = state.selectedValues;
+    this.includeBlanks = state.includeBlanks;
+    this.textConditions = state.textConditions;
+  }
+
+  private updatePosition(): void {
+    if (!this.popupEl?.nativeElement) return;
+    const pos = calculateFilterPopupPosition(this.anchorEl(), this.popupEl.nativeElement);
+    this.popupTop.set(pos.top);
+    this.popupLeft.set(pos.left);
+    this.popupMinWidth.set(pos.minWidth);
+    this.positioned.set(true);
+  }
+
+  private onDocumentPointerDown = (event: Event): void => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.gp-grid-filter-icon')) return;
+    if (this.popupEl?.nativeElement?.contains(target)) return;
+    this.close.emit();
+  };
+
+  private onWindowResize = (): void => {
+    this.updatePosition();
+  };
+}
+
+const setField = <T, K extends keyof T>(
+  arr: T[],
+  index: number,
+  key: K,
+  value: T[K],
+): void => {
+  const item = arr[index];
+  if (item) item[key] = value;
+};

package/src/lib/components/filter-popup.template.ts

@@ -0,0 +1,182 @@
+export const FILTER_POPUP_TEMPLATE = `
+<div
+  #popupEl
+  class="gp-grid-filter-popup"
+  [style.position]="'fixed'"
+  [style.zIndex]="10000"
+  [style.top.px]="popupTop()"
+  [style.left.px]="popupLeft()"
+  [style.minWidth.px]="popupMinWidth()"
+  [style.visibility]="positioned() ? 'visible' : 'hidden'"
+  (keydown.escape)="close.emit()"
+  (click)="$event.stopPropagation()">
+
+  <div class="gp-grid-filter-header">
+    Filter: {{ column().headerName ?? column().field }}
+  </div>
+
+  <div [class]="'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')">
+  @if (isNumberColumn()) {
+      @for (cond of numberConditions; track $index; let i = $index) {
+        <div class="gp-grid-filter-condition">
+          @if (i > 0) {
+            <div class="gp-grid-filter-combination">
+              <button
+                type="button"
+                [class.active]="numberConditions[i - 1]?.nextOperator === 'and'"
+                (click)="setNumberNextOp(i - 1, 'and')">
+                AND
+              </button>
+              <button
+                type="button"
+                [class.active]="numberConditions[i - 1]?.nextOperator === 'or'"
+                (click)="setNumberNextOp(i - 1, 'or')">
+                OR
+              </button>
+            </div>
+          }
+          <div class="gp-grid-filter-row">
+            <select
+              [value]="cond.operator"
+              (change)="onNumberOperatorChange(i, $any($event.target).value)">
+              @for (op of numberOperators; track op.value) {
+                <option [value]="op.value">{{ op.label }}</option>
+              }
+            </select>
+            @if (!isValueLessNumberOp(cond.operator)) {
+              <input
+                type="number"
+                [value]="cond.value"
+                (input)="cond.value = $any($event.target).value"
+                placeholder="Value" />
+              @if (cond.operator === 'between') {
+                <span class="gp-grid-filter-to">to</span>
+                <input
+                  type="number"
+                  [value]="cond.valueTo"
+                  (input)="cond.valueTo = $any($event.target).value"
+                  placeholder="Value" />
+              }
+            }
+            @if (numberConditions.length > 1) {
+              <button
+                type="button"
+                class="gp-grid-filter-remove"
+                (click)="removeNumberCondition(i)">×</button>
+            }
+          </div>
+        </div>
+      }
+      <button type="button" class="gp-grid-filter-add" (click)="addNumberCondition()">
+        + Add condition
+      </button>
+  } @else {
+      @if (showValuesMode()) {
+        <div class="gp-grid-filter-mode-toggle">
+          <button
+            type="button"
+            [class.active]="filterMode === 'values'"
+            (click)="filterMode = 'values'">
+            Values
+          </button>
+          <button
+            type="button"
+            [class.active]="filterMode === 'condition'"
+            (click)="filterMode = 'condition'">
+            Condition
+          </button>
+        </div>
+      }
+
+      @if (filterMode === 'values' && showValuesMode()) {
+        <input
+          class="gp-grid-filter-search"
+          type="text"
+          [value]="searchText"
+          (input)="searchText = $any($event.target).value"
+          placeholder="Search..." />
+        <div class="gp-grid-filter-actions">
+          <button type="button" (click)="selectAll()">Select All</button>
+          <button type="button" (click)="deselectAll()">Deselect All</button>
+        </div>
+        <div class="gp-grid-filter-list">
+          <label class="gp-grid-filter-option">
+            <input
+              type="checkbox"
+              [checked]="includeBlanks"
+              (change)="includeBlanks = $any($event.target).checked" />
+            <span class="gp-grid-filter-blank">(Blanks)</span>
+          </label>
+          @for (val of filteredUniqueValues(); track val) {
+            <label class="gp-grid-filter-option">
+              <input
+                type="checkbox"
+                [checked]="selectedValues.has(val)"
+                (change)="toggleValue(val, $any($event.target).checked)" />
+              <span>{{ val }}</span>
+            </label>
+          }
+        </div>
+      }
+
+      @if (filterMode === 'condition') {
+        @for (cond of textConditions; track $index; let i = $index) {
+          <div class="gp-grid-filter-condition">
+            @if (i > 0) {
+              <div class="gp-grid-filter-combination">
+                <button
+                  type="button"
+                  [class.active]="textConditions[i - 1]?.nextOperator === 'and'"
+                  (click)="setTextNextOp(i - 1, 'and')">
+                  AND
+                </button>
+                <button
+                  type="button"
+                  [class.active]="textConditions[i - 1]?.nextOperator === 'or'"
+                  (click)="setTextNextOp(i - 1, 'or')">
+                  OR
+                </button>
+              </div>
+            }
+            <div class="gp-grid-filter-row">
+              <select
+                [value]="cond.operator"
+                (change)="onTextOperatorChange(i, $any($event.target).value)">
+                @for (op of textOperators; track op.value) {
+                  <option [value]="op.value">{{ op.label }}</option>
+                }
+              </select>
+              @if (!isValueLessTextOp(cond.operator)) {
+                <input
+                  class="gp-grid-filter-text-input"
+                  type="text"
+                  [value]="cond.value"
+                  (input)="cond.value = $any($event.target).value"
+                  placeholder="Value" />
+              }
+              @if (textConditions.length > 1) {
+                <button
+                  type="button"
+                  class="gp-grid-filter-remove"
+                  (click)="removeTextCondition(i)">×</button>
+              }
+            </div>
+          </div>
+        }
+        <button type="button" class="gp-grid-filter-add" (click)="addTextCondition()">
+          + Add condition
+        </button>
+      }
+  }
+
+    <div class="gp-grid-filter-buttons">
+      <button type="button" class="gp-grid-filter-btn-clear" (click)="handleClear()">
+        Clear
+      </button>
+      <button type="button" class="gp-grid-filter-btn-apply" (click)="handleApply()">
+        Apply
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,284 @@
+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();
+    }
+  }
+}