@reforgium/data-grid 2.1.1 → 2.2.0

package/fesm2022/reforgium-data-grid-reforgium-data-grid-Dn9s4YO5.mjs

@@ -0,0 +1,3274 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, booleanAttribute, contentChild, Component, numberAttribute, InjectionToken, makeEnvironmentProviders, signal, computed, effect, Injectable, ChangeDetectionStrategy, output, untracked, DestroyRef, afterRenderEffect, viewChild, NgZone, contentChildren } from '@angular/core';
+import { NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
+import { Subject, debounceTime, fromEvent, Subscription } 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 a 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 {
+    /**
+     * 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.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.1.1", ngImport: i0, type: DataGridCellTemplateDirective, decorators: [{
+            type: Directive,
+            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 {
+    /**
+     * 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.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.1.1", ngImport: i0, type: DataGridHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridHeader]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "reDataGridHeader", required: false }] }] } });
+
+/**
+ * Directive for providing a custom template for data grid rows.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives row data, index, columns, and layout helpers.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridRow let-row let-index="index">
+ *   <div class="my-row">{{ index + 1 }} - {{ row.name }}</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: Data` — row data
+ * - `index: number` — row index
+ * - `columns: GridColumn<Data>[]` — visible columns
+ * - `rowHeight: number` — row height in pixels
+ * - `isSticky: boolean` — sticky row flag
+ */
+class DataGridRowDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridRowDirective, isStandalone: true, selector: "ng-template[reDataGridRow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridRowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridRow]' }]
+        }] });
+
+class DataGridDeclarativeHeaderDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridDeclarativeHeaderDirective, isStandalone: true, selector: "ng-template[reHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reHeader]' }]
+        }] });
+class DataGridDeclarativeCellDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridDeclarativeCellDirective, isStandalone: true, selector: "ng-template[reCell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeCellDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reCell]' }]
+        }] });
+
+class DataGridDeclarativeColumn {
+    key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    align = input(undefined, ...(ngDevMode ? [{ debugName: "align" }] : []));
+    sortKey = input(undefined, ...(ngDevMode ? [{ debugName: "sortKey" }] : []));
+    sticky = input(...(ngDevMode ? [undefined, { debugName: "sticky" }] : []));
+    expandBy = input(undefined, ...(ngDevMode ? [{ debugName: "expandBy" }] : []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
+    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : {}), transform: toOptionalNumber });
+    minWidth = input(undefined, { ...(ngDevMode ? { debugName: "minWidth" } : {}), transform: toOptionalNumber });
+    maxWidth = input(undefined, { ...(ngDevMode ? { debugName: "maxWidth" } : {}), transform: toOptionalNumber });
+    flex = input(undefined, { ...(ngDevMode ? { debugName: "flex" } : {}), transform: toOptionalNumber });
+    type = input(undefined, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    typeParams = input(undefined, ...(ngDevMode ? [{ debugName: "typeParams" }] : []));
+    defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : []));
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    track = input(undefined, ...(ngDevMode ? [{ debugName: "track" }] : []));
+    tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
+    headerTplRef = contentChild(DataGridDeclarativeHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTplRef" }] : []));
+    cellTplRef = contentChild(DataGridDeclarativeCellDirective, ...(ngDevMode ? [{ debugName: "cellTplRef" }] : []));
+    toDeclarativeColumn() {
+        return {
+            key: this.key(),
+            header: this.header(),
+            headerTemplate: this.headerTplRef()?.tpl,
+            cellTemplate: this.cellTplRef()?.tpl,
+            align: this.align(),
+            sortKey: this.sortKey(),
+            sticky: this.sticky(),
+            expandBy: this.expandBy(),
+            disabled: this.disabled(),
+            visible: this.visible(),
+            width: this.width(),
+            minWidth: this.minWidth(),
+            maxWidth: this.maxWidth(),
+            flex: this.flex(),
+            type: this.type(),
+            typeParams: this.typeParams(),
+            defaultValue: this.defaultValue(),
+            value: this.value(),
+            track: this.track(),
+            tooltip: this.tooltip(),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: DataGridDeclarativeColumn, isStandalone: true, selector: "re-dg-column", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, expandBy: { classPropertyName: "expandBy", publicName: "expandBy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, flex: { classPropertyName: "flex", publicName: "flex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, typeParams: { classPropertyName: "typeParams", publicName: "typeParams", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerTplRef", first: true, predicate: DataGridDeclarativeHeaderDirective, descendants: true, isSignal: true }, { propertyName: "cellTplRef", first: true, predicate: DataGridDeclarativeCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDeclarativeColumn, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 're-dg-column',
+                    template: '<ng-content />',
+                }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], expandBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], flex: [{ type: i0.Input, args: [{ isSignal: true, alias: "flex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], typeParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeParams", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], headerTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridDeclarativeHeaderDirective), { isSignal: true }] }], cellTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataGridDeclarativeCellDirective), { isSignal: true }] }] } });
+function toOptionalNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return undefined;
+    }
+    const number = numberAttribute(value);
+    return Number.isNaN(number) ? undefined : number;
+}
+
+/**
+ * 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.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.1.1", ngImport: i0, type: DataGridCellEmptyDirective, decorators: [{
+            type: Directive,
+            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.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]' }]
+        }] });
+
+/**
+ * Directive for providing a custom template for sticky rows.
+ *
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
+ * The template receives row data and its index.
+ *
+ * Example:
+ * ```html
+ * <ng-template reDataGridStickyRow let-row let-index="index">
+ *   <div class="my-sticky-row">{{ index }} - {{ row.name }}</div>
+ * </ng-template>
+ * ```
+ *
+ * Template context:
+ * - `$implicit: Data` — row data
+ * - `index: number` — row index
+ */
+class DataGridStickyRowDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridStickyRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridStickyRowDirective, isStandalone: true, selector: "ng-template[reDataGridStickyRow]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridStickyRowDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridStickyRow]' }]
+        }] });
+
+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.1.1", ngImport: i0, type: DataGridExpanderIconDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[reDataGridExpanderIcon]' }]
+        }] });
+
+const DEFAULT_DATA_GRID_DEFAULTS = {
+    mode: 'pagination',
+    hasIndexColumn: false,
+    selection: { mode: 'none' },
+    pageSize: 20,
+    sortMode: 'single',
+    rowHeight: 40,
+    headerHeight: 48,
+    height: 'default',
+    virtualBuffer: 8,
+    loadingMode: 'spinner',
+    pageStartFromZero: true,
+    deferContent: true,
+    deferHeader: false,
+    deferPinned: false,
+    deferCells: false,
+    deferIcons: true,
+    deferTooltip: false,
+    translations: {
+        emptyState: 'No records found',
+        itemsPerPageLabel: 'Items per page:',
+        nextPageLabel: 'Next page',
+        prevPageLabel: 'Previous page',
+    },
+    debounce: {
+        resize: 100,
+        scroll: 50,
+    },
+};
+const DATA_GRID_CONFIG = new InjectionToken('RE_DATA_GRID_DEFAULTS', {
+    providedIn: 'root',
+    factory: () => DEFAULT_DATA_GRID_DEFAULTS,
+});
+/**
+ * Provides default configuration for Data Grid, overriding base settings.
+ *
+ * @param config Partial configuration object to be merged with current settings.
+ * @returns EnvironmentProviders for use in application or component configuration.
+ */
+function provideDataGridDefaults(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: DATA_GRID_CONFIG,
+            useFactory: () => {
+                const parent = inject(DATA_GRID_CONFIG, { optional: true, skipSelf: true });
+                const base = parent ?? DEFAULT_DATA_GRID_DEFAULTS;
+                return {
+                    ...base,
+                    ...config,
+                    selection: config.selection ?? base.selection,
+                    translations: { ...base.translations, ...config.translations },
+                    debounce: { ...base.debounce, ...config.debounce },
+                };
+            },
+        },
+    ]);
+}
+
+const GRID_INDEX_COLUMN = {
+    key: '_index',
+    type: 'index',
+    align: 'center',
+    header: '№',
+    width: 72,
+    sticky: 'left',
+};
+const GRID_CHECKBOX_COLUMN = {
+    key: '_checkbox',
+    type: 'checkbox',
+    align: 'center',
+    header: 'checkbox',
+    width: 44,
+    sticky: 'left',
+};
+
+/**
+ * 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);
+    const fixedWidths = computeFixedWidths(columns, fixedIdx);
+    const baseAuto = computeBaseAuto(columns, autoIdx, defaultCol);
+    const sumFixed = sum(fixedWidths);
+    const sumBase = sum(baseAuto.map((w) => w.width));
+    const free = Math.max(containerWidth - sumFixed - sumBase, 0);
+    const grownAuto = distributeFree(columns, baseAuto, free); // water-fill
+    const widths = new Array(columns.length).fill(0);
+    if (containerWidth <= 0) {
+        const byKey = {};
+        for (let i = 0; i < columns.length; i++) {
+            // noinspection PointlessBooleanExpressionJS
+            columns[i].visible !== false && (byKey[columns[i].key] = 0);
+        }
+        return { widths, total: 0, byKey };
+    }
+    for (const { index, width } of fixedWidths) {
+        widths[index] = width;
+    }
+    for (const { index, width } of grownAuto) {
+        widths[index] = width;
+    }
+    roundAndFix(columns, widths, fixedIdx, autoIdx, containerWidth);
+    let total = 0;
+    const byKey = {};
+    for (const i of idx) {
+        total += widths[i];
+        byKey[columns[i].key] = widths[i];
+    }
+    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++) {
+        // noinspection PointlessBooleanExpressionJS
+        cols[i].visible !== false && out.push(i);
+    }
+    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 = [];
+    for (const i of visibleIdx) {
+        cols[i].width === undefined ? autoIdx.push(i) : fixedIdx.push(i);
+    }
+    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;
+    }
+    const widths = base.map((b) => ({ ...b }));
+    let remaining = free;
+    let growable = widths.filter((w) => widthsCanGrow(cols, w.index, w.width)).map((w) => w.index);
+    while (remaining > 0 && growable.length > 0) {
+        const flexSum = growable.reduce((s, i) => s + (cols[i].flex ?? 1), 0) || 1;
+        let distributed = 0;
+        for (const i of growable) {
+            const rec = widths.find((w) => w.index === i);
+            const cap = (cols[i].maxWidth ?? Infinity) - rec.width;
+            if (cap <= 0) {
+                continue;
+            }
+            const ideal = remaining * ((cols[i].flex ?? 1) / flexSum);
+            const add = ideal < cap ? ideal : cap;
+            if (add > 0) {
+                rec.width += add;
+                distributed += add;
+            }
+        }
+        if (distributed <= 1e-6) {
+            break;
+        }
+        remaining -= distributed;
+        growable = widths.filter((w) => widthsCanGrow(cols, w.index, w.width)).map((w) => w.index);
+    }
+    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;
+    for (const i of autoIdx) {
+        widths[i] = Math.floor(widths[i]);
+        sumAuto += widths[i];
+    }
+    let need = Math.round(Math.max(containerWidth - sumFixed - sumAuto, 0));
+    if (need === 0) {
+        return;
+    }
+    for (let k = autoIdx.length - 1; k >= 0 && need > 0; k--) {
+        const i = autoIdx[k];
+        const max = cols[i].maxWidth ?? Infinity;
+        if (widths[i] + 1 <= max) {
+            widths[i] += 1;
+            need--;
+        }
+    }
+}
+/**
+ * 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);
+    }
+    return items.reduce((s, x) => s + x.width, 0);
+}
+
+// noinspection ES6PreferShortImport
+const DEFAULT_COLUMN_WIDTH = 140;
+/**
+ * Computes and normalizes header groups based on the provided headers and columns.
+ *
+ * @param {GridHeaderGroup<Data>[]} headers - An array of header group objects representing the grouping information
+ *  for the grid.
+ * @param {GridColumn<Data>[]} columns - An array of column definitions describing the columns in the grid.
+ * @return {NormalizedHeader[]} An array of normalized header objects, where each object contains information about
+ *  the computed header ranges, widths, and keys.
+ */
+function computeHeaderGroups(headers = [], columns = []) {
+    if (!columns.length || !headers.length) {
+        return [];
+    }
+    const keyToIndex = new Map(columns.map((col, index) => [col.key, index]));
+    const columnWidths = columns.map(resolveColumnWidth);
+    const prefix = buildWidthesPrefixSums(columnWidths);
+    const ranges = [];
+    const occupied = new Set();
+    for (const header of headers) {
+        const start = keyToIndex.get(header.from);
+        const resolvedTo = header.to ?? header.from;
+        const end = keyToIndex.get(resolvedTo);
+        if (start === undefined || end === undefined) {
+            continue;
+        }
+        const rangeStart = Math.min(start, end);
+        const rangeEnd = Math.max(start, end);
+        if (hasOverlap(rangeStart, rangeEnd, occupied)) {
+            continue;
+        }
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+            occupied.add(i);
+        }
+        ranges.push({ header, start: rangeStart, end: rangeEnd });
+    }
+    const rangesByStart = new Map(ranges.map((range) => [range.start, range]));
+    const normalized = [];
+    for (let index = 0; index < columns.length;) {
+        const range = rangesByStart.get(index);
+        if (range) {
+            normalized.push(normalizeRange(range, prefix, columns));
+            index = range.end + 1;
+            continue;
+        }
+        const start = index;
+        while (index < columns.length && !rangesByStart.has(index)) {
+            index++;
+        }
+        const end = index - 1;
+        normalized.push({
+            key: `_rest_${columns[start].key}_${columns[end].key}`,
+            widthPx: sumByRange(prefix, start, end),
+            startKey: columns[start]?.key,
+            endKey: columns[end]?.key,
+        });
+    }
+    return normalized;
+}
+function normalizeRange(range, prefix, columns) {
+    const base = {
+        key: range.header.key,
+        widthPx: sumByRange(prefix, range.start, range.end),
+        startKey: columns[range.start]?.key,
+        endKey: columns[range.end]?.key,
+    };
+    if ('titleTemplate' in range.header) {
+        base.titleTemplate = range.header.titleTemplate;
+        return base;
+    }
+    base.title = range.header.title;
+    base.align = range.header.align;
+    return base;
+}
+function resolveColumnWidth(column) {
+    const width = asFiniteNumber(column.width);
+    const minWidth = asFiniteNumber(column.minWidth);
+    const maxWidth = asFiniteNumber(column.maxWidth);
+    let result = width ?? minWidth ?? DEFAULT_COLUMN_WIDTH;
+    if (minWidth !== null && result < minWidth) {
+        result = minWidth;
+    }
+    if (maxWidth !== null && result > maxWidth) {
+        result = maxWidth;
+    }
+    return Math.max(0, Math.round(result));
+}
+function asFiniteNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function hasOverlap(start, end, occupied) {
+    for (let i = start; i <= end; i++) {
+        if (occupied.has(i)) {
+            return true;
+        }
+    }
+    return false;
+}
+function buildWidthesPrefixSums(values) {
+    const prefix = new Array(values.length + 1).fill(0);
+    for (let i = 0; i < values.length; i++) {
+        prefix[i + 1] = prefix[i] + values[i];
+    }
+    return prefix;
+}
+function sumByRange(prefix, start, end) {
+    return prefix[end + 1] - prefix[start];
+}
+
+/**
+ * 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);
+    const safeScrollH = toSafe(scrollHeight);
+    const safeTop = clamp(scrollTop, 0, Math.max(0, safeScrollH - safeClient));
+    if (safeClient <= 0 || !isFinite(safeClient)) {
+        return hiddenState();
+    }
+    if (safeScrollH <= safeClient + 1) {
+        return hiddenState(safeClient);
+    }
+    const track = safeClient;
+    const ratio = track / safeScrollH;
+    const thumb = Math.max(minThumb, Math.floor(track * ratio));
+    const maxScrollTop = Math.max(1, safeScrollH - track);
+    const maxThumbTop = Math.max(1, track - thumb);
+    const topRaw = Math.round((safeTop / maxScrollTop) * maxThumbTop);
+    const thumbTop = clamp(isFinite(topRaw) ? topRaw : 0, 0, maxThumbTop);
+    return {
+        visible: true,
+        thumbHeight: thumb,
+        thumbTop,
+        track,
+        maxThumbTop,
+        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;
+}
+/** Clamps the new thumb position within bounds 0..maxThumbTop */
+function clampThumbTop(value, maxThumbTop) {
+    const mt = Math.max(1, toSafe(maxThumbTop));
+    return clamp(toSafe(value), 0, mt);
+}
+function hiddenState(track = 0) {
+    return {
+        visible: false,
+        thumbHeight: 0,
+        thumbTop: 0,
+        track,
+        maxThumbTop: 1,
+        maxScrollTop: 1,
+    };
+}
+function toSafe(n) {
+    return Number.isFinite(n) ? n : 0;
+}
+function clamp(v, min, max) {
+    if (v < min) {
+        return min;
+    }
+    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);
+        const deltaY = Math.abs(scrollTop - this.#prevTop);
+        this.#prevTop = scrollTop;
+        this.#prevLeft = scrollLeft;
+        if (deltaX === 0 && deltaY === 0)
+            return 'none';
+        if (deltaX > deltaY)
+            return 'horizontal';
+        if (deltaY > deltaX)
+            return 'vertical';
+        return 'none';
+    }
+}
+
+/**
+ * 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 left = visible.filter((col) => col.sticky === 'left' || col.sticky === true);
+    const right = visible.filter((col) => col.sticky === 'right');
+    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" }] : []));
+    headerGroups = signal([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : []));
+    /**
+     * 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();
+    globalRowCellTpls = new Map();
+    #byKey = signal({}, ...(ngDevMode ? [{ debugName: "#byKey" }] : []));
+    #defaultColWidth = 140;
+    #stickyLeftMap = new Map();
+    #stickyRightMap = new Map();
+    #stickySplit = computed(() => splitSticky(this.columns() ?? []), ...(ngDevMode ? [{ debugName: "#stickySplit" }] : []));
+    #layoutSignature = '';
+    #stickySignature = '';
+    pinnedTop = signal([], ...(ngDevMode ? [{ debugName: "pinnedTop" }] : []));
+    pinnedBottom = signal([], ...(ngDevMode ? [{ debugName: "pinnedBottom" }] : []));
+    /**
+     * 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();
+        return this.#stickySplit().visible;
+    }, ...(ngDevMode ? [{ debugName: "columnsToShow" }] : []));
+    contentWidth = computed(() => {
+        const columns = this.columnsToShow();
+        if (!columns.length) {
+            return 0;
+        }
+        return columns.reduce((sum, col) => sum + this.widthByKey(col.key), 0);
+    }, ...(ngDevMode ? [{ debugName: "contentWidth" }] : []));
+    /**
+     * Computed array of normalized header groups with calculated widths.
+     *
+     * Transforms raw header group configurations into normalized structures
+     * that include computed column widths for layout rendering. Returns an empty
+     * array if no headers or columns are configured. Recalculates whenever
+     * header groups or visible columns change.
+     *
+     * @returns Array of normalized header configurations with width calculations
+     */
+    normalizedHeaderGroups = computed(() => {
+        const headers = this.headerGroups();
+        const columns = this.columnsToShow();
+        if (!headers.length || !columns.length) {
+            return [];
+        }
+        const normalizedColumns = columns.map((col) => ({
+            ...col,
+            width: this.widthByKey(col.key),
+        }));
+        return computeHeaderGroups(headers, normalizedColumns);
+    }, ...(ngDevMode ? [{ debugName: "normalizedHeaderGroups" }] : []));
+    constructor() {
+        effect(() => {
+            const rows = this.pinnedRows() ?? [];
+            this.pinnedTop.set(rows.filter((r) => r.position === 'top').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+            this.pinnedBottom.set(rows.filter((r) => r.position === 'bottom').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)));
+        });
+        effect(() => {
+            const cols = this.columns();
+            const width = this.containerWidth();
+            if (!cols.length || !width) {
+                return;
+            }
+            const signature = this.layoutSignature(cols, width);
+            if (signature === this.#layoutSignature) {
+                return;
+            }
+            this.#layoutSignature = signature;
+            const res = layoutColumns(cols, width, this.#defaultColWidth);
+            this.#byKey.set(res.byKey);
+        });
+        effect(() => {
+            this.#byKey();
+            const { left, right } = this.#stickySplit();
+            const signature = this.stickySignature(left, right);
+            if (signature === this.#stickySignature) {
+                return;
+            }
+            this.#stickySignature = signature;
+            this.recomputeStickyOffsets(left, right);
+        });
+    }
+    /**
+     * 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)
+            return;
+        const state = computeScrollbarState(el.scrollHeight, el.clientHeight, el.scrollTop);
+        if (!state.visible) {
+            this.scrollbarVisible.set(false);
+            this.thumbHeightPx.set(0);
+            this.thumbTopPx.set(0);
+            return;
+        }
+        this.thumbHeightPx.set(state.thumbHeight);
+        this.thumbTopPx.set(state.thumbTop);
+    }
+    recomputeStickyOffsets(leftCols, rightCols) {
+        let acc = 0;
+        this.#stickyLeftMap.clear();
+        for (const col of leftCols) {
+            this.#stickyLeftMap.set(col.key, acc);
+            acc += this.widthByKey(col.key);
+        }
+        acc = 0;
+        this.#stickyRightMap.clear();
+        for (let i = rightCols.length - 1; i >= 0; i--) {
+            const col = rightCols[i];
+            this.#stickyRightMap.set(col.key, acc);
+            acc += this.widthByKey(col.key);
+        }
+    }
+    layoutSignature(cols, width) {
+        const parts = [`w:${width}`];
+        for (const col of cols) {
+            const anyCol = col;
+            const key = String(col.key);
+            const widthVal = anyCol['width'] ?? '';
+            const min = anyCol['minWidth'] ?? '';
+            const max = anyCol['maxWidth'] ?? '';
+            const flex = anyCol['flex'] ?? '';
+            const visible = anyCol['visible'] ?? '';
+            const sticky = anyCol['sticky'] ?? '';
+            parts.push([key, widthVal, min, max, flex, visible, sticky].join('|'));
+        }
+        return parts.join(';');
+    }
+    stickySignature(leftCols, rightCols) {
+        const left = leftCols.map((col) => `${col.key}:${this.widthByKey(col.key)}`).join(',');
+        const right = rightCols.map((col) => `${col.key}:${this.widthByKey(col.key)}`).join(',');
+        return `l:${left}|r:${right}`;
+    }
+    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.1.1", ngImport: i0, type: DataGridVm, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// noinspection ES6PreferShortImport
+/**
+ * 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 the ` 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 the column configuration changes.
+     */
+    type = computed(() => {
+        const col = this.column();
+        if ('renderTemplate' in col) {
+            return 'tpl';
+        }
+        if ('type' in col && this.vm.globalTypeCellTpls.has(col.type)) {
+            return 'globalTypeTpl';
+        }
+        if (this.vm.globalDataCellTpls.has(col.key)) {
+            return 'globalDataTpl';
+        }
+        if (this.vm.globalRowCellTpls.has(col.key)) {
+            return 'globalRowTpl';
+        }
+        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();
+        const rawValue = 'value' in col ? col.value(row) : row[col.key];
+        if ('value' in col || 'renderTemplate' in col) {
+            return rawValue;
+        }
+        if (rawValue === null || rawValue === undefined) {
+            return col.defaultValue ?? rawValue;
+        }
+        return rawValue;
+    }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    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 = $any(column());
+    @let val = value();
+
+    @switch (type()) {
+      @case ('tpl') {
+        <ng-container
+          [ngTemplateOutlet]="col.renderTemplate"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
+      @case ('globalTypeTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get(col.type)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('globalDataTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('globalRowTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
+      @case ('date') {
+        <span class="re-dg-cell-text">{{ val | date: col?.typeParams }}</span>
+      }
+      @case ('number') {
+        <span class="re-dg-cell-text">{{ val | number: col?.typeParams }}</span>
+      }
+      @case ('index') {
+        <span class="re-dg-cell-text">{{ index() + 1 }}</span>
+      }
+      @default {
+        <span class="re-dg-cell-text">{{ val }}</span>
+      }
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}\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.1.1", ngImport: i0, type: DataGridCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 're-data-grid-cell', template: `
+    @let row = item();
+    @let col = $any(column());
+    @let val = value();
+
+    @switch (type()) {
+      @case ('tpl') {
+        <ng-container
+          [ngTemplateOutlet]="col.renderTemplate"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
+      @case ('globalTypeTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get(col.type)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('globalDataTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalDataCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('globalRowTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalRowCellTpls.get(col.key)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index: index() }"
+        />
+      }
+      @case ('date') {
+        <span class="re-dg-cell-text">{{ val | date: col?.typeParams }}</span>
+      }
+      @case ('number') {
+        <span class="re-dg-cell-text">{{ val | number: col?.typeParams }}</span>
+      }
+      @case ('index') {
+        <span class="re-dg-cell-text">{{ index() + 1 }}</span>
+      }
+      @default {
+        <span class="re-dg-cell-text">{{ val }}</span>
+      }
+    }
+  `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}\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 }] }] } });
+
+// noinspection ES6PreferShortImport
+function createGridApiFeature(ctx) {
+    const clearSelection = () => {
+        const selectionFeature = ctx.getSelectionFeature();
+        if (selectionFeature) {
+            selectionFeature.clearSelection();
+            return;
+        }
+        ctx.clearSelectedKeys();
+        ctx.emitSelectChange([]);
+        void ctx.loadSelectionFeature();
+    };
+    const selectAllLoaded = () => {
+        const selectionFeature = ctx.getSelectionFeature();
+        if (selectionFeature) {
+            selectionFeature.selectAllLoaded();
+            return;
+        }
+        if (ctx.getSelectionMode() !== 'multi') {
+            return;
+        }
+        ctx.emitSelectChange(ctx.selectAll());
+        void ctx.loadSelectionFeature();
+    };
+    return {
+        clearSelection,
+        selectAllLoaded,
+        resetSort: () => ctx.resetSort(),
+        setSort: (sort) => ctx.setSort(sort),
+        setMultiSort: (sorts) => ctx.setMultiSort(sorts),
+    };
+}
+
+// noinspection ES6PreferShortImport
+function createGridExpanderFeature(ctx) {
+    const isExpandable = (column) => {
+        return ctx.getExpanderMap().has(column.key);
+    };
+    const onExpand = (column) => {
+        const expanded = !ctx.getExpanderMap().get(column.key);
+        ctx.updateExpanderMap((prev) => {
+            const map = new Map(prev);
+            map.set(column.key, expanded);
+            return map;
+        });
+        const columns = ctx
+            .getExtendedColumns()
+            .map((col) => (col.expandBy === column.key ? { ...col, visible: expanded } : col));
+        ctx.setVmColumns(columns);
+    };
+    const initExpander = () => {
+        const map = new Map();
+        const columns = ctx.runUntracked(() => ctx.getVmColumns().map((col) => {
+            col.expandBy && map.set(col.expandBy, false);
+            return { ...col, visible: col.expandBy ? false : col.visible };
+        }));
+        ctx.setVmColumns(columns);
+        ctx.setExpanderMap(map);
+    };
+    return {
+        isExpandable,
+        onExpand,
+        initExpander,
+    };
+}
+
+// noinspection ES6PreferShortImport
+function createGridHeaderGroupsFeature(ctx) {
+    const sortOrderFor = (col) => {
+        if (!col.sortKey) {
+            return undefined;
+        }
+        if (ctx.getSortMode() === 'multi') {
+            return ctx.getMultiSortMap().get(col.sortKey);
+        }
+        if (ctx.getSingleSortField() !== col.sortKey) {
+            return undefined;
+        }
+        return ctx.getSingleSortOrder();
+    };
+    const ariaSort = (col) => {
+        const order = sortOrderFor(col);
+        if (!order) {
+            return 'none';
+        }
+        return order === 'asc' ? 'ascending' : 'descending';
+    };
+    const syncHeaderGroups = () => {
+        ctx.setVmHeaderGroups(ctx.getHeaderGroups());
+    };
+    const isActiveSort = (col) => !!sortOrderFor(col);
+    return {
+        ariaSort,
+        isActiveSort,
+        sortOrderFor,
+        syncHeaderGroups,
+    };
+}
+
+function createGridHeaderMeasureFeature(ctx) {
+    let headerMeasureRafId = null;
+    const scheduleMeasure = () => {
+        if (headerMeasureRafId !== null) {
+            return;
+        }
+        headerMeasureRafId = ctx.requestAnimationFrame(() => {
+            headerMeasureRafId = null;
+            const el = ctx.getHeaderElement();
+            if (!el) {
+                return;
+            }
+            ctx.setHeaderHeight(el.offsetHeight);
+        });
+    };
+    const clearMeasure = () => {
+        if (headerMeasureRafId === null) {
+            return;
+        }
+        ctx.cancelAnimationFrame(headerMeasureRafId);
+        headerMeasureRafId = null;
+    };
+    return {
+        scheduleMeasure,
+        clearMeasure,
+    };
+}
+
+function createGridInfinityPageRequestFeature(ctx) {
+    const PREFETCH_FACTOR = 1.25;
+    let lastRequestedPage = null;
+    let lastTotal = -1;
+    const onDataTotalChanged = (total) => {
+        if (total === lastTotal) {
+            return;
+        }
+        lastTotal = total;
+        lastRequestedPage = null;
+    };
+    const requestIfNeeded = (state) => {
+        if (state.initial || state.mode !== 'infinity') {
+            return false;
+        }
+        const threshold = Math.max(0, state.total - Math.max(1, Math.floor(state.visibleCount * PREFETCH_FACTOR)));
+        const nearEnd = state.start + state.visibleCount >= threshold;
+        if (!nearEnd || ctx.isLoading()) {
+            return false;
+        }
+        const modifier = ctx.isPageStartFromZero() ? 0 : 1;
+        const page = Math.floor(state.total / ctx.getPageSize()) + modifier;
+        if (lastRequestedPage === page && lastTotal === state.total) {
+            return true;
+        }
+        lastTotal = state.total;
+        lastRequestedPage = page;
+        ctx.emitPageChange({ page, rows: ctx.getPageSize() });
+        return false;
+    };
+    const reset = () => {
+        lastRequestedPage = null;
+        lastTotal = -1;
+    };
+    return {
+        onDataTotalChanged,
+        requestIfNeeded,
+        reset,
+    };
+}
+
+function createGridLifecycleInitFeature(ctx) {
+    const init = (plan) => {
+        plan.afterRender.forEach((fn) => ctx.registerAfterRenderEffect(fn));
+        plan.effects.forEach((fn) => ctx.registerEffect(fn));
+        ctx.registerOnDestroy(plan.onDestroy);
+    };
+    return { init };
+}
+
+function createGridResizeObserverFeature(ctx) {
+    let observer;
+    let lastResizeWidth = -1;
+    let lastResizeHeight = -1;
+    const resizeSubject = new Subject();
+    const initObserver = () => {
+        const root = ctx.getRootElement();
+        if (!root) {
+            return;
+        }
+        ctx.addSubscription(resizeSubject.pipe(debounceTime(ctx.getResizeDebounceMs())).subscribe((entries) => {
+            const rect = entries[0].contentRect;
+            const width = rect.width;
+            const height = rect.height;
+            const widthChanged = width !== lastResizeWidth;
+            const heightChanged = height !== lastResizeHeight;
+            if (!widthChanged && !heightChanged) {
+                return;
+            }
+            lastResizeWidth = width;
+            lastResizeHeight = height;
+            if (widthChanged) {
+                ctx.onWidthChanged(width);
+            }
+            if (heightChanged) {
+                ctx.onHeightChanged(height);
+            }
+        }));
+        observer = new ResizeObserver((entries) => resizeSubject.next(entries));
+        observer.observe(root);
+    };
+    const disconnect = () => {
+        observer?.disconnect();
+    };
+    return {
+        initObserver,
+        disconnect,
+    };
+}
+
+// noinspection ES6PreferShortImport
+function createGridRowInteractionsFeature(ctx) {
+    const onCellClick = (row, col, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        ctx.emitCellClick({ row, col, index, event });
+        if (ctx.getSelectionMode() !== 'none') {
+            ctx.emitSelectChange(ctx.selectRow(row));
+        }
+    };
+    const onCellContext = (row, col, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        ctx.emitCellContext({ row, col, index, event });
+    };
+    const onCellDoubleClick = (row, col, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        ctx.emitCellDoubleClick({ row, col, index, event });
+    };
+    const onRowClick = (row, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        event.stopPropagation();
+        ctx.emitRowClick({ row, index, event });
+    };
+    const onRowContext = (row, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        event.stopPropagation();
+        ctx.emitRowContext({ row, index, event });
+    };
+    const onRowDoubleClick = (row, index, event) => {
+        if (ctx.isRowDisabled(row, index)) {
+            return;
+        }
+        event.stopPropagation();
+        ctx.emitRowDoubleClick({ row, index, event });
+    };
+    return {
+        onCellClick,
+        onCellContext,
+        onCellDoubleClick,
+        onRowClick,
+        onRowContext,
+        onRowDoubleClick,
+    };
+}
+
+function createGridScrollLoopFeature(ctx) {
+    let scrollRafId = null;
+    const scheduleScrollTick = (detector) => {
+        if (scrollRafId !== null) {
+            return;
+        }
+        scrollRafId = requestAnimationFrame(() => {
+            scrollRafId = null;
+            const direction = detector.detect();
+            ctx.runInAngular(() => {
+                direction === 'vertical' ? ctx.onVerticalScroll() : ctx.onHorizontalScroll();
+                ctx.hideTooltip();
+            });
+        });
+    };
+    const initScroll = () => {
+        const scrollEl = ctx.getScrollElement();
+        if (scrollEl) {
+            const scrollDetector = new ScrollDirectionDetector(scrollEl);
+            ctx.runOutsideAngular(() => {
+                ctx.addSubscription(fromEvent(scrollEl, 'scroll').subscribe(() => scheduleScrollTick(scrollDetector)));
+                ctx.addSubscription(fromEvent(scrollEl, 'scroll').subscribe(() => ctx.onStickySchedule()));
+            });
+        }
+        queueMicrotask(() => ctx.onInitialVerticalScroll());
+    };
+    const clearScrollRaf = () => {
+        if (scrollRafId === null) {
+            return;
+        }
+        cancelAnimationFrame(scrollRafId);
+        scrollRafId = null;
+    };
+    return {
+        initScroll,
+        clearScrollRaf,
+    };
+}
+
+// noinspection ES6PreferShortImport
+function createGridSelectionReconcileFeature(ctx) {
+    let lastSelectionKeyField = '';
+    let lastValidSelectionKeys = new Set();
+    const reconcile = () => {
+        const selection = ctx.getSelection();
+        if (selection.mode === 'none' || !('key' in selection)) {
+            lastSelectionKeyField = '';
+            lastValidSelectionKeys.clear();
+            return;
+        }
+        const data = ctx.getData() ?? [];
+        const key = selection.key;
+        const validKeys = data.map((row) => row[key]).filter((rowKey) => rowKey !== null && rowKey !== undefined);
+        const keySet = new Set(validKeys);
+        const keyField = String(key);
+        const sameSetAsPrevious = lastSelectionKeyField === keyField &&
+            keySet.size === lastValidSelectionKeys.size &&
+            Array.from(keySet).every((rowKey) => lastValidSelectionKeys.has(rowKey));
+        if (sameSetAsPrevious) {
+            return;
+        }
+        lastSelectionKeyField = keyField;
+        lastValidSelectionKeys = new Set(keySet);
+        const nextSelected = ctx
+            .getSelectedKeys()
+            .filter((selectedKey) => selectedKey !== null && selectedKey !== undefined && keySet.has(selectedKey));
+        ctx.setSelectedKeys(nextSelected);
+    };
+    return { reconcile };
+}
+
+// noinspection ES6PreferShortImport
+function createGridSlotsFeature(ctx) {
+    const initRefs = () => {
+        ctx.clearTypeTemplates();
+        ctx.clearDataTemplates();
+        ctx.clearRowTemplates();
+        ctx.getTypeTemplateRefs()?.forEach((dir) => ctx.setTypeTemplate(dir.type(), dir.tpl));
+        ctx.getDataTemplateRefs()?.forEach((dir) => ctx.setDataTemplate(dir.key(), dir.tpl));
+        for (const [key, tpl] of ctx.getRowTemplateEntries()) {
+            ctx.setRowTemplate(key, tpl);
+        }
+        const headerMap = new Map();
+        ctx.getHeaderTemplateRefs()?.forEach((headerRef) => headerMap.set(headerRef.key(), headerRef.tpl));
+        ctx.getExtendedColumns().forEach((column) => {
+            if (!column.headerTemplate && headerMap.has(column.key)) {
+                column.headerTemplate = headerMap.get(column.key);
+            }
+        });
+    };
+    return { initRefs };
+}
+
+// noinspection ES6PreferShortImport
+function createGridSortFeature(ctx) {
+    const resetSort = () => {
+        const prevKey = (ctx.getSortField() ?? '');
+        ctx.setSortField(undefined);
+        ctx.setSorts([]);
+        ctx.emitSortChange({ key: prevKey, order: undefined });
+        ctx.emitMultiSortChange([]);
+    };
+    const setSort = (sort) => {
+        if (!sort.key || !sort.order) {
+            resetSort();
+            return;
+        }
+        ctx.setSortField(String(sort.key));
+        ctx.setSortOrder(sort.order);
+        ctx.setSorts([{ key: sort.key, order: sort.order }]);
+        ctx.emitSortChange({ key: sort.key, order: sort.order });
+        ctx.getSortMode() === 'multi' && ctx.emitMultiSortChange(ctx.getSorts());
+    };
+    const setMultiSort = (sorts) => {
+        const normalizedSorts = (sorts ?? []).filter((sort) => !!sort?.key && !!sort?.order);
+        if (!normalizedSorts.length) {
+            resetSort();
+            return;
+        }
+        const active = normalizedSorts[normalizedSorts.length - 1];
+        ctx.setSortField(String(active.key));
+        ctx.setSortOrder(active.order);
+        ctx.setSorts([...normalizedSorts]);
+        ctx.emitSortChange({ key: active.key, order: active.order });
+        ctx.emitMultiSortChange(ctx.getSorts());
+    };
+    const onSort = (sortKey) => {
+        if (!sortKey) {
+            return;
+        }
+        if (ctx.getSortMode() === 'multi') {
+            const currentSorts = ctx.getSorts();
+            const existingIndex = currentSorts.findIndex((item) => item.key === sortKey);
+            if (existingIndex >= 0) {
+                const current = currentSorts[existingIndex];
+                if (current.order === 'asc') {
+                    ctx.setSorts(currentSorts.map((item, index) => (index === existingIndex ? { ...item, order: 'desc' } : item)));
+                }
+                else {
+                    ctx.setSorts(currentSorts.filter((item) => item.key !== sortKey));
+                }
+            }
+            else {
+                ctx.setSorts([...currentSorts, { key: sortKey, order: 'asc' }]);
+            }
+            const activeOrder = ctx.getSortOrderByKey(sortKey);
+            ctx.setSortField(sortKey);
+            activeOrder && ctx.setSortOrder(activeOrder);
+            ctx.emitSortChange({ key: sortKey, order: activeOrder });
+            ctx.emitMultiSortChange(ctx.getSorts());
+            return;
+        }
+        if (ctx.getSortField() === sortKey) {
+            if (ctx.getSortOrder() === 'asc') {
+                ctx.setSortOrder('desc');
+                ctx.setSorts([{ key: sortKey, order: 'desc' }]);
+            }
+            else {
+                ctx.setSortField(undefined);
+                ctx.setSorts([]);
+            }
+        }
+        else {
+            ctx.setSortField(sortKey);
+            ctx.setSortOrder('asc');
+            ctx.setSorts([{ key: sortKey, order: 'asc' }]);
+        }
+        ctx.emitSortChange({
+            key: sortKey,
+            order: ctx.getSortField() ? ctx.getSortOrder() : undefined,
+        });
+    };
+    return { resetSort, setSort, setMultiSort, onSort };
+}
+
+function createGridStickyOrchestrationFeature(ctx) {
+    const reconcile = () => {
+        const data = ctx.getData();
+        const predicate = ctx.getStickyPredicate();
+        if (!predicate || !data.length) {
+            ctx.setStickyIndexes([]);
+            ctx.updateStickyFromScroll();
+            return;
+        }
+        ctx.ensureStickyFeatureLoaded();
+        const indexes = [];
+        for (let i = 0; i < data.length; i++) {
+            if (predicate(data[i], i)) {
+                indexes.push(i);
+            }
+        }
+        ctx.setStickyIndexes(indexes);
+        ctx.updateStickyFromScroll();
+    };
+    return { reconcile };
+}
+
+// noinspection ES6PreferShortImport
+function createGridTooltipAdapterFeature(ctx) {
+    const preloadForColumns = (columns) => {
+        if (!columns.some((col) => !!col.tooltip)) {
+            return;
+        }
+        void ctx.loadTooltipFeature();
+    };
+    const showTooltip = (event, row, col, index) => {
+        if (!col.tooltip) {
+            return;
+        }
+        const feature = ctx.getTooltipFeature();
+        if (feature) {
+            feature.showTooltip(event, row, col, index);
+            return;
+        }
+        void ctx.loadTooltipFeature();
+    };
+    const hideTooltip = () => {
+        ctx.getTooltipFeature()?.hideTooltip();
+    };
+    const positionTooltip = () => {
+        const feature = ctx.getTooltipFeature();
+        if (!feature) {
+            return;
+        }
+        feature.positionTooltip(ctx.getTooltipElement());
+    };
+    return {
+        preloadForColumns,
+        showTooltip,
+        hideTooltip,
+        positionTooltip,
+    };
+}
+
+// noinspection ES6PreferShortImport
+function createGridVirtualScrollFeature(ctx) {
+    const ensureRenderSlots = (count) => {
+        const current = ctx.getRenderSlots();
+        if (current.length === count) {
+            return;
+        }
+        const next = new Array(count);
+        for (let i = 0; i < count; i++) {
+            next[i] = i;
+        }
+        ctx.setRenderSlots(next);
+    };
+    const onVerticalScroll = (initial = false) => {
+        const el = ctx.getScrollElement();
+        if (!el) {
+            return;
+        }
+        const scrollTop = el.scrollTop ?? 0;
+        const viewportHeight = el.clientHeight ?? 0;
+        const data = ctx.getData() ?? [];
+        const total = data.length ?? 0;
+        const rowHeight = Math.max(1, ctx.getRowHeight());
+        const virtualBuffer = Math.max(0, ctx.getVirtualBuffer());
+        const pinnedTopH = ctx.getPinnedTopCount() * rowHeight;
+        const limit = ctx.getMode() === 'pagination';
+        const cap = limit ? Math.max(1, ctx.getPageSize()) : Number.POSITIVE_INFINITY;
+        const viewportRows = Math.ceil(viewportHeight / rowHeight);
+        const visibleCount = Math.min(viewportRows + virtualBuffer, cap);
+        const start = Math.max(0, Math.floor(scrollTop / rowHeight) - Math.floor(virtualBuffer / 2));
+        const end = Math.min(total, start + visibleCount);
+        if (viewportHeight <= 0 || !isFinite(viewportHeight) || !isFinite(rowHeight)) {
+            const fallbackCount = Math.min(total, Math.max(1, ctx.getPageSize()));
+            ctx.setRenderCount(fallbackCount);
+            ensureRenderSlots(fallbackCount);
+            ctx.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
+            ctx.finalizeScroll();
+            return;
+        }
+        const { start: lastStart, end: lastEnd } = ctx.getLastRange();
+        if (start === lastStart && end === lastEnd) {
+            ctx.finalizeScroll();
+            return;
+        }
+        ctx.setLastRange({ start, end });
+        ctx.setStartIndex(start);
+        ctx.setRenderCount(Math.max(0, end - start));
+        ensureRenderSlots(Math.max(0, end - start));
+        ctx.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
+        const shouldSkipFinalize = ctx.requestInfinityIfNeeded({
+            initial,
+            mode: ctx.getMode(),
+            total,
+            start,
+            visibleCount,
+        });
+        if (shouldSkipFinalize) {
+            return;
+        }
+        ctx.finalizeScroll();
+    };
+    return { onVerticalScroll };
+}
+
+/**
+ * Merges declarative columns with programmatic columns.
+ *
+ * Declarative columns are treated as a base when present.
+ * For matching keys we keep declarative values and fill only missing fields
+ * from programmatic columns.
+ */
+function mergeDeclarativeColumns(declarativeColumns = [], programmaticColumns = []) {
+    if (!declarativeColumns.length) {
+        return [...programmaticColumns];
+    }
+    if (!programmaticColumns.length) {
+        return [...declarativeColumns];
+    }
+    const programmaticByKey = new Map(programmaticColumns.map((column) => [String(column.key), column]));
+    const usedProgrammaticKeys = new Set();
+    const merged = declarativeColumns.map((declarativeColumn) => {
+        const key = String(declarativeColumn.key);
+        const programmaticColumn = programmaticByKey.get(key);
+        if (!programmaticColumn) {
+            return declarativeColumn;
+        }
+        usedProgrammaticKeys.add(key);
+        return mergeDefined(programmaticColumn, declarativeColumn);
+    });
+    const restProgrammatic = programmaticColumns.filter((column) => !usedProgrammaticKeys.has(String(column.key)));
+    return [...merged, ...restProgrammatic];
+}
+function mergeDefined(source, overrides) {
+    const result = { ...source };
+    const overrideEntries = Object.entries(overrides);
+    for (const [key, value] of overrideEntries) {
+        if (value !== undefined) {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+
+// noinspection ES6PreferShortImport
+function normalizeDeclarativeColumns(defs = [], rowKey) {
+    const columns = [];
+    const rowCellTemplatesByKey = new Map();
+    for (const def of defs) {
+        const key = def.key;
+        const base = {
+            key,
+            header: def.header ?? String(key),
+            headerTemplate: def.headerTemplate,
+            align: def.align,
+            sortKey: def.sortKey,
+            width: def.width,
+            minWidth: def.minWidth,
+            maxWidth: def.maxWidth,
+            flex: def.flex,
+            disabled: def.disabled,
+            visible: def.visible,
+            sticky: def.sticky,
+            tooltip: def.tooltip,
+            expandBy: def.expandBy,
+        };
+        if (def.cellTemplate) {
+            rowCellTemplatesByKey.set(String(key), def.cellTemplate);
+        }
+        if (def.value) {
+            columns.push({
+                ...base,
+                value: def.value,
+                track: def.track ?? createDefaultTrack(key, rowKey),
+            });
+            continue;
+        }
+        columns.push({
+            ...base,
+            type: def.type ?? 'plain',
+            typeParams: def.typeParams,
+            defaultValue: def.defaultValue,
+        });
+    }
+    return { columns, rowCellTemplatesByKey };
+}
+function createDefaultTrack(key, rowKey) {
+    return (row) => {
+        if (!rowKey) {
+            return String(row[key]);
+        }
+        if (typeof rowKey === 'function') {
+            return String(rowKey(row));
+        }
+        return String(row[rowKey]);
+    };
+}
+
+/**
+ * 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" }] : []));
+    selectedKeySet = computed(() => new Set(this.selectedKeys()), ...(ngDevMode ? [{ debugName: "selectedKeySet" }] : []));
+    /**
+     * 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 the "select all" checkbox with an indeterminate state.
+     */
+    isAllSelected = computed(() => {
+        const selection = this.selection();
+        if (!('key' in selection)) {
+            return false;
+        }
+        const rows = this.data();
+        if (!rows.length) {
+            return false;
+        }
+        const selected = this.selectedKeySet();
+        const loadedKeys = rows.map((row) => row[selection.key]).filter((key) => key !== null && key !== undefined);
+        if (!loadedKeys.length) {
+            return false;
+        }
+        let matched = 0;
+        for (const key of loadedKeys) {
+            selected.has(key) && matched++;
+        }
+        return matched === loadedKeys.length ? true : matched === 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 the selection mode is 'none' or the 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();
+        if (!('key' in selection)) {
+            return false;
+        }
+        const rowKey = row[selection.key];
+        if (rowKey === null || rowKey === undefined) {
+            return false;
+        }
+        return this.selectedKeySet().has(rowKey);
+    }
+    /**
+     * 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');
+        }
+        const selection = this.selection();
+        const loadedKeys = this.data()
+            .map((row) => row[selection.key])
+            .filter((key) => key !== null && key !== undefined);
+        const loadedKeySet = new Set(loadedKeys);
+        const selectedKeys = this.selectedKeys();
+        const selectedSet = new Set(selectedKeys);
+        const allLoadedSelected = loadedKeys.length > 0 && loadedKeys.every((key) => selectedSet.has(key));
+        if (allLoadedSelected) {
+            this.selectedKeys.set(selectedKeys.filter((key) => !loadedKeySet.has(key)));
+        }
+        else {
+            const nextSelected = [...selectedKeys];
+            for (const key of loadedKeys) {
+                if (!selectedSet.has(key)) {
+                    nextSelected.push(key);
+                    selectedSet.add(key);
+                }
+            }
+            this.selectedKeys.set(nextSelected);
+        }
+        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');
+        }
+        const selection = this.selection();
+        if (this.selection().mode === 'single') {
+            const rowKey = row[selection.key];
+            if (rowKey === null || rowKey === undefined) {
+                return this.selectedKeys();
+            }
+            const selected = [rowKey];
+            this.selectedKeys.set(selected);
+            return selected;
+        }
+        else {
+            const selectedKeys = this.selectedKeys();
+            const selectedSet = this.selectedKeySet();
+            const rowKey = row[selection.key];
+            if (rowKey === null || rowKey === undefined) {
+                return selectedKeys;
+            }
+            const has = selectedSet.has(rowKey);
+            const selected = has ? selectedKeys.filter((it) => it !== rowKey) : [...selectedKeys, rowKey];
+            this.selectedKeys.set(selected);
+            return selected;
+        }
+    }
+}
+
+// noinspection CssUnresolvedCustomProperty
+class CheckboxIcon {
+    state = input(false, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    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.1.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 } }, ngImport: i0, template: `
+    <span
+      class="cb"
+      [class.cb--disabled]="disabled()"
+      [class.cb--checked]="state() === true"
+      [class.cb--mixed]="state() === 'mixed'"
+      [attr.aria-checked]="state() === 'mixed' ? 'mixed' : state() ? 'true' : 'false'"
+      [attr.aria-disabled]="disabled()"
+      role="checkbox"
+      aria-hidden="false"
+    >
+      <span class="cb__box" aria-hidden="true"></span>
+    </span>
+  `, 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__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--checked .cb__box{border-color:var(--re-data-grid-checkbox-active-color);background:var(--re-data-grid-checkbox-active-color)}.cb--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--mixed .cb__box{background:var(--re-data-grid-checkbox-active-color);border-color:var(--re-data-grid-checkbox-active-color)}.cb--mixed .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.1.1", ngImport: i0, type: CheckboxIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 're-checkbox-ic', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span
+      class="cb"
+      [class.cb--disabled]="disabled()"
+      [class.cb--checked]="state() === true"
+      [class.cb--mixed]="state() === 'mixed'"
+      [attr.aria-checked]="state() === 'mixed' ? 'mixed' : state() ? 'true' : 'false'"
+      [attr.aria-disabled]="disabled()"
+      role="checkbox"
+      aria-hidden="false"
+    >
+      <span class="cb__box" aria-hidden="true"></span>
+    </span>
+  `, 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__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--checked .cb__box{border-color:var(--re-data-grid-checkbox-active-color);background:var(--re-data-grid-checkbox-active-color)}.cb--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--mixed .cb__box{background:var(--re-data-grid-checkbox-active-color);border-color:var(--re-data-grid-checkbox-active-color)}.cb--mixed .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"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/* eslint-disable max-len */
+class ExpandIcon {
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : {}), transform: booleanAttribute });
+    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
+          d="M15.5 8C15.5 9.48336 15.0601 10.9334 14.236 12.1668C13.4119 13.4001 12.2406 14.3614 10.8701 14.9291C9.49968 15.4968 7.99168 15.6453 6.53683 15.3559C5.08197 15.0665 3.7456 14.3522 2.6967 13.3033C1.64781 12.2544 0.933503 10.918 0.644114 9.46318C0.354725 8.00832 0.50325 6.50032 1.07091 5.12987C1.63856 3.75943 2.59986 2.58809 3.83323 1.76398C5.0666 0.939867 6.51664 0.5 8 0.5C8.98492 0.5 9.96019 0.693993 10.8701 1.0709C11.7801 1.44781 12.6069 2.00026 13.3033 2.6967C13.9997 3.39314 14.5522 4.21993 14.9291 5.12987C15.306 6.03982 15.5 7.01509 15.5 8ZM12.5 8C12.5 7.80109 12.421 7.61032 12.2803 7.46967C12.1397 7.32902 11.9489 7.25 11.75 7.25H4.25C4.05109 7.25 3.86033 7.32902 3.71967 7.46967C3.57902 7.61032 3.5 7.80109 3.5 8C3.5 8.19891 3.57902 8.38968 3.71967 8.53033C3.86033 8.67098 4.05109 8.75 4.25 8.75H11.75C11.9489 8.75 12.1397 8.67098 12.2803 8.53033C12.421 8.38968 12.5 8.19891 12.5 8Z"
+          fill="var(--re-data-grid-expander-color)"
+        />
+      </svg>
+    } @else {
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <path
+          d="M8 0.5C6.51664 0.5 5.0666 0.939867 3.83323 1.76398C2.59986 2.58809 1.63856 3.75943 1.07091 5.12987C0.50325 6.50032 0.354725 8.00832 0.644114 9.46318C0.933503 10.918 1.64781 12.2544 2.6967 13.3033C3.7456 14.3522 5.08197 15.0665 6.53683 15.3559C7.99168 15.6453 9.49968 15.4968 10.8701 14.9291C12.2406 14.3614 13.4119 13.4001 14.236 12.1668C15.0601 10.9334 15.5 9.48336 15.5 8C15.5 7.01509 15.306 6.03982 14.9291 5.12987C14.5522 4.21993 13.9997 3.39314 13.3033 2.6967C12.6069 2.00026 11.7801 1.44781 10.8701 1.0709C9.96019 0.693993 8.98492 0.5 8 0.5ZM11.75 8.75H8.75V11.75C8.75 11.9489 8.67099 12.1397 8.53033 12.2803C8.38968 12.421 8.19892 12.5 8 12.5C7.80109 12.5 7.61033 12.421 7.46967 12.2803C7.32902 12.1397 7.25 11.9489 7.25 11.75V8.75H4.25C4.05109 8.75 3.86033 8.67098 3.71967 8.53033C3.57902 8.38968 3.5 8.19891 3.5 8C3.5 7.80109 3.57902 7.61032 3.71967 7.46967C3.86033 7.32902 4.05109 7.25 4.25 7.25H7.25V4.25C7.25 4.05109 7.32902 3.86032 7.46967 3.71967C7.61033 3.57902 7.80109 3.5 8 3.5C8.19892 3.5 8.38968 3.57902 8.53033 3.71967C8.67099 3.86032 8.75 4.05109 8.75 4.25V7.25H11.75C11.9489 7.25 12.1397 7.32902 12.2803 7.46967C12.421 7.61032 12.5 7.80109 12.5 8C12.5 8.19891 12.421 8.38968 12.2803 8.53033C12.1397 8.67098 11.9489 8.75 11.75 8.75Z"
+          fill="var(--re-data-grid-expander-color)"
+        />
+      </svg>
+    }
+  `, isInline: true, styles: [""] });
+}
+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()) {
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <path
+          d="M15.5 8C15.5 9.48336 15.0601 10.9334 14.236 12.1668C13.4119 13.4001 12.2406 14.3614 10.8701 14.9291C9.49968 15.4968 7.99168 15.6453 6.53683 15.3559C5.08197 15.0665 3.7456 14.3522 2.6967 13.3033C1.64781 12.2544 0.933503 10.918 0.644114 9.46318C0.354725 8.00832 0.50325 6.50032 1.07091 5.12987C1.63856 3.75943 2.59986 2.58809 3.83323 1.76398C5.0666 0.939867 6.51664 0.5 8 0.5C8.98492 0.5 9.96019 0.693993 10.8701 1.0709C11.7801 1.44781 12.6069 2.00026 13.3033 2.6967C13.9997 3.39314 14.5522 4.21993 14.9291 5.12987C15.306 6.03982 15.5 7.01509 15.5 8ZM12.5 8C12.5 7.80109 12.421 7.61032 12.2803 7.46967C12.1397 7.32902 11.9489 7.25 11.75 7.25H4.25C4.05109 7.25 3.86033 7.32902 3.71967 7.46967C3.57902 7.61032 3.5 7.80109 3.5 8C3.5 8.19891 3.57902 8.38968 3.71967 8.53033C3.86033 8.67098 4.05109 8.75 4.25 8.75H11.75C11.9489 8.75 12.1397 8.67098 12.2803 8.53033C12.421 8.38968 12.5 8.19891 12.5 8Z"
+          fill="var(--re-data-grid-expander-color)"
+        />
+      </svg>
+    } @else {
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <path
+          d="M8 0.5C6.51664 0.5 5.0666 0.939867 3.83323 1.76398C2.59986 2.58809 1.63856 3.75943 1.07091 5.12987C0.50325 6.50032 0.354725 8.00832 0.644114 9.46318C0.933503 10.918 1.64781 12.2544 2.6967 13.3033C3.7456 14.3522 5.08197 15.0665 6.53683 15.3559C7.99168 15.6453 9.49968 15.4968 10.8701 14.9291C12.2406 14.3614 13.4119 13.4001 14.236 12.1668C15.0601 10.9334 15.5 9.48336 15.5 8C15.5 7.01509 15.306 6.03982 14.9291 5.12987C14.5522 4.21993 13.9997 3.39314 13.3033 2.6967C12.6069 2.00026 11.7801 1.44781 10.8701 1.0709C9.96019 0.693993 8.98492 0.5 8 0.5ZM11.75 8.75H8.75V11.75C8.75 11.9489 8.67099 12.1397 8.53033 12.2803C8.38968 12.421 8.19892 12.5 8 12.5C7.80109 12.5 7.61033 12.421 7.46967 12.2803C7.32902 12.1397 7.25 11.9489 7.25 11.75V8.75H4.25C4.05109 8.75 3.86033 8.67098 3.71967 8.53033C3.57902 8.38968 3.5 8.19891 3.5 8C3.5 7.80109 3.57902 7.61032 3.71967 7.46967C3.86033 7.32902 4.05109 7.25 4.25 7.25H7.25V4.25C7.25 4.05109 7.32902 3.86032 7.46967 3.71967C7.61033 3.57902 7.80109 3.5 8 3.5C8.19892 3.5 8.38968 3.57902 8.53033 3.71967C8.67099 3.86032 8.75 4.05109 8.75 4.25V7.25H11.75C11.9489 7.25 12.1397 7.32902 12.2803 7.46967C12.421 7.61032 12.5 7.80109 12.5 8C12.5 8.19891 12.421 8.38968 12.2803 8.53033C12.1397 8.67098 11.9489 8.75 11.75 8.75Z"
+          fill="var(--re-data-grid-expander-color)"
+        />
+      </svg>
+    }
+  ` }]
+        }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }] } });
+
+/* eslint-disable max-len */
+class SortIcon {
+    direction = input('asc', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    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"
+        fill="currentColor"
+      />
+    </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.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() }}">
+      <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"
+        fill="currentColor"
+      />
+    </svg>
+  `, 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 {
+    defaults = inject(DATA_GRID_CONFIG) || DEFAULT_DATA_GRID_DEFAULTS;
+    /**
+     * 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" }] : []));
+    /**
+     * 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(this.defaults.mode, ...(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" }] : []));
+    /**
+     * Function to determine if a row should become sticky at the top.
+     *
+     * When provided, rows matching this predicate will stick to the top
+     * of the scroll area as the user scrolls.
+     */
+    isRowSticky = input(undefined, ...(ngDevMode ? [{ debugName: "isRowSticky" }] : []));
+    isRowDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "isRowDisabled" }] : []));
+    /**
+     * Function to choose a custom template for a row.
+     *
+     * If it returns a template, the row will be rendered with it;
+     *  otherwise, the default row rendering is used.
+     */
+    getRowTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "getRowTemplate" }] : []));
+    /**
+     * Whether to add an index column showing row numbers.
+     *
+     * When enabled, it automatically adds a column displaying sequential row numbers.
+     */
+    hasIndexColumn = input(this.defaults.hasIndexColumn, { ...(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(this.defaults.selection, ...(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(this.defaults.pageSize, { ...(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(this.defaults.rowHeight, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: numberAttribute });
+    /**
+     * 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(this.defaults.height, ...(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 8.
+     */
+    virtualBuffer = input(this.defaults.virtualBuffer, ...(ngDevMode ? [{ debugName: "virtualBuffer" }] : []));
+    /**
+     * Locks vertical scrolling while keeping horizontal scrolling enabled.
+     *
+     * Useful when the grid height is fixed by the parent and vertical scrolling
+     * should be managed externally.
+     */
+    lockVerticalScroll = input(false, { ...(ngDevMode ? { debugName: "lockVerticalScroll" } : {}), transform: booleanAttribute });
+    /**
+     * Header group configuration for creating multi-level column headers.
+     *
+     * Allows grouping multiple columns under a common header label.
+     * Each group spans from a starting column to an ending column and can have a custom alignment.
+     *
+     * @example
+     * ```typescript
+     * headerGroups = [
+     *   {
+     *     key: 'personal-info',
+     *     title: 'Personal Information',
+     *     from: 'name',
+     *     to: 'email',
+     *     align: 'center'
+     *   }
+     * ];
+     * ```
+     */
+    headerGroups = input([], ...(ngDevMode ? [{ debugName: "headerGroups" }] : []));
+    /**
+     * 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 });
+    loadingMode = input(this.defaults.loadingMode, ...(ngDevMode ? [{ debugName: "loadingMode" }] : []));
+    deferContent = input(this.defaults.deferContent, { ...(ngDevMode ? { debugName: "deferContent" } : {}), transform: booleanAttribute });
+    deferHeader = input(this.defaults.deferHeader, { ...(ngDevMode ? { debugName: "deferHeader" } : {}), transform: booleanAttribute });
+    deferPinned = input(this.defaults.deferPinned, { ...(ngDevMode ? { debugName: "deferPinned" } : {}), transform: booleanAttribute });
+    deferCells = input(this.defaults.deferCells, { ...(ngDevMode ? { debugName: "deferCells" } : {}), transform: booleanAttribute });
+    deferIcons = input(this.defaults.deferIcons, { ...(ngDevMode ? { debugName: "deferIcons" } : {}), transform: booleanAttribute });
+    deferTooltip = input(this.defaults.deferTooltip, { ...(ngDevMode ? { debugName: "deferTooltip" } : {}), transform: booleanAttribute });
+    /**
+     * Function or property name for getting 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" }] : []));
+    /**
+     * 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(this.defaults.pageStartFromZero, { ...(ngDevMode ? { debugName: "pageStartFromZero" } : {}), transform: booleanAttribute });
+    sortMode = input(this.defaults.sortMode, ...(ngDevMode ? [{ debugName: "sortMode" }] : []));
+    /**
+     * 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();
+    multiSortChange = 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 row is right-clicked (context menu).
+     *
+     * Contains the clicked row data, its index, and the native mouse event.
+     */
+    rowContext = output();
+    /**
+     * Event emitted when a row is double-clicked.
+     *
+     * Contains the clicked row data, its index, and the native mouse event.
+     */
+    rowDoubleClick = output();
+    /**
+     * Event emitted when a cell is clicked.
+     *
+     * Contains the clicked row, column configuration, and row index.
+     */
+    cellClick = output();
+    /**
+     * Event emitted when a cell is right-clicked (context menu).
+     *
+     * Contains the clicked row, column configuration, row index, and the native mouse event.
+     */
+    cellContext = output();
+    /**
+     * Event emitted when a cell is double-clicked.
+     *
+     * Contains the clicked row, column configuration, row index, and the native mouse event.
+     */
+    cellDoubleClick = output();
+    vm = inject((DataGridVm));
+    selector = new Selector();
+    sortFeature = createGridSortFeature({
+        getSortMode: () => this.sortMode(),
+        getSortField: () => this.currentSortField,
+        setSortField: (value) => (this.currentSortField = value),
+        getSortOrder: () => this.currentSortOrder,
+        setSortOrder: (value) => (this.currentSortOrder = value),
+        getSorts: () => this.currentSorts,
+        setSorts: (sorts) => this.setCurrentSorts(sorts),
+        getSortOrderByKey: (key) => this.currentSortMap.get(key),
+        emitSortChange: (event) => this.sortChange.emit(event),
+        emitMultiSortChange: (sorts) => this.multiSortChange.emit({ sorts: [...sorts] }),
+    });
+    rowInteractionsFeature = createGridRowInteractionsFeature({
+        isRowDisabled: (row, index) => this.isDisabledRow(row, index),
+        getSelectionMode: () => this.selection().mode,
+        selectRow: (row) => this.selector.select(row),
+        emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+        emitCellClick: (payload) => this.cellClick.emit(payload),
+        emitCellContext: (payload) => this.cellContext.emit(payload),
+        emitCellDoubleClick: (payload) => this.cellDoubleClick.emit(payload),
+        emitRowClick: (payload) => this.rowClick.emit(payload),
+        emitRowContext: (payload) => this.rowContext.emit(payload),
+        emitRowDoubleClick: (payload) => this.rowDoubleClick.emit(payload),
+    });
+    headerGroupsFeature = createGridHeaderGroupsFeature({
+        getSortMode: () => this.sortMode(),
+        getSingleSortField: () => this.currentSortField,
+        getSingleSortOrder: () => this.currentSortOrder,
+        getMultiSortMap: () => this.currentSortMap,
+        getHeaderGroups: () => this.headerGroups(),
+        setVmHeaderGroups: (groups) => this.vm.headerGroups.set(groups),
+    });
+    infinityPageRequestFeature = createGridInfinityPageRequestFeature({
+        getPageSize: () => this.pageSize(),
+        isPageStartFromZero: () => this.pageStartFromZero(),
+        isLoading: () => this.loading(),
+        emitPageChange: (event) => this.pageChange.emit(event),
+    });
+    expanderFeature = createGridExpanderFeature({
+        runUntracked: (fn) => untracked(fn),
+        getVmColumns: () => this.vm.columns(),
+        setVmColumns: (columns) => this.vm.columns.set(columns),
+        getExtendedColumns: () => this.extendedColumns(),
+        getExpanderMap: () => this.expanderMap(),
+        setExpanderMap: (map) => this.expanderMap.set(map),
+        updateExpanderMap: (updater) => this.expanderMap.update(updater),
+    });
+    selectionReconcileFeature = createGridSelectionReconcileFeature({
+        getSelection: () => this.selection(),
+        getData: () => this.data() ?? [],
+        getSelectedKeys: () => this.selector.selectedKeys(),
+        setSelectedKeys: (keys) => this.selector.selectedKeys.set(keys),
+    });
+    gridApiFeature = createGridApiFeature({
+        getSelectionFeature: () => this.selectionFeatureRef,
+        getSelectionMode: () => this.selection().mode,
+        clearSelectedKeys: () => this.selector.selectedKeys.set([]),
+        selectAll: () => this.selector.selectAll(),
+        emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+        loadSelectionFeature: () => this.loadSelectionFeature(),
+        resetSort: () => this.sortFeature.resetSort(),
+        setSort: (sort) => this.sortFeature.setSort(sort),
+        setMultiSort: (sorts) => this.sortFeature.setMultiSort(sorts),
+    });
+    tooltipAdapterFeature = createGridTooltipAdapterFeature({
+        getTooltipFeature: () => this.tooltipFeatureRef,
+        loadTooltipFeature: () => this.loadTooltipFeature(),
+        getTooltipElement: () => this.tooltipEl()?.nativeElement ?? null,
+    });
+    virtualScrollFeature = createGridVirtualScrollFeature({
+        getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
+        getData: () => this.data() ?? [],
+        getRowHeight: () => this.rowHeight(),
+        getVirtualBuffer: () => this.virtualBuffer(),
+        getPinnedTopCount: () => this.vm.pinnedTop().length,
+        getMode: () => this.mode(),
+        getPageSize: () => this.pageSize(),
+        getRenderSlots: () => this.renderSlots(),
+        setRenderSlots: (slots) => this.renderSlots.set(slots),
+        getLastRange: () => ({ start: this.lastStartIndex, end: this.lastEndIndex }),
+        setLastRange: ({ start, end }) => {
+            this.lastStartIndex = start;
+            this.lastEndIndex = end;
+        },
+        setStartIndex: (value) => (this.startIndex = value),
+        setRenderCount: (value) => (this.renderCount = value),
+        updateStickyRow: (scrollTop, rowHeight, pinnedTopH) => this.updateStickyRow(scrollTop, rowHeight, pinnedTopH),
+        requestInfinityIfNeeded: (state) => this.infinityPageRequestFeature.requestIfNeeded(state),
+        finalizeScroll: () => this.finalizeScroll(),
+    });
+    resizeObserverFeature = createGridResizeObserverFeature({
+        getRootElement: () => this.rootEl()?.nativeElement ?? null,
+        getResizeDebounceMs: () => this.defaults.debounce.resize,
+        addSubscription: (subscription) => this.subscription.add(subscription),
+        onWidthChanged: (width) => {
+            this.vm.containerWidth.set(width);
+            this.headerMeasureFeature.scheduleMeasure();
+        },
+        onHeightChanged: () => {
+            this.onVerticalScroll();
+        },
+    });
+    scrollLoopFeature = createGridScrollLoopFeature({
+        getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
+        runOutsideAngular: (fn) => this.ngZone.runOutsideAngular(fn),
+        runInAngular: (fn) => this.ngZone.run(fn),
+        addSubscription: (subscription) => this.subscription.add(subscription),
+        onVerticalScroll: () => this.onVerticalScroll(),
+        onHorizontalScroll: () => this.onHorizontalScroll(),
+        onStickySchedule: () => this.scheduleStickyUpdate(),
+        hideTooltip: () => this.hideTooltip(),
+        onInitialVerticalScroll: () => this.onVerticalScroll(true),
+    });
+    lifecycleInitFeature = createGridLifecycleInitFeature({
+        registerAfterRenderEffect: (fn) => afterRenderEffect(fn),
+        registerEffect: (fn) => effect(fn),
+        registerOnDestroy: (fn) => inject(DestroyRef).onDestroy(fn),
+    });
+    stickyOrchestrationFeature = createGridStickyOrchestrationFeature({
+        getData: () => this.data() ?? [],
+        getStickyPredicate: () => this.isRowSticky(),
+        setStickyIndexes: (indexes) => this.stickyIndexes.set(indexes),
+        updateStickyFromScroll: () => this.updateStickyFromScroll(),
+        ensureStickyFeatureLoaded: () => {
+            void this.loadStickyFeature();
+        },
+    });
+    headerMeasureFeature = createGridHeaderMeasureFeature({
+        getHeaderElement: () => this.headerEl()?.nativeElement ?? null,
+        setHeaderHeight: (height) => this.headerHeight.set(height),
+        requestAnimationFrame: (cb) => requestAnimationFrame(cb),
+        cancelAnimationFrame: (id) => cancelAnimationFrame(id),
+    });
+    selectionFeatureRef;
+    selectionFeaturePromise;
+    tooltipFeatureRef;
+    tooltipFeaturePromise;
+    overlayScrollFeatureRef;
+    overlayScrollFeaturePromise;
+    stickyFeatureRef;
+    stickyFeaturePromise;
+    rootEl = viewChild('root', ...(ngDevMode ? [{ debugName: "rootEl" }] : []));
+    scrollEl = viewChild('scroll', ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
+    headerEl = viewChild('header', ...(ngDevMode ? [{ debugName: "headerEl" }] : []));
+    ngZone = inject(NgZone);
+    cellTypedSlotRefs = contentChildren(DataGridTypeCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTypedSlotRefs" }] : []));
+    cellDataSlotRefs = contentChildren(DataGridCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellDataSlotRefs" }] : []));
+    declarativeColumnRefs = contentChildren(DataGridDeclarativeColumn, ...(ngDevMode ? [{ debugName: "declarativeColumnRefs" }] : []));
+    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" }] : []));
+    stickyRowSlotRefs = contentChildren(DataGridStickyRowDirective, ...(ngDevMode ? [{ debugName: "stickyRowSlotRefs" }] : []));
+    rowSlotRefs = contentChildren(DataGridRowDirective, ...(ngDevMode ? [{ debugName: "rowSlotRefs" }] : []));
+    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" }] : []));
+    stickyRowTpl = computed(() => this.stickyRowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "stickyRowTpl" }] : []));
+    rowTpl = computed(() => this.rowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "rowTpl" }] : []));
+    renderSlots = signal([], ...(ngDevMode ? [{ debugName: "renderSlots" }] : []));
+    renderCount = 0;
+    lastStartIndex = -1;
+    lastEndIndex = -1;
+    startIndex = 0;
+    headerHeight = signal(this.defaults.headerHeight, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    tooltipEl = viewChild('tooltip', ...(ngDevMode ? [{ debugName: "tooltipEl" }] : []));
+    tooltipState = signal({
+        text: '',
+        x: 0,
+        y: 0,
+        visible: false,
+    }, ...(ngDevMode ? [{ debugName: "tooltipState" }] : []));
+    stickyRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "stickyRowIndex" }] : []));
+    stickyRowTopPx = signal(0, ...(ngDevMode ? [{ debugName: "stickyRowTopPx" }] : []));
+    stickyRowData = computed(() => {
+        const index = this.stickyRowIndex();
+        const rows = this.data();
+        if (index === null || index < 0 || index >= rows.length) {
+            return null;
+        }
+        return rows[index];
+    }, ...(ngDevMode ? [{ debugName: "stickyRowData" }] : []));
+    stickyIndexes = signal([], ...(ngDevMode ? [{ debugName: "stickyIndexes" }] : []));
+    expanderMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "expanderMap" }] : []));
+    declarativeColumns = computed(() => normalizeDeclarativeColumns(this.declarativeColumnRefs().map((columnRef) => columnRef.toDeclarativeColumn()), this.rowKey()), ...(ngDevMode ? [{ debugName: "declarativeColumns" }] : []));
+    sourceColumns = computed(() => mergeDeclarativeColumns(this.declarativeColumns().columns, this.columns()), ...(ngDevMode ? [{ debugName: "sourceColumns" }] : []));
+    slotsFeature = createGridSlotsFeature({
+        clearTypeTemplates: () => this.vm.globalTypeCellTpls.clear(),
+        clearDataTemplates: () => this.vm.globalDataCellTpls.clear(),
+        clearRowTemplates: () => this.vm.globalRowCellTpls.clear(),
+        setTypeTemplate: (type, tpl) => this.vm.globalTypeCellTpls.set(type, tpl),
+        setDataTemplate: (key, tpl) => this.vm.globalDataCellTpls.set(key, tpl),
+        setRowTemplate: (key, tpl) => this.vm.globalRowCellTpls.set(key, tpl),
+        getTypeTemplateRefs: () => this.cellTypedSlotRefs(),
+        getDataTemplateRefs: () => this.cellDataSlotRefs(),
+        getHeaderTemplateRefs: () => this.headerSlotRefs(),
+        getRowTemplateEntries: () => this.declarativeColumns().rowCellTemplatesByKey.entries(),
+        getExtendedColumns: () => this.extendedColumns(),
+    });
+    extendedColumns = computed(() => {
+        const hasSelection = this.selection().mode !== 'none';
+        const hasIndex = this.hasIndexColumn();
+        const newColumns = [];
+        hasSelection && newColumns.push(GRID_CHECKBOX_COLUMN);
+        hasIndex && newColumns.push(GRID_INDEX_COLUMN);
+        return [...newColumns, ...this.sourceColumns()];
+    }, ...(ngDevMode ? [{ debugName: "extendedColumns" }] : []));
+    /**
+     * Computed CSS height value based on height setting.
+     */
+    styleHeight = computed(() => {
+        const height = this.height();
+        if (typeof height === 'number') {
+            return `${height}px`;
+        }
+        else if (height === 'full') {
+            return '100%';
+        }
+        return 'var(--re-data-grid-height)';
+    }, ...(ngDevMode ? [{ debugName: "styleHeight" }] : []));
+    hideSbTimeout;
+    scrollbarRafId = null;
+    stickyRafId = null;
+    currentSortField;
+    currentSortOrder = 'asc';
+    currentSorts = [];
+    currentSortMap = new Map();
+    subscription = new Subscription();
+    constructor() {
+        this.lifecycleInitFeature.init({
+            afterRender: [
+                () => {
+                    this.initRefs();
+                    this.headerMeasureFeature.scheduleMeasure();
+                    this.initScroll();
+                    this.initObserver();
+                },
+                () => this.initSelector(),
+                () => {
+                    this.initVm();
+                    this.initSort();
+                    this.initExpander();
+                },
+            ],
+            effects: [
+                () => {
+                    this.data();
+                    this.rowHeight();
+                    this.mode();
+                    this.onVerticalScroll(true);
+                },
+                () => {
+                    this.pinnedRows();
+                    this.vm.containerWidth();
+                    this.onVerticalScroll();
+                },
+                () => this.infinityPageRequestFeature.onDataTotalChanged(this.data()?.length ?? 0),
+                () => {
+                    const selection = this.selection();
+                    if ('defaultSelected' in selection) {
+                        this.selector.selectedKeys.set(selection.defaultSelected || []);
+                    }
+                    if (selection.mode !== 'none') {
+                        void this.loadSelectionFeature();
+                    }
+                },
+                () => {
+                    this.selection();
+                    this.data();
+                    this.selectionReconcileFeature.reconcile();
+                },
+                () => {
+                    this.stickyOrchestrationFeature.reconcile();
+                },
+                () => {
+                    this.tooltipAdapterFeature.preloadForColumns(this.extendedColumns());
+                },
+            ],
+            onDestroy: () => {
+                this.subscription.unsubscribe();
+                this.resizeObserverFeature.disconnect();
+                this.infinityPageRequestFeature.reset();
+                clearTimeout(this.hideSbTimeout);
+                this.headerMeasureFeature.clearMeasure();
+                this.clearScrollRaf();
+                this.clearScrollbarRaf();
+                this.clearStickyRaf();
+            },
+        });
+    }
+    /** Clears current selection and emits `selectChange`. */
+    clearSelection() {
+        this.gridApiFeature.clearSelection();
+    }
+    /** Selects all currently loaded rows (multi mode only) and emits `selectChange`. */
+    selectAllLoaded() {
+        this.gridApiFeature.selectAllLoaded();
+    }
+    /** Resets sorting state and emits sort events. */
+    resetSort() {
+        this.gridApiFeature.resetSort();
+    }
+    /** Sets a single-column sorting state and emits sort events. */
+    setSort(sort) {
+        this.gridApiFeature.setSort(sort);
+    }
+    /** Sets multi-column sorting state and emits sort events. */
+    setMultiSort(sorts) {
+        this.gridApiFeature.setMultiSort(sorts);
+    }
+    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) {
+        this.sortFeature.onSort(col.sortKey);
+    }
+    /**
+     * 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
+     * @param event
+     */
+    onCellClick(row, col, index, event) {
+        this.rowInteractionsFeature.onCellClick(row, col, index, event);
+    }
+    onSelectAll(event) {
+        if (this.selectionFeatureRef) {
+            this.selectionFeatureRef.onSelectAll(event);
+            return;
+        }
+        event?.preventDefault();
+        event?.stopPropagation();
+        this.selectAllLoaded();
+        void this.loadSelectionFeature();
+    }
+    onCheckboxToggle(row, index, event) {
+        if (this.selectionFeatureRef) {
+            this.selectionFeatureRef.onCheckboxToggle(row, index, event);
+            return;
+        }
+        event?.preventDefault();
+        event?.stopPropagation();
+        if (this.isDisabledRow(row, index) || this.selection().mode === 'none') {
+            return;
+        }
+        this.selectChange.emit({ selected: this.selector.select(row) });
+        void this.loadSelectionFeature();
+    }
+    onSelectAllKeydown(event) {
+        const key = event.key;
+        if (key !== 'Enter' && key !== ' ') {
+            return;
+        }
+        this.onSelectAll(event);
+    }
+    onCheckboxKeydown(row, index, event) {
+        const key = event.key;
+        if (key !== 'Enter' && key !== ' ') {
+            return;
+        }
+        this.onCheckboxToggle(row, index, event);
+    }
+    onCellContext(row, col, index, event) {
+        this.rowInteractionsFeature.onCellContext(row, col, index, event);
+    }
+    onCellDoubleClick(row, col, index, event) {
+        this.rowInteractionsFeature.onCellDoubleClick(row, col, index, event);
+    }
+    onRowClick(row, index, event) {
+        this.rowInteractionsFeature.onRowClick(row, index, event);
+    }
+    onRowContext(row, index, event) {
+        this.rowInteractionsFeature.onRowContext(row, index, event);
+    }
+    onRowDoubleClick(row, index, event) {
+        this.rowInteractionsFeature.onRowDoubleClick(row, index, event);
+    }
+    isExpandable(column) {
+        return this.expanderFeature.isExpandable(column);
+    }
+    /**
+     * 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) {
+        this.expanderFeature.onExpand(column);
+    }
+    /**
+     * 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) {
+        this.virtualScrollFeature.onVerticalScroll(initial);
+    }
+    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) {
+        if (this.overlayScrollFeatureRef) {
+            this.overlayScrollFeatureRef.onThumbDown(e);
+            return;
+        }
+        void this.loadOverlayScrollFeature().then((feature) => feature.onThumbDown(e));
+    }
+    showScrollbar() {
+        if (this.overlayScrollFeatureRef) {
+            this.overlayScrollFeatureRef.showScrollbar();
+            return;
+        }
+        this.vm.scrollbarVisible.set(true);
+        clearTimeout(this.hideSbTimeout);
+        void this.loadOverlayScrollFeature();
+    }
+    hideScrollbarSoon(delay = 1200) {
+        if (this.overlayScrollFeatureRef) {
+            this.overlayScrollFeatureRef.hideScrollbarSoon(delay);
+            return;
+        }
+        if (this.vm.dragging) {
+            return;
+        }
+        clearTimeout(this.hideSbTimeout);
+        this.hideSbTimeout = setTimeout(() => this.vm.scrollbarVisible.set(false), delay);
+        void this.loadOverlayScrollFeature();
+    }
+    trackPinnedRow = (row) => row.order;
+    isDisabledRow(row, index) {
+        if (index < 0) {
+            return false;
+        }
+        const predicate = this.isRowDisabled();
+        return !!predicate && predicate(row, index);
+    }
+    cellClass(col, row) {
+        if (typeof col.cellClass === 'function') {
+            return col.cellClass(row);
+        }
+        return col.cellClass;
+    }
+    ariaSort(col) {
+        return this.headerGroupsFeature.ariaSort(col);
+    }
+    sortOrderFor(col) {
+        return this.headerGroupsFeature.sortOrderFor(col);
+    }
+    isActiveSort(col) {
+        return this.headerGroupsFeature.isActiveSort(col);
+    }
+    showTooltip(event, row, col, index) {
+        this.tooltipAdapterFeature.showTooltip(event, row, col, index);
+    }
+    hideTooltip() {
+        this.tooltipAdapterFeature.hideTooltip();
+    }
+    isStickyRowIndex(index) {
+        return this.stickyFeatureRef?.isStickyRowIndex(index) ?? false;
+    }
+    resolveRowTemplate(row, index) {
+        const resolver = this.getRowTemplate();
+        if (resolver) {
+            const resolved = resolver(row, index);
+            if (resolved) {
+                return resolved;
+            }
+        }
+        return this.rowTpl()?.tpl ?? null;
+    }
+    initVm() {
+        this.vm.scrollEl.set(this.scrollEl());
+        this.vm.columns.set(this.extendedColumns());
+        this.vm.pinnedRows.set(this.pinnedRows());
+        this.headerGroupsFeature.syncHeaderGroups();
+        this.headerMeasureFeature.scheduleMeasure();
+    }
+    initSelector() {
+        this.selector.data.set(this.data());
+        this.selector.selection.set(this.selection());
+    }
+    initRefs() {
+        this.slotsFeature.initRefs();
+    }
+    initSort() {
+        if (this.sortMode() === 'single' && this.currentSorts.length > 1) {
+            const [first] = this.currentSorts;
+            this.setCurrentSorts([first]);
+            this.currentSortField = `${first.key}`;
+            this.currentSortOrder = first.order;
+            return;
+        }
+        if (this.currentSorts.length > 0) {
+            const [last] = this.currentSorts;
+            this.currentSortField = `${last.key}`;
+            this.currentSortOrder = last.order;
+            return;
+        }
+        const firstSortable = this.extendedColumns()?.find((c) => !!c.sortKey);
+        if (firstSortable) {
+            this.currentSortField = firstSortable.sortKey;
+            this.currentSortOrder = 'asc';
+            this.setCurrentSorts([{ key: firstSortable.sortKey, order: 'asc' }]);
+        }
+    }
+    initScroll() {
+        void this.loadOverlayScrollFeature();
+        this.scrollLoopFeature.initScroll();
+    }
+    initObserver() {
+        this.resizeObserverFeature.initObserver();
+    }
+    initExpander() {
+        this.expanderFeature.initExpander();
+    }
+    setCurrentSorts(sorts) {
+        this.currentSorts = sorts;
+        this.currentSortMap = new Map(sorts.map((item) => [String(item.key), item.order]));
+    }
+    loadSelectionFeature() {
+        if (this.selectionFeatureRef) {
+            return Promise.resolve(this.selectionFeatureRef);
+        }
+        if (this.selectionFeaturePromise) {
+            return this.selectionFeaturePromise;
+        }
+        this.selectionFeaturePromise = import('./reforgium-data-grid-grid-selection.feature-CGRNpMeD.mjs').then(({ createGridSelectionFeature }) => {
+            const feature = createGridSelectionFeature({
+                getSelectionMode: () => this.selection().mode,
+                clearSelectedKeys: () => this.selector.selectedKeys.set([]),
+                selectAll: () => this.selector.selectAll(),
+                selectRow: (row) => this.selector.select(row),
+                emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+                isRowDisabled: (row, index) => this.isDisabledRow(row, index),
+            });
+            this.selectionFeatureRef = feature;
+            return feature;
+        });
+        return this.selectionFeaturePromise;
+    }
+    loadTooltipFeature() {
+        if (this.tooltipFeatureRef) {
+            return Promise.resolve(this.tooltipFeatureRef);
+        }
+        if (this.tooltipFeaturePromise) {
+            return this.tooltipFeaturePromise;
+        }
+        this.tooltipFeaturePromise = import('./reforgium-data-grid-grid-tooltip.feature-CMo88m8o.mjs').then(({ createGridTooltipFeature }) => {
+            const feature = createGridTooltipFeature({
+                getTooltipState: () => this.tooltipState(),
+                setTooltipState: (state) => this.tooltipState.set(state),
+                patchTooltipState: (patch) => this.tooltipState.update((prev) => ({ ...prev, ...patch })),
+                requestPositioning: () => requestAnimationFrame(() => this.positionTooltip()),
+            });
+            this.tooltipFeatureRef = feature;
+            return feature;
+        });
+        return this.tooltipFeaturePromise;
+    }
+    loadOverlayScrollFeature() {
+        if (this.overlayScrollFeatureRef) {
+            return Promise.resolve(this.overlayScrollFeatureRef);
+        }
+        if (this.overlayScrollFeaturePromise) {
+            return this.overlayScrollFeaturePromise;
+        }
+        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-DRUc6eDp.mjs').then(({ createGridOverlayScrollFeature }) => {
+            const feature = createGridOverlayScrollFeature({
+                getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
+                getThumbTop: () => this.vm.thumbTopPx(),
+                setThumbTop: (value) => this.vm.thumbTopPx.set(value),
+                calcScrollbar: () => this.vm.calcScrollbar(),
+                isDragging: () => this.vm.dragging,
+                setDragging: (value) => (this.vm.dragging = value),
+                setScrollbarVisible: (value) => this.vm.scrollbarVisible.set(value),
+                getHideTimeout: () => this.hideSbTimeout,
+                setHideTimeout: (value) => (this.hideSbTimeout = value),
+                getScrollbarRafId: () => this.scrollbarRafId,
+                setScrollbarRafId: (value) => (this.scrollbarRafId = value),
+            });
+            this.overlayScrollFeatureRef = feature;
+            return feature;
+        });
+        return this.overlayScrollFeaturePromise;
+    }
+    loadStickyFeature() {
+        if (this.stickyFeatureRef) {
+            return Promise.resolve(this.stickyFeatureRef);
+        }
+        if (this.stickyFeaturePromise) {
+            return this.stickyFeaturePromise;
+        }
+        this.stickyFeaturePromise = import('./reforgium-data-grid-grid-sticky.feature-DBpn_6R8.mjs').then(({ createGridStickyFeature }) => {
+            const feature = createGridStickyFeature({
+                getStickyIndexes: () => this.stickyIndexes(),
+                getStickyRowIndex: () => this.stickyRowIndex(),
+                setStickyRowIndex: (value) => this.stickyRowIndex.set(value),
+                setStickyRowTopPx: (value) => this.stickyRowTopPx.set(value),
+                getHeaderHeight: () => this.headerHeight(),
+                getStickyRafId: () => this.stickyRafId,
+                setStickyRafId: (value) => (this.stickyRafId = value),
+                runInAngular: (fn) => this.ngZone.run(fn),
+                getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
+                getRowHeight: () => this.rowHeight(),
+                getPinnedTopCount: () => this.vm.pinnedTop().length,
+            });
+            this.stickyFeatureRef = feature;
+            return feature;
+        });
+        return this.stickyFeaturePromise;
+    }
+    positionTooltip() {
+        this.tooltipAdapterFeature.positionTooltip();
+    }
+    scheduleScrollbarUpdate() {
+        if (this.overlayScrollFeatureRef) {
+            this.overlayScrollFeatureRef.scheduleScrollbarUpdate();
+            return;
+        }
+        this.vm.calcScrollbar();
+        void this.loadOverlayScrollFeature();
+    }
+    finalizeScroll() {
+        if (this.overlayScrollFeatureRef) {
+            this.overlayScrollFeatureRef.finalizeScroll();
+            return;
+        }
+        this.scheduleScrollbarUpdate();
+        this.showScrollbar();
+        this.hideScrollbarSoon();
+    }
+    clearScrollRaf() {
+        this.scrollLoopFeature.clearScrollRaf();
+    }
+    clearScrollbarRaf() {
+        if (!this.overlayScrollFeatureRef) {
+            return;
+        }
+        this.overlayScrollFeatureRef.clearScrollbarRaf();
+    }
+    scheduleStickyUpdate() {
+        if (!this.isRowSticky()) {
+            return;
+        }
+        if (this.stickyFeatureRef) {
+            this.stickyFeatureRef.scheduleStickyUpdate();
+            return;
+        }
+        void this.loadStickyFeature().then((feature) => feature.scheduleStickyUpdate());
+    }
+    clearStickyRaf() {
+        if (!this.stickyFeatureRef) {
+            return;
+        }
+        this.stickyFeatureRef.clearStickyRaf();
+    }
+    updateStickyRow(scrollTop, rowHeight, pinnedTopH) {
+        if (!this.isRowSticky()) {
+            this.stickyRowIndex.set(null);
+            return;
+        }
+        if (this.stickyFeatureRef) {
+            this.stickyFeatureRef.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
+            return;
+        }
+        void this.loadStickyFeature().then((feature) => feature.updateStickyRow(scrollTop, rowHeight, pinnedTopH));
+    }
+    updateStickyFromScroll() {
+        if (!this.isRowSticky()) {
+            this.stickyRowIndex.set(null);
+            return;
+        }
+        if (this.stickyFeatureRef) {
+            this.stickyFeatureRef.updateStickyFromScroll();
+            return;
+        }
+        void this.loadStickyFeature().then((feature) => feature.updateStickyFromScroll());
+    }
+    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 }, isRowSticky: { classPropertyName: "isRowSticky", publicName: "isRowSticky", isSignal: true, isRequired: false, transformFunction: null }, isRowDisabled: { classPropertyName: "isRowDisabled", publicName: "isRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, getRowTemplate: { classPropertyName: "getRowTemplate", publicName: "getRowTemplate", 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 }, lockVerticalScroll: { classPropertyName: "lockVerticalScroll", publicName: "lockVerticalScroll", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null }, deferContent: { classPropertyName: "deferContent", publicName: "deferContent", isSignal: true, isRequired: false, transformFunction: null }, deferHeader: { classPropertyName: "deferHeader", publicName: "deferHeader", isSignal: true, isRequired: false, transformFunction: null }, deferPinned: { classPropertyName: "deferPinned", publicName: "deferPinned", isSignal: true, isRequired: false, transformFunction: null }, deferCells: { classPropertyName: "deferCells", publicName: "deferCells", isSignal: true, isRequired: false, transformFunction: null }, deferIcons: { classPropertyName: "deferIcons", publicName: "deferIcons", isSignal: true, isRequired: false, transformFunction: null }, deferTooltip: { classPropertyName: "deferTooltip", publicName: "deferTooltip", 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 }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", multiSortChange: "multiSortChange", selectChange: "selectChange", rowClick: "rowClick", rowContext: "rowContext", rowDoubleClick: "rowDoubleClick", cellClick: "cellClick", cellContext: "cellContext", cellDoubleClick: "cellDoubleClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellTypedSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "cellDataSlotRefs", predicate: DataGridCellTemplateDirective, isSignal: true }, { propertyName: "declarativeColumnRefs", predicate: DataGridDeclarativeColumn, 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 }, { propertyName: "stickyRowSlotRefs", predicate: DataGridStickyRowDirective, isSignal: true }, { propertyName: "rowSlotRefs", predicate: DataGridRowDirective, 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 }, { propertyName: "tooltipEl", first: true, predicate: ["tooltip"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\r\n@let empty = !loading() && !items?.length;\r\n@let notEmpty = !!items?.length;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = loading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = loading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = loading() && spinnerMode;\r\n@let extraInfinitySkeletonRows = showInfinitySkeleton ? skeletonRowsCount : 0;\r\n\r\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\r\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\r\n@let rowH = rowHeight();\r\n@let contentW = vm.contentWidth();\r\n@let cols = vm.columnsToShow();\r\n@let stickyTop = pinnedTopH + headerHeight();\r\n@let normalizedHeaderGroups = vm.normalizedHeaderGroups();\r\n@let stickyRow = stickyRowData();\r\n@let stickyIndex = stickyRowIndex();\r\n\r\n<div\r\n  #root\r\n  class=\"re-dg-root\"\r\n  [class.loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\">\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        <span class=\"re-dg-loader-spinner\" aria-label=\"Loading\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    #scroll\r\n    class=\"re-dg-body\"\r\n    role=\"rowgroup\"\r\n    (mouseenter)=\"showScrollbar()\"\r\n    (mouseleave)=\"hideScrollbarSoon()\"\r\n  >\r\n    <ng-template #headerContent>\r\n      <div\r\n        class=\"re-dg-header\"\r\n        role=\"rowgroup\"\r\n        [style.width.px]=\"vm.contentWidth()\"\r\n        [style.min-width.%]=\"100\"\r\n      >\r\n      <div #header class=\"re-dg-header-rows\">\r\n        @if (normalizedHeaderGroups.length) {\r\n          <div class=\"re-dg-row re-dg-header-group-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n            @for (group of normalizedHeaderGroups; track group.key) {\r\n              @let groupStickyLeft = !!group.startKey && !!group.endKey && vm.isStickyLeft(group.startKey) && vm.isStickyLeft(group.endKey);\r\n              @let groupStickyRight = !!group.startKey && !!group.endKey && vm.isStickyRight(group.startKey) && vm.isStickyRight(group.endKey);\r\n\r\n              <div\r\n                class=\"re-dg-header-cell re-dg-header-group-cell\"\r\n                role=\"columnheader\"\r\n                [class.sticky-left]=\"groupStickyLeft\"\r\n                [class.sticky-right]=\"groupStickyRight\"\r\n                [style.left.px]=\"groupStickyLeft && group.startKey ? vm.stickyOffset(group.startKey, 'left') : null\"\r\n                [style.right.px]=\"groupStickyRight && group.endKey ? vm.stickyOffset(group.endKey, 'right') : null\"\r\n                [style.width.px]=\"group.widthPx\"\r\n                [style.justify-content]=\"group.align || 'left'\"\r\n                [title]=\"group.title || ''\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: group.title || '' }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ group.title || '' }}</span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"re-dg-row re-dg-header-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"isActiveSort(col)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\r\n              [title]=\"col.header\"\r\n              (click)=\"col.sortKey && onSort(col)\"\r\n              (keydown.enter)=\"col.sortKey && onSort(col)\"\r\n            >\r\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n              @let isMultiSelect = selection().mode === 'multi';\r\n\r\n              @if (isCheckbox && isMultiSelect) {\r\n                @if (deferIcons()) {\r\n                  @defer (when true) {\r\n                    <re-checkbox-ic\n                      aria-label=\"Select loaded rows\"\n                      [state]=\"selector.isAllSelected()\"\n                      tabindex=\"0\"\n                      (click)=\"onSelectAll($event)\"\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\n                      (keydown.space)=\"onSelectAllKeydown($event)\" />\n                  } @placeholder {\r\n                    <span class=\"re-dg-icon-placeholder\"></span>\r\n                  } @loading {\r\n                    <span class=\"re-dg-icon-placeholder\"></span>\r\n                  }\r\n                } @else {\r\n                  <re-checkbox-ic\n                    aria-label=\"Select loaded rows\"\n                    [state]=\"selector.isAllSelected()\"\n                    tabindex=\"0\"\n                    (click)=\"onSelectAll($event)\"\n                    (keydown.enter)=\"onSelectAllKeydown($event)\"\n                    (keydown.space)=\"onSelectAllKeydown($event)\" />\n                }\r\n              } @else {\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ col.header }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = sortOrderFor(col);\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-sort-ic [direction]=\"direction\" />\r\n                    }\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\r\n                  @let expanded = expanderMap().get(col.key);\r\n\r\n                  @if (expanderTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-expand-ic [expanded]=\"expanded\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-expand-ic [expanded]=\"expanded\" />\r\n                    }\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n        <!-- PINNED TOP ROWS -->\r\n        @if (notEmpty) {\r\n          <ng-template #pinnedTopContent>\r\n            @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n\r\n          @if (deferPinned()) {\r\n            @defer (when true) {\r\n              <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n            } @placeholder {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            } @loading {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\n          aria-label=\"Toggle row selection\"\n          [state]=\"selector.isSelected(row)\"\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\n          (click)=\"onCheckboxToggle(row, index, $event)\"\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\" />\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" />\r\n          } @placeholder {\r\n            <span class=\"re-dg-cell-deferred\"></span>\r\n          } @loading {\r\n            <span class=\"re-dg-cell-deferred\"></span>\r\n          }\r\n        } @else {\r\n          <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.tabindex]=\"0\"\r\n                (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\r\n                (mouseleave)=\"hideTooltip()\"\r\n                (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\r\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\r\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\r\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"dataCellContent\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: stickyRow, col: col, index: stickyIndex }\"\r\n              />\r\n            </div>\r\n          }\r\n        }\r\n        </div>\r\n      }\r\n\r\n      @if (empty) {\r\n        @let emptyTemplate = emptyTpl()?.tpl;\r\n\r\n        <div class=\"re-dg-empty\">\r\n          @if (emptyTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\r\n          } @else {\r\n            <span class=\"re-dg-empty-text\">{{ defaults.translations.emptyState }}</span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Content -->\r\n      @if (notEmpty) {\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(items.length + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n        @for (slot of renderSlots(); track slot) {\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = items[rowIndex];\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.tabindex]=\"0\"\r\n                    (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\r\n                    (mouseleave)=\"hideTooltip()\"\r\n                    (click)=\"onCellClick(row, col, rowIndex, $event);\"\r\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\r\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\r\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\r\n                >\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dataCellContent\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row, col: col, index: rowIndex }\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n            </div>\r\n          }\r\n        }\r\n      }\r\n\r\n      @if (showInfinitySkeleton || showPaginationSkeleton) {\r\n        @let loadingTemplate = loadingTpl();\r\n\r\n        @if (loadingTemplate?.tpl) {\r\n          <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n        } @else {\r\n          @for (si of [0, 1, 2, 3]; track si) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row re-dg-skeleton-row\"\r\n              role=\"row\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\"\r\n            >\r\n              <span class=\"re-dg-skeleton-row-line\"></span>\r\n            </div>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- PINNED BOTTOM ROWS -->\r\n      @if (notEmpty) {\r\n        <ng-template #pinnedBottomContent>\r\n          <div class=\"re-dg-footer\" role=\"rowgroup\">\r\n            @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (deferPinned()) {\r\n          @defer (when true) {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedBottomContent\" />\r\n          } @placeholder {\r\n            <div class=\"re-dg-footer re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n          } @loading {\r\n            <div class=\"re-dg-footer re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n          }\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"pinnedBottomContent\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    @if (deferContent()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"gridContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH * 3\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH * 3\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"gridContent\" />\r\n    }\r\n  </div>\r\n\r\n  <ng-template #pinnedRowCells let-row>\r\n    @for (col of cols; track col.key) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.tabindex]=\"isCheckbox || isIndex ? -1 : 0\"\r\n        (mouseenter)=\"!isCheckbox && !isIndex && showTooltip($event, $any(row), col, -1)\"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event);\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1 }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        [class.visible]=\"tooltipStateValue.visible\"\r\n        [style.left.px]=\"tooltipStateValue.x\"\r\n        [style.top.px]=\"tooltipStateValue.y\"\r\n      >\r\n        @if (tooltipStateValue.tpl) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n            [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n          />\r\n        } @else {\r\n          {{ tooltipStateValue.text }}\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @let tooltipStateValue = tooltipState();\r\n    <div\r\n      class=\"re-dg-tooltip\"\r\n      #tooltip\r\n      [class.visible]=\"tooltipStateValue.visible\"\r\n      [style.left.px]=\"tooltipStateValue.x\"\r\n      [style.top.px]=\"tooltipStateValue.y\"\r\n    >\r\n      @if (tooltipStateValue.tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n          [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n        />\r\n      } @else {\r\n        {{ tooltipStateValue.text }}\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Overlay scrollbar -->\r\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\r\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\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-neutral, #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-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--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-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--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-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--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-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-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);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width: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-width:0;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-root.lock-vertical-scroll .re-dg-body{overflow-x:auto;overflow-y:hidden}.re-dg-root.lock-vertical-scroll .re-dg-scrollbar{display:none!important}.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:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.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-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.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;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.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:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.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-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-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-row-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.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-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;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.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)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.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-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.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-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-skeleton-row-line{display:block;width:var(--re-data-grid-skeleton-width);height:var(--re-data-grid-skeleton-height);border-radius:var(--re-data-grid-skeleton-rounded);background:linear-gradient(90deg,var(--re-data-grid-skeleton-line) 0%,var(--re-data-grid-skeleton-shine) 50%,var(--re-data-grid-skeleton-line) 100%);background-size:200% 100%;animation:re-dg-skeleton 1.2s ease-in-out infinite}@keyframes re-dg-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes re-dg-spinner{to{transform:rotate(360deg)}}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [CheckboxIcon], () => [SortIcon], () => [ExpandIcon], () => [NgTemplateOutlet], () => [NgTemplateOutlet], () => [DataGridCellComponent], () => [NgTemplateOutlet], () => [NgTemplateOutlet], () => [NgTemplateOutlet]] });
+}
+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], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = data();\r\n@let empty = !loading() && !items?.length;\r\n@let notEmpty = !!items?.length;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = loading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = loading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = loading() && spinnerMode;\r\n@let extraInfinitySkeletonRows = showInfinitySkeleton ? skeletonRowsCount : 0;\r\n\r\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\r\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\r\n@let rowH = rowHeight();\r\n@let contentW = vm.contentWidth();\r\n@let cols = vm.columnsToShow();\r\n@let stickyTop = pinnedTopH + headerHeight();\r\n@let normalizedHeaderGroups = vm.normalizedHeaderGroups();\r\n@let stickyRow = stickyRowData();\r\n@let stickyIndex = stickyRowIndex();\r\n\r\n<div\r\n  #root\r\n  class=\"re-dg-root\"\r\n  [class.loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\">\r\n      @let loadingTemplate = loadingTpl();\r\n\r\n      @if (loadingTemplate?.tpl) {\r\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n      } @else {\r\n        <span class=\"re-dg-loader-spinner\" aria-label=\"Loading\"></span>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    #scroll\r\n    class=\"re-dg-body\"\r\n    role=\"rowgroup\"\r\n    (mouseenter)=\"showScrollbar()\"\r\n    (mouseleave)=\"hideScrollbarSoon()\"\r\n  >\r\n    <ng-template #headerContent>\r\n      <div\r\n        class=\"re-dg-header\"\r\n        role=\"rowgroup\"\r\n        [style.width.px]=\"vm.contentWidth()\"\r\n        [style.min-width.%]=\"100\"\r\n      >\r\n      <div #header class=\"re-dg-header-rows\">\r\n        @if (normalizedHeaderGroups.length) {\r\n          <div class=\"re-dg-row re-dg-header-group-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n            @for (group of normalizedHeaderGroups; track group.key) {\r\n              @let groupStickyLeft = !!group.startKey && !!group.endKey && vm.isStickyLeft(group.startKey) && vm.isStickyLeft(group.endKey);\r\n              @let groupStickyRight = !!group.startKey && !!group.endKey && vm.isStickyRight(group.startKey) && vm.isStickyRight(group.endKey);\r\n\r\n              <div\r\n                class=\"re-dg-header-cell re-dg-header-group-cell\"\r\n                role=\"columnheader\"\r\n                [class.sticky-left]=\"groupStickyLeft\"\r\n                [class.sticky-right]=\"groupStickyRight\"\r\n                [style.left.px]=\"groupStickyLeft && group.startKey ? vm.stickyOffset(group.startKey, 'left') : null\"\r\n                [style.right.px]=\"groupStickyRight && group.endKey ? vm.stickyOffset(group.endKey, 'right') : null\"\r\n                [style.width.px]=\"group.widthPx\"\r\n                [style.justify-content]=\"group.align || 'left'\"\r\n                [title]=\"group.title || ''\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: group.title || '' }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ group.title || '' }}</span>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <div class=\"re-dg-row re-dg-header-row\" role=\"row\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n          @for (col of vm.columnsToShow(); track col.key) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"isActiveSort(col)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\r\n              [title]=\"col.header\"\r\n              (click)=\"col.sortKey && onSort(col)\"\r\n              (keydown.enter)=\"col.sortKey && onSort(col)\"\r\n            >\r\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n              @let isMultiSelect = selection().mode === 'multi';\r\n\r\n              @if (isCheckbox && isMultiSelect) {\r\n                @if (deferIcons()) {\r\n                  @defer (when true) {\r\n                    <re-checkbox-ic\n                      aria-label=\"Select loaded rows\"\n                      [state]=\"selector.isAllSelected()\"\n                      tabindex=\"0\"\n                      (click)=\"onSelectAll($event)\"\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\n                      (keydown.space)=\"onSelectAllKeydown($event)\" />\n                  } @placeholder {\r\n                    <span class=\"re-dg-icon-placeholder\"></span>\r\n                  } @loading {\r\n                    <span class=\"re-dg-icon-placeholder\"></span>\r\n                  }\r\n                } @else {\r\n                  <re-checkbox-ic\n                    aria-label=\"Select loaded rows\"\n                    [state]=\"selector.isAllSelected()\"\n                    tabindex=\"0\"\n                    (click)=\"onSelectAll($event)\"\n                    (keydown.enter)=\"onSelectAllKeydown($event)\"\n                    (keydown.space)=\"onSelectAllKeydown($event)\" />\n                }\r\n              } @else {\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ col.header }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = sortOrderFor(col);\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-sort-ic [direction]=\"direction\" />\r\n                    }\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\r\n                  @let expanded = expanderMap().get(col.key);\r\n\r\n                  @if (expanderTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"expanderTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: expanded }\" />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-expand-ic [expanded]=\"expanded\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-expand-ic [expanded]=\"expanded\" />\r\n                    }\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n        <!-- PINNED TOP ROWS -->\r\n        @if (notEmpty) {\r\n          <ng-template #pinnedTopContent>\r\n            @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n\r\n          @if (deferPinned()) {\r\n            @defer (when true) {\r\n              <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n            } @placeholder {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            } @loading {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\n          aria-label=\"Toggle row selection\"\n          [state]=\"selector.isSelected(row)\"\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\n          (click)=\"onCheckboxToggle(row, index, $event)\"\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\" />\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" />\r\n          } @placeholder {\r\n            <span class=\"re-dg-cell-deferred\"></span>\r\n          } @loading {\r\n            <span class=\"re-dg-cell-deferred\"></span>\r\n          }\r\n        } @else {\r\n          <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.tabindex]=\"0\"\r\n                (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\r\n                (mouseleave)=\"hideTooltip()\"\r\n                (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\r\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\r\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\r\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"dataCellContent\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: stickyRow, col: col, index: stickyIndex }\"\r\n              />\r\n            </div>\r\n          }\r\n        }\r\n        </div>\r\n      }\r\n\r\n      @if (empty) {\r\n        @let emptyTemplate = emptyTpl()?.tpl;\r\n\r\n        <div class=\"re-dg-empty\">\r\n          @if (emptyTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\r\n          } @else {\r\n            <span class=\"re-dg-empty-text\">{{ defaults.translations.emptyState }}</span>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <!-- Content -->\r\n      @if (notEmpty) {\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(items.length + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n        @for (slot of renderSlots(); track slot) {\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = items[rowIndex];\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.tabindex]=\"0\"\r\n                    (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\r\n                    (mouseleave)=\"hideTooltip()\"\r\n                    (click)=\"onCellClick(row, col, rowIndex, $event);\"\r\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\r\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\r\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\r\n                >\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"dataCellContent\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row, col: col, index: rowIndex }\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n            </div>\r\n          }\r\n        }\r\n      }\r\n\r\n      @if (showInfinitySkeleton || showPaginationSkeleton) {\r\n        @let loadingTemplate = loadingTpl();\r\n\r\n        @if (loadingTemplate?.tpl) {\r\n          <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\r\n        } @else {\r\n          @for (si of [0, 1, 2, 3]; track si) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row re-dg-skeleton-row\"\r\n              role=\"row\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\"\r\n            >\r\n              <span class=\"re-dg-skeleton-row-line\"></span>\r\n            </div>\r\n          }\r\n        }\r\n      }\r\n\r\n      <!-- PINNED BOTTOM ROWS -->\r\n      @if (notEmpty) {\r\n        <ng-template #pinnedBottomContent>\r\n          <div class=\"re-dg-footer\" role=\"rowgroup\">\r\n            @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (deferPinned()) {\r\n          @defer (when true) {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedBottomContent\" />\r\n          } @placeholder {\r\n            <div class=\"re-dg-footer re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n          } @loading {\r\n            <div class=\"re-dg-footer re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n          }\r\n        } @else {\r\n          <ng-container [ngTemplateOutlet]=\"pinnedBottomContent\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    @if (deferContent()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"gridContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH * 3\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH * 3\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"gridContent\" />\r\n    }\r\n  </div>\r\n\r\n  <ng-template #pinnedRowCells let-row>\r\n    @for (col of cols; track col.key) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.tabindex]=\"isCheckbox || isIndex ? -1 : 0\"\r\n        (mouseenter)=\"!isCheckbox && !isIndex && showTooltip($event, $any(row), col, -1)\"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event);\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1 }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        [class.visible]=\"tooltipStateValue.visible\"\r\n        [style.left.px]=\"tooltipStateValue.x\"\r\n        [style.top.px]=\"tooltipStateValue.y\"\r\n      >\r\n        @if (tooltipStateValue.tpl) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n            [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n          />\r\n        } @else {\r\n          {{ tooltipStateValue.text }}\r\n        }\r\n      </div>\r\n    }\r\n  } @else {\r\n    @let tooltipStateValue = tooltipState();\r\n    <div\r\n      class=\"re-dg-tooltip\"\r\n      #tooltip\r\n      [class.visible]=\"tooltipStateValue.visible\"\r\n      [style.left.px]=\"tooltipStateValue.x\"\r\n      [style.top.px]=\"tooltipStateValue.y\"\r\n    >\r\n      @if (tooltipStateValue.tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n          [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n        />\r\n      } @else {\r\n        {{ tooltipStateValue.text }}\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Overlay scrollbar -->\r\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\r\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\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-neutral, #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-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--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-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--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-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--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-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-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);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width: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-width:0;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-root.lock-vertical-scroll .re-dg-body{overflow-x:auto;overflow-y:hidden}.re-dg-root.lock-vertical-scroll .re-dg-scrollbar{display:none!important}.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:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.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-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.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;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.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:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.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-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-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-row-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.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-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;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.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)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.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-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.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-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-skeleton-row-line{display:block;width:var(--re-data-grid-skeleton-width);height:var(--re-data-grid-skeleton-height);border-radius:var(--re-data-grid-skeleton-rounded);background:linear-gradient(90deg,var(--re-data-grid-skeleton-line) 0%,var(--re-data-grid-skeleton-shine) 50%,var(--re-data-grid-skeleton-line) 100%);background-size:200% 100%;animation:re-dg-skeleton 1.2s ease-in-out infinite}@keyframes re-dg-skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes re-dg-spinner{to{transform:rotate(360deg)}}.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 }] }], isRowSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSticky", required: false }] }], isRowDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowDisabled", required: false }] }], getRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowTemplate", 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 }] }], lockVerticalScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockVerticalScroll", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }], deferContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferContent", required: false }] }], deferHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferHeader", required: false }] }], deferPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferPinned", required: false }] }], deferCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferCells", required: false }] }], deferIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferIcons", required: false }] }], deferTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferTooltip", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], multiSortChange: [{ type: i0.Output, args: ["multiSortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContext: [{ type: i0.Output, args: ["rowContext"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellContext: [{ type: i0.Output, args: ["cellContext"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], 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 }] }], declarativeColumnRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridDeclarativeColumn), { 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 }] }], stickyRowSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridStickyRowDirective), { isSignal: true }] }], rowSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridRowDirective), { isSignal: true }] }], tooltipEl: [{ type: i0.ViewChild, args: ['tooltip', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataGridTypeCellTemplateDirective as D, clampThumbTop as a, DataGridCellTemplateDirective as b, computeScrollbarState as c, DataGridHeaderTemplateDirective as d, DataGridRowDirective as e, DataGridDeclarativeColumn as f, DataGridDeclarativeHeaderDirective as g, DataGridDeclarativeCellDirective as h, DataGridCellEmptyDirective as i, DataGridCellLoadingDirective as j, DataGridStickyRowDirective as k, DataGridSortIconDirective as l, mapThumbTopToScrollTop as m, DataGridExpanderIconDirective as n, DATA_GRID_CONFIG as o, DEFAULT_DATA_GRID_DEFAULTS as p, provideDataGridDefaults as q, DataGrid as r };
+//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-Dn9s4YO5.mjs.map