@zengrid/angular 1.2.0 → 1.2.1

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

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

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

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

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

@@ -1,34 +0,0 @@
-import { Injector } from '@angular/core';
-import type { GridPlugin, GridStore, GridApiInterface, 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): PluginDisposable | void {
-    const plugin = this.pluginFactory(this.injector);
-    return plugin.setup(store, api);
-  }
-
-  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

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

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

@@ -1,79 +0,0 @@
-import type { TemplateRef, Type } from '@angular/core';
-import type {
-  CellRef,
-  CellRange,
-  CellPosition,
-  ColumnDef,
-  GridOptions,
-  GridEvents,
-  GridState,
-  GridStateSnapshot,
-  ColumnStateSnapshot,
-  GridExportOptions,
-  SortState,
-  FilterModel,
-  RenderParams,
-  EditorParams,
-  HeaderRenderParams,
-  GridPlugin,
-  GridStore,
-  GridApiInterface,
-  CellRenderer,
-  CellEditor,
-  HeaderRenderer,
-} from '@zengrid/core';
-
-export type {
-  CellRef,
-  CellRange,
-  CellPosition,
-  ColumnDef,
-  GridOptions,
-  GridEvents,
-  GridState,
-  GridStateSnapshot,
-  ColumnStateSnapshot,
-  GridExportOptions,
-  SortState,
-  FilterModel,
-  RenderParams,
-  EditorParams,
-  HeaderRenderParams,
-  GridPlugin,
-  GridStore,
-  GridApiInterface,
-  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

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

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

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