@zengrid/angular 1.2.3 → 1.3.0

package/src/lib/directives/zen-cell-template.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef, inject } from '@angular/core';
+import type { ZenCellTemplateContext } from '../types';
+
+@Directive({
+  selector: '[zenCellTemplate]',
+  standalone: true,
+})
+export class ZenCellTemplateDirective {
+  readonly templateRef = inject(TemplateRef<ZenCellTemplateContext>);
+}

package/src/lib/directives/zen-editor-template.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef, inject } from '@angular/core';
+import type { ZenEditorTemplateContext } from '../types';
+
+@Directive({
+  selector: '[zenEditorTemplate]',
+  standalone: true,
+})
+export class ZenEditorTemplateDirective {
+  readonly templateRef = inject(TemplateRef<ZenEditorTemplateContext>);
+}

package/src/lib/directives/zen-grid-value-accessor.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, forwardRef, inject } from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
+import { ZenGridComponent } from '../components/zen-grid.component';
+
+@Directive({
+  selector: 'zen-grid[formControl],zen-grid[formControlName],zen-grid[ngModel]',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ZenGridValueAccessorDirective),
+      multi: true,
+    },
+  ],
+})
+export class ZenGridValueAccessorDirective implements ControlValueAccessor {
+  private readonly grid = inject(ZenGridComponent);
+  private onChange: (value: any[][]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor() {
+    this.grid.dataChange.subscribe(() => {
+      this.onChange(this.grid.data());
+      this.onTouched();
+    });
+  }
+
+  writeValue(value: any[][]): void {
+    if (value) {
+      this.grid.setData(value);
+    }
+  }
+
+  registerOnChange(fn: (value: any[][]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+}

package/src/lib/directives/zen-header-template.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef, inject } from '@angular/core';
+import type { ZenHeaderTemplateContext } from '../types';
+
+@Directive({
+  selector: '[zenHeaderTemplate]',
+  standalone: true,
+})
+export class ZenHeaderTemplateDirective {
+  readonly templateRef = inject(TemplateRef<ZenHeaderTemplateContext>);
+}

package/src/lib/plugins/angular-plugin-wrapper.ts

@@ -0,0 +1,40 @@
+import { Injector } from '@angular/core';
+import type {
+  GridPlugin,
+  GridStore,
+  GridApiInterface,
+  GridPluginSetupContext,
+  PluginDisposable,
+} from '@zengrid/core';
+
+export class AngularPluginWrapper implements GridPlugin {
+  readonly name: string;
+  readonly phase: number;
+  readonly dependencies?: string[];
+
+  constructor(
+    private readonly injector: Injector,
+    private readonly pluginFactory: (injector: Injector) => GridPlugin,
+  ) {
+    const plugin = this.pluginFactory(this.injector);
+    this.name = plugin.name;
+    this.phase = plugin.phase;
+    this.dependencies = plugin.dependencies;
+  }
+
+  setup(store: GridStore, api: GridApiInterface, context: GridPluginSetupContext): PluginDisposable | void {
+    const plugin = this.pluginFactory(this.injector);
+    return plugin.setup(store, api, context);
+  }
+
+  dispose(): void {
+    // Plugin cleanup handled by PluginHost
+  }
+}
+
+export function createAngularPlugin(
+  injector: Injector,
+  factory: (injector: Injector) => GridPlugin,
+): GridPlugin {
+  return new AngularPluginWrapper(injector, factory);
+}

package/src/lib/services/template-bridge.service.ts

@@ -0,0 +1,341 @@
+import {
+  Injectable,
+  TemplateRef,
+  ApplicationRef,
+  EmbeddedViewRef,
+  inject,
+  Injector,
+  createComponent,
+  ComponentRef,
+  Type,
+  EnvironmentInjector,
+} from '@angular/core';
+import type {
+  CellRenderer,
+  RenderParams,
+  CellEditor,
+  EditorParams,
+} from '@zengrid/core';
+import type { ZenCellTemplateContext, ZenEditorTemplateContext } from '../types';
+
+interface PooledView<C> {
+  viewRef: EmbeddedViewRef<C>;
+  inUse: boolean;
+}
+
+interface PooledComponent {
+  componentRef: ComponentRef<any>;
+  inUse: boolean;
+}
+
+const MAX_POOL_SIZE = 100;
+
+@Injectable({ providedIn: 'root' })
+export class TemplateBridgeService {
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(Injector);
+  private readonly envInjector = inject(EnvironmentInjector);
+
+  private templatePools = new Map<TemplateRef<any>, PooledView<any>[]>();
+  private componentPools = new Map<Type<any>, PooledComponent[]>();
+
+  createTemplateRenderer(templateRef: TemplateRef<ZenCellTemplateContext>): CellRenderer {
+    return new TemplateRendererBridge(this, templateRef);
+  }
+
+  createComponentRenderer(componentType: Type<any>): CellRenderer {
+    return new ComponentRendererBridge(this, componentType);
+  }
+
+  createTemplateEditor(templateRef: TemplateRef<ZenEditorTemplateContext>): CellEditor {
+    return new TemplateEditorBridge(this, templateRef);
+  }
+
+  createComponentEditor(componentType: Type<any>): CellEditor {
+    return new ComponentEditorBridge(this, componentType);
+  }
+
+  acquireView<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C> {
+    let pool = this.templatePools.get(templateRef);
+    if (!pool) {
+      pool = [];
+      this.templatePools.set(templateRef, pool);
+    }
+
+    // Find a pooled view not in use
+    const pooled = pool.find(p => !p.inUse);
+    if (pooled) {
+      pooled.inUse = true;
+      // Update context
+      Object.assign(pooled.viewRef.context as any, context);
+      pooled.viewRef.detectChanges();
+      return pooled.viewRef;
+    }
+
+    // Create new
+    const viewRef = templateRef.createEmbeddedView(context);
+    this.appRef.attachView(viewRef);
+
+    if (pool.length < MAX_POOL_SIZE) {
+      pool.push({ viewRef, inUse: true });
+    }
+
+    return viewRef;
+  }
+
+  releaseView<C>(templateRef: TemplateRef<C>, viewRef: EmbeddedViewRef<C>): void {
+    const pool = this.templatePools.get(templateRef);
+    if (!pool) return;
+
+    const pooled = pool.find(p => p.viewRef === viewRef);
+    if (pooled) {
+      pooled.inUse = false;
+      // Detach root nodes from DOM
+      for (const node of viewRef.rootNodes) {
+        (node as HTMLElement).remove?.();
+      }
+    } else {
+      this.appRef.detachView(viewRef);
+      viewRef.destroy();
+    }
+  }
+
+  acquireComponent(componentType: Type<any>, hostElement: HTMLElement): ComponentRef<any> {
+    let pool = this.componentPools.get(componentType);
+    if (!pool) {
+      pool = [];
+      this.componentPools.set(componentType, pool);
+    }
+
+    const pooled = pool.find(p => !p.inUse);
+    if (pooled) {
+      pooled.inUse = true;
+      hostElement.appendChild((pooled.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]);
+      return pooled.componentRef;
+    }
+
+    const componentRef = createComponent(componentType, {
+      environmentInjector: this.envInjector,
+      elementInjector: this.injector,
+      hostElement,
+    });
+    this.appRef.attachView(componentRef.hostView);
+
+    if (pool.length < MAX_POOL_SIZE) {
+      pool.push({ componentRef, inUse: true });
+    }
+
+    return componentRef;
+  }
+
+  releaseComponent(componentType: Type<any>, componentRef: ComponentRef<any>): void {
+    const pool = this.componentPools.get(componentType);
+    if (!pool) return;
+
+    const pooled = pool.find(p => p.componentRef === componentRef);
+    if (pooled) {
+      pooled.inUse = false;
+      const rootNode = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+      rootNode?.remove?.();
+    } else {
+      componentRef.destroy();
+    }
+  }
+
+  destroyAll(): void {
+    for (const pool of this.templatePools.values()) {
+      for (const { viewRef } of pool) {
+        this.appRef.detachView(viewRef);
+        viewRef.destroy();
+      }
+    }
+    this.templatePools.clear();
+
+    for (const pool of this.componentPools.values()) {
+      for (const { componentRef } of pool) {
+        componentRef.destroy();
+      }
+    }
+    this.componentPools.clear();
+  }
+}
+
+class TemplateRendererBridge implements CellRenderer {
+  private activeViews = new Map<HTMLElement, EmbeddedViewRef<ZenCellTemplateContext>>();
+
+  constructor(
+    private bridge: TemplateBridgeService,
+    private templateRef: TemplateRef<ZenCellTemplateContext>,
+  ) {}
+
+  render(element: HTMLElement, params: RenderParams): void {
+    const context: ZenCellTemplateContext = {
+      $implicit: params.value,
+      value: params.value,
+      cell: params.cell,
+      row: params.rowData,
+      column: params.column!,
+      isSelected: params.isSelected,
+    };
+
+    const viewRef = this.bridge.acquireView(this.templateRef, context);
+    for (const node of viewRef.rootNodes) {
+      element.appendChild(node);
+    }
+    this.activeViews.set(element, viewRef);
+  }
+
+  update(element: HTMLElement, params: RenderParams): void {
+    const viewRef = this.activeViews.get(element);
+    if (!viewRef) {
+      this.render(element, params);
+      return;
+    }
+
+    const ctx = viewRef.context;
+    ctx.$implicit = params.value;
+    ctx.value = params.value;
+    ctx.cell = params.cell;
+    ctx.row = params.rowData;
+    ctx.column = params.column!;
+    ctx.isSelected = params.isSelected;
+    viewRef.detectChanges();
+  }
+
+  destroy(element: HTMLElement): void {
+    const viewRef = this.activeViews.get(element);
+    if (viewRef) {
+      this.bridge.releaseView(this.templateRef, viewRef);
+      this.activeViews.delete(element);
+    }
+  }
+}
+
+class ComponentRendererBridge implements CellRenderer {
+  private activeComponents = new Map<HTMLElement, ComponentRef<any>>();
+
+  constructor(
+    private bridge: TemplateBridgeService,
+    private componentType: Type<any>,
+  ) {}
+
+  render(element: HTMLElement, params: RenderParams): void {
+    const componentRef = this.bridge.acquireComponent(this.componentType, element);
+    componentRef.setInput('params', params);
+    componentRef.changeDetectorRef.detectChanges();
+    this.activeComponents.set(element, componentRef);
+  }
+
+  update(element: HTMLElement, params: RenderParams): void {
+    const componentRef = this.activeComponents.get(element);
+    if (!componentRef) {
+      this.render(element, params);
+      return;
+    }
+    componentRef.setInput('params', params);
+    componentRef.changeDetectorRef.detectChanges();
+  }
+
+  destroy(element: HTMLElement): void {
+    const componentRef = this.activeComponents.get(element);
+    if (componentRef) {
+      this.bridge.releaseComponent(this.componentType, componentRef);
+      this.activeComponents.delete(element);
+    }
+  }
+}
+
+class TemplateEditorBridge implements CellEditor {
+  private viewRef: EmbeddedViewRef<ZenEditorTemplateContext> | null = null;
+  private currentValue: any = null;
+  private onCompleteFn: ((value: any, cancelled: boolean) => void) | null = null;
+
+  constructor(
+    private bridge: TemplateBridgeService,
+    private templateRef: TemplateRef<ZenEditorTemplateContext>,
+  ) {}
+
+  init(container: HTMLElement, value: any, params: EditorParams): void {
+    this.currentValue = value;
+    this.onCompleteFn = params.onComplete ?? null;
+
+    const context: ZenEditorTemplateContext = {
+      $implicit: value,
+      value,
+      cell: params.cell,
+      onComplete: (v: any) => {
+        this.currentValue = v;
+        this.onCompleteFn?.(v, false);
+      },
+      onChange: (v: any) => {
+        this.currentValue = v;
+        params.onChange?.(v);
+      },
+    };
+
+    this.viewRef = this.bridge.acquireView(this.templateRef, context);
+    for (const node of this.viewRef.rootNodes) {
+      container.appendChild(node);
+    }
+  }
+
+  getValue(): any {
+    return this.currentValue;
+  }
+
+  focus(): void {
+    if (!this.viewRef) return;
+    const firstInput = this.viewRef.rootNodes
+      .find((n: any) => n.querySelector?.('input,select,textarea'));
+    firstInput?.querySelector?.('input,select,textarea')?.focus();
+  }
+
+  destroy(): void {
+    if (this.viewRef) {
+      this.bridge.releaseView(this.templateRef, this.viewRef);
+      this.viewRef = null;
+    }
+  }
+}
+
+class ComponentEditorBridge implements CellEditor {
+  private componentRef: ComponentRef<any> | null = null;
+  private currentValue: any = null;
+
+  constructor(
+    private bridge: TemplateBridgeService,
+    private componentType: Type<any>,
+  ) {}
+
+  init(container: HTMLElement, value: any, params: EditorParams): void {
+    this.currentValue = value;
+    this.componentRef = this.bridge.acquireComponent(this.componentType, container);
+    this.componentRef.setInput('value', value);
+    this.componentRef.setInput('params', params);
+    this.componentRef.setInput('onComplete', (v: any) => {
+      this.currentValue = v;
+      params.onComplete?.(v, false);
+    });
+    this.componentRef.setInput('onChange', (v: any) => {
+      this.currentValue = v;
+      params.onChange?.(v);
+    });
+    this.componentRef.changeDetectorRef.detectChanges();
+  }
+
+  getValue(): any {
+    return this.currentValue;
+  }
+
+  focus(): void {
+    const hostEl = this.componentRef?.location?.nativeElement as HTMLElement;
+    (hostEl?.querySelector?.('input,select,textarea') as HTMLElement)?.focus();
+  }
+
+  destroy(): void {
+    if (this.componentRef) {
+      this.bridge.releaseComponent(this.componentType, this.componentRef);
+      this.componentRef = null;
+    }
+  }
+}

package/src/lib/services/zen-grid-config.token.ts

@@ -0,0 +1,11 @@
+import { InjectionToken, type Provider } from '@angular/core';
+import type { ZenGridConfig } from '../types';
+
+export const ZEN_GRID_CONFIG = new InjectionToken<ZenGridConfig>('ZenGridConfig');
+
+export function provideZenGrid(config: ZenGridConfig): Provider {
+  return {
+    provide: ZEN_GRID_CONFIG,
+    useValue: config,
+  };
+}

package/src/lib/types.ts

@@ -0,0 +1,107 @@
+import type { TemplateRef, Type } from '@angular/core';
+import type {
+  CellRef,
+  CellRange,
+  CellPosition,
+  ColumnDef,
+  GridOptions,
+  GridEvents,
+  GridState,
+  GridStateSnapshot,
+  ColumnStateSnapshot,
+  GridExportOptions,
+  SortState,
+  SortDescriptor,
+  FilterModel,
+  FilterAst,
+  FilterAstNode,
+  FilterAstTarget,
+  FilterValueType,
+  QueryState,
+  QueryPaginationState,
+  DataLoadRequest,
+  DataLoadResponse,
+  RenderParams,
+  EditorParams,
+  HeaderRenderParams,
+  GridPlugin,
+  GridStore,
+  GridApiInterface,
+  GridPluginSetupContext,
+  GridOptionsChange,
+  GridOptionsListener,
+  CellRenderer,
+  CellEditor,
+  HeaderRenderer,
+} from '@zengrid/core';
+
+export type {
+  CellRef,
+  CellRange,
+  CellPosition,
+  ColumnDef,
+  GridOptions,
+  GridEvents,
+  GridState,
+  GridStateSnapshot,
+  ColumnStateSnapshot,
+  GridExportOptions,
+  SortState,
+  SortDescriptor,
+  FilterModel,
+  FilterAst,
+  FilterAstNode,
+  FilterAstTarget,
+  FilterValueType,
+  QueryState,
+  QueryPaginationState,
+  DataLoadRequest,
+  DataLoadResponse,
+  RenderParams,
+  EditorParams,
+  HeaderRenderParams,
+  GridPlugin,
+  GridStore,
+  GridApiInterface,
+  GridPluginSetupContext,
+  GridOptionsChange,
+  GridOptionsListener,
+  CellRenderer,
+  CellEditor,
+  HeaderRenderer,
+};
+
+export interface ZenCellTemplateContext {
+  $implicit: any;
+  value: any;
+  cell: CellRef;
+  row: any;
+  column: ColumnDef;
+  isSelected: boolean;
+}
+
+export interface ZenEditorTemplateContext {
+  $implicit: any;
+  value: any;
+  cell: CellRef;
+  onComplete: (value: any) => void;
+  onChange: (value: any) => void;
+}
+
+export interface ZenHeaderTemplateContext {
+  $implicit: ColumnDef;
+  column: ColumnDef;
+  sortState: 'asc' | 'desc' | null;
+}
+
+export interface ZenGridConfig {
+  [key: string]: any;
+}
+
+export type RendererInput = string | CellRenderer | TemplateRef<ZenCellTemplateContext> | Type<any>;
+export type EditorInput = string | CellEditor | TemplateRef<ZenEditorTemplateContext> | Type<any>;
+export type HeaderRendererInput =
+  | string
+  | HeaderRenderer
+  | TemplateRef<ZenHeaderTemplateContext>
+  | Type<any>;

package/src/lib/utils/event-map.ts

@@ -0,0 +1,98 @@
+export const EVENT_MAP: Record<string, string> = {
+  // Cell events
+  'cell:click': 'cellClick',
+  'cell:doubleClick': 'cellDoubleClick',
+  'cell:contextMenu': 'cellContextMenu',
+  'cell:change': 'cellChange',
+  'cell:beforeChange': 'cellBeforeChange',
+  'cell:afterChange': 'cellAfterChange',
+
+  // Selection events
+  'selection:change': 'selectionChange',
+  'selection:start': 'selectionStart',
+  'selection:end': 'selectionEnd',
+
+  // Editing events
+  'edit:start': 'editStart',
+  'edit:end': 'editEnd',
+  'edit:commit': 'editCommit',
+  'edit:cancel': 'editCancel',
+
+  // Scroll events
+  'scroll': 'scroll',
+  'scroll:start': 'scrollStart',
+  'scroll:end': 'scrollEnd',
+
+  // Sort events
+  'sort:change': 'sortChange',
+  'sort:beforeSort': 'sortBeforeSort',
+  'sort:afterSort': 'sortAfterSort',
+
+  // Filter events
+  'filter:change': 'filterChange',
+  'filter:beforeFilter': 'filterBeforeFilter',
+  'filter:afterFilter': 'filterAfterFilter',
+  'filter:export': 'filterExport',
+  'filter:start': 'filterStart',
+  'filter:end': 'filterEnd',
+  'filter:error': 'filterError',
+  'filter:clear': 'filterClear',
+
+  // Focus events
+  'focus:change': 'focusChange',
+  'focus:in': 'focusIn',
+  'focus:out': 'focusOut',
+
+  // Keyboard events
+  'key:down': 'keyDown',
+  'key:up': 'keyUp',
+  'key:press': 'keyPress',
+
+  // Column events
+  'column:resize': 'columnResize',
+  'column:move': 'columnMove',
+  'column:hide': 'columnHide',
+  'column:show': 'columnShow',
+  'column:dragStart': 'columnDragStart',
+  'column:drag': 'columnDrag',
+  'column:dragEnd': 'columnDragEnd',
+  'column:dragCancel': 'columnDragCancel',
+
+  // Header events
+  'header:click': 'headerClick',
+  'header:doubleClick': 'headerDoubleClick',
+  'header:contextMenu': 'headerContextMenu',
+  'header:hover': 'headerHover',
+  'header:sort:click': 'headerSortClick',
+  'header:filter:click': 'headerFilterClick',
+  'header:checkbox:change': 'headerCheckboxChange',
+
+  // Lifecycle events
+  'render:start': 'renderStart',
+  'render:end': 'renderEnd',
+  'data:load': 'dataLoad',
+  'data:change': 'dataChange',
+  'loading:start': 'loadingStart',
+  'loading:end': 'loadingEnd',
+  'loading:progress': 'loadingProgress',
+
+  // Undo/Redo events
+  'undo-redo:change': 'undoRedoChange',
+
+  // Destroy
+  'destroy': 'gridDestroy',
+
+  // Error events
+  'error': 'gridError',
+  'warning': 'gridWarning',
+
+  // Row events
+  'row:insert': 'rowInsert',
+  'row:delete': 'rowDelete',
+  'row:move': 'rowMove',
+
+  // Clipboard events
+  'copy': 'copy',
+  'cut': 'cut',
+  'paste': 'paste',
+};

package/src/lib/utils/signal-bridge.ts

@@ -0,0 +1,17 @@
+import { signal, type Signal, type WritableSignal } from '@angular/core';
+import type { GridStore } from '@zengrid/core';
+
+export function bridgeStoreSignal<T>(store: GridStore, key: string): Signal<T> {
+  const angularSignal: WritableSignal<T> = signal(store.get(key) as T);
+
+  store.effect(
+    `angular-bridge:${key}`,
+    () => {
+      const value = store.get(key) as T;
+      angularSignal.set(value);
+    },
+    'angular-bridge'
+  );
+
+  return angularSignal.asReadonly();
+}

package/src/lib/utils/ssr-guard.ts

@@ -0,0 +1,7 @@
+import { PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export function isBrowser(): boolean {
+  const platformId = inject(PLATFORM_ID);
+  return isPlatformBrowser(platformId);
+}