@zengrid/angular 1.2.0 → 1.2.1

package/fesm2022/zengrid-angular.mjs

@@ -0,0 +1,1441 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, contentChild, Component, ApplicationRef, Injector, EnvironmentInjector, createComponent, Injectable, InjectionToken, PLATFORM_ID, ChangeDetectorRef, NgZone, DestroyRef, viewChild, contentChildren, model, output, afterNextRender, effect, ChangeDetectionStrategy, forwardRef, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Grid } from '@zengrid/core';
+export { ARIAManager, AdvancedCellRenderer, AutoFitCalculator, ButtonRenderer, CSVExporter, CheckboxEditor, CheckboxHeaderRenderer, CheckboxRenderer, ChipRenderer, ClipboardManager, ColumnDragCommand, ColumnDragManager, ColumnGroupManager, ColumnGroupModel, ColumnGroupRenderer, ColumnModel, ColumnPinPlugin, ColumnReorderPlugin, ColumnResizeManager, ColumnStore, ColumnVisibilityPlugin, GridStore as CoreGridStore, DateEditor, DatePickerRenderer, DateRangeEditor, DateRangeRenderer, DateRenderer, DateTimeEditor, DateTimePickerRenderer, DateTimeRenderer, DependencyGraph, DragKeyboardHandler, DragTouchHandler, DragVisualFeedback, DropdownEditor, DropdownRenderer, EditorManager, EventEmitter, FilterableHeaderRenderer, FocusManager, GridApiImpl, IconHeaderRenderer, ImageRenderer, KeyboardNavigator, LinkRenderer, MultiColumnSorter, NumberRenderer, PipelineRegistry, PluginHost, ProgressBarRenderer, RendererRegistry, ResizeHandleRenderer, ResizePreview, ScrollModel, SelectRenderer, SingleColumnSorter, SortStateManager, SortableHeaderRenderer, SparseMatrix, TextEditor, TextHeaderRenderer, TextRenderer, ThemeBuilder, TimeEditor, TimePickerRenderer, TimeRenderer, ViewportModel, alpha, applyTheme, containsCell, createAsyncFilterPlugin, createAsyncSortPlugin, createColumnGroupRenderer, createCorePlugin, createDatePickerRenderer, createDateTimePickerRenderer, createDateTimeRenderer, createDevToolsConnector, createEditingPlugin, createFilterPlugin, createHitTester, createIdentityIndexMap, createIndexMap, createLifecyclePlugin, createSelectionPlugin, createSortPlugin, createTheme, createTimePickerRenderer, createTimeRenderer, createUndoRedoPlugin, darkTheme, darken, draculaTheme, formatDate, formatDateForDisplay, formatDateRange, formatDateTime, formatTime, getAllThemes, getTheme, githubTheme, hasTheme, isDateInRange, isValidDate, lightTheme, lighten, listThemes, materialTheme, mergeRanges, nordTheme, normalizeRange, oneDarkTheme, parseDate, parseDateTime, parseTime, rangesIntersect, registerTheme, removeTheme, setDatetimeTheme, setDatetimeThemeConfig, solarizedTheme, themeToCSSVariables, unregisterTheme } from '@zengrid/core';
+import { resolveOperationMode } from '@zengrid/shared';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const EVENT_MAP = {
+    // 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',
+};
+
+class ZenCellTemplateDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ZenCellTemplateDirective, isStandalone: true, selector: "[zenCellTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zenCellTemplate]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZenEditorTemplateDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ZenEditorTemplateDirective, isStandalone: true, selector: "[zenEditorTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenEditorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zenEditorTemplate]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZenHeaderTemplateDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ZenHeaderTemplateDirective, isStandalone: true, selector: "[zenHeaderTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[zenHeaderTemplate]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZenColumnComponent {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    header = input.required(...(ngDevMode ? [{ debugName: "header" }] : []));
+    width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    renderer = input(undefined, ...(ngDevMode ? [{ debugName: "renderer" }] : []));
+    sortable = input(undefined, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
+    editable = input(undefined, ...(ngDevMode ? [{ debugName: "editable" }] : []));
+    editor = input(undefined, ...(ngDevMode ? [{ debugName: "editor" }] : []));
+    editorOptions = input(undefined, ...(ngDevMode ? [{ debugName: "editorOptions" }] : []));
+    filterable = input(undefined, ...(ngDevMode ? [{ debugName: "filterable" }] : []));
+    resizable = input(undefined, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+    reorderable = input(undefined, ...(ngDevMode ? [{ debugName: "reorderable" }] : []));
+    minWidth = input(undefined, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
+    maxWidth = input(undefined, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    overflow = input(undefined, ...(ngDevMode ? [{ debugName: "overflow" }] : []));
+    autoHeight = input(undefined, ...(ngDevMode ? [{ debugName: "autoHeight" }] : []));
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    cellTemplate = contentChild(ZenCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : []));
+    editorTemplate = contentChild(ZenEditorTemplateDirective, ...(ngDevMode ? [{ debugName: "editorTemplate" }] : []));
+    headerTemplate = contentChild(ZenHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    toColumnDef(bridge) {
+        const def = {
+            field: this.field(),
+            header: this.header(),
+        };
+        const colId = this.id();
+        const w = this.width();
+        const sort = this.sortable();
+        const edit = this.editable();
+        const edOpts = this.editorOptions();
+        const filter = this.filterable();
+        const resize = this.resizable();
+        const reorder = this.reorderable();
+        const minW = this.minWidth();
+        const maxW = this.maxWidth();
+        const ov = this.overflow();
+        const autoH = this.autoHeight();
+        if (colId !== undefined)
+            def.id = colId;
+        if (w !== undefined)
+            def.width = w;
+        if (sort !== undefined)
+            def.sortable = sort;
+        if (edit !== undefined)
+            def.editable = edit;
+        if (edOpts !== undefined)
+            def.editorOptions = edOpts;
+        if (filter !== undefined)
+            def.filterable = filter;
+        if (resize !== undefined)
+            def.resizable = resize;
+        if (reorder !== undefined)
+            def.reorderable = reorder;
+        if (minW !== undefined)
+            def.minWidth = minW;
+        if (maxW !== undefined)
+            def.maxWidth = maxW;
+        if (ov !== undefined)
+            def.overflow = ov;
+        if (autoH !== undefined)
+            def.autoHeight = autoH;
+        // Resolve renderer: template > component/renderer input > none
+        const cellTpl = this.cellTemplate();
+        const rendererInput = this.renderer();
+        if (cellTpl) {
+            def.renderer = bridge.createTemplateRenderer(cellTpl.templateRef);
+        }
+        else if (rendererInput !== undefined) {
+            if (typeof rendererInput === 'string') {
+                def.renderer = rendererInput;
+            }
+            else if ('render' in rendererInput && typeof rendererInput.render === 'function') {
+                def.renderer = rendererInput;
+            }
+            else {
+                // It's a Component type
+                def.renderer = bridge.createComponentRenderer(rendererInput);
+            }
+        }
+        // Resolve editor: template > component/editor input > none
+        const edTpl = this.editorTemplate();
+        const editorInput = this.editor();
+        if (edTpl) {
+            def.editor = bridge.createTemplateEditor(edTpl.templateRef);
+        }
+        else if (editorInput !== undefined) {
+            if (typeof editorInput === 'string') {
+                def.editor = editorInput;
+            }
+            else if ('init' in editorInput && typeof editorInput.init === 'function') {
+                def.editor = editorInput;
+            }
+            else {
+                def.editor = bridge.createComponentEditor(editorInput);
+            }
+        }
+        return def;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: ZenColumnComponent, isStandalone: true, selector: "zen-column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, editorOptions: { classPropertyName: "editorOptions", publicName: "editorOptions", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ZenCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "editorTemplate", first: true, predicate: ZenEditorTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ZenHeaderTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'zen-column',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: false }] }], editorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorOptions", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenCellTemplateDirective), { isSignal: true }] }], editorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenEditorTemplateDirective), { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenHeaderTemplateDirective), { isSignal: true }] }] } });
+
+const MAX_POOL_SIZE = 100;
+class TemplateBridgeService {
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    envInjector = inject(EnvironmentInjector);
+    templatePools = new Map();
+    componentPools = new Map();
+    createTemplateRenderer(templateRef) {
+        return new TemplateRendererBridge(this, templateRef);
+    }
+    createComponentRenderer(componentType) {
+        return new ComponentRendererBridge(this, componentType);
+    }
+    createTemplateEditor(templateRef) {
+        return new TemplateEditorBridge(this, templateRef);
+    }
+    createComponentEditor(componentType) {
+        return new ComponentEditorBridge(this, componentType);
+    }
+    acquireView(templateRef, context) {
+        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, 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(templateRef, viewRef) {
+        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.remove?.();
+            }
+        }
+        else {
+            this.appRef.detachView(viewRef);
+            viewRef.destroy();
+        }
+    }
+    acquireComponent(componentType, hostElement) {
+        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.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, componentRef) {
+        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.rootNodes[0];
+            rootNode?.remove?.();
+        }
+        else {
+            componentRef.destroy();
+        }
+    }
+    destroyAll() {
+        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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplateBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplateBridgeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplateBridgeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class TemplateRendererBridge {
+    bridge;
+    templateRef;
+    activeViews = new Map();
+    constructor(bridge, templateRef) {
+        this.bridge = bridge;
+        this.templateRef = templateRef;
+    }
+    render(element, params) {
+        const context = {
+            $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, params) {
+        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) {
+        const viewRef = this.activeViews.get(element);
+        if (viewRef) {
+            this.bridge.releaseView(this.templateRef, viewRef);
+            this.activeViews.delete(element);
+        }
+    }
+}
+class ComponentRendererBridge {
+    bridge;
+    componentType;
+    activeComponents = new Map();
+    constructor(bridge, componentType) {
+        this.bridge = bridge;
+        this.componentType = componentType;
+    }
+    render(element, params) {
+        const componentRef = this.bridge.acquireComponent(this.componentType, element);
+        componentRef.setInput('params', params);
+        componentRef.changeDetectorRef.detectChanges();
+        this.activeComponents.set(element, componentRef);
+    }
+    update(element, params) {
+        const componentRef = this.activeComponents.get(element);
+        if (!componentRef) {
+            this.render(element, params);
+            return;
+        }
+        componentRef.setInput('params', params);
+        componentRef.changeDetectorRef.detectChanges();
+    }
+    destroy(element) {
+        const componentRef = this.activeComponents.get(element);
+        if (componentRef) {
+            this.bridge.releaseComponent(this.componentType, componentRef);
+            this.activeComponents.delete(element);
+        }
+    }
+}
+class TemplateEditorBridge {
+    bridge;
+    templateRef;
+    viewRef = null;
+    currentValue = null;
+    onCompleteFn = null;
+    constructor(bridge, templateRef) {
+        this.bridge = bridge;
+        this.templateRef = templateRef;
+    }
+    init(container, value, params) {
+        this.currentValue = value;
+        this.onCompleteFn = params.onComplete ?? null;
+        const context = {
+            $implicit: value,
+            value,
+            cell: params.cell,
+            onComplete: (v) => {
+                this.currentValue = v;
+                this.onCompleteFn?.(v, false);
+            },
+            onChange: (v) => {
+                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() {
+        return this.currentValue;
+    }
+    focus() {
+        if (!this.viewRef)
+            return;
+        const firstInput = this.viewRef.rootNodes
+            .find((n) => n.querySelector?.('input,select,textarea'));
+        firstInput?.querySelector?.('input,select,textarea')?.focus();
+    }
+    destroy() {
+        if (this.viewRef) {
+            this.bridge.releaseView(this.templateRef, this.viewRef);
+            this.viewRef = null;
+        }
+    }
+}
+class ComponentEditorBridge {
+    bridge;
+    componentType;
+    componentRef = null;
+    currentValue = null;
+    constructor(bridge, componentType) {
+        this.bridge = bridge;
+        this.componentType = componentType;
+    }
+    init(container, value, params) {
+        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) => {
+            this.currentValue = v;
+            params.onComplete?.(v, false);
+        });
+        this.componentRef.setInput('onChange', (v) => {
+            this.currentValue = v;
+            params.onChange?.(v);
+        });
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    getValue() {
+        return this.currentValue;
+    }
+    focus() {
+        const hostEl = this.componentRef?.location?.nativeElement;
+        hostEl?.querySelector?.('input,select,textarea')?.focus();
+    }
+    destroy() {
+        if (this.componentRef) {
+            this.bridge.releaseComponent(this.componentType, this.componentRef);
+            this.componentRef = null;
+        }
+    }
+}
+
+const ZEN_GRID_CONFIG = new InjectionToken('ZenGridConfig');
+function provideZenGrid(config) {
+    return {
+        provide: ZEN_GRID_CONFIG,
+        useValue: config,
+    };
+}
+
+class ZenGridComponent {
+    platformId = inject(PLATFORM_ID);
+    cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    templateBridge = inject(TemplateBridgeService);
+    globalConfig = inject(ZEN_GRID_CONFIG, { optional: true });
+    _isBrowser = isPlatformBrowser(this.platformId);
+    get placeholderHeight() {
+        const rowHeight = this.getResolvedRowHeight();
+        const height = typeof rowHeight === 'number' ? rowHeight : 30;
+        return this.rowCount() * height;
+    }
+    gridContainerRef = viewChild('gridContainer', ...(ngDevMode ? [{ debugName: "gridContainerRef" }] : []));
+    columnChildren = contentChildren(ZenColumnComponent, ...(ngDevMode ? [{ debugName: "columnChildren" }] : []));
+    grid = null;
+    gridReady = false;
+    warnedOnLegacyBackendCallbacks = false;
+    explicitInputs = new Set();
+    pendingModelDataSync = null;
+    // Legacy sort/filter backend callbacks are kept as wrapper inputs for
+    // template compatibility, but the unified core contract only supports
+    // onDataRequest.
+    static legacyBackendCallbackWarning = '[zen-grid] onSortRequest/onFilterRequest are deprecated. Use onDataRequest with the unified query contract instead.';
+    // --- Core Inputs ---
+    rowCount = input.required(...(ngDevMode ? [{ debugName: "rowCount" }] : []));
+    colCount = input.required(...(ngDevMode ? [{ debugName: "colCount" }] : []));
+    rowHeight = input(30, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: (value) => this.markExplicitInput('rowHeight', value) });
+    colWidth = input(100, { ...(ngDevMode ? { debugName: "colWidth" } : {}), transform: (value) => this.markExplicitInput('colWidth', value) });
+    columns = input([], { ...(ngDevMode ? { debugName: "columns" } : {}), transform: (value) => this.markExplicitInput('columns', value) });
+    // --- Feature Inputs ---
+    enableSelection = input(undefined, ...(ngDevMode ? [{ debugName: "enableSelection" }] : []));
+    enableMultiSelection = input(undefined, ...(ngDevMode ? [{ debugName: "enableMultiSelection" }] : []));
+    selectionType = input(undefined, ...(ngDevMode ? [{ debugName: "selectionType" }] : []));
+    enableColumnResize = input(undefined, ...(ngDevMode ? [{ debugName: "enableColumnResize" }] : []));
+    enableColumnDrag = input(undefined, ...(ngDevMode ? [{ debugName: "enableColumnDrag" }] : []));
+    enableKeyboardNavigation = input(undefined, ...(ngDevMode ? [{ debugName: "enableKeyboardNavigation" }] : []));
+    enableA11y = input(undefined, ...(ngDevMode ? [{ debugName: "enableA11y" }] : []));
+    enableCellPooling = input(undefined, ...(ngDevMode ? [{ debugName: "enableCellPooling" }] : []));
+    // --- Mode Inputs ---
+    dataMode = input(undefined, ...(ngDevMode ? [{ debugName: "dataMode" }] : []));
+    sortMode = input(undefined, ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    filterMode = input(undefined, ...(ngDevMode ? [{ debugName: "filterMode" }] : []));
+    // --- Backend Callback Inputs ---
+    onDataRequest = input(undefined, ...(ngDevMode ? [{ debugName: "onDataRequest" }] : []));
+    onSortRequest = input(undefined, ...(ngDevMode ? [{ debugName: "onSortRequest" }] : []));
+    onFilterRequest = input(undefined, ...(ngDevMode ? [{ debugName: "onFilterRequest" }] : []));
+    onLoadMoreRows = input(undefined, ...(ngDevMode ? [{ debugName: "onLoadMoreRows" }] : []));
+    // --- Config Object Inputs ---
+    pagination = input(undefined, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    loading = input(undefined, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    infiniteScrolling = input(undefined, ...(ngDevMode ? [{ debugName: "infiniteScrolling" }] : []));
+    rowHeightMode = input(undefined, ...(ngDevMode ? [{ debugName: "rowHeightMode" }] : []));
+    rowHeightConfig = input(undefined, ...(ngDevMode ? [{ debugName: "rowHeightConfig" }] : []));
+    columnResize = input(undefined, ...(ngDevMode ? [{ debugName: "columnResize" }] : []));
+    columnDrag = input(undefined, ...(ngDevMode ? [{ debugName: "columnDrag" }] : []));
+    cellOverflow = input(undefined, ...(ngDevMode ? [{ debugName: "cellOverflow" }] : []));
+    autoResize = input(undefined, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
+    overscanRows = input(undefined, ...(ngDevMode ? [{ debugName: "overscanRows" }] : []));
+    overscanCols = input(undefined, ...(ngDevMode ? [{ debugName: "overscanCols" }] : []));
+    sortIcons = input(undefined, ...(ngDevMode ? [{ debugName: "sortIcons" }] : []));
+    rendererCache = input(undefined, ...(ngDevMode ? [{ debugName: "rendererCache" }] : []));
+    // --- Callback Inputs (GridOptions event callbacks) ---
+    onScrollCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onScrollCallback" }] : []));
+    onCellClickCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellClickCallback" }] : []));
+    onCellDoubleClickCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellDoubleClickCallback" }] : []));
+    onCellContextMenuCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellContextMenuCallback" }] : []));
+    onSelectionChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onSelectionChangeCallback" }] : []));
+    onPageChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onPageChangeCallback" }] : []));
+    onColumnWidthsChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onColumnWidthsChangeCallback" }] : []));
+    // --- Plugin Input ---
+    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
+    // --- Two-way Model Signals ---
+    data = model([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    sortState = model([], ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    filterState = model([], ...(ngDevMode ? [{ debugName: "filterState" }] : []));
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    // --- Cell Events ---
+    cellClick = output();
+    cellDoubleClick = output();
+    cellContextMenu = output();
+    cellChange = output();
+    cellBeforeChange = output();
+    cellAfterChange = output();
+    // --- Selection Events ---
+    selectionChangeEvent = output({ alias: 'selectionChanged' });
+    selectionStart = output();
+    selectionEnd = output();
+    // --- Editing Events ---
+    editStart = output();
+    editEnd = output();
+    editCommit = output();
+    editCancel = output();
+    // --- Scroll Events ---
+    scroll = output();
+    scrollStart = output();
+    scrollEnd = output();
+    // --- Sort Events ---
+    sortChange = output();
+    sortBeforeSort = output();
+    sortAfterSort = output();
+    // --- Filter Events ---
+    filterChange = output();
+    filterBeforeFilter = output();
+    filterAfterFilter = output();
+    filterExport = output();
+    filterStart = output();
+    filterEnd = output();
+    filterError = output();
+    filterClear = output();
+    // --- Focus Events ---
+    focusChange = output();
+    focusIn = output();
+    focusOut = output();
+    // --- Keyboard Events ---
+    keyDown = output();
+    keyUp = output();
+    keyPress = output();
+    // --- Column Events ---
+    columnResizeEvent = output({ alias: 'columnResize' });
+    columnMove = output();
+    columnHide = output();
+    columnShow = output();
+    columnDragStart = output();
+    columnDragEvent = output({ alias: 'columnDrag' });
+    columnDragEnd = output();
+    columnDragCancel = output();
+    // --- Header Events ---
+    headerClick = output();
+    headerDoubleClick = output();
+    headerContextMenu = output();
+    headerHover = output();
+    headerSortClick = output();
+    headerFilterClick = output();
+    headerCheckboxChange = output();
+    // --- Lifecycle Events ---
+    renderStart = output();
+    renderEnd = output();
+    dataLoad = output();
+    dataChange = output();
+    loadingStart = output();
+    loadingEnd = output();
+    loadingProgress = output();
+    undoRedoChange = output();
+    gridDestroy = output();
+    gridError = output();
+    gridWarning = output();
+    // --- Row Events ---
+    rowInsert = output();
+    rowDelete = output();
+    rowMove = output();
+    // --- Clipboard Events ---
+    copy = output();
+    cut = output();
+    paste = output();
+    outputMap = {};
+    eventHandlers = [];
+    constructor() {
+        this.buildOutputMap();
+        this.destroyRef.onDestroy(() => {
+            if (this.grid) {
+                for (const { event, handler } of this.eventHandlers) {
+                    this.grid.off(event, handler);
+                }
+                this.grid.destroy();
+                this.grid = null;
+            }
+            this.eventHandlers = [];
+            this.gridReady = false;
+            this.templateBridge.destroyAll();
+        });
+        afterNextRender(() => {
+            this.ngZone.runOutsideAngular(() => {
+                this.initGrid();
+            });
+        });
+        // Sync data input → grid (skip first run, initGrid handles initial data)
+        effect(() => {
+            const data = this.data();
+            if (!this.gridReady || this.getResolvedDataMode() !== 'frontend')
+                return;
+            if (!Array.isArray(data))
+                return;
+            if (this.pendingModelDataSync === data) {
+                this.pendingModelDataSync = null;
+                return;
+            }
+            this.grid.setData(data);
+        });
+        // Sync columns from content children or input (skip first run)
+        effect(() => {
+            this.columnChildren();
+            this.columns();
+            if (!this.gridReady)
+                return;
+            const resolvedColumns = this.getComponentColumns();
+            if (resolvedColumns !== undefined) {
+                this.grid.updateOptions({ columns: resolvedColumns });
+            }
+        });
+        // Sync option changes with previous-value diffing (only sends changed values)
+        const prevOptions = {};
+        effect(() => {
+            const current = [
+                ['rowHeight', this.getResolvedRowHeight()],
+                ['colWidth', this.getResolvedColWidth()],
+                ['selectionType', this.selectionType()],
+                ['enableSelection', this.enableSelection()],
+                ['enableMultiSelection', this.enableMultiSelection()],
+                ['enableKeyboardNavigation', this.enableKeyboardNavigation()],
+                ['enableA11y', this.enableA11y()],
+                ['enableColumnResize', this.enableColumnResize()],
+                ['enableColumnDrag', this.enableColumnDrag()],
+                ['dataMode', this.getRequestedDataMode()],
+                ['pagination', this.pagination()],
+                ['loading', this.loading()],
+                ['infiniteScrolling', this.infiniteScrolling()],
+                ['rowHeightMode', this.rowHeightMode()],
+                ['rowHeightConfig', this.rowHeightConfig()],
+                ['columnResize', this.columnResize()],
+                ['columnDrag', this.columnDrag()],
+                ['cellOverflow', this.cellOverflow()],
+                ['autoResize', this.autoResize()],
+                ['overscanRows', this.overscanRows()],
+                ['overscanCols', this.overscanCols()],
+            ];
+            if (!this.gridReady) {
+                // Store initial values for diffing on next run
+                for (const [key, val] of current) {
+                    prevOptions[key] = val;
+                }
+                return;
+            }
+            const changed = {};
+            let hasChanges = false;
+            for (const [key, val] of current) {
+                if (val !== undefined && val !== prevOptions[key]) {
+                    changed[key] = val;
+                    hasChanges = true;
+                }
+                prevOptions[key] = val;
+            }
+            if (hasChanges) {
+                this.grid.updateOptions(changed);
+            }
+        });
+    }
+    markExplicitInput(name, value) {
+        this.explicitInputs.add(name);
+        return value;
+    }
+    hasExplicitInput(name) {
+        return this.explicitInputs.has(name);
+    }
+    getResolvedDataMode() {
+        return resolveOperationMode({
+            mode: this.getRequestedDataMode(),
+            callback: this.onDataRequest() ??
+                this.globalConfig?.['onDataRequest'],
+        }, { rowCount: this.rowCount() });
+    }
+    getRequestedDataMode() {
+        const configuredDataMode = this.dataMode() ?? this.globalConfig?.['dataMode'];
+        if (configuredDataMode !== undefined) {
+            return configuredDataMode;
+        }
+        const legacyModes = [
+            this.sortMode(),
+            this.filterMode(),
+            this.globalConfig?.['sortMode'],
+            this.globalConfig?.['filterMode'],
+        ].filter((mode) => mode !== undefined);
+        if (legacyModes.includes('backend'))
+            return 'backend';
+        if (legacyModes.includes('auto'))
+            return 'auto';
+        if (legacyModes.includes('frontend'))
+            return 'frontend';
+        return undefined;
+    }
+    warnOnLegacyBackendCallbacks() {
+        if (this.warnedOnLegacyBackendCallbacks)
+            return;
+        const hasLegacyCallback = this.onSortRequest() !== undefined ||
+            this.onFilterRequest() !== undefined ||
+            this.globalConfig?.['onSortRequest'] !== undefined ||
+            this.globalConfig?.['onFilterRequest'] !== undefined;
+        if (!hasLegacyCallback)
+            return;
+        this.warnedOnLegacyBackendCallbacks = true;
+        console.warn(ZenGridComponent.legacyBackendCallbackWarning);
+    }
+    getResolvedRowHeight() {
+        const configured = this.globalConfig?.['rowHeight'];
+        return this.hasExplicitInput('rowHeight') || configured === undefined ? this.rowHeight() : configured;
+    }
+    getResolvedColWidth() {
+        const configured = this.globalConfig?.['colWidth'];
+        return this.hasExplicitInput('colWidth') || configured === undefined ? this.colWidth() : configured;
+    }
+    getComponentColumns() {
+        const columnChildren = this.columnChildren();
+        if (columnChildren.length > 0) {
+            return columnChildren.map(c => c.toColumnDef(this.templateBridge));
+        }
+        const inputColumns = this.columns();
+        if (this.hasExplicitInput('columns') || inputColumns.length > 0) {
+            return inputColumns;
+        }
+        return undefined;
+    }
+    buildOutputMap() {
+        this.outputMap = {
+            cellClick: this.cellClick,
+            cellDoubleClick: this.cellDoubleClick,
+            cellContextMenu: this.cellContextMenu,
+            cellChange: this.cellChange,
+            cellBeforeChange: this.cellBeforeChange,
+            cellAfterChange: this.cellAfterChange,
+            selectionChange: this.selectionChangeEvent,
+            selectionStart: this.selectionStart,
+            selectionEnd: this.selectionEnd,
+            editStart: this.editStart,
+            editEnd: this.editEnd,
+            editCommit: this.editCommit,
+            editCancel: this.editCancel,
+            scroll: this.scroll,
+            scrollStart: this.scrollStart,
+            scrollEnd: this.scrollEnd,
+            sortChange: this.sortChange,
+            sortBeforeSort: this.sortBeforeSort,
+            sortAfterSort: this.sortAfterSort,
+            filterChange: this.filterChange,
+            filterBeforeFilter: this.filterBeforeFilter,
+            filterAfterFilter: this.filterAfterFilter,
+            filterExport: this.filterExport,
+            filterStart: this.filterStart,
+            filterEnd: this.filterEnd,
+            filterError: this.filterError,
+            filterClear: this.filterClear,
+            focusChange: this.focusChange,
+            focusIn: this.focusIn,
+            focusOut: this.focusOut,
+            keyDown: this.keyDown,
+            keyUp: this.keyUp,
+            keyPress: this.keyPress,
+            columnResize: this.columnResizeEvent,
+            columnMove: this.columnMove,
+            columnHide: this.columnHide,
+            columnShow: this.columnShow,
+            columnDragStart: this.columnDragStart,
+            columnDrag: this.columnDragEvent,
+            columnDragEnd: this.columnDragEnd,
+            columnDragCancel: this.columnDragCancel,
+            headerClick: this.headerClick,
+            headerDoubleClick: this.headerDoubleClick,
+            headerContextMenu: this.headerContextMenu,
+            headerHover: this.headerHover,
+            headerSortClick: this.headerSortClick,
+            headerFilterClick: this.headerFilterClick,
+            headerCheckboxChange: this.headerCheckboxChange,
+            renderStart: this.renderStart,
+            renderEnd: this.renderEnd,
+            dataLoad: this.dataLoad,
+            dataChange: this.dataChange,
+            loadingStart: this.loadingStart,
+            loadingEnd: this.loadingEnd,
+            loadingProgress: this.loadingProgress,
+            undoRedoChange: this.undoRedoChange,
+            gridDestroy: this.gridDestroy,
+            gridError: this.gridError,
+            gridWarning: this.gridWarning,
+            rowInsert: this.rowInsert,
+            rowDelete: this.rowDelete,
+            rowMove: this.rowMove,
+            copy: this.copy,
+            cut: this.cut,
+            paste: this.paste,
+        };
+    }
+    initGrid() {
+        const containerRef = this.gridContainerRef();
+        if (!containerRef)
+            return;
+        const container = containerRef.nativeElement;
+        const dataValue = this.data();
+        const componentColumns = this.getComponentColumns();
+        const resolvedDataMode = this.getResolvedDataMode();
+        this.warnOnLegacyBackendCallbacks();
+        const options = {
+            ...(this.globalConfig ?? {}),
+            rowCount: this.rowCount(),
+            colCount: this.colCount(),
+            ...this.getOptionalOptions(),
+            rowHeight: this.getResolvedRowHeight(),
+            colWidth: this.getResolvedColWidth(),
+            ...(componentColumns !== undefined ? { columns: componentColumns } : {}),
+        };
+        this.grid = new Grid(container, options);
+        // Wire up events
+        this.wireEvents();
+        // Frontend mode owns the in-memory dataset, including an explicit empty array.
+        if (resolvedDataMode === 'frontend' && Array.isArray(dataValue)) {
+            this.grid.setData(dataValue);
+        }
+        // Install plugins
+        const pluginList = this.plugins();
+        for (const plugin of pluginList) {
+            this.grid.usePlugin(plugin);
+        }
+        this.grid.render();
+        this.gridReady = true;
+    }
+    getOptionalOptions() {
+        const opts = {};
+        const enSel = this.enableSelection();
+        const enMulti = this.enableMultiSelection();
+        const selType = this.selectionType();
+        const enKb = this.enableKeyboardNavigation();
+        const enA11y = this.enableA11y();
+        const enPool = this.enableCellPooling();
+        const enResize = this.enableColumnResize();
+        const enDrag = this.enableColumnDrag();
+        const dMode = this.getRequestedDataMode();
+        const dReq = this.onDataRequest();
+        const loadMore = this.onLoadMoreRows();
+        const pag = this.pagination();
+        const load = this.loading();
+        const infScroll = this.infiniteScrolling();
+        const rhMode = this.rowHeightMode();
+        const rhConfig = this.rowHeightConfig();
+        const colResizeConf = this.columnResize();
+        const colDragConf = this.columnDrag();
+        const overflow = this.cellOverflow();
+        const autoRes = this.autoResize();
+        const oRows = this.overscanRows();
+        const oCols = this.overscanCols();
+        const sIcons = this.sortIcons();
+        const rCache = this.rendererCache();
+        const onScrollCb = this.onScrollCallback();
+        const onCellClickCb = this.onCellClickCallback();
+        const onCellDblClickCb = this.onCellDoubleClickCallback();
+        const onCellCtxCb = this.onCellContextMenuCallback();
+        const onSelChangeCb = this.onSelectionChangeCallback();
+        const onPageChangeCb = this.onPageChangeCallback();
+        const onColWidthsCb = this.onColumnWidthsChangeCallback();
+        if (enSel !== undefined)
+            opts.enableSelection = enSel;
+        if (enMulti !== undefined)
+            opts.enableMultiSelection = enMulti;
+        if (selType !== undefined)
+            opts.selectionType = selType;
+        if (enKb !== undefined)
+            opts.enableKeyboardNavigation = enKb;
+        if (enA11y !== undefined)
+            opts.enableA11y = enA11y;
+        if (enPool !== undefined)
+            opts.enableCellPooling = enPool;
+        if (enResize !== undefined)
+            opts.enableColumnResize = enResize;
+        if (enDrag !== undefined)
+            opts.enableColumnDrag = enDrag;
+        if (dMode !== undefined)
+            opts.dataMode = dMode;
+        if (dReq !== undefined)
+            opts.onDataRequest = dReq;
+        if (loadMore !== undefined)
+            opts.onLoadMoreRows = loadMore;
+        if (pag !== undefined)
+            opts.pagination = pag;
+        if (load !== undefined)
+            opts.loading = load;
+        if (infScroll !== undefined)
+            opts.infiniteScrolling = infScroll;
+        if (rhMode !== undefined)
+            opts.rowHeightMode = rhMode;
+        if (rhConfig !== undefined)
+            opts.rowHeightConfig = rhConfig;
+        if (colResizeConf !== undefined)
+            opts.columnResize = colResizeConf;
+        if (colDragConf !== undefined)
+            opts.columnDrag = colDragConf;
+        if (overflow !== undefined)
+            opts.cellOverflow = overflow;
+        if (autoRes !== undefined)
+            opts.autoResize = autoRes;
+        if (oRows !== undefined)
+            opts.overscanRows = oRows;
+        if (oCols !== undefined)
+            opts.overscanCols = oCols;
+        if (sIcons !== undefined)
+            opts.sortIcons = sIcons;
+        if (rCache !== undefined)
+            opts.rendererCache = rCache;
+        if (onScrollCb !== undefined)
+            opts.onScroll = onScrollCb;
+        if (onCellClickCb !== undefined)
+            opts.onCellClick = onCellClickCb;
+        if (onCellDblClickCb !== undefined)
+            opts.onCellDoubleClick = onCellDblClickCb;
+        if (onCellCtxCb !== undefined)
+            opts.onCellContextMenu = onCellCtxCb;
+        if (onSelChangeCb !== undefined)
+            opts.onSelectionChange = onSelChangeCb;
+        if (onPageChangeCb !== undefined)
+            opts.onPageChange = onPageChangeCb;
+        if (onColWidthsCb !== undefined)
+            opts.onColumnWidthsChange = onColWidthsCb;
+        return opts;
+    }
+    wireEvents() {
+        if (!this.grid)
+            return;
+        for (const [gridEvent, outputName] of Object.entries(EVENT_MAP)) {
+            const outputRef = this.outputMap[outputName];
+            if (!outputRef)
+                continue;
+            const handler = (payload) => {
+                this.ngZone.run(() => {
+                    outputRef.emit(payload);
+                    // Update two-way model signals for specific events
+                    if (gridEvent === 'selection:change' && payload?.ranges) {
+                        this.selection.set(payload.ranges);
+                    }
+                    else if (gridEvent === 'sort:change' && payload?.sortState) {
+                        this.sortState.set(payload.sortState);
+                    }
+                    else if (gridEvent === 'filter:change' && payload?.filterState) {
+                        this.filterState.set(payload.filterState);
+                    }
+                    else if (gridEvent === 'data:change') {
+                        // data:change doesn't carry full data, skip model update
+                    }
+                    this.cdr.markForCheck();
+                });
+            };
+            this.grid.on(gridEvent, handler);
+            this.eventHandlers.push({ event: gridEvent, handler });
+        }
+    }
+    // --- Public API Methods ---
+    get gridInstance() {
+        return this.grid;
+    }
+    render() {
+        this.grid?.render();
+    }
+    refresh() {
+        this.grid?.refresh();
+    }
+    clearCache() {
+        this.grid?.clearCache();
+    }
+    updateCells(cells) {
+        this.grid?.updateCells(cells);
+    }
+    setData(data) {
+        if (this.getResolvedDataMode() === 'frontend') {
+            if (this.grid) {
+                this.pendingModelDataSync = data;
+                this.grid.setData(data);
+            }
+        }
+        this.data.set(data);
+    }
+    getData(row, col) {
+        return this.grid?.getData(row, col);
+    }
+    // --- Sort API ---
+    sortColumn(column, direction = 'asc') {
+        if (direction === null)
+            this.grid?.sort.clear();
+        else
+            this.grid?.sort.apply([{ column, direction }]);
+    }
+    toggleSort(column) {
+        this.grid?.sort.toggle(column);
+    }
+    getSortState() {
+        return this.grid?.sort.getState() ?? [];
+    }
+    clearSort() {
+        this.grid?.sort.clear();
+    }
+    setSortState(sortState) {
+        this.grid?.sort.setState(sortState);
+    }
+    // --- Filter API ---
+    setFilter(column, operator, value) {
+        this.grid?.filter.set(column, operator, value);
+    }
+    setColumnFilter(column, conditions, logic = 'AND') {
+        this.grid?.filter.setColumn(column, conditions, logic);
+    }
+    getFilterState() {
+        return this.grid?.filter.getState() ?? [];
+    }
+    setFilterState(models) {
+        this.grid?.filter.setState(models);
+    }
+    clearFilters() {
+        this.grid?.filter.clear();
+    }
+    clearColumnFilter(column) {
+        this.grid?.filter.clearColumn(column);
+    }
+    setQuickFilter(query, columns) {
+        this.grid?.filter.setQuick(query, columns);
+    }
+    clearQuickFilter() {
+        this.grid?.filter.clearQuick();
+    }
+    // --- Export API ---
+    exportCSV(options = {}) {
+        return this.grid?.export.csv(options) ?? '';
+    }
+    exportTSV(options = {}) {
+        return this.grid?.export.tsv(options) ?? '';
+    }
+    // --- Pagination API ---
+    goToPage(page) {
+        this.grid?.pagination.goTo(page);
+        this.currentPage.set(page);
+    }
+    nextPage() {
+        this.grid?.pagination.next();
+        this.currentPage.set(this.grid?.pagination.getCurrentPage() ?? 1);
+    }
+    previousPage() {
+        this.grid?.pagination.previous();
+        this.currentPage.set(this.grid?.pagination.getCurrentPage() ?? 1);
+    }
+    setPageSize(pageSize) {
+        this.grid?.pagination.setPageSize(pageSize);
+    }
+    getCurrentPage() {
+        return this.grid?.pagination.getCurrentPage() ?? 1;
+    }
+    getPageSize() {
+        return this.grid?.pagination.getPageSize() ?? 0;
+    }
+    getTotalPages() {
+        return this.grid?.pagination.getTotalPages() ?? 0;
+    }
+    // --- Column API ---
+    resizeColumn(col, width) {
+        this.grid?.resizeColumn(col, width);
+    }
+    autoFitColumn(col) {
+        this.grid?.autoFitColumn(col);
+    }
+    autoFitAllColumns() {
+        this.grid?.autoFitAllColumns();
+    }
+    setColumnConstraints(col, constraints) {
+        this.grid?.setColumnConstraints(col, constraints);
+    }
+    // --- State Persistence API ---
+    getColumnState() {
+        return this.grid?.getColumnState() ?? [];
+    }
+    applyColumnState(state, options) {
+        this.grid?.applyColumnState(state, options);
+    }
+    getStateSnapshot() {
+        return this.grid?.getStateSnapshot() ?? null;
+    }
+    applyStateSnapshot(snapshot) {
+        this.grid?.applyStateSnapshot(snapshot);
+    }
+    // --- Scroll API ---
+    scrollToCell(row, col) {
+        this.grid?.scrollToCell(row, col);
+    }
+    getScrollPosition() {
+        return this.grid?.getScrollPosition() ?? { top: 0, left: 0 };
+    }
+    getVisibleRange() {
+        return this.grid?.getVisibleRange() ?? null;
+    }
+    // --- Header API ---
+    registerHeaderRenderer(name, renderer) {
+        this.grid?.registerHeaderRenderer(name, renderer);
+    }
+    updateHeader(columnIndex) {
+        this.grid?.updateHeader(columnIndex);
+    }
+    updateAllHeaders() {
+        this.grid?.updateAllHeaders();
+    }
+    // --- Plugin API ---
+    usePlugin(plugin) {
+        this.grid?.usePlugin(plugin);
+    }
+    // --- Stats ---
+    getStats() {
+        return this.grid?.getStats();
+    }
+    getDimensions() {
+        return this.grid?.getDimensions() ?? { width: 0, height: 0 };
+    }
+    getColumnPosition(col) {
+        return this.grid?.getColumnPosition(col) ?? { x: 0, width: 0 };
+    }
+    // --- Data Mode ---
+    getDataMode() {
+        return this.grid?.getDataMode() ?? 'frontend';
+    }
+    // --- Sort (missing methods) ---
+    getColumnSort(column) {
+        return this.grid?.getColumnSort(column);
+    }
+    getSortIcons() {
+        return this.grid?.getSortIcons() ?? { asc: '▲', desc: '▼' };
+    }
+    getSortMode() {
+        return this.grid?.getSortMode() ?? 'frontend';
+    }
+    // --- Filter (missing methods) ---
+    getFieldFilterState() {
+        return this.grid?.getFieldFilterState();
+    }
+    getFilterExports() {
+        return this.grid?.getFilterExports();
+    }
+    getFilterMode() {
+        return this.grid?.getFilterMode() ?? 'frontend';
+    }
+    getQuickFilter() {
+        return this.grid?.getQuickFilter() ?? { query: '', columns: null };
+    }
+    // --- Pagination (missing methods) ---
+    firstPage() {
+        this.grid?.firstPage();
+        this.currentPage.set(this.grid?.getCurrentPage() ?? 1);
+    }
+    lastPage() {
+        this.grid?.lastPage();
+        this.currentPage.set(this.grid?.getCurrentPage() ?? 1);
+    }
+    // --- Scroll (missing methods) ---
+    scrollThroughCells(cells, options) {
+        return this.grid?.scrollThroughCells(cells, options) ?? {
+            promise: Promise.resolve(),
+            abort: () => { },
+        };
+    }
+    // --- Column Resize/Drag (missing methods) ---
+    attachColumnResize(headerElement) {
+        this.grid?.attachColumnResize(headerElement);
+    }
+    detachColumnResize() {
+        this.grid?.detachColumnResize();
+    }
+    updateColumnResizeHandles() {
+        this.grid?.updateColumnResizeHandles();
+    }
+    attachColumnDrag(headerElement) {
+        this.grid?.attachColumnDrag(headerElement);
+    }
+    detachColumnDrag() {
+        this.grid?.detachColumnDrag();
+    }
+    isDragging() {
+        return this.grid?.isDragging() ?? false;
+    }
+    // --- Renderer Registration ---
+    registerRenderer(name, renderer) {
+        this.grid?.registerRenderer(name, renderer);
+    }
+    // --- Options Update ---
+    updateOptions(options) {
+        this.grid?.updateOptions(options);
+    }
+    // --- Header (missing methods) ---
+    refreshHeaders() {
+        this.grid?.refreshHeaders();
+    }
+    // --- Infinite Scroll ---
+    resetInfiniteScrolling() {
+        this.grid?.resetInfiniteScrolling();
+    }
+    getSlidingWindowStats() {
+        return this.grid?.getSlidingWindowStats();
+    }
+    // --- Plugin System (advanced) ---
+    getStore() {
+        return this.grid?.getStore();
+    }
+    getPluginHost() {
+        return this.grid?.getPluginHost() ?? null;
+    }
+    getGridApi() {
+        return this.grid?.getGridApi() ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ZenGridComponent, isStandalone: true, selector: "zen-grid", inputs: { rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: true, transformFunction: null }, colCount: { classPropertyName: "colCount", publicName: "colCount", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, colWidth: { classPropertyName: "colWidth", publicName: "colWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelection: { classPropertyName: "enableMultiSelection", publicName: "enableMultiSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, enableColumnResize: { classPropertyName: "enableColumnResize", publicName: "enableColumnResize", isSignal: true, isRequired: false, transformFunction: null }, enableColumnDrag: { classPropertyName: "enableColumnDrag", publicName: "enableColumnDrag", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardNavigation: { classPropertyName: "enableKeyboardNavigation", publicName: "enableKeyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, enableA11y: { classPropertyName: "enableA11y", publicName: "enableA11y", isSignal: true, isRequired: false, transformFunction: null }, enableCellPooling: { classPropertyName: "enableCellPooling", publicName: "enableCellPooling", isSignal: true, isRequired: false, transformFunction: null }, dataMode: { classPropertyName: "dataMode", publicName: "dataMode", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, onDataRequest: { classPropertyName: "onDataRequest", publicName: "onDataRequest", isSignal: true, isRequired: false, transformFunction: null }, onSortRequest: { classPropertyName: "onSortRequest", publicName: "onSortRequest", isSignal: true, isRequired: false, transformFunction: null }, onFilterRequest: { classPropertyName: "onFilterRequest", publicName: "onFilterRequest", isSignal: true, isRequired: false, transformFunction: null }, onLoadMoreRows: { classPropertyName: "onLoadMoreRows", publicName: "onLoadMoreRows", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrolling: { classPropertyName: "infiniteScrolling", publicName: "infiniteScrolling", isSignal: true, isRequired: false, transformFunction: null }, rowHeightMode: { classPropertyName: "rowHeightMode", publicName: "rowHeightMode", isSignal: true, isRequired: false, transformFunction: null }, rowHeightConfig: { classPropertyName: "rowHeightConfig", publicName: "rowHeightConfig", isSignal: true, isRequired: false, transformFunction: null }, columnResize: { classPropertyName: "columnResize", publicName: "columnResize", isSignal: true, isRequired: false, transformFunction: null }, columnDrag: { classPropertyName: "columnDrag", publicName: "columnDrag", isSignal: true, isRequired: false, transformFunction: null }, cellOverflow: { classPropertyName: "cellOverflow", publicName: "cellOverflow", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, overscanRows: { classPropertyName: "overscanRows", publicName: "overscanRows", isSignal: true, isRequired: false, transformFunction: null }, overscanCols: { classPropertyName: "overscanCols", publicName: "overscanCols", isSignal: true, isRequired: false, transformFunction: null }, sortIcons: { classPropertyName: "sortIcons", publicName: "sortIcons", isSignal: true, isRequired: false, transformFunction: null }, rendererCache: { classPropertyName: "rendererCache", publicName: "rendererCache", isSignal: true, isRequired: false, transformFunction: null }, onScrollCallback: { classPropertyName: "onScrollCallback", publicName: "onScrollCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellClickCallback: { classPropertyName: "onCellClickCallback", publicName: "onCellClickCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellDoubleClickCallback: { classPropertyName: "onCellDoubleClickCallback", publicName: "onCellDoubleClickCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellContextMenuCallback: { classPropertyName: "onCellContextMenuCallback", publicName: "onCellContextMenuCallback", isSignal: true, isRequired: false, transformFunction: null }, onSelectionChangeCallback: { classPropertyName: "onSelectionChangeCallback", publicName: "onSelectionChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, onPageChangeCallback: { classPropertyName: "onPageChangeCallback", publicName: "onPageChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, onColumnWidthsChangeCallback: { classPropertyName: "onColumnWidthsChangeCallback", publicName: "onColumnWidthsChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, filterState: { classPropertyName: "filterState", publicName: "filterState", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", selection: "selectionChange", sortState: "sortStateChange", filterState: "filterStateChange", currentPage: "currentPageChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellContextMenu: "cellContextMenu", cellChange: "cellChange", cellBeforeChange: "cellBeforeChange", cellAfterChange: "cellAfterChange", selectionChangeEvent: "selectionChanged", selectionStart: "selectionStart", selectionEnd: "selectionEnd", editStart: "editStart", editEnd: "editEnd", editCommit: "editCommit", editCancel: "editCancel", scroll: "scroll", scrollStart: "scrollStart", scrollEnd: "scrollEnd", sortChange: "sortChange", sortBeforeSort: "sortBeforeSort", sortAfterSort: "sortAfterSort", filterChange: "filterChange", filterBeforeFilter: "filterBeforeFilter", filterAfterFilter: "filterAfterFilter", filterExport: "filterExport", filterStart: "filterStart", filterEnd: "filterEnd", filterError: "filterError", filterClear: "filterClear", focusChange: "focusChange", focusIn: "focusIn", focusOut: "focusOut", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress", columnResizeEvent: "columnResize", columnMove: "columnMove", columnHide: "columnHide", columnShow: "columnShow", columnDragStart: "columnDragStart", columnDragEvent: "columnDrag", columnDragEnd: "columnDragEnd", columnDragCancel: "columnDragCancel", headerClick: "headerClick", headerDoubleClick: "headerDoubleClick", headerContextMenu: "headerContextMenu", headerHover: "headerHover", headerSortClick: "headerSortClick", headerFilterClick: "headerFilterClick", headerCheckboxChange: "headerCheckboxChange", renderStart: "renderStart", renderEnd: "renderEnd", dataLoad: "dataLoad", dataChange: "dataChange", loadingStart: "loadingStart", loadingEnd: "loadingEnd", loadingProgress: "loadingProgress", undoRedoChange: "undoRedoChange", gridDestroy: "gridDestroy", gridError: "gridError", gridWarning: "gridWarning", rowInsert: "rowInsert", rowDelete: "rowDelete", rowMove: "rowMove", copy: "copy", cut: "cut", paste: "paste" }, queries: [{ propertyName: "columnChildren", predicate: ZenColumnComponent, isSignal: true }], viewQueries: [{ propertyName: "gridContainerRef", first: true, predicate: ["gridContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (_isBrowser) {
+      <div #gridContainer class="zen-grid-container"></div>
+    } @else {
+      <div class="zen-grid-placeholder" [style.height.px]="placeholderHeight"></div>
+    }
+    <div style="display:none">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block;position:relative;height:100%}.zen-grid-container{width:100%;height:100%}.zen-grid-placeholder{width:100%;background:#f5f5f5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'zen-grid', standalone: true, template: `
+    @if (_isBrowser) {
+      <div #gridContainer class="zen-grid-container"></div>
+    } @else {
+      <div class="zen-grid-placeholder" [style.height.px]="placeholderHeight"></div>
+    }
+    <div style="display:none">
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;height:100%}.zen-grid-container{width:100%;height:100%}.zen-grid-placeholder{width:100%;background:#f5f5f5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridContainerRef: [{ type: i0.ViewChild, args: ['gridContainer', { isSignal: true }] }], columnChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZenColumnComponent), { isSignal: true }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: true }] }], colCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "colCount", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], colWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "colWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], enableMultiSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelection", required: false }] }], selectionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionType", required: false }] }], enableColumnResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnResize", required: false }] }], enableColumnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnDrag", required: false }] }], enableKeyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardNavigation", required: false }] }], enableA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableA11y", required: false }] }], enableCellPooling: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCellPooling", required: false }] }], dataMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataMode", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], onDataRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "onDataRequest", required: false }] }], onSortRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSortRequest", required: false }] }], onFilterRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "onFilterRequest", required: false }] }], onLoadMoreRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMoreRows", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], infiniteScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrolling", required: false }] }], rowHeightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeightMode", required: false }] }], rowHeightConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeightConfig", required: false }] }], columnResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnResize", required: false }] }], columnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDrag", required: false }] }], cellOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellOverflow", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], overscanRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscanRows", required: false }] }], overscanCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscanCols", required: false }] }], sortIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortIcons", required: false }] }], rendererCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererCache", required: false }] }], onScrollCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onScrollCallback", required: false }] }], onCellClickCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellClickCallback", required: false }] }], onCellDoubleClickCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellDoubleClickCallback", required: false }] }], onCellContextMenuCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellContextMenuCallback", required: false }] }], onSelectionChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSelectionChangeCallback", required: false }] }], onPageChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onPageChangeCallback", required: false }] }], onColumnWidthsChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onColumnWidthsChangeCallback", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }, { type: i0.Output, args: ["sortStateChange"] }], filterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterState", required: false }] }, { type: i0.Output, args: ["filterStateChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], cellContextMenu: [{ type: i0.Output, args: ["cellContextMenu"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellBeforeChange: [{ type: i0.Output, args: ["cellBeforeChange"] }], cellAfterChange: [{ type: i0.Output, args: ["cellAfterChange"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChanged"] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], editStart: [{ type: i0.Output, args: ["editStart"] }], editEnd: [{ type: i0.Output, args: ["editEnd"] }], editCommit: [{ type: i0.Output, args: ["editCommit"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollStart: [{ type: i0.Output, args: ["scrollStart"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], sortBeforeSort: [{ type: i0.Output, args: ["sortBeforeSort"] }], sortAfterSort: [{ type: i0.Output, args: ["sortAfterSort"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterBeforeFilter: [{ type: i0.Output, args: ["filterBeforeFilter"] }], filterAfterFilter: [{ type: i0.Output, args: ["filterAfterFilter"] }], filterExport: [{ type: i0.Output, args: ["filterExport"] }], filterStart: [{ type: i0.Output, args: ["filterStart"] }], filterEnd: [{ type: i0.Output, args: ["filterEnd"] }], filterError: [{ type: i0.Output, args: ["filterError"] }], filterClear: [{ type: i0.Output, args: ["filterClear"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], focusIn: [{ type: i0.Output, args: ["focusIn"] }], focusOut: [{ type: i0.Output, args: ["focusOut"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], keyUp: [{ type: i0.Output, args: ["keyUp"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }], columnResizeEvent: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnHide: [{ type: i0.Output, args: ["columnHide"] }], columnShow: [{ type: i0.Output, args: ["columnShow"] }], columnDragStart: [{ type: i0.Output, args: ["columnDragStart"] }], columnDragEvent: [{ type: i0.Output, args: ["columnDrag"] }], columnDragEnd: [{ type: i0.Output, args: ["columnDragEnd"] }], columnDragCancel: [{ type: i0.Output, args: ["columnDragCancel"] }], headerClick: [{ type: i0.Output, args: ["headerClick"] }], headerDoubleClick: [{ type: i0.Output, args: ["headerDoubleClick"] }], headerContextMenu: [{ type: i0.Output, args: ["headerContextMenu"] }], headerHover: [{ type: i0.Output, args: ["headerHover"] }], headerSortClick: [{ type: i0.Output, args: ["headerSortClick"] }], headerFilterClick: [{ type: i0.Output, args: ["headerFilterClick"] }], headerCheckboxChange: [{ type: i0.Output, args: ["headerCheckboxChange"] }], renderStart: [{ type: i0.Output, args: ["renderStart"] }], renderEnd: [{ type: i0.Output, args: ["renderEnd"] }], dataLoad: [{ type: i0.Output, args: ["dataLoad"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], loadingStart: [{ type: i0.Output, args: ["loadingStart"] }], loadingEnd: [{ type: i0.Output, args: ["loadingEnd"] }], loadingProgress: [{ type: i0.Output, args: ["loadingProgress"] }], undoRedoChange: [{ type: i0.Output, args: ["undoRedoChange"] }], gridDestroy: [{ type: i0.Output, args: ["gridDestroy"] }], gridError: [{ type: i0.Output, args: ["gridError"] }], gridWarning: [{ type: i0.Output, args: ["gridWarning"] }], rowInsert: [{ type: i0.Output, args: ["rowInsert"] }], rowDelete: [{ type: i0.Output, args: ["rowDelete"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], copy: [{ type: i0.Output, args: ["copy"] }], cut: [{ type: i0.Output, args: ["cut"] }], paste: [{ type: i0.Output, args: ["paste"] }] } });
+
+class ZenGridValueAccessorDirective {
+    grid = inject(ZenGridComponent);
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        this.grid.dataChange.subscribe(() => {
+            this.onChange(this.grid.data());
+            this.onTouched();
+        });
+    }
+    writeValue(value) {
+        if (value) {
+            this.grid.setData(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenGridValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: ZenGridValueAccessorDirective, isStandalone: true, selector: "zen-grid[formControl],zen-grid[formControlName],zen-grid[ngModel]", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZenGridValueAccessorDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ZenGridValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'zen-grid[formControl],zen-grid[formControlName],zen-grid[ngModel]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZenGridValueAccessorDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+class AngularPluginWrapper {
+    injector;
+    pluginFactory;
+    name;
+    phase;
+    dependencies;
+    constructor(injector, pluginFactory) {
+        this.injector = injector;
+        this.pluginFactory = pluginFactory;
+        const plugin = this.pluginFactory(this.injector);
+        this.name = plugin.name;
+        this.phase = plugin.phase;
+        this.dependencies = plugin.dependencies;
+    }
+    setup(store, api) {
+        const plugin = this.pluginFactory(this.injector);
+        return plugin.setup(store, api);
+    }
+    dispose() {
+        // Plugin cleanup handled by PluginHost
+    }
+}
+function createAngularPlugin(injector, factory) {
+    return new AngularPluginWrapper(injector, factory);
+}
+
+function bridgeStoreSignal(store, key) {
+    const angularSignal = signal(store.get(key), ...(ngDevMode ? [{ debugName: "angularSignal" }] : []));
+    store.effect(`angular-bridge:${key}`, () => {
+        const value = store.get(key);
+        angularSignal.set(value);
+    }, 'angular-bridge');
+    return angularSignal.asReadonly();
+}
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularPluginWrapper, EVENT_MAP, TemplateBridgeService, ZEN_GRID_CONFIG, ZenCellTemplateDirective, ZenColumnComponent, ZenEditorTemplateDirective, ZenGridComponent, ZenGridValueAccessorDirective, ZenHeaderTemplateDirective, bridgeStoreSignal, createAngularPlugin, provideZenGrid };
+//# sourceMappingURL=zengrid-angular.mjs.map