@alaarab/ogrid-angular 2.5.9 → 2.6.1

package/dist/esm/services/virtual-scroll.service.js

@@ -0,0 +1,114 @@
+import { Injectable, signal, computed, DestroyRef, inject } from '@angular/core';
+import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, validateVirtualScrollConfig, computeVisibleColumnRange, } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
+/**
+ * Default minimum row count before virtual scrolling activates.
+ * Grids with fewer rows than this render all rows without virtualization
+ * to avoid scroll offset artifacts on small datasets.
+ */
+const DEFAULT_PASSTHROUGH_THRESHOLD = 100;
+/**
+ * Manages virtual scrolling state using Angular signals.
+ * Port of React's useVirtualScroll hook.
+ *
+ * Uses core's pure-TS `computeVisibleRange` and `getScrollTopForRow` utilities.
+ * The UI layer (Angular Material / PrimeNG) provides the scrollable container
+ * and calls `onScroll()` / sets `containerHeight`.
+ */
+export class VirtualScrollService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.totalRows = signal(0, ...(ngDevMode ? [{ debugName: "totalRows" }] : []));
+        this.config = signal({ rowHeight: 36 }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.containerHeight = signal(0, ...(ngDevMode ? [{ debugName: "containerHeight" }] : []));
+        // --- Internal state ---
+        this.scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "scrollTop" }] : []));
+        this.scrollLeft = signal(0, ...(ngDevMode ? [{ debugName: "scrollLeft" }] : []));
+        // --- Column virtualization inputs ---
+        this.columnWidths = signal([], ...(ngDevMode ? [{ debugName: "columnWidths" }] : []));
+        this.containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+        // Scrollable container reference for programmatic scrolling
+        this.containerEl = null;
+        // --- Derived computed signals ---
+        this.rowHeight = computed(() => this.config().rowHeight ?? 36, ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
+        this.overscan = computed(() => this.config().overscan ?? 5, ...(ngDevMode ? [{ debugName: "overscan" }] : []));
+        this.enabled = computed(() => this.config().enabled !== false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        this.threshold = computed(() => this.config().threshold ?? DEFAULT_PASSTHROUGH_THRESHOLD, ...(ngDevMode ? [{ debugName: "threshold" }] : []));
+        /** Whether virtual scrolling is actually active (enabled + enough rows). */
+        this.isActive = computed(() => this.enabled() && this.totalRows() >= this.threshold(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        /** The visible range of rows with spacer offsets. */
+        this.visibleRange = computed(() => {
+            if (!this.isActive()) {
+                // Passthrough: render all rows
+                return {
+                    startIndex: 0,
+                    endIndex: Math.max(0, this.totalRows() - 1),
+                    offsetTop: 0,
+                    offsetBottom: 0,
+                };
+            }
+            return computeVisibleRange(this.scrollTop(), this.rowHeight(), this.containerHeight(), this.totalRows(), this.overscan());
+        }, ...(ngDevMode ? [{ debugName: "visibleRange" }] : []));
+        /** Total scrollable height in pixels. */
+        this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()), ...(ngDevMode ? [{ debugName: "totalHeight" }] : []));
+        // --- Column virtualization ---
+        this.columnsEnabled = computed(() => this.config().columns === true, ...(ngDevMode ? [{ debugName: "columnsEnabled" }] : []));
+        this.columnOverscan = computed(() => this.config().columnOverscan ?? 2, ...(ngDevMode ? [{ debugName: "columnOverscan" }] : []));
+        /** The visible column range with spacer widths, or null when column virtualization is off. */
+        this.columnRange = computed(() => {
+            if (!this.columnsEnabled())
+                return null;
+            const widths = this.columnWidths();
+            if (widths.length === 0)
+                return null;
+            return computeVisibleColumnRange(this.scrollLeft(), widths, this.containerWidth(), this.columnOverscan());
+        }, ...(ngDevMode ? [{ debugName: "columnRange" }] : []));
+        this.destroyRef.onDestroy(() => {
+            this.containerEl = null;
+        });
+    }
+    /**
+     * Set the scrollable container element.
+     * Used for programmatic scrolling (scrollToRow).
+     */
+    setContainer(el) {
+        this.containerEl = el;
+    }
+    /**
+     * Call this from the container's scroll event handler.
+     * Tracks both vertical and horizontal scroll positions.
+     */
+    onScroll(event) {
+        const target = event.target;
+        this.scrollTop.set(target.scrollTop);
+        this.scrollLeft.set(target.scrollLeft);
+    }
+    /**
+     * Scroll to a specific row index.
+     * @param index - The row index to scroll to.
+     * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
+     */
+    scrollToRow(index, align = 'start') {
+        const container = this.containerEl;
+        if (!container)
+            return;
+        const targetScrollTop = getScrollTopForRow(index, this.rowHeight(), this.containerHeight(), align);
+        container.scrollTo({ top: targetScrollTop, behavior: 'auto' });
+    }
+    /**
+     * Update the virtual scroll configuration.
+     */
+    updateConfig(updates) {
+        this.config.update((prev) => {
+            const next = { ...prev, ...updates };
+            validateVirtualScrollConfig(next);
+            return next;
+        });
+    }
+    static { this.ɵfac = function VirtualScrollService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || VirtualScrollService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: VirtualScrollService, factory: VirtualScrollService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VirtualScrollService, [{
+        type: Injectable
+    }], () => [], null); })();

package/dist/esm/styles/ogrid-theme-vars.js

@@ -0,0 +1,112 @@
+/**
+ * Shared OGrid CSS theme variables (light + dark mode).
+ * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
+ *
+ * Uses :where() selectors for ZERO specificity  -  consumer overrides always win.
+ * Dark mode: auto via prefers-color-scheme, explicit via [data-theme="dark"].
+ */
+export const OGRID_THEME_VARS_CSS = `
+/* ─── OGrid Light Theme (default) ─── */
+:where(:root) {
+  --ogrid-bg: #ffffff;
+  --ogrid-fg: rgba(0, 0, 0, 0.87);
+  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
+  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-border: rgba(0, 0, 0, 0.12);
+  --ogrid-border-strong: rgba(0, 0, 0, 0.5);
+  --ogrid-border-hover: rgba(0, 0, 0, 0.3);
+  --ogrid-header-bg: #f5f5f5;
+  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
+  --ogrid-selected-row-bg: #e6f0fb;
+  --ogrid-bg-selected-hover: #dae8f8;
+  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
+  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
+  --ogrid-accent: #0078d4;
+  --ogrid-accent-dark: #005a9e;
+  --ogrid-selection-color: #217346;
+  --ogrid-primary: #0078d4;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #106ebe;
+  --ogrid-bg-subtle: #f5f5f5;
+  --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
+  --ogrid-active-bg: rgba(0, 0, 0, 0.06);
+  --ogrid-muted: rgba(0, 0, 0, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
+  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-selection: #217346;
+  --ogrid-bg-range: rgba(33, 115, 70, 0.12);
+  --ogrid-bg-selected: #e6f0fb;
+  --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
+}
+/* ─── Auto Dark (system preference) ─── */
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) {
+    --ogrid-bg: #1e1e1e;
+    --ogrid-fg: rgba(255, 255, 255, 0.87);
+    --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+    --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-border: rgba(255, 255, 255, 0.12);
+    --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+    --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+    --ogrid-header-bg: #2c2c2c;
+    --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-selected-row-bg: #1a3a5c;
+    --ogrid-bg-selected-hover: #1f3650;
+    --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+    --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+    --ogrid-accent: #4da6ff;
+    --ogrid-accent-dark: #3390e0;
+    --ogrid-selection-color: #2ea043;
+    --ogrid-primary: #4da6ff;
+    --ogrid-primary-fg: #fff;
+    --ogrid-primary-hover: #66b3ff;
+    --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+    --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+    --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+    --ogrid-muted: rgba(255, 255, 255, 0.5);
+    --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+    --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+    --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-selection: #2ea043;
+    --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+    --ogrid-bg-selected: #1a3a5c;
+    --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+  }
+}
+/* ─── Explicit Dark ─── */
+:where([data-theme="dark"]) {
+  --ogrid-bg: #1e1e1e;
+  --ogrid-fg: rgba(255, 255, 255, 0.87);
+  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
+  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-border: rgba(255, 255, 255, 0.12);
+  --ogrid-border-strong: rgba(255, 255, 255, 0.5);
+  --ogrid-border-hover: rgba(255, 255, 255, 0.3);
+  --ogrid-header-bg: #2c2c2c;
+  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-selected-row-bg: #1a3a5c;
+  --ogrid-bg-selected-hover: #1f3650;
+  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
+  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
+  --ogrid-accent: #4da6ff;
+  --ogrid-accent-dark: #3390e0;
+  --ogrid-selection-color: #2ea043;
+  --ogrid-primary: #4da6ff;
+  --ogrid-primary-fg: #fff;
+  --ogrid-primary-hover: #66b3ff;
+  --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
+  --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
+  --ogrid-active-bg: rgba(255, 255, 255, 0.08);
+  --ogrid-muted: rgba(255, 255, 255, 0.5);
+  --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+  --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
+  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-selection: #2ea043;
+  --ogrid-bg-range: rgba(46, 160, 67, 0.15);
+  --ogrid-bg-selected: #1a3a5c;
+  --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
+}`;

package/dist/esm/types/columnTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/dataGridTypes.js

@@ -0,0 +1 @@
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';

package/dist/esm/types/index.js

@@ -0,0 +1 @@
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/esm/utils/dataGridViewModel.js

@@ -0,0 +1,6 @@
+/**
+ * View model helpers for Angular DataGridTable.
+ * Pure functions live in @alaarab/ogrid-core. This file re-exports them.
+ */
+// Re-export everything from core's dataGridViewModel
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from '@alaarab/ogrid-core';

package/dist/esm/utils/debounce.js

@@ -0,0 +1,68 @@
+/**
+ * Debounce utilities for Angular using signals.
+ * Provides functional parity with React's useDebounce and useDebouncedCallback.
+ */
+import { signal, effect } from '@angular/core';
+/**
+ * Creates a debounced signal that updates after the specified delay when the source value changes.
+ *
+ * @param source - The signal to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A signal containing the debounced value
+ *
+ * @example
+ * ```typescript
+ * const searchQuery = signal('');
+ * const debouncedQuery = createDebouncedSignal(searchQuery, 300);
+ *
+ * effect(() => {
+ *   console.log('Debounced search:', debouncedQuery());
+ * });
+ * ```
+ */
+export function createDebouncedSignal(source, delayMs) {
+    const debouncedValue = signal(source(), ...(ngDevMode ? [{ debugName: "debouncedValue" }] : []));
+    effect((onCleanup) => {
+        const currentValue = source();
+        const timeoutId = setTimeout(() => {
+            debouncedValue.set(currentValue);
+        }, delayMs);
+        onCleanup(() => clearTimeout(timeoutId));
+    });
+    return debouncedValue;
+}
+/**
+ * Creates a debounced function that delays invoking the provided function
+ * until after `delayMs` milliseconds have elapsed since the last time it was invoked.
+ *
+ * @param fn - The function to debounce
+ * @param delayMs - Delay in milliseconds
+ * @returns A debounced version of the function
+ *
+ * @example
+ * ```typescript
+ * const saveData = (value: string) => {
+ *   console.log('Saving:', value);
+ * };
+ *
+ * const debouncedSave = createDebouncedCallback(saveData, 500);
+ *
+ * // Multiple rapid calls will only trigger once after 500ms
+ * debouncedSave('hello');
+ * debouncedSave('world');  // Only this will execute after 500ms
+ * ```
+ */
+export function createDebouncedCallback(fn, delayMs) {
+    let timeoutId = null;
+    return ((...args) => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            fn(...args);
+            timeoutId = null;
+        }, delayMs);
+    });
+}
+// Re-export simple debounce from core
+export { debounce } from '@alaarab/ogrid-core';

package/dist/esm/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * Shared utilities for Angular DataGridTable view layer.
+ */
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from './dataGridViewModel';
+// Debounce utilities
+export { createDebouncedSignal, createDebouncedCallback, debounce, } from './debounce';
+// Latest ref utilities
+export { createLatestCallback, } from './latestRef';

package/dist/esm/utils/latestRef.js

@@ -0,0 +1,41 @@
+/**
+ * Latest ref utility for Angular using signals.
+ * Provides functional parity with React's useLatestRef.
+ */
+/**
+ * Creates a stable wrapper function that always calls the latest version of the provided function.
+ * Useful for event handlers and callbacks where you want a stable reference but need to call
+ * the latest implementation.
+ *
+ * @param fn - Signal containing the function to wrap
+ * @returns A stable function that always invokes the latest version
+ *
+ * @example
+ * ```typescript
+ * class MyService {
+ *   readonly onSave = signal<(value: string) => void>((val) => console.log('Default:', val));
+ *   readonly stableOnSave = createLatestCallback(this.onSave);
+ *
+ *   constructor() {
+ *     // Setup event listener with stable reference
+ *     effect((onCleanup) => {
+ *       // stableOnSave never changes, so this effect only runs once
+ *       const callback = () => this.stableOnSave('data');
+ *       window.addEventListener('click', callback);
+ *       onCleanup(() => window.removeEventListener('click', callback));
+ *     });
+ *   }
+ *
+ *   updateHandler(newFn: (value: string) => void) {
+ *     // Even though we change the function, the callback reference stays stable
+ *     this.onSave.set(newFn);
+ *   }
+ * }
+ * ```
+ */
+export function createLatestCallback(fn) {
+    // Return a stable function that always calls the current value of the signal
+    return ((...args) => {
+        return fn()(...args);
+    });
+}

package/dist/types/components/base-column-chooser.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import type { IColumnDefinition } from '../types';
+import * as i0 from "@angular/core";
 export interface IColumnChooserProps {
     columns: IColumnDefinition[];
     visibleColumns: Set<string>;
@@ -34,4 +35,6 @@ export declare abstract class BaseColumnChooserComponent {
     clearAll(): void;
     onClearAll(): void;
     onSelectAll(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseColumnChooserComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseColumnChooserComponent, never, never, { "columns": { "alias": "columns"; "required": true; }; "visibleColumns": { "alias": "visibleColumns"; "required": true; }; }, { "visibilityChange": "visibilityChange"; }, never, never, true, never>;
 }

package/dist/types/components/base-column-header-filter.component.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import type { ColumnFilterType, IDateFilterValue, UserLike } from '../types';
+import * as i0 from "@angular/core";
 export interface IColumnHeaderFilterProps {
     columnKey: string;
     columnName: string;
@@ -89,4 +90,6 @@ export declare abstract class BaseColumnHeaderFilterComponent {
     /** Clean up debounce timer on destroy. */
     ngOnDestroy(): void;
     onDocumentClick(event: MouseEvent, selectorName: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseColumnHeaderFilterComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseColumnHeaderFilterComponent, never, never, { "columnKey": { "alias": "columnKey"; "required": true; }; "columnName": { "alias": "columnName"; "required": true; }; "filterType": { "alias": "filterType"; "required": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textValue": { "alias": "textValue"; "required": false; }; "selectedUser": { "alias": "selectedUser"; "required": false; }; "dateValue": { "alias": "dateValue"; "required": false; }; "isSorted": { "alias": "isSorted"; "required": false; }; "isSortedDescending": { "alias": "isSortedDescending"; "required": false; }; "onSort": { "alias": "onSort"; "required": false; }; "onFilterChange": { "alias": "onFilterChange"; "required": false; }; "isLoadingOptions": { "alias": "isLoadingOptions"; "required": false; }; "onTextChange": { "alias": "onTextChange"; "required": false; }; "onUserChange": { "alias": "onUserChange"; "required": false; }; "peopleSearch": { "alias": "peopleSearch"; "required": false; }; "onDateChange": { "alias": "onDateChange"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/types/components/base-column-header-menu.component.d.ts

@@ -1,4 +1,5 @@
 import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
 /**
  * Abstract base class containing all shared TypeScript logic for ColumnHeaderMenu components.
  * Framework-specific UI packages extend this with their templates and style overrides.
@@ -27,4 +28,6 @@ export declare abstract class BaseColumnHeaderMenuComponent {
     handlers: Partial<ColumnHeaderMenuHandlers>;
     readonly menuItems: import("@angular/core").Signal<IColumnHeaderMenuItem[]>;
     handleMenuItemClick(itemId: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseColumnHeaderMenuComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseColumnHeaderMenuComponent, never, never, { "columnId": { "alias": "columnId"; "required": true; }; "canPinLeft": { "alias": "canPinLeft"; "required": false; }; "canPinRight": { "alias": "canPinRight"; "required": false; }; "canUnpin": { "alias": "canUnpin"; "required": false; }; "currentSort": { "alias": "currentSort"; "required": false; }; "isSortable": { "alias": "isSortable"; "required": false; }; "isResizable": { "alias": "isResizable"; "required": false; }; "handlers": { "alias": "handlers"; "required": false; }; }, {}, never, never, true, never>;
 }

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -4,6 +4,7 @@ import { ColumnReorderService } from '../services/column-reorder.service';
 import { VirtualScrollService } from '../services/virtual-scroll.service';
 import type { IOGridDataGridProps, IColumnDef, RowId } from '../types';
 import type { HeaderFilterConfig, CellRenderDescriptor } from '../utils';
+import * as i0 from "@angular/core";
 /**
  * Abstract base class containing all shared TypeScript logic for DataGridTable components.
  * Framework-specific UI packages extend this with their templates and style overrides.
@@ -311,4 +312,6 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     getSortState(columnId: string): 'asc' | 'desc' | null;
     onAutosizeColumn(columnId: string): void;
     onAutosizeAllColumns(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseDataGridTableComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDataGridTableComponent<any>, never, never, {}, {}, never, never, true, never>;
 }

package/dist/types/components/base-inline-cell-editor.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, ElementRef } from '@angular/core';
 import type { IColumnDef } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
 /**
  * Abstract base class for Angular inline cell editors.
  * Contains all shared signals, lifecycle hooks, keyboard handlers,
@@ -27,6 +28,7 @@ export declare abstract class BaseInlineCellEditorComponent<T = unknown> {
     readonly selectOptions: import("@angular/core").WritableSignal<unknown[]>;
     readonly searchText: import("@angular/core").WritableSignal<string>;
     private scrollCleanup;
+    private suppressNextBlur;
     readonly filteredOptions: import("@angular/core").Signal<unknown[]>;
     private _initialized;
     ngOnInit(): void;
@@ -39,6 +41,9 @@ export declare abstract class BaseInlineCellEditorComponent<T = unknown> {
      *  (e.g. focus-triggered scroll, layout-shift scroll from DOM changes). */
     private attachScrollClose;
     commitValue(value: unknown): void;
+    private commitAndSuppressBlur;
+    private cancelAndSuppressBlur;
+    private shouldSkipBlur;
     onTextKeyDown(e: KeyboardEvent): void;
     private commitDateOrValue;
     getDateFormat(): string;
@@ -55,4 +60,6 @@ export declare abstract class BaseInlineCellEditorComponent<T = unknown> {
     protected positionFixedDropdown(wrapperRef: ElementRef<HTMLDivElement> | undefined, dropdownRef: ElementRef<HTMLDivElement> | undefined): void;
     /** Scroll the highlighted option into view within a dropdown element. */
     protected scrollOptionIntoView(dropdownRef: ElementRef<HTMLDivElement> | undefined): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseInlineCellEditorComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseInlineCellEditorComponent<any>, never, never, { "value": { "alias": "value"; "required": true; }; "item": { "alias": "item"; "required": true; }; "column": { "alias": "column"; "required": true; }; "rowIndex": { "alias": "rowIndex"; "required": true; }; "editorType": { "alias": "editorType"; "required": true; }; }, { "commit": "commit"; "cancel": "cancel"; }, never, never, true, never>;
 }

package/dist/types/components/base-ogrid.component.d.ts

@@ -1,5 +1,6 @@
 import { OGridService } from '../services/ogrid.service';
 import type { IOGridProps } from '../types';
+import * as i0 from "@angular/core";
 export declare abstract class BaseOGridComponent<T> {
     private readonly propsSignal;
     readonly ogridService: OGridService<T>;
@@ -7,4 +8,6 @@ export declare abstract class BaseOGridComponent<T> {
     constructor();
     get showToolbar(): boolean;
     onPageSizeChange(size: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseOGridComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseOGridComponent<any>, never, never, { "props": { "alias": "props"; "required": true; }; }, {}, never, never, true, never>;
 }

package/dist/types/components/base-pagination-controls.component.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
 /**
  * Abstract base class containing all shared TypeScript logic for PaginationControls components.
  * Framework-specific UI packages extend this with their templates and style overrides.
@@ -31,4 +32,6 @@ export declare abstract class BasePaginationControlsComponent {
     readonly vm: import("@angular/core").Signal<import("@alaarab/ogrid-core").PaginationViewModel | null>;
     onPageSizeSelect(event: Event): void;
     onPageSizeChange(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasePaginationControlsComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BasePaginationControlsComponent, never, never, { "currentPage": { "alias": "currentPage"; "required": true; }; "pageSize": { "alias": "pageSize"; "required": true; }; "totalCount": { "alias": "totalCount"; "required": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "entityLabelPlural": { "alias": "entityLabelPlural"; "required": false; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
 }

package/dist/types/components/base-popover-cell-editor.component.d.ts

@@ -1,4 +1,5 @@
 import type { IColumnDef, ICellEditorProps } from '../types';
+import * as i0 from "@angular/core";
 /**
  * Shared popover cell editor template used by all Angular UI packages.
  */
@@ -30,4 +31,6 @@ export declare abstract class BasePopoverCellEditorComponent<T = unknown> {
     protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;
     constructor();
     protected handleOverlayClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasePopoverCellEditorComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BasePopoverCellEditorComponent<any>, never, never, { "item": { "alias": "item"; "required": true; }; "column": { "alias": "column"; "required": true; }; "rowIndex": { "alias": "rowIndex"; "required": true; }; "globalColIndex": { "alias": "globalColIndex"; "required": true; }; "displayValue": { "alias": "displayValue"; "required": true; }; "editorProps": { "alias": "editorProps"; "required": true; }; "onCancel": { "alias": "onCancel"; "required": true; }; }, {}, never, never, true, never>;
 }

package/dist/types/components/empty-state.component.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class EmptyStateComponent {
     message: string | undefined;
     hasActiveFilters: boolean;
     render: unknown;
     clearAll: EventEmitter<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ogrid-empty-state", never, { "message": { "alias": "message"; "required": false; }; "hasActiveFilters": { "alias": "hasActiveFilters"; "required": false; }; "render": { "alias": "render"; "required": false; }; }, { "clearAll": "clearAll"; }, never, never, true, never>;
 }

package/dist/types/components/formula-bar.component.d.ts

@@ -1,11 +1,4 @@
-/**
- * FormulaBarComponent -- Standalone Angular formula bar component.
- *
- * Layout: [Name Box] [fx] [Formula Input]
- *
- * Uses --ogrid-* CSS variables for theming.
- * Port of React's FormulaBar component.
- */
+import * as i0 from "@angular/core";
 export declare class FormulaBarComponent {
     /** Active cell reference (e.g. "A1"). */
     readonly cellRef: import("@angular/core").InputSignal<string | null>;
@@ -26,4 +19,6 @@ export declare class FormulaBarComponent {
     onInput(event: Event): void;
     onKeyDown(event: KeyboardEvent): void;
     onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormulaBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormulaBarComponent, "ogrid-formula-bar", never, { "cellRef": { "alias": "cellRef"; "required": false; "isSignal": true; }; "formulaText": { "alias": "formulaText"; "required": false; "isSignal": true; }; "isEditing": { "alias": "isEditing"; "required": false; "isSignal": true; }; }, { "inputChange": "inputChange"; "commit": "commit"; "cancel": "cancel"; "startEditing": "startEditing"; }, never, never, true, never>;
 }

package/dist/types/components/formula-ref-overlay.component.d.ts

@@ -1,10 +1,5 @@
-/**
- * FormulaRefOverlayComponent -- Renders colored border overlays on cells
- * referenced by the active formula, like Excel's reference highlighting.
- *
- * Port of React's FormulaRefOverlay component.
- */
 import { type FormulaReference } from '@alaarab/ogrid-core/formula';
+import * as i0 from "@angular/core";
 interface RefRect {
     top: number;
     left: number;
@@ -23,5 +18,7 @@ export declare class FormulaRefOverlayComponent {
     private rafId;
     constructor();
     max0(v: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormulaRefOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormulaRefOverlayComponent, "ogrid-formula-ref-overlay", never, { "containerEl": { "alias": "containerEl"; "required": false; "isSignal": true; }; "references": { "alias": "references"; "required": false; "isSignal": true; }; "colOffset": { "alias": "colOffset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};

package/dist/types/components/grid-context-menu.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, ElementRef } from '@angular/core';
 import { GRID_CONTEXT_MENU_ITEMS, formatShortcut } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
 export declare class GridContextMenuComponent {
     private destroyRef;
     x: number;
@@ -29,4 +30,6 @@ export declare class GridContextMenuComponent {
     constructor();
     isDisabled(item: (typeof GRID_CONTEXT_MENU_ITEMS)[number]): boolean;
     onItemClick(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridContextMenuComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridContextMenuComponent, "ogrid-context-menu", never, { "x": { "alias": "x"; "required": true; }; "y": { "alias": "y"; "required": true; }; "hasSelection": { "alias": "hasSelection"; "required": false; }; "canUndoProp": { "alias": "canUndoProp"; "required": false; }; "canRedoProp": { "alias": "canRedoProp"; "required": false; }; "classNames": { "alias": "classNames"; "required": false; }; }, { "copyAction": "copyAction"; "cutAction": "cutAction"; "pasteAction": "pasteAction"; "selectAllAction": "selectAllAction"; "undoAction": "undoAction"; "redoAction": "redoAction"; "closeAction": "closeAction"; }, never, never, true, never>;
 }

package/dist/types/components/inline-cell-editor-template.d.ts

@@ -2,5 +2,5 @@
  * Shared inline cell editor template used by all Angular UI packages.
  * The template is identical across Material, PrimeNG, and Radix implementations.
  */
-export declare const INLINE_CELL_EDITOR_TEMPLATE = "\n    @switch (editorType) {\n      @case ('text') {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @case ('richSelect') {\n        <div #richSelectWrapper\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit\">\n            <span>{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #richSelectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:13px;font-family:inherit\">\n            <input\n              #richSelectInput\n              type=\"text\"\n              [value]=\"searchText()\"\n              (input)=\"onRichSelectSearch($any($event.target).value)\"\n              (keydown)=\"onRichSelectKeyDown($event)\"\n              placeholder=\"Search...\"\n              style=\"width:100%;padding:6px 8px;border:none;border-bottom:1px solid var(--ogrid-border, rgba(0,0,0,0.12));background:var(--ogrid-bg, #fff);color:inherit;font:inherit;font-size:13px;outline:none;box-sizing:border-box;position:sticky;top:0;z-index:1\"\n            />\n            <div #richSelectOptions>\n              @for (opt of filteredOptions(); track opt; let i = $index) {\n                <div role=\"option\"\n                     [attr.aria-selected]=\"i === highlightedIndex()\"\n                     (click)=\"commitValue(opt)\"\n                     [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:13px;background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:13px'\">\n                  {{ getDisplayText(opt) }}\n                </div>\n              }\n              @if (filteredOptions().length === 0) {\n                <div style=\"padding:6px 8px;color:var(--ogrid-muted, #999);font-size:13px\">No matches</div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @case ('select') {\n        <div #selectWrapper tabindex=\"0\"\n             style=\"width:100%;height:100%;display:flex;align-items:center;padding:6px 10px;box-sizing:border-box;min-width:0;position:relative\"\n             (keydown)=\"onCustomSelectKeyDown($event)\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;cursor:pointer;font-size:13px;color:inherit\">\n            <span>{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #selectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:13px;font-family:inherit\">\n            @for (opt of selectOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:13px;background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:13px'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('checkbox') {\n        <div style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"!!localValue()\"\n            (change)=\"commitValue($any($event.target).checked)\"\n            (keydown)=\"onCheckboxKeyDown($event)\"\n          />\n        </div>\n      }\n      @case ('date') {\n        @if (getCellEditorType() === 'native') {\n          <input\n            #inputEl\n            type=\"date\"\n            [value]=\"localValue()\"\n            (input)=\"localValue.set($any($event.target).value)\"\n            (keydown)=\"onTextKeyDown($event)\"\n            (blur)=\"onTextBlur()\"\n            [style]=\"getInputStyle()\"\n          />\n        } @else {\n          <input\n            #inputEl\n            type=\"text\"\n            [placeholder]=\"getDatePlaceholder()\"\n            [value]=\"localValue()\"\n            (input)=\"localValue.set($any($event.target).value)\"\n            (keydown)=\"onTextKeyDown($event)\"\n            (blur)=\"onTextBlur()\"\n            [style]=\"getInputStyle()\"\n          />\n        }\n      }\n      @default {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n    }\n";
-export declare const INLINE_CELL_EDITOR_STYLES = "\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n";
+export declare const INLINE_CELL_EDITOR_TEMPLATE = "\n    @switch (editorType) {\n      @case ('text') {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n      @case ('richSelect') {\n        <div #richSelectWrapper\n             style=\"width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;min-width:0;position:relative\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;cursor:pointer;font-size:var(--ogrid-cell-font-size, 13px);color:inherit\">\n            <span style=\"flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #richSelectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:var(--ogrid-cell-font-size, 13px);font-family:inherit\">\n            <input\n              #richSelectInput\n              type=\"text\"\n              [value]=\"searchText()\"\n              (input)=\"onRichSelectSearch($any($event.target).value)\"\n              (keydown)=\"onRichSelectKeyDown($event)\"\n              placeholder=\"Search...\"\n              style=\"width:100%;padding:6px 8px;border:none;border-bottom:1px solid var(--ogrid-border, rgba(0,0,0,0.12));background:var(--ogrid-bg, #fff);color:inherit;font:inherit;font-size:var(--ogrid-cell-font-size, 13px);outline:none;box-sizing:border-box;position:sticky;top:0;z-index:1\"\n            />\n            <div #richSelectOptions>\n              @for (opt of filteredOptions(); track opt; let i = $index) {\n                <div role=\"option\"\n                     [attr.aria-selected]=\"i === highlightedIndex()\"\n                     (click)=\"commitValue(opt)\"\n                     [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px)'\">\n                  {{ getDisplayText(opt) }}\n                </div>\n              }\n              @if (filteredOptions().length === 0) {\n                <div style=\"padding:6px 8px;color:var(--ogrid-muted, #999);font-size:var(--ogrid-cell-font-size, 13px)\">No matches</div>\n              }\n            </div>\n          </div>\n        </div>\n      }\n      @case ('select') {\n        <div #selectWrapper tabindex=\"0\"\n             style=\"width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;overflow:hidden;min-width:0;position:relative\"\n             (keydown)=\"onCustomSelectKeyDown($event)\">\n          <div style=\"display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;cursor:pointer;font-size:var(--ogrid-cell-font-size, 13px);color:inherit\">\n            <span style=\"flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap\">{{ getDisplayText(value) }}</span>\n            <span style=\"margin-left:4px;font-size:10px;opacity:0.5\">&#9662;</span>\n          </div>\n          <div #selectDropdown role=\"listbox\"\n               style=\"position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0,0,0,0.12));z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.2);text-align:left;font-size:var(--ogrid-cell-font-size, 13px);font-family:inherit\">\n            @for (opt of selectOptions(); track opt; let i = $index) {\n              <div role=\"option\"\n                   [attr.aria-selected]=\"i === highlightedIndex()\"\n                   (click)=\"commitValue(opt)\"\n                   [style]=\"i === highlightedIndex() ? 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px);background:var(--ogrid-bg-hover, #e8f0fe)' : 'padding:6px 8px;cursor:pointer;color:var(--ogrid-fg, #242424);font-size:var(--ogrid-cell-font-size, 13px)'\">\n                {{ getDisplayText(opt) }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @case ('checkbox') {\n        <div style=\"display:flex;align-items:center;justify-content:center;width:100%;height:100%\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"!!localValue()\"\n            (change)=\"commitValue($any($event.target).checked)\"\n            (keydown)=\"onCheckboxKeyDown($event)\"\n          />\n        </div>\n      }\n      @case ('date') {\n        @if (getCellEditorType() === 'native') {\n          <input\n            #inputEl\n            type=\"date\"\n            [value]=\"localValue()\"\n            (input)=\"localValue.set($any($event.target).value)\"\n            (keydown)=\"onTextKeyDown($event)\"\n            (blur)=\"onTextBlur()\"\n            [style]=\"getInputStyle()\"\n          />\n        } @else {\n          <input\n            #inputEl\n            type=\"text\"\n            [placeholder]=\"getDatePlaceholder()\"\n            [value]=\"localValue()\"\n            (input)=\"localValue.set($any($event.target).value)\"\n            (keydown)=\"onTextKeyDown($event)\"\n            (blur)=\"onTextBlur()\"\n            [style]=\"getInputStyle()\"\n          />\n        }\n      }\n      @default {\n        <input\n          #inputEl\n          type=\"text\"\n          [value]=\"localValue()\"\n          (input)=\"localValue.set($any($event.target).value)\"\n          (keydown)=\"onTextKeyDown($event)\"\n          (blur)=\"onTextBlur()\"\n          [style]=\"getInputStyle()\"\n        />\n      }\n    }\n";
+export declare const INLINE_CELL_EDITOR_STYLES = "\n    :host {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      min-width: 0;\n      padding-top: var(--ogrid-cell-padding-vertical, 6px);\n      padding-bottom: var(--ogrid-cell-padding-vertical, 6px);\n      padding-left: var(--ogrid-cell-padding-horizontal, 10px);\n      padding-right: var(--ogrid-cell-padding-horizontal, 10px);\n      box-sizing: border-box;\n      overflow: hidden;\n    }\n";

package/dist/types/components/marching-ants-overlay.component.d.ts

@@ -1,6 +1,7 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import type { ISelectionRange } from '../types';
 import { type OverlayRect } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/core";
 export declare class MarchingAntsOverlayComponent implements OnChanges {
     private destroyRef;
     containerEl: HTMLElement | null;
@@ -22,4 +23,6 @@ export declare class MarchingAntsOverlayComponent implements OnChanges {
     isSingleCellSelection(): boolean;
     clipRangeMatchesSel(): boolean;
     max0(n: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MarchingAntsOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MarchingAntsOverlayComponent, "ogrid-marching-ants-overlay", never, { "containerEl": { "alias": "containerEl"; "required": true; }; "selectionRange": { "alias": "selectionRange"; "required": false; }; "copyRange": { "alias": "copyRange"; "required": false; }; "cutRange": { "alias": "cutRange"; "required": false; }; "colOffset": { "alias": "colOffset"; "required": false; }; "columnSizingVersion": { "alias": "columnSizingVersion"; "required": false; }; "items": { "alias": "items"; "required": false; }; "visibleColumns": { "alias": "visibleColumns"; "required": false; }; "columnOrder": { "alias": "columnOrder"; "required": false; }; }, {}, never, never, true, never>;
 }