@reforgium/data-grid 2.0.2 → 2.1.0

package/fesm2022/reforgium-data-grid.mjs

@@ -315,6 +315,12 @@ const DEFAULT_DATA_GRID_DEFAULTS = {
     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:',
@@ -988,6 +994,8 @@ class DataGridVm {
     #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" }] : []));
     /**
@@ -1042,12 +1050,22 @@ class DataGridVm {
             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);
         });
     }
@@ -1125,6 +1143,26 @@ class DataGridVm {
             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 });
 }
@@ -1329,6 +1367,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
   `, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{width:100%;text-align:inherit}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
+const COLUMN_STATE_PRIORITY_KEYS = new Set(['disabled', 'visible', 'sticky']);
+function mergeDeclarativeColumns(declarative, columns) {
+    if (!declarative.length) {
+        return columns;
+    }
+    if (!columns.length) {
+        return declarative;
+    }
+    const declarativeByKey = new Map(declarative.map((column) => [column.key, column]));
+    const usedKeys = new Set();
+    const merged = [];
+    for (const column of columns) {
+        const base = declarativeByKey.get(column.key);
+        if (!base) {
+            merged.push(column);
+            continue;
+        }
+        usedKeys.add(column.key);
+        merged.push(mergeColumnState(base, column));
+    }
+    for (const column of declarative) {
+        if (!usedKeys.has(column.key)) {
+            merged.push(column);
+        }
+    }
+    return merged;
+}
+function mergeColumnState(declarative, state) {
+    const merged = { ...declarative };
+    const stateValue = state;
+    for (const key of Object.keys(stateValue)) {
+        if (key === 'key') {
+            continue;
+        }
+        const value = stateValue[key];
+        if (COLUMN_STATE_PRIORITY_KEYS.has(key)) {
+            if (value !== undefined) {
+                merged[key] = value;
+            }
+            continue;
+        }
+        if (merged[key] === undefined && value !== undefined) {
+            merged[key] = value;
+        }
+    }
+    return merged;
+}
+
 // noinspection ES6PreferShortImport
 function normalizeDeclarativeColumns(defs = [], rowKey) {
     const columns = [];
@@ -1753,6 +1839,13 @@ class DataGrid {
      * 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.
      *
@@ -1781,6 +1874,12 @@ class DataGrid {
      */
     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.
      *
@@ -1894,6 +1993,13 @@ class DataGrid {
     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(() => {
@@ -1907,10 +2013,7 @@ class DataGrid {
     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(() => {
-        const declarativeColumns = this.declarativeColumns().columns;
-        return declarativeColumns.length ? declarativeColumns : this.columns();
-    }, ...(ngDevMode ? [{ debugName: "sourceColumns" }] : []));
+    sourceColumns = computed(() => mergeDeclarativeColumns(this.declarativeColumns().columns, this.columns()), ...(ngDevMode ? [{ debugName: "sourceColumns" }] : []));
     extendedColumns = computed(() => {
         const hasSelection = this.selection().mode !== 'none';
         const hasIndex = this.hasIndexColumn();
@@ -2115,20 +2218,16 @@ class DataGrid {
         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)) {
+        if (viewportHeight <= 0 || !isFinite(viewportHeight) || !isFinite(rowHeight)) {
             const fallbackCount = Math.min(total, Math.max(1, this.pageSize()));
             this.renderCount = fallbackCount;
             this.ensureRenderSlots(fallbackCount);
             this.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
-            this.scheduleScrollbarUpdate();
-            this.showScrollbar();
-            this.hideScrollbarSoon();
+            this.finalizeScroll();
             return;
         }
         if (start === this.lastStartIndex && end === this.lastEndIndex) {
-            this.scheduleScrollbarUpdate();
-            this.showScrollbar();
-            this.hideScrollbarSoon();
+            this.finalizeScroll();
             return;
         }
         this.lastStartIndex = start;
@@ -2151,9 +2250,7 @@ class DataGrid {
                 this.pageChange.emit({ page, rows: this.pageSize() });
             }
         }
-        this.scheduleScrollbarUpdate();
-        this.showScrollbar();
-        this.hideScrollbarSoon();
+        this.finalizeScroll();
     }
     onHorizontalScroll() { }
     /**
@@ -2219,13 +2316,6 @@ class DataGrid {
         }
         return this.currentSortOrder === 'asc' ? 'ascending' : 'descending';
     }
-    tooltipEl = viewChild('tooltip', ...(ngDevMode ? [{ debugName: "tooltipEl" }] : []));
-    tooltipState = signal({
-        text: '',
-        x: 0,
-        y: 0,
-        visible: false,
-    }, ...(ngDevMode ? [{ debugName: "tooltipState" }] : []));
     resolveTooltip(row, col) {
         const tooltip = col.tooltip;
         if (!tooltip) {
@@ -2273,28 +2363,6 @@ class DataGrid {
         }
         this.tooltipState.update((prev) => ({ ...prev, visible: false }));
     }
-    positionTooltip() {
-        const el = this.tooltipEl()?.nativeElement;
-        const state = this.tooltipState();
-        if (!el || !state.visible) {
-            return;
-        }
-        const rect = el.getBoundingClientRect();
-        const padding = 8;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        let x = state.x;
-        let y = state.y;
-        if (x + rect.width + padding > vw) {
-            x = Math.max(padding, vw - rect.width - padding);
-        }
-        if (y + rect.height + padding > vh) {
-            y = Math.max(padding, vh - rect.height - padding);
-        }
-        if (x !== state.x || y !== state.y) {
-            this.tooltipState.update((prev) => ({ ...prev, x, y }));
-        }
-    }
     isStickyRowIndex(index) {
         return this.stickyRowIndex() === index;
     }
@@ -2393,6 +2461,28 @@ class DataGrid {
         this.vm.columns.set(columns);
         this.expanderMap.set(map);
     }
+    positionTooltip() {
+        const el = this.tooltipEl()?.nativeElement;
+        const state = this.tooltipState();
+        if (!el || !state.visible) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const padding = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        let x = state.x;
+        let y = state.y;
+        if (x + rect.width + padding > vw) {
+            x = Math.max(padding, vw - rect.width - padding);
+        }
+        if (y + rect.height + padding > vh) {
+            y = Math.max(padding, vh - rect.height - padding);
+        }
+        if (x !== state.x || y !== state.y) {
+            this.tooltipState.update((prev) => ({ ...prev, x, y }));
+        }
+    }
     scheduleScrollbarUpdate() {
         if (this.scrollbarRafId !== null) {
             return;
@@ -2402,6 +2492,11 @@ class DataGrid {
             this.vm.calcScrollbar();
         });
     }
+    finalizeScroll() {
+        this.scheduleScrollbarUpdate();
+        this.showScrollbar();
+        this.hideScrollbarSoon();
+    }
     scheduleScrollTick(detector) {
         if (this.scrollRafId !== null) {
             return;
@@ -2476,9 +2571,7 @@ class DataGrid {
             }
         }
         const stickyTop = this.headerHeight() + pinnedTopH;
-        let topPx = scrollTop + stickyTop;
-        // Keep the sticky row fixed at the sticky top until the next sticky row replaces it.
-        topPx = Math.max(topPx, scrollTop + stickyTop);
+        const topPx = scrollTop + stickyTop;
         this.stickyRowIndex.set(activeIndex);
         this.stickyRowTopPx.set(topPx);
     }
@@ -2509,12 +2602,12 @@ class DataGrid {
         return result === -1 ? null : result;
     }
     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 }, 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 }, 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 }, 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", 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  [style.height]=\"styleHeight()\"\r\n  role=\"table\"\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    <div class=\"re-dg-header\" role=\"rowgroup\">\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]=\"currentSortField && (currentSortField === col.sortKey)\"\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                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\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 = currentSortField === col.sortKey ? currentSortOrder : undefined;\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                    <re-sort-ic [direction]=\"direction\" />\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                    <re-expand-ic [expanded]=\"expanded\" />\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        @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              @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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\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        [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.tabindex]=\"0\"\r\n        (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $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\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, stickyRow)\"\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              (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\n              (mouseleave)=\"hideTooltip()\"\n              (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n              @if (isCheckbox) {\r\n                <re-checkbox-ic [state]=\"selector.isSelected(stickyRow)\" />\r\n              } @else {\r\n                <re-data-grid-cell [index]=\"stickyIndex\" [item]=\"stickyRow\" [column]=\"col\" />\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            [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.tabindex]=\"0\"\r\n            (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n            (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.expanded]=\"!!col.expandBy\"\n                  [class]=\"cellClass(col, row)\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\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                  (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  (click)=\"onCellClick(row, col, rowIndex, $event);\"\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\n                >\n                  @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n                  @if (isCheckbox) {\r\n                    <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\r\n                  } @else {\r\n                    <re-data-grid-cell [index]=\"rowIndex\" [item]=\"row\" [column]=\"col\" />\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      <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              @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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @let tooltipStateValue = tooltipState();\n  <div\n    class=\"re-dg-tooltip\"\n    #tooltip\n    [class.visible]=\"tooltipStateValue.visible\"\n    [style.left.px]=\"tooltipStateValue.x\"\n    [style.top.px]=\"tooltipStateValue.y\"\n  >\n    @if (tooltipStateValue.tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\n        [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\n      />\n    } @else {\n      {{ tooltipStateValue.text }}\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\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-surface: #fff;--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-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-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-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width: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}.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,.re-dg-pinned-row{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,.re-dg-pinned-row{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-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-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-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 });
+    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 }, 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 } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", 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  role=\"table\"\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]=\"currentSortField && (currentSortField === col.sortKey)\"\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 [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\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-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\r\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 = currentSortField === col.sortKey ? currentSortOrder : undefined;\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 #gridContent>\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 [state]=\"selector.isSelected(row)\" />\r\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      <!-- 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          [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.tabindex]=\"0\"\r\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $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=\"cell\"\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              [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.tabindex]=\"0\"\r\n              (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n              (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n              (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n              (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $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=\"cell\"\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 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=\"cell\"\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.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        (mouseenter)=\"showTooltip($event, $any(row), col, -1)\"\r\n        (mouseleave)=\"hideTooltip()\"\r\n      >\r\n        {{ row[col.key] ?? '' }}\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-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-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-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-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);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}.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{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: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;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)}.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}.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  [style.height]=\"styleHeight()\"\r\n  role=\"table\"\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    <div class=\"re-dg-header\" role=\"rowgroup\">\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]=\"currentSortField && (currentSortField === col.sortKey)\"\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                <re-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\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 = currentSortField === col.sortKey ? currentSortOrder : undefined;\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                    <re-sort-ic [direction]=\"direction\" />\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                    <re-expand-ic [expanded]=\"expanded\" />\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        @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              @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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\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        [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.tabindex]=\"0\"\r\n        (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n        (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $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\n              class=\"re-dg-cell\"\n              role=\"cell\"\n              [class.expanded]=\"!!col.expandBy\"\n              [class]=\"cellClass(col, stickyRow)\"\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              (mouseenter)=\"showTooltip($event, stickyRow, col, stickyIndex)\"\n              (mouseleave)=\"hideTooltip()\"\n              (click)=\"onCellClick(stickyRow, col, stickyIndex, $event);\"\n              (contextmenu)=\"onCellContext(stickyRow, col, stickyIndex, $event)\"\n              (dblclick)=\"onCellDoubleClick(stickyRow, col, stickyIndex, $event)\"\n              (keydown.enter)=\"onCellClick(stickyRow, col, stickyIndex, $event)\"\n            >\n              @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n              @if (isCheckbox) {\r\n                <re-checkbox-ic [state]=\"selector.isSelected(stickyRow)\" />\r\n              } @else {\r\n                <re-data-grid-cell [index]=\"stickyIndex\" [item]=\"stickyRow\" [column]=\"col\" />\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            [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.tabindex]=\"0\"\r\n            (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n            (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n            (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.expanded]=\"!!col.expandBy\"\n                  [class]=\"cellClass(col, row)\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\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                  (mouseenter)=\"showTooltip($event, row, col, rowIndex)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  (click)=\"onCellClick(row, col, rowIndex, $event);\"\n                  (contextmenu)=\"onCellContext(row, col, rowIndex, $event)\"\n                  (dblclick)=\"onCellDoubleClick(row, col, rowIndex, $event)\"\n                  (keydown.enter)=\"onCellClick(row, col, rowIndex, $event)\"\n                >\n                  @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n                  @if (isCheckbox) {\r\n                    <re-checkbox-ic [state]=\"selector.isSelected(row)\" />\r\n                  } @else {\r\n                    <re-data-grid-cell [index]=\"rowIndex\" [item]=\"row\" [column]=\"col\" />\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      <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              @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                <div\n                  class=\"re-dg-cell\"\n                  role=\"cell\"\n                  [class.sticky-left]=\"isLeft\"\n                  [class.sticky-right]=\"isRight\"\n                  [style.left.px]=\"stickyLeft\"\n                  [style.right.px]=\"stickyRight\"\n                  [style.justify-items]=\"col.align || 'left'\"\n                  [style.height.px]=\"rowH\"\n                  [style.width.px]=\"vm.widthByKey(col.key)\"\n                  (mouseenter)=\"showTooltip($event, $any(resolvePinnedData(pr)), col, -1)\"\n                  (mouseleave)=\"hideTooltip()\"\n                >\n                  {{ resolvePinnedData(pr)[col.key] ?? '' }}\n                </div>\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @let tooltipStateValue = tooltipState();\n  <div\n    class=\"re-dg-tooltip\"\n    #tooltip\n    [class.visible]=\"tooltipStateValue.visible\"\n    [style.left.px]=\"tooltipStateValue.x\"\n    [style.top.px]=\"tooltipStateValue.y\"\n  >\n    @if (tooltipStateValue.tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\n        [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\n      />\n    } @else {\n      {{ tooltipStateValue.text }}\n    }\n  </div>\n\n  <!-- Overlay scrollbar -->\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\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-surface: #fff;--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-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-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-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);display:block;min-height:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.loading .re-dg-body{overflow:hidden}.re-dg-root.loading .re-dg-scrollbar{display:none!important}.re-dg-root.loading .re-dg-loader{pointer-events:all}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width: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}.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,.re-dg-pinned-row{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,.re-dg-pinned-row{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-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-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-rounded) 0 0 0}.re-dg-header-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;max-height:2.4em;line-height:1.2;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-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 }] }], 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 }] }], 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 }] }], 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"] }], 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 }] }] } });
+            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  role=\"table\"\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]=\"currentSortField && (currentSortField === col.sortKey)\"\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 [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\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-checkbox-ic [state]=\"selector.isAllSelected()\" (click)=\"selector.selectAll()\" />\r\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 = currentSortField === col.sortKey ? currentSortOrder : undefined;\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 #gridContent>\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 [state]=\"selector.isSelected(row)\" />\r\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      <!-- 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          [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.tabindex]=\"0\"\r\n          (click)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row: stickyRow, index: stickyIndex, event: $event })\"\r\n          (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row: stickyRow, index: stickyIndex, event: $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=\"cell\"\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              [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.tabindex]=\"0\"\r\n              (click)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $event })\"\r\n              (contextmenu)=\"$event.stopPropagation(); rowContext.emit({ row, index: rowIndex, event: $event })\"\r\n              (dblclick)=\"$event.stopPropagation(); rowDoubleClick.emit({ row, index: rowIndex, event: $event })\"\r\n              (keydown.enter)=\"$event.stopPropagation(); rowClick.emit({ row, index: rowIndex, event: $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=\"cell\"\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 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=\"cell\"\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.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        (mouseenter)=\"showTooltip($event, $any(row), col, -1)\"\r\n        (mouseleave)=\"hideTooltip()\"\r\n      >\r\n        {{ row[col.key] ?? '' }}\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-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-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-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-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);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}.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{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: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;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)}.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}.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 }] }], 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 }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], 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.