@reforgium/data-grid 1.0.0

package/fesm2022/reforgium-data-grid.mjs

@@ -0,0 +1,950 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, signal, computed, effect, Injectable, Component, viewChild, ElementRef, ChangeDetectionStrategy, booleanAttribute, numberAttribute, output, contentChildren, afterRenderEffect, DestroyRef, untracked } from '@angular/core';
+import { NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
+import { Subscription, fromEvent, auditTime } from 'rxjs';
+
+class DataGridTypeCellTemplateDirective {
+    type = input('', { ...(ngDevMode ? { debugName: "type" } : {}), alias: 'ssDataGridTypeCell' });
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridTypeCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DataGridTypeCellTemplateDirective, isStandalone: true, selector: "ng-template[ssDataGridTypeCell]", inputs: { type: { classPropertyName: "type", publicName: "ssDataGridTypeCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridTypeCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ssDataGridTypeCell]' }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssDataGridTypeCell", required: false }] }] } });
+
+class DataGridHeaderTemplateDirective {
+    key = input('', { ...(ngDevMode ? { debugName: "key" } : {}), alias: 'ssDataGridHeader' });
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: DataGridHeaderTemplateDirective, isStandalone: true, selector: "ng-template[ssDataGridHeader]", inputs: { key: { classPropertyName: "key", publicName: "ssDataGridHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ssDataGridHeader]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "ssDataGridHeader", required: false }] }] } });
+
+class DataGridCellEmptyDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: DataGridCellEmptyDirective, isStandalone: true, selector: "ng-template[ssDataGridEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ssDataGridEmpty]' }]
+        }] });
+class DataGridCellLoadingDirective {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: DataGridCellLoadingDirective, isStandalone: true, selector: "ng-template[ssDataGridLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellLoadingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[ssDataGridLoading]' }]
+        }] });
+
+const GRID_INDEX_COLUMN = {
+    key: '_index',
+    type: 'index',
+    align: 'center',
+    header: '№',
+    width: 72,
+    sticky: true,
+};
+const GRID_CHECKBOX_COLUMN = {
+    key: '_checkbox',
+    type: 'checkbox',
+    align: 'center',
+    header: 'checkbox',
+    width: 44,
+    sticky: true,
+};
+
+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 };
+}
+function visibleIndexes(cols) {
+    const out = [];
+    for (let i = 0; i < cols.length; i++) {
+        // noinspection PointlessBooleanExpressionJS
+        cols[i].visible !== false && out.push(i);
+    }
+    return out;
+}
+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 };
+}
+const computeFixedWidths = (cols, fixedIdx) => fixedIdx.map((index) => {
+    const col = cols[index];
+    const width = clamp$1(col.width, col.minWidth, col.maxWidth);
+    return { index, 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 };
+});
+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;
+}
+function widthsCanGrow(cols, i, cur) {
+    const max = cols[i].maxWidth ?? Infinity;
+    return cur < max - 1e-6;
+}
+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--;
+        }
+    }
+}
+function clamp$1(v, min, max) {
+    min != null && v < min && (v = min);
+    max != null && v > max && (v = max);
+    return v;
+}
+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);
+}
+
+/**
+ * Вычисляет визуальное состояние оверлейного скроллбара. Все аргументы - сырые DOM-числа.
+ * Возвращает состояние, описывающее видимость, размер и позицию ползунка.
+ */
+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,
+    };
+}
+/** Преобразует позицию ползунка thumbTop (0..maxThumbTop) в позицию прокрутки scrollTop (0..maxScrollTop) */
+function mapThumbTopToScrollTop(thumbTop, maxThumbTop, maxScrollTop) {
+    const mt = Math.max(1, toSafe(maxThumbTop));
+    const ms = Math.max(1, toSafe(maxScrollTop));
+    const tt = clamp(toSafe(thumbTop), 0, mt);
+    return (tt / mt) * ms;
+}
+/** Ограничивает новую позицию ползунка в пределах 0..maxThumbTop */
+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;
+}
+
+class ScrollDirectionDetector {
+    el;
+    #prevTop = 0;
+    #prevLeft = 0;
+    constructor(el) {
+        this.el = el;
+        this.#prevTop = el.scrollTop;
+        this.#prevLeft = el.scrollLeft;
+    }
+    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';
+    }
+}
+
+function splitSticky(cols) {
+    const visible = cols.filter((c) => c.visible !== false);
+    const middleIndex = Math.floor(visible.length / 2);
+    const left = visible.slice(0, middleIndex).filter((col) => col.sticky);
+    const right = visible.slice(middleIndex, visible.length).filter((col) => col.sticky);
+    return { left, right, visible };
+}
+
+class DataGridVm {
+    scrollEl = signal(undefined, ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
+    columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    pinnedRows = signal([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
+    containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
+    scrollbarVisible = signal(false, ...(ngDevMode ? [{ debugName: "scrollbarVisible" }] : []));
+    thumbHeightPx = signal(0, ...(ngDevMode ? [{ debugName: "thumbHeightPx" }] : []));
+    thumbTopPx = signal(0, ...(ngDevMode ? [{ debugName: "thumbTopPx" }] : []));
+    dragging = false;
+    globalTypeCellTpls = new Map();
+    #byKey = signal({}, ...(ngDevMode ? [{ debugName: "#byKey" }] : []));
+    #defaultColWidth = 140;
+    #stickyLeftMap = new Map();
+    #stickyRightMap = new Map();
+    columnsToShow = computed(() => {
+        this.containerWidth();
+        const cols = this.columns() ?? [];
+        const { left, visible, right } = splitSticky(cols);
+        this.recomputeStickyOffsets(left, right);
+        return visible;
+    }, ...(ngDevMode ? [{ debugName: "columnsToShow" }] : []));
+    pinnedTop = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'top').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedTop" }] : []));
+    pinnedBottom = computed(() => (this.pinnedRows() ?? []).filter((r) => r.position === 'bottom').sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...(ngDevMode ? [{ debugName: "pinnedBottom" }] : []));
+    constructor() {
+        effect(() => {
+            const cols = this.columns();
+            const width = this.containerWidth();
+            if (!cols.length || !width) {
+                return;
+            }
+            const res = layoutColumns(cols, width, this.#defaultColWidth);
+            this.#byKey.set(res.byKey);
+        });
+    }
+    widthByKey = (key) => this.#byKey()[key] ?? this.#defaultColWidth;
+    isStickyLeft = (key) => this.#stickyLeftMap.has(key);
+    isStickyRight = (key) => this.#stickyRightMap.has(key);
+    stickyOffset = (key, dir) => dir === 'left' && this.isStickyLeft(key)
+        ? (this.#stickyLeftMap.get(key) ?? null)
+        : dir === 'right' && this.isStickyRight(key)
+            ? (this.#stickyRightMap.get(key) ?? null)
+            : null;
+    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);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridVm, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class DataGridCellComponent {
+    index = input.required(...(ngDevMode ? [{ debugName: "index" }] : []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    vm = inject(DataGridVm);
+    type = computed(() => {
+        const col = this.column();
+        if ('renderTemplate' in col) {
+            return 'tpl';
+        }
+        if ('type' in col && this.vm.globalTypeCellTpls.has(col.type)) {
+            return 'globalTypeTpl';
+        }
+        return 'type' in col ? col['type'] : 'plain';
+    }, ...(ngDevMode ? [{ debugName: "type" }] : []));
+    value = computed(() => {
+        const col = this.column();
+        const row = this.item();
+        return 'value' in col ? col.value(row) : row[col.key];
+    }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataGridCellComponent, isStandalone: true, selector: "re-data-grid-cell", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @let row = item();
+    @let col = column();
+    @let val = value();
+
+    @switch (type()) {
+      @case ('tpl') {
+        <ng-container
+          [ngTemplateOutlet]="$any(col).renderTemplate"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index }"
+        />
+      }
+      @case ('globalTypeTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get($any(col).type)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('date') {
+        {{ val | date }}
+      }
+      @case ('number') {
+        {{ val | number }}
+      }
+      @case ('index') {
+        {{ index() + 1 }}
+      }
+      @default {
+        {{ val }}
+      }
+    }
+  `, isInline: true, styles: [":host{width:100%;text-align:inherit}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGridCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 're-data-grid-cell', template: `
+    @let row = item();
+    @let col = column();
+    @let val = value();
+
+    @switch (type()) {
+      @case ('tpl') {
+        <ng-container
+          [ngTemplateOutlet]="$any(col).renderTemplate"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col, index }"
+        />
+      }
+      @case ('globalTypeTpl') {
+        <ng-container
+          [ngTemplateOutlet]="vm.globalTypeCellTpls.get($any(col).type)"
+          [ngTemplateOutletContext]="{ $implicit: val, value: val, row, col }"
+        />
+      }
+      @case ('date') {
+        {{ val | date }}
+      }
+      @case ('number') {
+        {{ val | number }}
+      }
+      @case ('index') {
+        {{ index() + 1 }}
+      }
+      @default {
+        {{ val }}
+      }
+    }
+  `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{width:100%;text-align:inherit}\n"] }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
+
+class Selector {
+    data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    selection = signal({ mode: 'none' }, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "selectedKeys" }] : []));
+    isAllSelected = computed(() => {
+        const selectedCount = this.selectedKeys().length;
+        return selectedCount === this.data().length ? true : selectedCount === 0 ? false : 'mixed';
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    isSelected(row) {
+        const selection = this.selection();
+        const selected = this.selectedKeys();
+        return 'key' in selection ? selected.includes(row[selection.key]) : false;
+    }
+    selectAll() {
+        if (this.selection().mode !== 'multi') {
+            throw new Error('Cannot select all in not "multi" mode');
+        }
+        const selection = this.selection();
+        const state = this.isAllSelected();
+        const nextState = state === false || state === 'mixed';
+        this.selectedKeys.set(!nextState ? [] : this.data().map((row) => row[selection.key]));
+        return this.selectedKeys();
+    }
+    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 selected = [row[selection.key]];
+            this.selectedKeys.set(selected);
+            return selected;
+        }
+        else {
+            const selectedKeys = this.selectedKeys();
+            const has = selectedKeys.some((it) => it === row[selection.key]);
+            const selected = has
+                ? selectedKeys.filter((it) => it !== row[selection.key])
+                : [...selectedKeys, row[selection.key]];
+            this.selectedKeys.set(selected);
+            return selected;
+        }
+    }
+}
+
+// noinspection CssUnresolvedCustomProperty
+class CheckboxIcon {
+    state = input(false, ...(ngDevMode ? [{ debugName: "state" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    boxRef = viewChild((ElementRef), ...(ngDevMode ? [{ debugName: "boxRef" }] : []));
+    constructor() {
+        effect(() => {
+            const el = this.boxRef()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const state = this.state();
+            if (state === 'mixed') {
+                el.indeterminate = true;
+                el.checked = false;
+                el.dataset.indeterminate = 'true';
+            }
+            else if (state) {
+                el.indeterminate = false;
+                el.checked = true;
+                el.dataset.indeterminate = 'false';
+            }
+            else {
+                el.indeterminate = false;
+                el.checked = false;
+                el.dataset.indeterminate = 'false';
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: CheckboxIcon, isStandalone: true, selector: "re-checkbox-ic", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "boxRef", first: true, predicate: (ElementRef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    <label class="cb" [class.cb--disabled]="disabled()">
+      <input
+        #box
+        class="cb__input"
+        type="checkbox"
+        aria-hidden="true"
+        [disabled]="disabled()"
+        [checked]="state() === true"
+        [attr.data-indeterminate]="state() === 'mixed' ? 'true' : 'false'"
+        (click)="$event.stopPropagation()"
+      />
+      <span class="cb__box" aria-hidden="true"></span>
+    </label>
+  `, isInline: true, styles: [":host{--re-data-grid-checkbox-size: 20px;--re-data-grid-checkbox-stroke: 2px;--re-data-grid-checkbox-border: var(--border-color, #9aa3af);--re-data-grid-checkbox-tick: var(--surface-neutral, #fff);--re-data-grid-checkbox-surface: var(--surface-neutral, #fff);--re-data-grid-checkbox-active-color: var(--primary-color, #2563eb);display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);-webkit-user-select:none;user-select:none}.cb{cursor:default;display:inline-block}.cb--disabled{opacity:.6}.cb__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.cb__box{position:relative;display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);border:var(--re-data-grid-checkbox-stroke) solid var(--re-data-grid-checkbox-border);border-radius:4px;background:var(--re-data-grid-checkbox-surface);transition:background .25s,border-color .25s}.cb__input:checked+.cb__box{border-color:var(--re-data-grid-checkbox-active-color);background:var(--re-data-grid-checkbox-active-color)}.cb__input:checked+.cb__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:10px;height:6px;border:2px solid var(--re-data-grid-checkbox-tick);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(.8);opacity:0;animation:tick .25s forwards ease}.cb__input[data-indeterminate=true]+.cb__box{background:var(--re-data-grid-checkbox-active-color);border-color:var(--re-data-grid-checkbox-active-color)}.cb__input[data-indeterminate=true]+.cb__box:after{content:\"\";position:absolute;left:3px;right:3px;top:50%;border-top:2px solid var(--re-data-grid-checkbox-tick);transform:translateY(-50%) scaleX(.3);opacity:0;animation:dash .25s forwards ease}@keyframes tick{to{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}}@keyframes dash{to{opacity:1;transform:translateY(-50%) scaleX(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CheckboxIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 're-checkbox-ic', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <label class="cb" [class.cb--disabled]="disabled()">
+      <input
+        #box
+        class="cb__input"
+        type="checkbox"
+        aria-hidden="true"
+        [disabled]="disabled()"
+        [checked]="state() === true"
+        [attr.data-indeterminate]="state() === 'mixed' ? 'true' : 'false'"
+        (click)="$event.stopPropagation()"
+      />
+      <span class="cb__box" aria-hidden="true"></span>
+    </label>
+  `, styles: [":host{--re-data-grid-checkbox-size: 20px;--re-data-grid-checkbox-stroke: 2px;--re-data-grid-checkbox-border: var(--border-color, #9aa3af);--re-data-grid-checkbox-tick: var(--surface-neutral, #fff);--re-data-grid-checkbox-surface: var(--surface-neutral, #fff);--re-data-grid-checkbox-active-color: var(--primary-color, #2563eb);display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);-webkit-user-select:none;user-select:none}.cb{cursor:default;display:inline-block}.cb--disabled{opacity:.6}.cb__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.cb__box{position:relative;display:inline-block;width:var(--re-data-grid-checkbox-size);height:var(--re-data-grid-checkbox-size);border:var(--re-data-grid-checkbox-stroke) solid var(--re-data-grid-checkbox-border);border-radius:4px;background:var(--re-data-grid-checkbox-surface);transition:background .25s,border-color .25s}.cb__input:checked+.cb__box{border-color:var(--re-data-grid-checkbox-active-color);background:var(--re-data-grid-checkbox-active-color)}.cb__input:checked+.cb__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:10px;height:6px;border:2px solid var(--re-data-grid-checkbox-tick);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px) scale(.8);opacity:0;animation:tick .25s forwards ease}.cb__input[data-indeterminate=true]+.cb__box{background:var(--re-data-grid-checkbox-active-color);border-color:var(--re-data-grid-checkbox-active-color)}.cb__input[data-indeterminate=true]+.cb__box:after{content:\"\";position:absolute;left:3px;right:3px;top:50%;border-top:2px solid var(--re-data-grid-checkbox-tick);transform:translateY(-50%) scaleX(.3);opacity:0;animation:dash .25s forwards ease}@keyframes tick{to{opacity:1;transform:rotate(-45deg) translate(1px,-1px) scale(1)}}@keyframes dash{to{opacity:1;transform:translateY(-50%) scaleX(1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], boxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ElementRef), { isSignal: true }] }] } });
+
+/* eslint-disable max-len */
+class ExpandIcon {
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ExpandIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ExpandIcon, isStandalone: true, selector: "re-expand-ic", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @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.0.3", 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.0.3", ngImport: i0, type: SortIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: SortIcon, isStandalone: true, selector: "re-sort-ic", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <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.0.3", 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 }] }] } });
+
+class DataGrid {
+    /** Массив данных для отображения в таблице */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Конфигурация колонок таблицы */
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Режим пагинации: 'none', 'pagination' или 'infinity' */
+    mode = input('none', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Массив закрепленных строк */
+    pinnedRows = input([], ...(ngDevMode ? [{ debugName: "pinnedRows" }] : []));
+    /** Добавить ли номерную колонку */
+    hasIndexColumn = input(false, { ...(ngDevMode ? { debugName: "hasIndexColumn" } : {}), transform: booleanAttribute });
+    /** Поддержка выбора строк */
+    selection = input({ mode: 'none' }, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /** Количество элементов на странице */
+    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
+    /** Высота строки в пикселях */
+    rowHeight = input(40, { ...(ngDevMode ? { debugName: "rowHeight" } : {}), transform: numberAttribute });
+    /** Заполнять ли доступную высоту */
+    fillHeight = input(true, { ...(ngDevMode ? { debugName: "fillHeight" } : {}), transform: booleanAttribute });
+    /** Размер буфера виртуального скролла */
+    virtualBuffer = input(6, ...(ngDevMode ? [{ debugName: "virtualBuffer" }] : []));
+    /** Состояние загрузки данных */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    /** Функция или имя свойства для получения уникального ключа строки */
+    rowKey = input(undefined, ...(ngDevMode ? [{ debugName: "rowKey" }] : []));
+    /** Начинать отсчёт пагинации с 1 (false) или 0 (true) */
+    pageStartFromZero = input(true, { ...(ngDevMode ? { debugName: "pageStartFromZero" } : {}), transform: booleanAttribute });
+    /** Событие запроса данных */
+    pageChange = output();
+    /** Событие изменения сортировки */
+    sortChange = output();
+    /** Событие изменения выбранных строк */
+    selectChange = output();
+    /** Событие клика по строке */
+    rowClick = output();
+    /** Событие клика по ячейке */
+    cellClick = output();
+    vm = inject((DataGridVm));
+    selector = new Selector();
+    rootEl = viewChild('root', ...(ngDevMode ? [{ debugName: "rootEl" }] : []));
+    scrollEl = viewChild('scroll', ...(ngDevMode ? [{ debugName: "scrollEl" }] : []));
+    headerEl = viewChild('header', ...(ngDevMode ? [{ debugName: "headerEl" }] : []));
+    cellSlotRefs = contentChildren(DataGridTypeCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellSlotRefs" }] : []));
+    headerSlotRefs = contentChildren(DataGridHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerSlotRefs" }] : []));
+    emptySlotRefs = contentChildren(DataGridCellEmptyDirective, ...(ngDevMode ? [{ debugName: "emptySlotRefs" }] : []));
+    loadingSlotRefs = contentChildren(DataGridCellLoadingDirective, ...(ngDevMode ? [{ debugName: "loadingSlotRefs" }] : []));
+    emptyTpl = computed(() => this.emptySlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    loadingTpl = computed(() => this.loadingSlotRefs()?.[0], ...(ngDevMode ? [{ debugName: "loadingTpl" }] : []));
+    visibleRows = signal([], ...(ngDevMode ? [{ debugName: "visibleRows" }] : []));
+    startIndex = 0;
+    headerHeight = signal(40, ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    expanderMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "expanderMap" }] : []));
+    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.columns()];
+    }, ...(ngDevMode ? [{ debugName: "extendedColumns" }] : []));
+    hideSbTimeout;
+    currentSortField;
+    currentSortOrder = 'asc';
+    subscription = new Subscription();
+    observer;
+    constructor() {
+        afterRenderEffect(() => {
+            this.initRefs();
+            this.initHeader();
+            this.initScroll();
+            this.initObserver();
+        });
+        afterRenderEffect(() => this.initSelector());
+        afterRenderEffect(() => {
+            this.initVm();
+            this.initSort();
+            this.initExpander();
+        });
+        effect(() => {
+            this.data();
+            this.rowHeight();
+            this.pinnedRows();
+            this.vm.containerWidth();
+            this.onVerticalScroll(true);
+        });
+        effect(() => {
+            const selection = this.selection();
+            if ('defaultSelected' in selection) {
+                this.selector.selectedKeys.set(selection.defaultSelected || []);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.subscription.unsubscribe();
+            this.observer?.disconnect();
+            clearTimeout(this.hideSbTimeout);
+        });
+    }
+    get styleHeight() {
+        return this.fillHeight() ? null : 'auto';
+    }
+    resolvePinnedData(pr) {
+        return typeof pr.data === 'function' ? pr.data() : pr.data;
+    }
+    onSort(col) {
+        if (!col.sortKey) {
+            return;
+        }
+        if (this.currentSortField === col.sortKey) {
+            this.currentSortOrder = this.currentSortOrder === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.currentSortField = col.sortKey;
+            this.currentSortOrder = 'asc';
+        }
+        this.sortChange.emit({ key: this.currentSortField, order: this.currentSortOrder });
+    }
+    onCellClick(row, col, index) {
+        this.cellClick.emit({ row, col, index });
+        if (this.selection().mode !== 'none') {
+            const selected = this.selector.select(row);
+            this.selectChange.emit({ selected });
+        }
+    }
+    isExpandable(column) {
+        const keys = this.expanderMap();
+        return keys.has(column.key);
+    }
+    onExpand(column) {
+        const expanded = !this.expanderMap().get(column.key);
+        this.expanderMap.update((prev) => {
+            const map = new Map(prev);
+            map.set(column.key, expanded);
+            return map;
+        });
+        const columns = this.extendedColumns().map((col) => col.expandBy === column.key ? { ...col, visible: expanded } : col);
+        this.vm.columns.set(columns);
+    }
+    onVerticalScroll(initial = false) {
+        const el = this.scrollEl()?.nativeElement;
+        if (!el)
+            return;
+        const scrollTop = el.scrollTop ?? 0;
+        const viewportHeight = el.clientHeight ?? 0;
+        const data = this.data() ?? [];
+        const total = data.length ?? 0;
+        const rowHeight = Math.max(1, this.rowHeight());
+        const virtualBuffer = Math.max(0, this.virtualBuffer());
+        const limit = this.mode() === 'pagination';
+        const cap = limit ? Math.max(1, this.pageSize()) : 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 (!el || viewportHeight <= 0 || !isFinite(viewportHeight) || !isFinite(rowHeight)) {
+            this.visibleRows.set(data);
+            this.vm.calcScrollbar();
+            this.showScrollbar();
+            this.hideScrollbarSoon();
+            return;
+        }
+        this.startIndex = start;
+        this.visibleRows.set(data.slice(start, end));
+        if (!initial && this.mode() === 'infinity') {
+            const threshold = Math.max(0, total - Math.max(1, Math.floor(visibleCount * 1.5)));
+            const nearEnd = start + visibleCount >= threshold;
+            if (nearEnd && !this.loading()) {
+                const modifier = this.pageStartFromZero() ? 0 : 1;
+                const page = Math.floor(total / this.pageSize()) + modifier;
+                this.pageChange.emit({ page, rows: this.pageSize() });
+            }
+        }
+        this.vm.calcScrollbar();
+        this.showScrollbar();
+        this.hideScrollbarSoon();
+    }
+    onHorizontalScroll() { }
+    onThumbDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const el = this.scrollEl()?.nativeElement;
+        if (!el)
+            return;
+        this.vm.dragging = true;
+        this.showScrollbar();
+        const startY = e.clientY;
+        const startTop = this.vm.thumbTopPx();
+        const state = computeScrollbarState(el.scrollHeight || 1, el.clientHeight || 1, el.scrollTop || 0);
+        const maxThumbTop = state.maxThumbTop || 1;
+        const maxScrollTop = state.maxScrollTop || 1;
+        const onMove = (ev) => {
+            const delta = ev.clientY - startY;
+            const newTop = clampThumbTop(startTop + delta, maxThumbTop);
+            this.vm.thumbTopPx.set(newTop);
+            el.scrollTop = mapThumbTopToScrollTop(newTop, maxThumbTop, maxScrollTop);
+            this.vm.calcScrollbar();
+            this.showScrollbar();
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+            this.vm.dragging = false;
+            this.hideScrollbarSoon();
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }
+    showScrollbar() {
+        this.vm.scrollbarVisible.set(true);
+        clearTimeout(this.hideSbTimeout);
+    }
+    hideScrollbarSoon(delay = 1200) {
+        if (this.vm.dragging) {
+            return;
+        }
+        clearTimeout(this.hideSbTimeout);
+        this.hideSbTimeout = setTimeout(() => this.vm.scrollbarVisible.set(false), delay);
+    }
+    // todo
+    trackPinnedRow = (row) => row.order;
+    trackByRow = (row) => {
+        const rowKey = this.rowKey();
+        if (!rowKey) {
+            return row;
+        }
+        return typeof rowKey === 'function' ? rowKey(row) : row[rowKey];
+    };
+    cellClass(col, row) {
+        if (typeof col.cellClass === 'function') {
+            return col.cellClass(row);
+        }
+        return col.cellClass;
+    }
+    ariaSort(col) {
+        if (this.currentSortField !== col.sortKey) {
+            return 'none';
+        }
+        return this.currentSortOrder === 'asc' ? 'ascending' : 'descending';
+    }
+    initVm() {
+        this.vm.scrollEl.set(this.scrollEl());
+        this.vm.columns.set(this.extendedColumns());
+        this.vm.pinnedRows.set(this.pinnedRows());
+    }
+    initSelector() {
+        this.selector.data.set(this.data());
+        this.selector.selection.set(this.selection());
+    }
+    initRefs() {
+        this.cellSlotRefs()?.forEach((dir) => this.vm.globalTypeCellTpls.set(dir.type(), dir.tpl));
+        const headerMap = new Map();
+        this.headerSlotRefs()?.forEach((h) => headerMap.set(h.key(), h.tpl));
+        this.extendedColumns()?.forEach((c) => {
+            if (!c.headerTemplate && headerMap.has(c.key)) {
+                c.headerTemplate = headerMap.get(c.key);
+            }
+        });
+    }
+    initSort() {
+        const firstSortable = this.extendedColumns()?.find((c) => !!c.sortKey);
+        if (firstSortable) {
+            this.currentSortField = firstSortable.sortKey;
+            this.currentSortOrder = 'asc';
+        }
+    }
+    initHeader() {
+        const el = this.headerEl()?.nativeElement;
+        if (!el)
+            return;
+        this.headerHeight.set(el.offsetHeight);
+    }
+    initScroll() {
+        const scrollEl = this.scrollEl()?.nativeElement;
+        if (scrollEl) {
+            const scrollDetector = new ScrollDirectionDetector(scrollEl);
+            this.subscription = fromEvent(scrollEl, 'scroll')
+                .pipe(auditTime(16))
+                .subscribe(() => {
+                const direction = scrollDetector.detect();
+                direction === 'vertical' ? this.onVerticalScroll() : this.onHorizontalScroll();
+            });
+        }
+        queueMicrotask(() => this.onVerticalScroll(true));
+    }
+    initObserver() {
+        const root = this.rootEl();
+        if (!root)
+            return;
+        this.observer = new ResizeObserver((entries) => {
+            const width = entries[0].contentRect.width;
+            this.onVerticalScroll(true);
+            this.onHorizontalScroll();
+            this.vm.calcScrollbar();
+            this.vm.containerWidth.set(width);
+        });
+        this.observer.observe(root.nativeElement);
+    }
+    initExpander() {
+        const map = new Map();
+        const columns = untracked(() => this.vm.columns().map((col) => {
+            col.expandBy && map.set(col.expandBy, false);
+            return { ...col, visible: col.expandBy ? false : col.visible };
+        }));
+        this.vm.columns.set(columns);
+        this.expanderMap.set(map);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, fillHeight: { classPropertyName: "fillHeight", publicName: "fillHeight", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", selectChange: "selectChange", rowClick: "rowClick", cellClick: "cellClick" }, providers: [DataGridVm], queries: [{ propertyName: "cellSlotRefs", predicate: DataGridTypeCellTemplateDirective, isSignal: true }, { propertyName: "headerSlotRefs", predicate: DataGridHeaderTemplateDirective, isSignal: true }, { propertyName: "emptySlotRefs", predicate: DataGridCellEmptyDirective, isSignal: true }, { propertyName: "loadingSlotRefs", predicate: DataGridCellLoadingDirective, isSignal: true }], viewQueries: [{ propertyName: "rootEl", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.fill]=\"fillHeight()\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            {{currentSortField }} {{ col.sortKey}}\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic mixable [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  <re-sort-ic [direction]=\"currentSortField === col.sortKey ? currentSortOrder : 'desc'\" />\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  <re-expand-ic [expanded]=\"expanderMap().get(col.key)\" />\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic mixable=\"false\" [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: #fff;--re-data-grid-active: #2a90f4;--re-data-grid-empty-color: #777;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor)}:host :host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:block;width:100%;height:var(--re-data-grid-height);max-height:var(--re-data-grid-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:flex;flex-direction:column;height:100%}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-width:0;height:var(--re-data-grid-height);border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-empty{position:absolute;inset:0;display:flex;place-items:center;color:var(--re-data-grid-empty-color)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;top:var(--re-data-grid-header-height);display:grid;place-items:center;background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridCellComponent, selector: "re-data-grid-cell", inputs: ["index", "item", "column"] }, { kind: "component", type: SortIcon, selector: "re-sort-ic", inputs: ["direction"] }, { kind: "component", type: ExpandIcon, selector: "re-expand-ic", inputs: ["expanded"] }, { kind: "component", type: CheckboxIcon, selector: "re-checkbox-ic", inputs: ["state", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DataGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], template: "@let items = data();\n@let empty = !loading() && !items?.length;\n@let notEmpty = !!items?.length;\n\n@let pinnedTopH = vm.pinnedTop().length * rowHeight();\n@let pinnedBottomH = vm.pinnedBottom().length * rowHeight();\n\n<div\n  #root\n  class=\"re-dg-root\"\n  [class.fill]=\"fillHeight()\"\n  [class.loading]=\"loading()\"\n  [style.height]=\"styleHeight\"\n  role=\"table\"\n>\n  @if (loading()) {\n    <div class=\"re-dg-loader\">\n      @let loadingTemplate = loadingTpl();\n\n      @if (loadingTemplate?.tpl) {\n        <ng-container [ngTemplateOutlet]=\"loadingTemplate!.tpl\" />\n      } @else {\n        <span class=\"re-dg-loader-text\">\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u2026</span>\n      }\n    </div>\n  }\n\n  <div\n    #scroll\n    class=\"re-dg-body\"\n    role=\"rowgroup\"\n    (mouseenter)=\"showScrollbar()\"\n    (mouseleave)=\"hideScrollbarSoon()\"\n  >\n    <div class=\"re-dg-header\" role=\"rowgroup\">\n      <div #header class=\"re-dg-row re-dg-header-row\" role=\"row\">\n        @for (col of vm.columnsToShow(); track col.key) {\n          <div\n            class=\"re-dg-header-cell\"\n            role=\"columnheader\"\n            [class.sortable]=\"!!col.sortKey\"\n            [class.active-sort]=\"currentSortField && (currentSortField === col.sortKey)\"\n            [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n            [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n            [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n            [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n            [style.width.px]=\"vm.widthByKey(col.key)\"\n            [style.min-width.px]=\"col.minWidth || null\"\n            [style.max-width.px]=\"col.maxWidth || null\"\n            [style.justify-content]=\"col.align || 'left'\"\n            [attr.aria-sort]=\"ariaSort(col)\"\n            [attr.tabindex]=\"col.sortKey ? 0 : -1\"\n            [title]=\"col.header\"\n            (click)=\"col.sortKey && onSort(col)\"\n            (keydown.enter)=\"col.sortKey && onSort(col)\"\n          >\n            {{currentSortField }} {{ col.sortKey}}\n            @if (col.headerTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"col.headerTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: col.header }\"\n              />\n            } @else {\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n              @let isMultiSelect = selection().mode === 'multi';\n\n              @if (isCheckbox && isMultiSelect) {\n                <re-checkbox-ic mixable [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\n              } @else {\n                <span class=\"re-dg-header-text\">{{ col.header }}</span>\n              }\n\n              @if (col.sortKey) {\n                <span class=\"re-dg-sort-ind\">\n                  <re-sort-ic [direction]=\"currentSortField === col.sortKey ? currentSortOrder : 'desc'\" />\n                </span>\n              }\n\n              @if (isExpandable(col)) {\n                <button (click)=\"$event.stopPropagation(); onExpand(col)\">\n                  <re-expand-ic [expanded]=\"expanderMap().get(col.key)\" />\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- PINNED TOP ROWS -->\n      @if (notEmpty) {\n        @for (pr of vm.pinnedTop(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      }\n    </div>\n\n    @if (empty) {\n      @let emptyTemplate = emptyTpl()?.tpl;\n\n      <div class=\"re-dg-empty\">\n        @if (emptyTemplate) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\" />\n        } @else {\n          <span class=\"re-dg-empty-text\">\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445</span>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    @if (notEmpty) {\n      <div class=\"re-dg-spacer\" [style.height.px]=\"items.length * rowHeight() - pinnedBottomH\"></div>\n\n      @for (row of visibleRows(); track trackByRow(row); let vi = $index) {\n        <div\n          class=\"re-dg-row re-dg-data-row\"\n          role=\"row\"\n          [style.height.px]=\"rowHeight()\"\n          [style.top.px]=\"(startIndex + vi) * rowHeight() + pinnedTopH + headerHeight()\"\n          [attr.tabindex]=\"0\"\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: startIndex + vi })\"\n        >\n          @for (col of vm.columnsToShow(); track col.key) {\n            <div\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class]=\"cellClass(col, row)\"\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n              [style.justify-items]=\"col.align || 'left'\"\n              [style.text-align]=\"col.align || 'left'\"\n              [style.width.px]=\"vm.widthByKey(col.key)\"\n              [attr.tabindex]=\"0\"\n              (click)=\"onCellClick(row, col, startIndex + vi);\"\n              (keydown.enter)=\"onCellClick(row, col, startIndex + vi)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\n\n              @if (isCheckbox) {\n                <re-checkbox-ic mixable=\"false\" [state]=\"selector.isSelected(row)\" />\n              } @else {\n                <re-data-grid-cell [index]=\"startIndex + vi\" [item]=\"row\" [column]=\"col\" />\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- PINNED BOTTOM ROWS -->\n    @if (notEmpty) {\n      <div class=\"re-dg-footer\" role=\"rowgroup\">\n        @for (pr of vm.pinnedBottom(); track trackPinnedRow(pr)) {\n          <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\">\n            @if (pr.rowTemplate) {\n              <ng-container\n                [ngTemplateOutlet]=\"pr.rowTemplate!\"\n                [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\n              />\n            } @else {\n              @for (col of vm.columnsToShow(); track col.key) {\n                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\n                  [class.sticky-right]=\"vm.isStickyRight(col.key)\"\n                  [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\n                  [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowHeight()\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\n    <div\n      class=\"re-dg-scrollbar-thumb\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-hidden=\"false\"\n      [style.height.px]=\"vm.thumbHeightPx()\"\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\n      (mousedown)=\"onThumbDown($event)\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: #fff;--re-data-grid-active: #2a90f4;--re-data-grid-empty-color: #777;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-scrollbar-size: 10px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .35);--re-data-grid-scrollbar-thumb-rounded: 4px;--re-data-grid-header-height: 40px;--re-data-grid-header-separator-color: #ccc;--re-data-grid-header-separator: 1px solid var(--re-data-grid-header-separator-color);--re-data-grid-header-surface: #fff;--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor)}:host :host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:block;width:100%;height:var(--re-data-grid-height);max-height:var(--re-data-grid-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:flex;flex-direction:column;height:100%}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-width:0;height:var(--re-data-grid-height);border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.re-dg-body::-webkit-scrollbar{width:0;height:0}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-height)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;right:0;cursor:default}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{align-items:center;gap:.75rem;border-bottom:var(--re-data-grid-header-separator);font-weight:var(--re-data-grid-header-cell-font-weight);font-size:var(--re-data-grid-header-cell-font-size);color:var(--re-data-grid-header-cell-color);background:var(--re-data-grid-header-cell-surface);-webkit-user-select:none;user-select:none;transition:color .3s ease-in-out}.re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-empty{position:absolute;inset:0;display:flex;place-items:center;color:var(--re-data-grid-empty-color)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;top:var(--re-data-grid-header-height);display:grid;place-items:center;background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-scrollbar{position:absolute;right:0;top:0;bottom:0;opacity:0;transition:opacity .15s ease-in-out;pointer-events:none;z-index:4}.re-dg-scrollbar.visible{opacity:1}.re-dg-scrollbar-thumb{position:absolute;right:var(--re-data-grid-scrollbar-offset);width:var(--re-data-grid-scrollbar-thumb-size);border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);pointer-events:auto;-webkit-user-select:none;user-select:none}.re-dg-spacer{width:1px}.re-dg-top{top:0}.re-dg-bottom{bottom:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], fillHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillHeight", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rootEl: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], cellSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridTypeCellTemplateDirective), { isSignal: true }] }], headerSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridHeaderTemplateDirective), { isSignal: true }] }], emptySlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellEmptyDirective), { isSignal: true }] }], loadingSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridCellLoadingDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataGrid, DataGridCellEmptyDirective, DataGridCellLoadingDirective, DataGridHeaderTemplateDirective, DataGridTypeCellTemplateDirective };
+//# sourceMappingURL=reforgium-data-grid.mjs.map