@reforgium/data-grid 1.0.2 → 1.1.0

package/fesm2022/reforgium-data-grid.mjs

@@ -1,49 +1,247 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, signal, computed, effect, Injectable, Component, viewChild, ElementRef, ChangeDetectionStrategy, booleanAttribute, numberAttribute, output, contentChildren, afterRenderEffect, DestroyRef, untracked } from '@angular/core';
+import { input, inject, TemplateRef, Directive, numberAttribute, output, computed, Component, signal, effect, Injectable, viewChild, ElementRef, ChangeDetectionStrategy, booleanAttribute, contentChildren, afterRenderEffect, DestroyRef, untracked } from '@angular/core';
 import { NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
 import { Subscription, fromEvent, auditTime } from 'rxjs';
 
+/**
+ * Directive for defining type-specific cell templates in a data grid.
+ *
+ * This directive allows developers to create custom cell renderers for specific data types
+ * within the data grid component. It binds a template to a type identifier, enabling
+ * the grid to dynamically select and render the appropriate template based on column type.
+ *
+ * Example usage:
+ * ```html
+ * <ng-template reDataGridTypeCell="date" let-data>
+ *   {{ data.value | date }}
+ * </ng-template>
+ * ```
+ *
+ * The directive captures the template reference and makes it available to the parent
+ * data grid component for rendering cells of the specified type.
+ */
 class DataGridTypeCellTemplateDirective {
-    type = input('', { ...(ngDevMode ? { debugName: "type" } : {}), alias: 'ssDataGridTypeCell' });
+    /**
+     * The type identifier for this cell template.
+     *
+     * Specifies which data type this template should be used for.
+     * When the data grid encounters a column with a matching type,
+     * it will use this template to render cells in that column.
+     *
+     * @default ''
+     */
+    type = input('', { ...(ngDevMode ? { debugName: "type" } : {}), alias: 'reDataGridTypeCell' });
+    /**
+     * Reference to the template defined in the directive.
+     *
+     * This template will be rendered for each cell of the matching type,
+     * receiving `RenderTemplateData` as its context with cell-specific information.
+     */
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridTypeCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataGridTypeCellTemplateDirective, isStandalone: true, selector: "ng-template[reDataGridTypeCell]", inputs: { type: { classPropertyName: "type", publicName: "reDataGridTypeCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridTypeCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridTypeCell]' }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "reDataGridTypeCell", required: false }] }] } });
+
+class DataGridCellTemplateDirective {
+    key = input('', { ...(ngDevMode ? { debugName: "key" } : {}), alias: 'reDataGridCell' });
+    /**
+     * The injected template reference containing the custom cell template.
+     * The template context is of the type `DataGridCellTemplateDirective`.
+     */
     tpl = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridTypeCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DataGridTypeCellTemplateDirective, isStandalone: true, selector: "ng-template[ssDataGridTypeCell]", inputs: { type: { classPropertyName: "type", publicName: "ssDataGridTypeCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataGridCellTemplateDirective, isStandalone: true, selector: "ng-template[reDataGridCell]", inputs: { key: { classPropertyName: "key", publicName: "reDataGridCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridTypeCellTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[ssDataGridTypeCell]' }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssDataGridTypeCell", required: false }] }] } });
+            args: [{ selector: 'ng-template[reDataGridCell]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "reDataGridCell", required: false }] }] } });
 
+/**
+ * Directive for defining custom header templates in data grid columns.
+ *
+ * This directive allows you to specify a custom template for rendering column headers
+ * in the data grid. The template is associated with a column key and receives
+ * header-specific context data.
+ *
+ * @example
+ * ```html
+ * <ng-template reDataGridHeader="username" let-header>
+ *   <div class="custom-header">{{ header.label }}</div>
+ * </ng-template>
+ * ```
+ */
 class DataGridHeaderTemplateDirective {
-    key = input('', { ...(ngDevMode ? { debugName: "key" } : {}), alias: 'ssDataGridHeader' });
+    /**
+     * The column key this header template is associated with.
+     * Uses the `reDataGridHeader` directive attribute as an alias.
+     * Defaults to an empty string if not provided.
+     */
+    key = input('', { ...(ngDevMode ? { debugName: "key" } : {}), alias: 'reDataGridHeader' });
+    /**
+     * The injected template reference containing the custom header template.
+     * The template context is of the type `HeaderTemplateData`.
+     */
     tpl = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DataGridHeaderTemplateDirective, isStandalone: true, selector: "ng-template[ssDataGridHeader]", inputs: { key: { classPropertyName: "key", publicName: "ssDataGridHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataGridHeaderTemplateDirective, isStandalone: true, selector: "ng-template[reDataGridHeader]", inputs: { key: { classPropertyName: "key", publicName: "reDataGridHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridHeaderTemplateDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[ssDataGridHeader]' }]
-        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssDataGridHeader", required: false }] }] } });
+            args: [{ selector: 'ng-template[reDataGridHeader]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "reDataGridHeader", required: false }] }] } });
 
+/**
+ * Directive for providing a custom template to display when the data grid has no data.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives a boolean context value indicating the empty state.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridEmpty let-isEmpty>
+ *   <div *ngIf="isEmpty">No data available</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: boolean` — indicates whether the grid is in an empty state
+ */
 class DataGridCellEmptyDirective {
     tpl = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: DataGridCellEmptyDirective, isStandalone: true, selector: "ng-template[ssDataGridEmpty]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridCellEmptyDirective, isStandalone: true, selector: "ng-template[reDataGridEmpty]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellEmptyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellEmptyDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[ssDataGridEmpty]' }]
+            args: [{ selector: 'ng-template[reDataGridEmpty]' }]
         }] });
+/**
+ * Directive for providing a custom template to display when the data grid is loading data.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives a boolean context value indicating the loading state.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridLoading let-isLoading>
+ *   <div *ngIf="isLoading">Loading...</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: boolean` — indicates whether the grid is in loading state
+ */
 class DataGridCellLoadingDirective {
     tpl = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: DataGridCellLoadingDirective, isStandalone: true, selector: "ng-template[ssDataGridLoading]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridCellLoadingDirective, isStandalone: true, selector: "ng-template[reDataGridLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridLoading]' }]
+        }] });
+
+class DataGridSortIconDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridSortIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridSortIconDirective, isStandalone: true, selector: "ng-template[reDataGridSortIcon]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridSortIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridSortIcon]' }]
+        }] });
+class DataGridExpanderIconDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridExpanderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridExpanderIconDirective, isStandalone: true, selector: "ng-template[reDataGridExpanderIcon]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellLoadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridExpanderIconDirective, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[ssDataGridLoading]' }]
+            args: [{ selector: 'ng-template[reDataGridExpanderIcon]' }]
         }] });
 
+// noinspection CssUnresolvedCustomProperty
+class DataGridPaginator {
+    current = input(0, { ...(ngDevMode ? { debugName: "current" } : {}), transform: numberAttribute });
+    totalElements = input(0, { ...(ngDevMode ? { debugName: "totalElements" } : {}), transform: numberAttribute });
+    pageSize = input(0, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
+    maxShowPages = input(7, { ...(ngDevMode ? { debugName: "maxShowPages" } : {}), transform: numberAttribute });
+    pageChange = output();
+    totalPages = computed(() => {
+        const size = this.pageSize();
+        return size > 0 ? Math.ceil(this.totalElements() / size) : 0;
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    pages = computed(() => {
+        const current = this.current();
+        const total = this.totalPages();
+        const max = this.maxShowPages();
+        if (total <= max) {
+            return Array.from({ length: total }, (_, i) => i);
+        }
+        const pages = [];
+        const sidePages = Math.floor((max - 3) / 2);
+        pages.push(0);
+        let start = Math.max(1, current - sidePages);
+        let end = Math.min(total - 2, current + sidePages);
+        if (current <= sidePages + 1) {
+            end = max - 3;
+        }
+        else if (current >= total - sidePages - 2) {
+            start = total - max + 2;
+        }
+        if (start > 1) {
+            pages.push(-1);
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (end < total - 2) {
+            pages.push(-1);
+        }
+        pages.push(total - 1);
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridPaginator, isStandalone: true, selector: "re-data-grid-paginator", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxShowPages: { classPropertyName: "maxShowPages", publicName: "maxShowPages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
+    @for (page of pages(); track $index) {
+      @if (page === -1) {
+        <span class="re-paginator-gap">...</span>
+      } @else {
+        <button
+          class="re-paginator-page"
+          [class.re-paginator-page--active]="page === current()"
+          (click)="pageChange.emit(page)"
+        >
+          {{ page + 1 }}
+        </button>
+      }
+    }
+  `, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 're-data-grid-paginator', template: `
+    @for (page of pages(); track $index) {
+      @if (page === -1) {
+        <span class="re-paginator-gap">...</span>
+      } @else {
+        <button
+          class="re-paginator-page"
+          [class.re-paginator-page--active]="page === current()"
+          (click)="pageChange.emit(page)"
+        >
+          {{ page + 1 }}
+        </button>
+      }
+    }
+  `, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"] }]
+        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxShowPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxShowPages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+
 const GRID_INDEX_COLUMN = {
     key: '_index',
     type: 'index',
@@ -61,6 +259,38 @@ const GRID_CHECKBOX_COLUMN = {
     sticky: true,
 };
 
+/**
+ * Calculates and distributes column widths within a container based on column configuration.
+ *
+ * The function implements a flexible layout algorithm that:
+ * - Respects fixed-width columns (with `width` property set)
+ * - Distributes remaining space among auto-sized columns based on their `flex` ratios
+ * - Enforces `minWidth` and `maxWidth` constraints
+ * - Uses a "water-fill" algorithm to grow columns proportionally
+ * - Handles rounding errors to ensure total width matches container width
+ *
+ * @param columns - Array of column configuration objects with properties
+ *  like `visible`, `width`, `minWidth`, `maxWidth`, `flex`, and `key`
+ * @param containerWidth - Available width in pixels for all columns
+ * @param defaultCol - Default minimum width for auto-sized columns without explicit `minWidth`
+ * @returns Layout result containing computed widths array, total width, and width lookup by column key
+ *
+ * @example
+ * ```typescript
+ * const result = layoutColumns(
+ *   [
+ *     { key: 'id', width: 50, visible: true },
+ *     { key: 'name', minWidth: 100, flex: 2, visible: true },
+ *     { key: 'age', minWidth: 80, flex: 1, visible: true }
+ *   ],
+ *   800,
+ *   100
+ * );
+ * // result.widths = [50, 500, 250]
+ * // result.total = 800
+ * // result.byKey = { id: 50, name: 500, age: 250 }
+ * ```
+ */
 function layoutColumns(columns, containerWidth, defaultCol) {
     const idx = visibleIndexes(columns);
     const { fixedIdx, autoIdx } = splitFixed(columns, idx);
@@ -94,6 +324,14 @@ function layoutColumns(columns, containerWidth, defaultCol) {
     }
     return { widths, total, byKey };
 }
+/**
+ * Filters and returns indexes of visible columns.
+ *
+ * A column is considered visible if its `visible` property is not explicitly set to `false`.
+ *
+ * @param cols - Array of column configurations
+ * @returns Array of indexes for columns that should be displayed
+ */
 function visibleIndexes(cols) {
     const out = [];
     for (let i = 0; i < cols.length; i++) {
@@ -102,6 +340,16 @@ function visibleIndexes(cols) {
     }
     return out;
 }
+/**
+ * Splits visible column indexes into fixed-width and auto-sized groups.
+ *
+ * Fixed columns have an explicit `width` property defined.
+ * Auto-sized columns have `width` as `undefined` and will grow to fill available space.
+ *
+ * @param cols - Array of column configurations
+ * @param visibleIdx - Array of visible column indexes
+ * @returns Object with `fixedIdx` (fixed-width column indexes) and `autoIdx` (auto-sized column indexes)
+ */
 function splitFixed(cols, visibleIdx) {
     const fixedIdx = [];
     const autoIdx = [];
@@ -110,16 +358,53 @@ function splitFixed(cols, visibleIdx) {
     }
     return { fixedIdx, autoIdx };
 }
+/**
+ * Computes actual widths for fixed-width columns, respecting min/max constraints.
+ *
+ * Takes the explicit `width` value and clamps it between `minWidth` and `maxWidth`.
+ *
+ * @param cols - Array of column configurations
+ * @param fixedIdx - Array of fixed-width column indexes
+ * @returns Array of objects with column index and computed width
+ */
 const computeFixedWidths = (cols, fixedIdx) => fixedIdx.map((index) => {
     const col = cols[index];
     const width = clamp$1(col.width, col.minWidth, col.maxWidth);
     return { index, width };
 });
+/**
+ * Computes base (minimum) widths for auto-sized columns before distribution of free space.
+ *
+ * Uses column's `minWidth` if specified, otherwise falls back to the default value.
+ * The base width is clamped between `minWidth` and `maxWidth` constraints.
+ *
+ * @param cols - Array of column configurations
+ * @param autoIdx - Array of auto-sized column indexes
+ * @param def - Default minimum width to use when column's `minWidth` is not specified
+ * @returns Array of objects with column index and base width
+ */
 const computeBaseAuto = (cols, autoIdx, def) => autoIdx.map((index) => {
     const c = cols[index];
     const base = clamp$1(c.minWidth ?? def, c.minWidth, c.maxWidth);
     return { index, width: base };
 });
+/**
+ * Distributes free space among auto-sized columns using a "water-fill" algorithm.
+ *
+ * The algorithm works iteratively:
+ * 1. Identifies columns that can still grow (haven't reached `maxWidth`)
+ * 2. Distributes remaining space proportionally based on each column's `flex` ratio
+ * 3. Respects `maxWidth` constraints by capping growth
+ * 4. Repeats until no space remains or no columns can grow further
+ *
+ * This ensures that columns with higher `flex` values receive proportionally more space,
+ * while respecting all width constraints.
+ *
+ * @param cols - Array of column configurations
+ * @param base - Array of column indexes with their base widths before distribution
+ * @param free - Amount of free space (in pixels) to distribute among columns
+ * @returns Array of objects with column index and final width after distribution
+ */
 function distributeFree(cols, base, free) {
     if (free <= 0 || base.length === 0) {
         return base;
@@ -151,10 +436,37 @@ function distributeFree(cols, base, free) {
     }
     return widths;
 }
+/**
+ * Checks whether a column can grow beyond its current width.
+ *
+ * A column can grow if its current width is less than its `maxWidth` constraint
+ * (or `Infinity` if no max is specified), with a small epsilon tolerance.
+ *
+ * @param cols - Array of column configurations
+ * @param i - Column index to check
+ * @param cur - Current width of the column
+ * @returns `true` if the column can grow, `false` otherwise
+ */
 function widthsCanGrow(cols, i, cur) {
     const max = cols[i].maxWidth ?? Infinity;
     return cur < max - 1e-6;
 }
+/**
+ * Rounds auto-sized column widths to integers and distributes any remaining pixels to match container width exactly.
+ *
+ * This function handles rounding errors that occur when distributing fractional widths:
+ * 1. Floors all auto-sized column widths to integers
+ * 2. Calculates how many pixels are needed to reach the exact container width
+ * 3. Distributes remaining pixels one-by-one to columns (right-to-left) that haven't reached their `maxWidth`
+ *
+ * Fixed-width columns are not modified. This ensures the total width matches the container precisely.
+ *
+ * @param cols - Array of column configurations
+ * @param widths - Array of column widths to be modified in place
+ * @param fixedIdx - Array of fixed-width column indexes (not modified)
+ * @param autoIdx - Array of auto-sized column indexes (will be rounded and adjusted)
+ * @param containerWidth - Target total width that must be matched exactly
+ */
 function roundAndFix(cols, widths, fixedIdx, autoIdx, containerWidth) {
     const sumFixed = fixedIdx.reduce((s, i) => s + widths[i], 0);
     let sumAuto = 0;
@@ -175,11 +487,33 @@ function roundAndFix(cols, widths, fixedIdx, autoIdx, containerWidth) {
         }
     }
 }
+/**
+ * Clamps a numeric value between optional minimum and maximum bounds.
+ *
+ * If `min` is provided and the value is less than it, returns `min`.
+ * If `max` is provided and the value is greater than it, returns `max`.
+ * Otherwise returns the original value.
+ *
+ * @param v - Value to clamp
+ * @param min - Optional minimum bound
+ * @param max - Optional maximum bound
+ * @returns Clamped value
+ */
 function clamp$1(v, min, max) {
     min != null && v < min && (v = min);
     max != null && v > max && (v = max);
     return v;
 }
+/**
+ * Calculates the sum of numeric values or width properties in an array.
+ *
+ * Supports two input formats:
+ * - Array of numbers: sums all numeric values
+ * - Array of objects with `width` property: sums all `width` values
+ *
+ * @param items - Array of numbers or objects with `width` property
+ * @returns Sum of all values
+ */
 function sum(items) {
     if (Array.isArray(items) && typeof items[0] === 'number') {
         return items.reduce((s, x) => s + x, 0);
@@ -188,8 +522,8 @@ function sum(items) {
 }
 
 /**
- * Вычисляет визуальное состояние оверлейного скроллбара. Все аргументы - сырые DOM-числа.
- * Возвращает состояние, описывающее видимость, размер и позицию ползунка.
+ * Calculates the visual state of an overlay scrollbar. All arguments are raw DOM numbers.
+ * Returns a state describing the visibility, size, and position of the thumb.
  */
 function computeScrollbarState(scrollHeight = 0, clientHeight = 0, scrollTop = 0, minThumb = 24) {
     const safeClient = toSafe(clientHeight);
@@ -217,14 +551,14 @@ function computeScrollbarState(scrollHeight = 0, clientHeight = 0, scrollTop = 0
         maxScrollTop,
     };
 }
-/** Преобразует позицию ползунка thumbTop (0..maxThumbTop) в позицию прокрутки scrollTop (0..maxScrollTop) */
+/** Converts thumb position thumbTop (0..maxThumbTop) to scroll position scrollTop (0..maxScrollTop) */
 function mapThumbTopToScrollTop(thumbTop, maxThumbTop, maxScrollTop) {
     const mt = Math.max(1, toSafe(maxThumbTop));
     const ms = Math.max(1, toSafe(maxScrollTop));
     const tt = clamp(toSafe(thumbTop), 0, mt);
     return (tt / mt) * ms;
 }
-/** Ограничивает новую позицию ползунка в пределах 0..maxThumbTop */
+/** Clamps the new thumb position within the bounds 0..maxThumbTop */
 function clampThumbTop(value, maxThumbTop) {
     const mt = Math.max(1, toSafe(maxThumbTop));
     return clamp(toSafe(value), 0, mt);
@@ -243,22 +577,68 @@ function toSafe(n) {
     return Number.isFinite(n) ? n : 0;
 }
 function clamp(v, min, max) {
-    if (v < min)
+    if (v < min) {
         return min;
-    if (v > max)
+    }
+    if (v > max) {
         return max;
+    }
     return v;
 }
 
+/**
+ * Detects the primary scroll direction of an HTML element.
+ *
+ * Compares the current scroll position with the previous one to determine
+ * whether the user is scrolling horizontally, vertically, or not at all.
+ *
+ * Example:
+ * ```typescript
+ * const detector = new ScrollDirectionDetector(scrollableDiv);
+ *
+ * scrollableDiv.addEventListener('scroll', () => {
+ *   const direction = detector.detect();
+ *   console.log('Scroll direction:', direction); // 'horizontal' | 'vertical' | 'none'
+ * });
+ * ```
+ *
+ * The detector stores the previous scroll position internally and updates it
+ * on each `detect()` call to track movement deltas.
+ */
 class ScrollDirectionDetector {
     el;
+    /**
+     * Previously recorded vertical scroll position (scrollTop).
+     * @private
+     */
     #prevTop = 0;
+    /**
+     * Previously recorded horizontal scroll position (scrollLeft).
+     * @private
+     */
     #prevLeft = 0;
+    /**
+     * Creates a new scroll direction detector for the given HTML element.
+     *
+     * @param el - The HTML element whose scroll direction will be tracked.
+     *             The element must be scrollable (have overflow content).
+     */
     constructor(el) {
         this.el = el;
         this.#prevTop = el.scrollTop;
         this.#prevLeft = el.scrollLeft;
     }
+    /**
+     * Detects the primary scroll direction based on position changes since the last call.
+     *
+     * Compares the absolute deltas of horizontal and vertical scroll positions.
+     * The direction with the greater delta is considered the primary scroll direction.
+     *
+     * @returns The detected scroll direction:
+     *          - `'horizontal'` if horizontal movement is greater
+     *          - `'vertical'` if vertical movement is greater
+     *          - `'none'` if no scroll movement occurred or deltas are equal
+     */
     detect() {
         const { scrollTop, scrollLeft } = this.el;
         const deltaX = Math.abs(scrollLeft - this.#prevLeft);
@@ -275,6 +655,26 @@ class ScrollDirectionDetector {
     }
 }
 
+/**
+ * Splits an array of grid columns into sticky left, sticky right, and all visible columns.
+ *
+ * This function filters columns by visibility, then divides them at the midpoint
+ * to identify which sticky columns should be pinned to the left versus right side
+ * of the data grid.
+ *
+ * @template Data - The data type extending `AnyDict` that the grid columns are based on.
+ * @param cols - Array of grid columns to be split.
+ * @returns An object containing:
+ *   - `left`: Array of sticky columns from the first half of visible columns.
+ *   - `right`: Array of sticky columns from the second half of visible columns.
+ *   - `visible`: Array of all visible columns (filtered by `visible !== false`).
+ *
+ * @example
+ * ```typescript
+ * const columns: GridColumn<User>[] = [...];
+ * const { left, right, visible } = splitSticky(columns);
+ * ```
+ */
 function splitSticky(cols) {
     const visible = cols.filter((c) => c.visible !== false);
     const middleIndex = Math.floor(visible.length / 2);
@@ -283,20 +683,93 @@ function splitSticky(cols) {
     return { left, right, visible };
 }
 
+/**
+ * View model for the data grid component.
+ *
+ * Manages grid state including column layout, sticky positioning, scrollbar calculations,
+ * and pinned rows. Automatically recomputes column widths based on container size and
+ * handles sticky column offsets for left and right pinned columns.
+ *
+ * @template Data - Type of data objects in the grid, must extend AnyDict
+ *
+ * @example
+ * ```typescript
+ * const gridVm = inject(DataGridVm<MyDataType>);
+ * gridVm.columns.set([{ key: 'name', title: 'Name' }]);
+ * gridVm.containerWidth.set(800);
+ * ```
+ */
 class DataGridVm {
+    /**
+     * Reference to the scrollable container element.
+     *
+     * Used for scrollbar calculations and scroll position management.
+     */
     scrollEl = signal(undefined, ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
+    /**
+     * Array of column configurations for the grid.
+     *
+     * Defines all columns including their keys, titles, sticky positioning, and widths.
+     * Value is reactive and triggers column layout recalculation when changed.
+     */
     columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /**
+     * Array of pinned row configurations.
+     *
+     * Defines rows that remain fixed at the top or bottom of the grid during scrolling.
+     * Each row includes data, position ('top' or 'bottom'), and optional ordering.
+     */
     pinnedRows = signal([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
+    /**
+     * Current width of the grid container in pixels.
+     *
+     * Used for column width calculations and layout adjustments.
+     * Value is reactive and triggers column layout recalculation when changed.
+     */
     containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+    /**
+     * Flag indicating whether the custom scrollbar should be visible.
+     *
+     * Automatically computed based on content height vs. container height.
+     */
     scrollbarVisible = signal(false, ...(ngDevMode ? [{ debugName: "scrollbarVisible" }] : []));
+    /**
+     * Height of the scrollbar thumb in pixels.
+     *
+     * Proportional to the ratio of visible content to total content height.
+     */
     thumbHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "thumbHeightPx" }] : []));
+    /**
+     * Top position of the scrollbar thumb in pixels.
+     *
+     * Corresponds to the current scroll position within the scrollable area.
+     */
     thumbTopPx = signal(0, ...(ngDevMode ? [{ debugName: "thumbTopPx" }] : []));
+    /**
+     * Flag indicating whether the user is currently dragging the scrollbar thumb.
+     *
+     * Used to track active scroll drag interactions.
+     */
     dragging = false;
+    /**
+     * Map of global cell renderer templates by type.
+     *
+     * Stores reusable template references for different cell renderer types
+     * that can be shared across multiple columns.
+     */
     globalTypeCellTpls = new Map();
+    globalDataCellTpls = new Map();
     #byKey = signal({}, ...(ngDevMode ? [{ debugName: "#byKey" }] : []));
     #defaultColWidth = 140;
     #stickyLeftMap = new Map();
     #stickyRightMap = new Map();
+    /**
+     * Computed an array of non-sticky columns to display in the scrollable area.
+     *
+     * Automatically splits columns into left-sticky, visible, and right-sticky groups,
+     * recomputes sticky offsets, and returns only the scrollable middle section.
+     * Recalculates whenever columns or container width changes.
+     */
     columnsToShow = computed(() => {
         this.containerWidth();
         const cols = this.columns() ?? [];
@@ -304,7 +777,19 @@ class DataGridVm {
         this.recomputeStickyOffsets(left, right);
         return visible;
     }, ...(ngDevMode ? [{ debugName: "columnsToShow" }] : []));
+    /**
+     * Computed array of rows pinned to the top of the grid.
+     *
+     * Filters pinned rows by 'top' position and sorts them by order property.
+     * Rows with lower order values appear first.
+     */
     pinnedTop = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'top').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedTop" }] : []));
+    /**
+     * Computed array of rows pinned to the bottom of the grid.
+     *
+     * Filters pinned rows by 'bottom' position and sorts them by order property.
+     * Rows with lower order values appear first.
+     */
     pinnedBottom = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'bottom').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedBottom" }] : []));
     constructor() {
         effect(() => {
@@ -317,14 +802,51 @@ class DataGridVm {
             this.#byKey.set(res.byKey);
         });
     }
+    /**
+     * Returns the computed width for a column by its key.
+     *
+     * If the column width has not been calculated, returns the default column width.
+     *
+     * @param key - The unique identifier for the column
+     * @returns Width in pixels
+     */
     widthByKey = (key) => this.#byKey()[key] ?? this.#defaultColWidth;
+    /**
+     * Checks if a column is pinned to the left side of the grid.
+     *
+     * @param key - The unique identifier for the column
+     * @returns `true` if the column is sticky on the left, `false` otherwise
+     */
     isStickyLeft = (key) => this.#stickyLeftMap.has(key);
+    /**
+     * Checks if a column is pinned to the right side of the grid.
+     *
+     * @param key - The unique identifier for the column
+     * @returns `true` if the column is sticky on the right, `false` otherwise
+     */
     isStickyRight = (key) => this.#stickyRightMap.has(key);
+    /**
+     * Returns the horizontal offset for a sticky column.
+     *
+     * Calculates the distance from the specified edge (left or right) where the column
+     * should be positioned. Returns `null` if the column is not sticky in the given direction.
+     *
+     * @param key - The unique identifier for the column
+     * @param dir - The direction to check ('left' or 'right')
+     * @returns Offset in pixels, or `null` if not sticky in the specified direction
+     */
     stickyOffset = (key, dir) => dir === 'left' && this.isStickyLeft(key)
         ? (this.#stickyLeftMap.get(key) ?? null)
         : dir === 'right' && this.isStickyRight(key)
             ? (this.#stickyRightMap.get(key) ?? null)
             : null;
+    /**
+     * Calculates and updates scrollbar state based on the current scroll position.
+     *
+     * Computes whether the scrollbar should be visible, and if so, determines
+     * the thumb height and position based on scroll height, client height, and scroll position.
+     * Updates the corresponding signal properties with the calculated values.
+     */
     calcScrollbar() {
         const el = this.scrollEl()?.nativeElement;
         if (!el)
@@ -354,18 +876,77 @@ class DataGridVm {
             acc += this.widthByKey(col.key);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridVm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridVm });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridVm, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
+/**
+ * Component for rendering individual data grid cells.
+ *
+ * Handles different cell rendering strategies based on column configuration:
+ * - Custom templates via `renderTemplate`
+ * - Global type-specific templates registered in DataGridVm
+ * - Built-in formatters for dates and numbers
+ * - Index display (1-based row numbering)
+ * - Plain text for simple values
+ *
+ * The component automatically determines the appropriate rendering method
+ * based on column properties and applies Angular pipes when needed.
+ *
+ * @template Data - Type of data objects in the grid row
+ *
+ * @example
+ * ```html
+ * <re-data-grid-cell
+ *   [index]="0"
+ *   [item]="rowData"
+ *   [column]="columnConfig"
+ * />
+ * ```
+ */
 class DataGridCellComponent {
+    /**
+     * Zero-based index of the current row in the data grid.
+     *
+     * Used for rendering row numbers (displayed as 1-based in 'index' type columns)
+     * and passed to custom templates as context.
+     */
     index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    /**
+     * Data object for the current row.
+     *
+     * Contains the complete row data that can be accessed by column value functions
+     * or custom render templates. Type-safe according to the Data generic parameter.
+     */
     item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    /**
+     * Column configuration object.
+     *
+     * Defines how the cell should be rendered, including key mapping, type,
+     * custom templates, or value transformation functions.
+     */
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    /**
+     * Injected DataGridVm service instance.
+     *
+     * Provides access to global type-specific cell templates registered
+     * at the grid level via `globalTypeCellTpls` map.
+     */
     vm = inject(DataGridVm);
+    /**
+     * Computed rendering strategy for the current cell.
+     *
+     * Determines which template block to use based on column configuration:
+     * - `'tpl'` - Custom column template (`renderTemplate` property exists)
+     * - `'globalTypeTpl'` - Global type template (registered in DataGridVm)
+     * - `'date'`, `'number'`, `'index'` - Built-in formatters
+     * - `'plain'` - Default text rendering
+     *
+     * The value is reactive and updates when column configuration changes.
+     */
     type = computed(() => {
         const col = this.column();
         if ('renderTemplate' in col) {
@@ -374,15 +955,28 @@ class DataGridCellComponent {
         if ('type' in col && this.vm.globalTypeCellTpls.has(col.type)) {
             return 'globalTypeTpl';
         }
+        if (this.vm.globalDataCellTpls.has(col.key)) {
+            return 'globalDataTpl';
+        }
         return 'type' in col ? col['type'] : 'plain';
     }, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /**
+     * Computed cell value extracted from row data.
+     *
+     * Returns the cell's display value by either:
+     * - Calling the `value` function from column configuration (if defined)
+     * - Directly accessing the row property using the column's `key`
+     *
+     * The value is reactive and updates when row data or column configuration changes.
+     * Used as input for templates, pipes, and default text rendering.
+     */
     value = computed(() => {
         const col = this.column();
         const row = this.item();
         return 'value' in col ? col.value(row) : row[col.key];
     }, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataGridCellComponent, isStandalone: true, selector: "re-data-grid-cell", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridCellComponent, isStandalone: true, selector: "re-data-grid-cell", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @let row = item();
     @let col = column();
     @let val = value();
@@ -400,11 +994,17 @@ class DataGridCellComponent {
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
+      @case ('globalDataTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get($any(col).key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
       @case ('date') {
-        {{ val | date }}
+        {{ val | date: $any(col)?.typeParams }}
       }
       @case ('number') {
-        {{ val | number }}
+        {{ val | number: $any(col)?.typeParams }}
       }
       @case ('index') {
         {{ index() + 1 }}
@@ -415,7 +1015,7 @@ class DataGridCellComponent {
     }
   `, isInline: true, styles: [":host{width:100%;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 're-data-grid-cell', template: `
     @let row = item();
@@ -435,11 +1035,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
           [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
         />
       }
+      @case ('globalDataTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get($any(col).key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
       @case ('date') {
-        {{ val | date }}
+        {{ val | date: $any(col)?.typeParams }}
       }
       @case ('number') {
-        {{ val | number }}
+        {{ val | number: $any(col)?.typeParams }}
       }
       @case ('index') {
         {{ index() + 1 }}
@@ -451,19 +1057,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
   `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{width:100%;text-align:inherit}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
+/**
+ * Service class for managing row selection in a data grid.
+ *
+ * Handles selection state and operations for grid rows, supporting multiple selection modes
+ * (none, single, multi). Provides reactive signals for tracking selected items and
+ * computed values for selection state.
+ *
+ * @template Data - The type of data objects in the grid, must extend `AnyDict`.
+ *
+ * @example
+ * ```typescript
+ * const selector = new Selector<User>();
+ * selector.data.set(users);
+ * selector.selection.set({ mode: 'multi', key: 'id' });
+ * selector.select(users[0]);
+ * console.log(selector.selectedKeys()); // ['user-id']
+ * ```
+ */
 class Selector {
+    /**
+     * Signal containing the full dataset of grid rows.
+     *
+     * This signal holds all data items that can be selected.
+     * Defaults to an empty array.
+     */
     data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * Signal containing the current selection configuration.
+     *
+     * Defines the selection mode and the key property used for identifying rows.
+     * Defaults to `{ mode: 'none' }` which disables selection.
+     */
     selection = signal({ mode: 'none' }, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /**
+     * Signal containing the array of currently selected row keys.
+     *
+     * Stores the keys of all selected rows based on the key property
+     * defined in the selection configuration.
+     * Defaults to an empty array.
+     */
     selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "selectedKeys" }] : []));
+    /**
+     * Computed signal indicating the overall selection state of all rows.
+     *
+     * Returns:
+     * - `true` if all rows are selected
+     * - `false` if no rows are selected
+     * - `'mixed'` if some but not all rows are selected
+     *
+     * Useful for implementing "select all" checkbox with indeterminate state.
+     */
     isAllSelected = computed(() => {
         const selectedCount = this.selectedKeys().length;
         return selectedCount === this.data().length ? true : selectedCount === 0 ? false : 'mixed';
     }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    /**
+     * Checks whether a specific row is currently selected.
+     *
+     * Compares the row's key value against the list of selected keys.
+     * Returns `false` if selection mode is 'none' or key is not configured.
+     *
+     * @param row - The data row to check selection status for.
+     * @returns `true` if the row is selected, `false` otherwise.
+     */
     isSelected(row) {
         const selection = this.selection();
         const selected = this.selectedKeys();
         return 'key' in selection ? selected.includes(row[selection.key]) : false;
     }
+    /**
+     * Toggles selection of all rows.
+     *
+     * If all rows are selected, deselects all.
+     * If no rows or some rows are selected, selects all.
+     *
+     * This method only works in `'multi'` selection mode and throws an error
+     * if called in any other mode.
+     *
+     * @returns The updated array of selected keys.
+     * @throws {Error} If selection mode is not `'multi'`.
+     */
     selectAll() {
         if (this.selection().mode !== 'multi') {
             throw new Error('Cannot select all in not "multi" mode');
@@ -474,6 +1148,18 @@ class Selector {
         this.selectedKeys.set(!nextState ? [] : this.data().map((row) => row[selection.key]));
         return this.selectedKeys();
     }
+    /**
+     * Selects or deselects a specific row.
+     *
+     * Behavior depends on the selection mode:
+     * - In `'single'` mode: replaces current selection with the specified row.
+     * - In `'multi'` mode: toggles the row's selection state (adds if not selected, removes if selected).
+     * - In `'none'` mode: throws an error.
+     *
+     * @param row - The data row to select or deselect.
+     * @returns The updated array of selected keys after the operation.
+     * @throws {Error} If selection mode is `'none'`.
+     */
     select(row) {
         if (this.selection().mode === 'none') {
             throw new Error('Cannot select row in "none" mode');
@@ -525,8 +1211,8 @@ class CheckboxIcon {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: CheckboxIcon, isStandalone: true, selector: "re-checkbox-ic", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "boxRef", first: true, predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: CheckboxIcon, isStandalone: true, selector: "re-checkbox-ic", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "boxRef", first: true, predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: `
     <label class="cb" [class.cb--disabled]="disabled()">
       <input
         #box
@@ -542,7 +1228,7 @@ class CheckboxIcon {
     </label>
   `, isInline: true, styles: [":host{--re-data-grid-checkbox-size: 20px;--re-data-grid-checkbox-stroke: 2px;--re-data-grid-checkbox-border: var(--border-color, #9aa3af);--re-data-grid-checkbox-tick: var(--surface-neutral, #fff);--re-data-grid-checkbox-surface: var(--surface-neutral, #fff);--re-data-grid-checkbox-active-color: var(--primary-color, #2563eb);display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);-webkit-user-select:none;user-select:none}.cb{cursor:default;display:inline-block}.cb--disabled{opacity:.6}.cb__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.cb__box{position:relative;display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);border:var(--re-data-grid-checkbox-stroke) solid var(--re-data-grid-checkbox-border);border-radius:4px;background:var(--re-data-grid-checkbox-surface);transition:background .25s,border-color .25s}.cb__input:checked+.cb__box{border-color:var(--re-data-grid-checkbox-active-color);background:var(--re-data-grid-checkbox-active-color)}.cb__input:checked+.cb__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:10px;height:6px;border:2px solid var(--re-data-grid-checkbox-tick);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(.8);opacity:0;animation:tick .25s forwards ease}.cb__input[data-indeterminate=true]+.cb__box{background:var(--re-data-grid-checkbox-active-color);border-color:var(--re-data-grid-checkbox-active-color)}.cb__input[data-indeterminate=true]+.cb__box:after{content:\"\";position:absolute;left:3px;right:3px;top:50%;border-top:2px solid var(--re-data-grid-checkbox-tick);transform:translateY(-50%) scaleX(.3);opacity:0;animation:dash .25s forwards ease}@keyframes tick{to{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}}@keyframes dash{to{opacity:1;transform:translateY(-50%) scaleX(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckboxIcon, decorators: [{
             type: Component,
             args: [{ selector: 're-checkbox-ic', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <label class="cb" [class.cb--disabled]="disabled()">
@@ -564,8 +1250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 /* eslint-disable max-len */
 class ExpandIcon {
     expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ExpandIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ExpandIcon, isStandalone: true, selector: "re-expand-ic", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ExpandIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ExpandIcon, isStandalone: true, selector: "re-expand-ic", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (expanded()) {
       <svg width="16" height="16" viewBox="0 0 16 16">
         <path
@@ -583,7 +1269,7 @@ class ExpandIcon {
     }
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ExpandIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ExpandIcon, decorators: [{
             type: Component,
             args: [{ selector: 're-expand-ic', template: `
     @if (expanded()) {
@@ -607,8 +1293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 /* eslint-disable max-len */
 class SortIcon {
     direction = input('asc', ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SortIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: SortIcon, isStandalone: true, selector: "re-sort-ic", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SortIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: SortIcon, isStandalone: true, selector: "re-sort-ic", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <svg width="18" height="18" viewBox="0 0 18 18" class="{{ direction() }}">
       <path
         d="M12.84 8.51259L9.66754 11.6851V4.59009C9.66754 4.39118 9.58852 4.20041 9.44787 4.05976C9.30722 3.91911 9.11645 3.84009 8.91754 3.84009C8.71863 3.84009 8.52786 3.91911 8.38721 4.05976C8.24656 4.20041 8.16754 4.39118 8.16754 4.59009V11.6851L4.99504 8.51259C4.92511 8.44266 4.84209 8.38719 4.75073 8.34934C4.65936 8.3115 4.56144 8.29202 4.46254 8.29202C4.36365 8.29202 4.26572 8.3115 4.17435 8.34934C4.08299 8.38719 3.99997 8.44266 3.93004 8.51259C3.86011 8.58252 3.80464 8.66553 3.7668 8.7569C3.72895 8.84827 3.70947 8.94619 3.70947 9.04509C3.70947 9.14398 3.72895 9.24191 3.7668 9.33327C3.80464 9.42464 3.86011 9.50766 3.93004 9.57759L8.38504 14.0251C8.45349 14.0952 8.53503 14.1513 8.62504 14.1901C8.71842 14.2256 8.81762 14.2435 8.91754 14.2426C9.01505 14.2438 9.11186 14.226 9.20254 14.1901C9.29255 14.1513 9.37409 14.0952 9.44254 14.0251L13.8975 9.57759C13.9678 9.50787 14.0236 9.42491 14.0617 9.33352C14.0998 9.24213 14.1194 9.1441 14.1194 9.04509C14.1194 8.94608 14.0998 8.84805 14.0617 8.75666C14.0236 8.66526 13.9678 8.58231 13.8975 8.51259C13.757 8.3729 13.5669 8.29449 13.3688 8.29449C13.1707 8.29449 12.9806 8.3729 12.84 8.51259Z"
@@ -617,7 +1303,7 @@ class SortIcon {
     </svg>
   `, isInline: true, styles: ["svg{transition:transform .3s ease-in-out}svg:not(.asc):not(.desc){display:none}.asc{transform:rotate(-180deg)}.desc{transform:rotate(0)}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SortIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SortIcon, decorators: [{
             type: Component,
             args: [{ selector: 're-sort-ic', template: `
     <svg width="18" height="18" viewBox="0 0 18 18" class="{{ direction() }}">
@@ -629,57 +1315,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
   `, styles: ["svg{transition:transform .3s ease-in-out}svg:not(.asc):not(.desc){display:none}.asc{transform:rotate(-180deg)}.desc{transform:rotate(0)}\n"] }]
         }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
 
+/**
+ * Data grid component with virtual scrolling, sorting, selection, and pagination support.
+ *
+ * Provides high-performance rendering of large datasets with features like:
+ * - Virtual scrolling for efficient DOM management
+ * - Column sorting and expandable columns
+ * - Row selection (single/multiple)
+ * - Pagination modes: none, pagination, or infinite scroll
+ * - Pinned rows
+ * - Custom cell and header templates
+ *
+ * @example
+ * ```html
+ * <re-data-grid
+ *   [data]="users"
+ *   [columns]="columns"
+ *   [selection]="{ mode: 'multiple' }"
+ *   (sortChange)="onSort($event)"
+ * />
+ * ```
+ */
 class DataGrid {
-    /** Массив данных для отображения в таблице */
+    /**
+     * Array of data to display in the table.
+     *
+     * Each item represents a single row. The component will efficiently render
+     * only visible rows using virtual scrolling.
+     */
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    /** Конфигурация колонок таблицы */
+    /**
+     * Column configuration for the table.
+     *
+     * Defines how each column should be rendered, sorted, and styled.
+     * Supports custom templates, sorting keys, and expandable columns.
+     */
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    /** Режим пагинации: 'none', 'pagination' или 'infinity' */
+    /**
+     * Pagination mode: 'none', 'pagination', or 'infinity'.
+     *
+     * - `none` - No pagination, all data is rendered
+     * - `pagination` - Classic page-based pagination with fixed page size
+     * - `infinity` - Infinite scroll mode, loads more data as user scrolls
+     */
     mode = input('none', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-    /** Массив закрепленных строк */
+    /**
+     * Array of pinned rows that remain visible at the top or bottom.
+     *
+     * Pinned rows stay fixed while the rest of the content scrolls.
+     * Useful for totals, summaries, or always-visible items.
+     */
     pinnedRows = input([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
-    /** Добавить ли номерную колонку */
+    /**
+     * Whether to add an index column showing row numbers.
+     *
+     * When enabled, it automatically adds a column displaying sequential row numbers.
+     */
     hasIndexColumn = input(false, { ...(ngDevMode ? { debugName: "hasIndexColumn" } : {}), transform: booleanAttribute });
-    /** Поддержка выбора строк */
+    /**
+     * Row selection configuration.
+     *
+     * Controls whether users can select rows and in what mode:
+     * - `{ mode: 'none' }` - No selection
+     * - `{ mode: 'single' }` - Single row selection
+     * - `{ mode: 'multi' }` - Multiple row selection with checkboxes
+     *
+     * When selection is enabled, a `key` must be provided to identify rows.
+     */
     selection = input({ mode: 'none' }, ...(ngDevMode ? [{ debugName: "selection" }] : []));
-    /** Количество элементов на странице */
+    /**
+     * Number of items per page.
+     *
+     * Used in pagination and infinity scroll modes to control
+     * how many rows are loaded at once. Default is 20.
+     */
     pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
-    /** Высота строки в пикселях */
+    /**
+     * Height of each row in pixels.
+     *
+     * Used for virtual scrolling calculations. Must be consistent
+     * across all rows for accurate scrolling. Default is 40.
+     */
     rowHeight = input(40, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: numberAttribute });
-    /** Заполнять ли доступную высоту */
-    fillHeight = input(true, { ...(ngDevMode ? { debugName: "fillHeight" } : {}), transform: booleanAttribute });
-    /** Размер буфера виртуального скролла */
+    /**
+     * Grid height configuration.
+     *
+     * - `number` - Fixed height in pixels
+     * - `'full'` - Fill container height (100%), can be managed by host component style
+     * - `'default'` - Height by CSS var (--re-data-grid-height)
+     */
+    height = input('default', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /**
+     * Size of the virtual scroll buffer.
+     *
+     * Number of extra rows to render above and below the viewport
+     * to reduce flickering during fast scrolling. Default is 6.
+     */
     virtualBuffer = input(6, ...(ngDevMode ? [{ debugName: "virtualBuffer" }] : []));
-    /** Состояние загрузки данных */
+    /**
+     * Loading state indicator.
+     *
+     * When true, displays loading template instead of data.
+     * Useful during async data fetching operations.
+     */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
-    /** Функция или имя свойства для получения уникального ключа строки */
+    /**
+     * Function or property name for obtaining a unique row key.
+     *
+     * Used for efficient change detection and row tracking.
+     * Can be a property name (string) or a function that returns a unique identifier.
+     */
     rowKey = input(undefined, ...(ngDevMode ? [{ debugName: "rowKey" }] : []));
-    /** Начинать отсчёт пагинации с 1 (false) или 0 (true) */
+    /**
+     * Whether to start a page count from 0 (true) or 1 (false).
+     *
+     * Controls the numbering scheme for pagination events.
+     * Default is true (0-based indexing).
+     */
     pageStartFromZero = input(true, { ...(ngDevMode ? { debugName: "pageStartFromZero" } : {}), transform: booleanAttribute });
-    /** Событие запроса данных */
+    /**
+     * Event emitted when requesting data for a new page.
+     *
+     * Fired in pagination and infinity scroll modes when the user navigates
+     * to a different page or scrolls near the end of current data.
+     *
+     * @example
+     * ```typescript
+     * onPageChange(event: GridPageChangeEvent) {
+     *   this.loadData(event.page, event.rows);
+     * }
+     * ```
+     */
     pageChange = output();
-    /** Событие изменения сортировки */
+    /**
+     * Event emitted when sort order changes.
+     *
+     * Fired when a user clicks on a sortable column header.
+     * Contains the sort key and direction (asc/desc).
+     *
+     * @example
+     * ```typescript
+     * onSortChange(event: GridSortEvent<User>) {
+     *   this.data = sortBy(this.data, event.key, event.order);
+     * }
+     * ```
+     */
     sortChange = output();
-    /** Событие изменения выбранных строк */
+    /**
+     * Event emitted when selected rows change.
+     *
+     * Fired when a user selects or deselects rows.
+     * Contains an array of currently selected row keys.
+     */
     selectChange = output();
-    /** Событие клика по строке */
+    /**
+     * Event emitted when a row is clicked.
+     *
+     * Contains the clicked row data and its index.
+     */
     rowClick = output();
-    /** Событие клика по ячейке */
+    /**
+     * Event emitted when a cell is clicked.
+     *
+     * Contains the clicked row, column configuration, and row index.
+     */
     cellClick = output();
     vm = inject((DataGridVm));
     selector = new Selector();
     rootEl = viewChild('root', ...(ngDevMode ? [{ debugName: "rootEl" }] : []));
     scrollEl = viewChild('scroll', ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
     headerEl = viewChild('header', ...(ngDevMode ? [{ debugName: "headerEl" }] : []));
-    cellSlotRefs = contentChildren(DataGridTypeCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellSlotRefs" }] : []));
+    cellTypedSlotRefs = contentChildren(DataGridTypeCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTypedSlotRefs" }] : []));
+    cellDataSlotRefs = contentChildren(DataGridCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellDataSlotRefs" }] : []));
     headerSlotRefs = contentChildren(DataGridHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerSlotRefs" }] : []));
     emptySlotRefs = contentChildren(DataGridCellEmptyDirective, ...(ngDevMode ? [{ debugName: "emptySlotRefs" }] : []));
     loadingSlotRefs = contentChildren(DataGridCellLoadingDirective, ...(ngDevMode ? [{ debugName: "loadingSlotRefs" }] : []));
+    sortIcSlotRefs = contentChildren(DataGridSortIconDirective, ...(ngDevMode ? [{ debugName: "sortIcSlotRefs" }] : []));
+    expanderIcSlotRefs = contentChildren(DataGridExpanderIconDirective, ...(ngDevMode ? [{ debugName: "expanderIcSlotRefs" }] : []));
     emptyTpl = computed(() => this.emptySlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
     loadingTpl = computed(() => this.loadingSlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "loadingTpl" }] : []));
+    sortTpl = computed(() => this.sortIcSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "sortTpl" }] : []));
+    expanderTpl = computed(() => this.expanderIcSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "expanderTpl" }] : []));
     visibleRows = signal([], ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
     startIndex = 0;
     headerHeight = signal(40, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    // todo someday
+    // protected fillHeight = signal<number | null>(null);
     expanderMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "expanderMap" }] : []));
     extendedColumns = computed(() => {
         const hasSelection = this.selection().mode !== 'none';
@@ -689,6 +1510,24 @@ class DataGrid {
         hasIndex && newColumns.push(GRID_INDEX_COLUMN);
         return [...newColumns, ...this.columns()];
     }, ...(ngDevMode ? [{ debugName: "extendedColumns" }] : []));
+    /**
+     * Computed CSS height value based on height setting.
+     */
+    styleHeight = computed(() => {
+        const height = this.height();
+        if (typeof height === 'number') {
+            return `${height}px`;
+            // todo someday
+            // } else if (height === 'fill') {
+            //   const h = this.fillHeight();
+            //
+            //   return h === null ? null : `${h}px`;
+        }
+        else if (height === 'full') {
+            return '100%';
+        }
+        return 'var(--re-data-grid-height)';
+    }, ...(ngDevMode ? [{ debugName: "styleHeight" }] : []));
     hideSbTimeout;
     currentSortField;
     currentSortOrder = 'asc';
@@ -726,12 +1565,18 @@ class DataGrid {
             clearTimeout(this.hideSbTimeout);
         });
     }
-    get styleHeight() {
-        return this.fillHeight() ? null : 'auto';
-    }
     resolvePinnedData(pr) {
         return typeof pr.data === 'function' ? pr.data() : pr.data;
     }
+    /**
+     * Handles column header click for sorting.
+     *
+     * Toggles sort order between ascending and descending for the clicked column.
+     * If a different column is clicked, it resets to ascending order.
+     * Emits sortChange event with the current sort state.
+     *
+     * @param col - Column configuration that was clicked
+     */
     onSort(col) {
         if (!col.sortKey) {
             return;
@@ -745,6 +1590,16 @@ class DataGrid {
         }
         this.sortChange.emit({ key: this.currentSortField, order: this.currentSortOrder });
     }
+    /**
+     * Handles cell click events.
+     *
+     * Emits cellClick event and handles row selection if selection mode is enabled.
+     * Updates the selection state and emits selectChange event accordingly.
+     *
+     * @param row - Data row that was clicked
+     * @param col - Column configuration of the clicked cell
+     * @param index - Row index in the dataset
+     */
     onCellClick(row, col, index) {
         this.cellClick.emit({ row, col, index });
         if (this.selection().mode !== 'none') {
@@ -756,6 +1611,14 @@ class DataGrid {
         const keys = this.expanderMap();
         return keys.has(column.key);
     }
+    /**
+     * Handles column expand/collapse toggle.
+     *
+     * Toggles the expanded state of a column and updates the visibility
+     * of all dependent columns that reference this column via expandBy property.
+     *
+     * @param column - Column configuration to expand or collapse
+     */
     onExpand(column) {
         const expanded = !this.expanderMap().get(column.key);
         this.expanderMap.update((prev) => {
@@ -766,6 +1629,15 @@ class DataGrid {
         const columns = this.extendedColumns().map((col) => col.expandBy === column.key ? { ...col, visible: expanded } : col);
         this.vm.columns.set(columns);
     }
+    /**
+     * Handles vertical scroll events and updates visible rows.
+     *
+     * Implements virtual scrolling by calculating which rows should be rendered
+     * based on the current scroll position. Also handles infinite scroll data loading
+     * when the user scrolls near the end of available data.
+     *
+     * @param initial - Whether this is the initial scroll calculation
+     */
     onVerticalScroll(initial = false) {
         const el = this.scrollEl()?.nativeElement;
         if (!el)
@@ -805,6 +1677,15 @@ class DataGrid {
         this.hideScrollbarSoon();
     }
     onHorizontalScroll() { }
+    /**
+     * Handles mouse down event on scrollbar thumb for drag scrolling.
+     *
+     * Initiates dragging mode and sets up mouse move/up event listeners
+     * to track thumb position and update scroll position accordingly.
+     * Automatically cleans up listeners when dragging ends.
+     *
+     * @param e - Mouse down event from a scrollbar thumb element
+     */
     onThumbDown(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -877,9 +1758,12 @@ class DataGrid {
         this.selector.selection.set(this.selection());
     }
     initRefs() {
-        this.cellSlotRefs()?.forEach((dir) => this.vm.globalTypeCellTpls.set(dir.type(), dir.tpl));
+        this.cellTypedSlotRefs()?.forEach((dir) => this.vm.globalTypeCellTpls.set(dir.type(), dir.tpl));
+        this.cellDataSlotRefs()?.forEach((dir) => this.vm.globalDataCellTpls.set(dir.key(), dir.tpl));
         const headerMap = new Map();
+        const cellsMap = new Map();
         this.headerSlotRefs()?.forEach((h) => headerMap.set(h.key(), h.tpl));
+        this.cellDataSlotRefs()?.forEach((h) => cellsMap.set(h.key(), h.tpl));
         this.extendedColumns()?.forEach((c) => {
             if (!c.headerTemplate && headerMap.has(c.key)) {
                 c.headerTemplate = headerMap.get(c.key);
@@ -934,17 +1818,17 @@ class DataGrid {
         this.vm.columns.set(columns);
         this.expanderMap.set(map);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectChange: "selectChange", rowClick: "rowClick", cellClick: "cellClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "headerSlotRefs", predicate: DataGridHeaderTemplateDirective, isSignal: true }, { propertyName: "emptySlotRefs", predicate: DataGridCellEmptyDirective, isSignal: true }, { propertyName: "loadingSlotRefs", predicate: DataGridCellLoadingDirective, isSignal: true }], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.fill]=\"fillHeight()\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            {{currentSortField }} {{ col.sortKey}}\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic mixable [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  <re-sort-ic [direction]=\"currentSortField === col.sortKey ? currentSortOrder : 'desc'\" />\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  <re-expand-ic [expanded]=\"expanderMap().get(col.key)\" />\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic mixable=\"false\" [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: #fff;--re-data-grid-active: #2a90f4;--re-data-grid-empty-color: #777;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor)}:host :host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:block;width:100%;height:var(--re-data-grid-height);max-height:var(--re-data-grid-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:flex;flex-direction:column;height:100%}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-width:0;height:var(--re-data-grid-height);border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-empty{position:absolute;inset:0;display:flex;place-items:center;color:var(--re-data-grid-empty-color)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;top:var(--re-data-grid-header-height);display:grid;place-items:center;background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridCellComponent, selector: "re-data-grid-cell", inputs: ["index", "item", "column"] }, { kind: "component", type: SortIcon, selector: "re-sort-ic", inputs: ["direction"] }, { kind: "component", type: ExpandIcon, selector: "re-expand-ic", inputs: ["expanded"] }, { kind: "component", type: CheckboxIcon, selector: "re-checkbox-ic", inputs: ["state", "disabled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectChange: "selectChange", rowClick: "rowClick", cellClick: "cellClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellTypedSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "cellDataSlotRefs", predicate: DataGridCellTemplateDirective, isSignal: true }, { propertyName: "headerSlotRefs", predicate: DataGridHeaderTemplateDirective, isSignal: true }, { propertyName: "emptySlotRefs", predicate: DataGridCellEmptyDirective, isSignal: true }, { propertyName: "loadingSlotRefs", predicate: DataGridCellLoadingDirective, isSignal: true }, { propertyName: "sortIcSlotRefs", predicate: DataGridSortIconDirective, isSignal: true }, { propertyName: "expanderIcSlotRefs", predicate: DataGridExpanderIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight()\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\n\n                  @if (sortTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\n                    />\n                  } @else {\n                    <re-sort-ic [direction]=\"direction\" />\n                  }\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  @let expanded = expanderMap().get(col.key);\n\n                  @if (expanderTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\n                  } @else {\n                    <re-expand-ic [expanded]=\"expanded\" />\n                  }\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-primary, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridCellComponent, selector: "re-data-grid-cell", inputs: ["index", "item", "column"] }, { kind: "component", type: SortIcon, selector: "re-sort-ic", inputs: ["direction"] }, { kind: "component", type: ExpandIcon, selector: "re-expand-ic", inputs: ["expanded"] }, { kind: "component", type: CheckboxIcon, selector: "re-checkbox-ic", inputs: ["state", "disabled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
-            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.fill]=\"fillHeight()\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            {{currentSortField }} {{ col.sortKey}}\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic mixable [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  <re-sort-ic [direction]=\"currentSortField === col.sortKey ? currentSortOrder : 'desc'\" />\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  <re-expand-ic [expanded]=\"expanderMap().get(col.key)\" />\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic mixable=\"false\" [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: #fff;--re-data-grid-active: #2a90f4;--re-data-grid-empty-color: #777;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor)}:host :host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:block;width:100%;height:var(--re-data-grid-height);max-height:var(--re-data-grid-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:flex;flex-direction:column;height:100%}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-width:0;height:var(--re-data-grid-height);border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-empty{position:absolute;inset:0;display:flex;place-items:center;color:var(--re-data-grid-empty-color)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;top:var(--re-data-grid-header-height);display:grid;place-items:center;background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fillHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHeight", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rootEl: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], cellSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridTypeCellTemplateDirective), { isSignal: true }] }], headerSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridHeaderTemplateDirective), { isSignal: true }] }], emptySlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellEmptyDirective), { isSignal: true }] }], loadingSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellLoadingDirective), { isSignal: true }] }] } });
+            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight()\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  @let direction = currentSortField === col.sortKey ? currentSortOrder : undefined;\n\n                  @if (sortTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\n                    />\n                  } @else {\n                    <re-sort-ic [direction]=\"direction\" />\n                  }\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  @let expanded = expanderMap().get(col.key);\n\n                  @if (expanderTpl()) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\n                  } @else {\n                    <re-expand-ic [expanded]=\"expanded\" />\n                  }\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-primary, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rootEl: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], cellTypedSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridTypeCellTemplateDirective), { isSignal: true }] }], cellDataSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellTemplateDirective), { isSignal: true }] }], headerSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridHeaderTemplateDirective), { isSignal: true }] }], emptySlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellEmptyDirective), { isSignal: true }] }], loadingSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellLoadingDirective), { isSignal: true }] }], sortIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridSortIconDirective), { isSignal: true }] }], expanderIcSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridExpanderIconDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridHeaderTemplateDirective, DataGridTypeCellTemplateDirective };
+export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridCellTemplateDirective, DataGridExpanderIconDirective, DataGridHeaderTemplateDirective, DataGridPaginator, DataGridSortIconDirective, DataGridTypeCellTemplateDirective };
 //# sourceMappingURL=reforgium-data-grid.mjs.map