@gp-grid/angular 0.10.3 → 0.11.2

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

@@ -1,243 +0,0 @@
-import type {
-  ColumnDefinition,
-  ColumnFilterModel,
-  NumberFilterCondition,
-  NumberFilterOperator,
-  TextFilterCondition,
-  TextFilterOperator,
-} from '@gp-grid/core';
-
-export interface TextConditionState {
-  operator: string;
-  value: string;
-  nextOperator: 'and' | 'or';
-}
-
-export interface NumberConditionState {
-  operator: string;
-  value: string;
-  valueTo: string;
-  nextOperator: 'and' | 'or';
-}
-
-export type FilterMode = 'values' | 'condition';
-
-export const TEXT_OPERATORS: ReadonlyArray<{ value: TextFilterOperator; label: string }> = [
-  { value: 'contains', label: 'Contains' },
-  { value: 'notContains', label: 'Does not contain' },
-  { value: 'equals', label: 'Equals' },
-  { value: 'notEquals', label: 'Does not equal' },
-  { value: 'startsWith', label: 'Starts with' },
-  { value: 'endsWith', label: 'Ends with' },
-  { value: 'blank', label: 'Is blank' },
-  { value: 'notBlank', label: 'Is not blank' },
-] as const;
-
-export const NUMBER_OPERATORS: ReadonlyArray<{ value: NumberFilterOperator; label: string }> = [
-  { value: '=', label: 'Equals' },
-  { value: '!=', label: 'Does not equal' },
-  { value: '>', label: 'Greater than' },
-  { value: '<', label: 'Less than' },
-  { value: '>=', label: 'Greater than or equal' },
-  { value: '<=', label: 'Less than or equal' },
-  { value: 'between', label: 'Between' },
-  { value: 'blank', label: 'Is blank' },
-  { value: 'notBlank', label: 'Is not blank' },
-] as const;
-
-const VALUE_LESS_TEXT_OPERATORS: ReadonlyArray<string> = ['blank', 'notBlank'];
-const VALUE_LESS_NUMBER_OPERATORS: ReadonlyArray<string> = ['blank', 'notBlank'];
-
-export const MAX_CHECKBOX_VALUES = 100;
-
-export const isValueLessTextOp = (operator: string): boolean =>
-  VALUE_LESS_TEXT_OPERATORS.includes(operator);
-
-export const isValueLessNumberOp = (operator: string): boolean =>
-  VALUE_LESS_NUMBER_OPERATORS.includes(operator);
-
-export const defaultTextCondition = (): TextConditionState => ({
-  operator: 'contains',
-  value: '',
-  nextOperator: 'and',
-});
-
-export const defaultNumberCondition = (): NumberConditionState => ({
-  operator: '=',
-  value: '',
-  valueTo: '',
-  nextOperator: 'and',
-});
-
-export const computeUniqueValues = (distinctValues: ReadonlyArray<unknown>): string[] => {
-  const seen = new Set<string>();
-  const result: string[] = [];
-  for (const val of distinctValues) {
-    if (val === null || val === undefined || val === '') continue;
-    const str = String(val);
-    if (!seen.has(str)) {
-      seen.add(str);
-      result.push(str);
-    }
-  }
-  return result.sort();
-};
-
-export interface TextInitState {
-  filterMode: FilterMode;
-  selectedValues: Set<string>;
-  includeBlanks: boolean;
-  textConditions: TextConditionState[];
-}
-
-export const initTextState = (
-  filter: ColumnFilterModel | undefined,
-  uniqueValues: string[],
-): TextInitState => {
-  if (!filter) return defaultTextState(uniqueValues);
-
-  const textConds = filter.conditions.filter(
-    (c): c is TextFilterCondition => c.type === 'text'
-  );
-  if (textConds.length === 0) return defaultTextState(uniqueValues);
-
-  const firstCond = textConds[0];
-  if (firstCond?.selectedValues !== undefined) {
-    return {
-      filterMode: 'values',
-      selectedValues: new Set(firstCond.selectedValues),
-      includeBlanks: firstCond.includeBlank ?? true,
-      textConditions: [defaultTextCondition()],
-    };
-  }
-
-  return {
-    filterMode: 'condition',
-    selectedValues: new Set(uniqueValues),
-    includeBlanks: true,
-    textConditions: textConds.map((c, i) => ({
-      operator: c.operator,
-      value: c.value ?? '',
-      nextOperator: textConds[i]?.nextOperator ?? 'and',
-    })),
-  };
-};
-
-const defaultTextState = (uniqueValues: string[]): TextInitState => ({
-  filterMode: 'values',
-  selectedValues: new Set(uniqueValues),
-  includeBlanks: true,
-  textConditions: [defaultTextCondition()],
-});
-
-export const initNumberConditions = (
-  filter: ColumnFilterModel | undefined,
-): NumberConditionState[] => {
-  if (!filter) return [defaultNumberCondition()];
-
-  const numConds = filter.conditions.filter(
-    (c): c is NumberFilterCondition => c.type === 'number'
-  );
-  if (numConds.length === 0) return [defaultNumberCondition()];
-
-  return numConds.map((c, i) => ({
-    operator: c.operator,
-    value: c.value !== undefined ? String(c.value) : '',
-    valueTo: c.valueTo !== undefined ? String(c.valueTo) : '',
-    nextOperator: numConds[i]?.nextOperator ?? 'and',
-  }));
-};
-
-export interface TextFilterInput {
-  filterMode: FilterMode;
-  uniqueValues: string[];
-  selectedValues: Set<string>;
-  includeBlanks: boolean;
-  textConditions: TextConditionState[];
-}
-
-export const buildTextFilter = (input: TextFilterInput): ColumnFilterModel | null => {
-  if (input.filterMode === 'values') {
-    return buildValuesFilter(input);
-  }
-  return buildConditionTextFilter(input.textConditions);
-};
-
-const buildValuesFilter = (input: TextFilterInput): ColumnFilterModel | null => {
-  const allSelected = input.uniqueValues.every(v => input.selectedValues.has(v));
-  if (allSelected && input.includeBlanks) return null;
-
-  return {
-    conditions: [{
-      type: 'text',
-      operator: 'contains',
-      selectedValues: new Set(input.selectedValues),
-      includeBlank: input.includeBlanks,
-    }],
-    combination: 'or',
-  };
-};
-
-const buildConditionTextFilter = (
-  textConditions: TextConditionState[],
-): ColumnFilterModel | null => {
-  const conditions: TextFilterCondition[] = [];
-  for (let i = 0; i < textConditions.length; i++) {
-    const cond = textConditions[i];
-    if (!cond) continue;
-    if (!isValueLessTextOp(cond.operator) && !cond.value) continue;
-
-    const out: TextFilterCondition = {
-      type: 'text',
-      operator: cond.operator as TextFilterOperator,
-    };
-    if (!isValueLessTextOp(cond.operator)) out.value = cond.value;
-    linkNextOperator(conditions, i, textConditions);
-    conditions.push(out);
-  }
-  if (conditions.length === 0) return null;
-  return { conditions, combination: textConditions[0]?.nextOperator ?? 'and' };
-};
-
-export const buildNumberFilter = (
-  numberConditions: NumberConditionState[],
-): ColumnFilterModel | null => {
-  const conditions: NumberFilterCondition[] = [];
-  for (let i = 0; i < numberConditions.length; i++) {
-    const cond = numberConditions[i];
-    if (!cond) continue;
-    if (!isValueLessNumberOp(cond.operator) && !cond.value) continue;
-
-    const out: NumberFilterCondition = {
-      type: 'number',
-      operator: cond.operator as NumberFilterOperator,
-    };
-    if (!isValueLessNumberOp(cond.operator)) {
-      out.value = parseFloat(cond.value);
-      if (cond.operator === 'between' && cond.valueTo) {
-        out.valueTo = parseFloat(cond.valueTo);
-      }
-    }
-    linkNextOperator(conditions, i, numberConditions);
-    conditions.push(out);
-  }
-  if (conditions.length === 0) return null;
-  return { conditions, combination: numberConditions[0]?.nextOperator ?? 'and' };
-};
-
-const linkNextOperator = <T extends { nextOperator?: 'and' | 'or' }>(
-  built: T[],
-  currentIndex: number,
-  source: ReadonlyArray<{ nextOperator: 'and' | 'or' }>,
-): void => {
-  const prev = built[built.length - 1];
-  if (prev === undefined || currentIndex === 0) return;
-  const prevSource = source[currentIndex - 1];
-  prev.nextOperator = prevSource?.nextOperator ?? 'and';
-};
-
-export const resolveColId = (column: ColumnDefinition): string =>
-  column.colId ?? column.field;
-
-export const isNumberColumn = (column: ColumnDefinition): boolean =>
-  column.cellDataType === 'number';

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

@@ -1,236 +0,0 @@
-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

@@ -1,182 +0,0 @@
-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>
-`;