@reforgium/data-grid 3.2.3 → 3.2.5

package/fesm2022/{reforgium-data-grid-reforgium-data-grid-DUpCJ9P0.mjs → reforgium-data-grid-reforgium-data-grid-YzRaXPVK.mjs}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, booleanAttribute, contentChild, Component, numberAttribute, InjectionToken, makeEnvironmentProviders, signal, computed, effect, Injectable, ChangeDetectionStrategy, output, untracked, DestroyRef, afterRenderEffect, viewChild, NgZone, contentChildren, afterNextRender } from '@angular/core';
+import { input, inject, TemplateRef, Directive, booleanAttribute, contentChild, Component, numberAttribute, InjectionToken, makeEnvironmentProviders, signal, computed, effect, Injectable, ChangeDetectionStrategy, isDevMode, output, untracked, DestroyRef, afterRenderEffect, viewChild, NgZone, contentChildren, afterNextRender } from '@angular/core';
 import { NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
 
 /**
@@ -162,6 +162,7 @@ class DataGridDeclarativeColumn {
     defaultValue = input(undefined, ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     transformer = input(undefined, ...(ngDevMode ? [{ debugName: "transformer" }] : /* istanbul ignore next */ []));
+    /** @deprecated Not consumed by the renderer. Use the grid-level rowKey input. */
     track = input(undefined, ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
     tooltip = input(undefined, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
     headerTplRef = contentChild(DataGridDeclarativeHeaderDirective, ...(ngDevMode ? [{ debugName: "headerTplRef" }] : /* istanbul ignore next */ []));
@@ -1621,11 +1622,33 @@ function createGridColumnResizeFeature(ctx) {
         targetWindow.addEventListener('mousemove', onMoveRef);
         targetWindow.addEventListener('mouseup', onUpRef);
     };
+    const onResizeKeydown = (event, column) => {
+        const direction = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+        if (!direction) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const key = String(column.key);
+        const step = event.shiftKey ? 1 : 10;
+        const previousKey = activeKey;
+        const previousMinWidth = minWidth;
+        const previousMaxWidth = maxWidth;
+        activeKey = key;
+        minWidth = Math.max(0, column.minWidth ?? DEFAULT_MIN_RESIZE_WIDTH);
+        maxWidth = column.maxWidth ?? Number.POSITIVE_INFINITY;
+        applyWidth(ctx.resolveWidth(key) + direction * step);
+        activeKey = previousKey;
+        minWidth = previousMinWidth;
+        maxWidth = previousMaxWidth;
+        ctx.emitResizeEnd?.(key, ctx.resolveWidth(key));
+    };
     const destroy = () => {
         stopResize();
     };
     return {
         onResizeStart,
+        onResizeKeydown,
         destroy,
     };
 }
@@ -1990,27 +2013,35 @@ function createGridScrollLoopFeature(ctx) {
 
 // noinspection ES6PreferShortImport
 function createGridSelectionReconcileFeature(ctx) {
-    let lastSelectionKeyField = '';
+    let lastSelectionKeyField;
     let lastValidSelectionKeys = new Set();
     const reconcile = () => {
         const selection = ctx.getSelection();
         if (selection.mode === 'none' || !('key' in selection)) {
-            lastSelectionKeyField = '';
+            lastSelectionKeyField = undefined;
+            lastValidSelectionKeys.clear();
+            return;
+        }
+        const keyField = String(selection.key);
+        if (lastSelectionKeyField !== undefined && lastSelectionKeyField !== keyField) {
+            lastSelectionKeyField = keyField;
             lastValidSelectionKeys.clear();
+            ctx.setSelectedKeys([]);
+            ctx.emitSelectChange([]);
+            return;
+        }
+        lastSelectionKeyField = keyField;
+        if (ctx.getSelectionPolicy() === 'preserve-unloaded') {
             return;
         }
         const data = ctx.getData() ?? [];
-        const key = selection.key;
-        const validKeys = data.map((row) => row[key]).filter((rowKey) => rowKey !== null && rowKey !== undefined);
+        const validKeys = data.map((row) => row[selection.key]).filter((rowKey) => rowKey !== null && rowKey !== undefined);
         const keySet = new Set(validKeys);
-        const keyField = String(key);
-        const sameSetAsPrevious = lastSelectionKeyField === keyField &&
-            keySet.size === lastValidSelectionKeys.size &&
+        const sameSetAsPrevious = keySet.size === lastValidSelectionKeys.size &&
             Array.from(keySet).every((rowKey) => lastValidSelectionKeys.has(rowKey));
         if (sameSetAsPrevious) {
             return;
         }
-        lastSelectionKeyField = keyField;
         lastValidSelectionKeys = new Set(keySet);
         const currentSelected = ctx.getSelectedKeys();
         const nextSelected = currentSelected.filter((selectedKey) => selectedKey !== null && selectedKey !== undefined && keySet.has(selectedKey));
@@ -2036,11 +2067,7 @@ function createGridSlotsFeature(ctx) {
         }
         const headerMap = new Map();
         ctx.getHeaderTemplateRefs()?.forEach((headerRef) => headerMap.set(headerRef.key(), headerRef.tpl));
-        ctx.getExtendedColumns().forEach((column) => {
-            if (!column.headerTemplate && headerMap.has(column.key)) {
-                column.headerTemplate = headerMap.get(column.key);
-            }
-        });
+        ctx.setHeaderTemplates(headerMap);
     };
     return { initRefs };
 }
@@ -2061,10 +2088,12 @@ function createGridSortFeature(ctx) {
         ctx.emitSortChange({ sort: sortKey, order });
     };
     const resetSort = () => {
-        const prevKey = (ctx.getSortField() ?? '');
+        const prevKey = ctx.getSortField();
         ctx.setSortField(undefined);
         ctx.setSorts([]);
-        emitSortChange(prevKey, undefined);
+        if (prevKey) {
+            emitSortChange(prevKey, undefined);
+        }
         ctx.emitMultiSortChange([]);
     };
     const setSort = (sort) => {
@@ -2156,10 +2185,18 @@ function createGridSourceDataFeature(ctx) {
     const bufferVersion = signal(0, ...(ngDevMode ? [{ debugName: "bufferVersion" }] : /* istanbul ignore next */ []));
     const pendingPages = new Set();
     const queuedPages = [];
+    const statelessRequestControllers = new Set();
     let lastSourceRef = null;
+    let warnedStatefulParallelSource = null;
+    let warnedInfinitySourceWithoutVersion = null;
     let lastSourceVersion = null;
     let activeRequests = 0;
+    let statelessPageRequests = 0;
+    let statelessPageRequestId = 0;
+    let activePageRequestController = null;
+    let currentPageResult = null;
     let requestGeneration = 0;
+    let activeSortRequestId = 0;
     let hasReceivedData = false;
     let pageBase = 0;
     // Row knowledge accounting. Decoupled from `sourcePages` so that buffer eviction
@@ -2169,7 +2206,56 @@ function createGridSourceDataFeature(ctx) {
     let endReached = false;
     let confirmedTotal = null;
     const hasSessionState = () => sourcePages.size > 0 || pendingPages.size > 0 || queuedPages.length > 0 || activeRequests > 0 || hasReceivedData;
-    const resolvedLoading = () => ctx.getSource()?.loading() ?? ctx.getFallbackLoading();
+    const resolvedLoading = () => {
+        bufferVersion();
+        return (ctx.getSource()?.loading() ?? ctx.getFallbackLoading()) || statelessPageRequests > 0;
+    };
+    const effectiveItems = (source) => currentPageResult ? [...currentPageResult.items] : (source.items() ?? []);
+    const hasRenderableRows = () => {
+        const source = ctx.getSource();
+        if (!source) {
+            return (ctx.getFallbackData()?.length ?? 0) > 0;
+        }
+        if (ctx.getMode() === 'infinity') {
+            return hasReceivedData;
+        }
+        return effectiveItems(source).length > 0;
+    };
+    const resolvedBlockingLoading = () => resolvedLoading() && !hasRenderableRows();
+    const effectivePageSize = (source) => currentPageResult?.pageSize || source.pageSize || ctx.getFallbackPageSize();
+    const effectiveTotalElements = (source) => currentPageResult?.totalElements ?? source.totalElements;
+    const normalizePageResult = (result, requestedPage, source) => {
+        if (!result || !Number.isInteger(result.page) || result.page < 0 || !Array.isArray(result.items)) {
+            throw new TypeError('Grid source loadPage() must return a page result with page and items');
+        }
+        if (result.page !== requestedPage) {
+            throw new Error(`Grid source loadPage() returned page ${result.page} for requested page ${requestedPage}`);
+        }
+        return {
+            page: result.page,
+            items: [...result.items],
+            pageSize: result.pageSize || source.pageSize || ctx.getFallbackPageSize(),
+            totalElements: result.totalElements ?? source.totalElements,
+        };
+    };
+    const loadPageResult = (source, page, signal) => source.loadPage(page, { signal }).then((result) => normalizePageResult(result, page, source));
+    const normalizeRequest = (request) => {
+        try {
+            return Promise.resolve(request());
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    };
+    const isAbortError = (error) => error instanceof DOMException && error.name === 'AbortError';
+    const reportRequestError = (source, event, error) => {
+        if (!source.error && !isAbortError(error)) {
+            ctx.emitSourceError?.({ ...event, error });
+        }
+    };
+    const settleRequest = (request, source, event) => normalizeRequest(request).then(() => undefined, (error) => {
+        reportRequestError(source, event, error);
+    });
     const totalRowCount = () => {
         const source = ctx.getSource();
         if (!source) {
@@ -2191,18 +2277,29 @@ function createGridSourceDataFeature(ctx) {
             }
             return knownRowCount + Math.max(1, source.pageSize || ctx.getFallbackPageSize());
         }
-        const knownTotal = resolvedTotalElements(source);
+        const knownTotal = resolvedTotalElements(source, effectiveTotalElements(source));
         if (knownTotal !== null) {
             return knownTotal;
         }
         return estimateOpenEndedPaginationTotal(source);
     };
+    const renderRowCount = () => {
+        const source = ctx.getSource();
+        if (!source) {
+            return ctx.getFallbackData()?.length ?? 0;
+        }
+        if (ctx.getMode() !== 'infinity') {
+            return effectiveItems(source).length;
+        }
+        return totalRowCount();
+    };
     const selectionRows = () => {
         const source = ctx.getSource();
         if (!source) {
             return ctx.getFallbackData() ?? [];
         }
-        const items = source.items() ?? [];
+        bufferVersion();
+        const items = effectiveItems(source);
         if (ctx.getMode() !== 'infinity') {
             return items;
         }
@@ -2224,7 +2321,8 @@ function createGridSourceDataFeature(ctx) {
             return ctx.getFallbackData()?.[index] ?? null;
         }
         if (ctx.getMode() !== 'infinity') {
-            return source.items()?.[index] ?? null;
+            bufferVersion();
+            return effectiveItems(source)[index] ?? null;
         }
         bufferVersion();
         const pageSize = Math.max(1, source.pageSize || ctx.getFallbackPageSize());
@@ -2236,7 +2334,22 @@ function createGridSourceDataFeature(ctx) {
         }
         return pageItems[index - localPage * pageSize] ?? null;
     };
-    const activePageSize = () => ctx.getSource()?.pageSize || ctx.getFallbackPageSize();
+    const dataRowOffset = () => {
+        const source = ctx.getSource();
+        if (!source || ctx.getMode() === 'none') {
+            return 0;
+        }
+        const page = ctx.getMode() === 'pagination' ? (currentPageResult?.page ?? source.page) : pageBase;
+        return Math.max(0, page) * Math.max(1, effectivePageSize(source));
+    };
+    const activePageSize = () => {
+        const source = ctx.getSource();
+        if (!source) {
+            return ctx.getFallbackPageSize();
+        }
+        bufferVersion();
+        return effectivePageSize(source);
+    };
     const requestRowCount = () => {
         const source = ctx.getSource();
         if (!source || ctx.getMode() !== 'infinity') {
@@ -2245,15 +2358,74 @@ function createGridSourceDataFeature(ctx) {
         bufferVersion();
         return Math.min(totalRowCount(), contiguousLoadedRowCount(source));
     };
+    const requestStatelessPage = (source, page) => {
+        activePageRequestController?.abort();
+        const controller = new AbortController();
+        activePageRequestController = controller;
+        statelessRequestControllers.add(controller);
+        const capturedGeneration = requestGeneration;
+        const requestId = ++statelessPageRequestId;
+        statelessPageRequests += 1;
+        bufferVersion.update((current) => current + 1);
+        void normalizeRequest(() => loadPageResult(source, page, controller.signal))
+            .then((result) => {
+            if (ctx.getSource() !== source ||
+                requestGeneration !== capturedGeneration ||
+                requestId !== statelessPageRequestId) {
+                return;
+            }
+            if (ctx.getMode() === 'infinity') {
+                sourcePages.set(result.page, [...result.items]);
+                recordPageKnowledge(result.page, [...result.items], result.pageSize || ctx.getFallbackPageSize());
+            }
+            else {
+                currentPageResult = result;
+            }
+            bufferVersion.update((current) => current + 1);
+        })
+            .catch((error) => {
+            if (!controller.signal.aborted &&
+                ctx.getSource() === source &&
+                requestGeneration === capturedGeneration &&
+                requestId === statelessPageRequestId) {
+                reportRequestError(source, { operation: 'page', page }, error);
+            }
+        })
+            .finally(() => {
+            statelessRequestControllers.delete(controller);
+            if (activePageRequestController === controller) {
+                activePageRequestController = null;
+            }
+            statelessPageRequests = Math.max(0, statelessPageRequests - 1);
+            bufferVersion.update((current) => current + 1);
+        });
+    };
     const requestPage = (event) => {
         const source = ctx.getSource();
         if (source) {
+            if (activeSortRequestId > 0) {
+                return;
+            }
             const targetPage = ctx.getMode() === 'infinity' ? Math.max(0, localToAbsolutePage(event.page)) : event.page;
             if (source.updatePageSize && event.rows > 0 && event.rows !== source.pageSize) {
-                void source.updatePageSize(event.rows);
+                resetSession();
+                currentPageResult = null;
+                bufferVersion.update((current) => current + 1);
+                void settleRequest(() => source.updatePageSize(event.rows), source, {
+                    operation: 'page-size',
+                    pageSize: event.rows,
+                });
                 return;
             }
-            void source.updatePage(targetPage);
+            if (source.loadPage) {
+                requestStatelessPage(source, targetPage);
+                return;
+            }
+            if (source.updatePage) {
+                void settleRequest(() => source.updatePage(targetPage), source, { operation: 'page', page: targetPage });
+                return;
+            }
+            reportRequestError(source, { operation: 'page', page: targetPage }, new TypeError('Grid source must implement loadPage() or updatePage()'));
             return;
         }
         ctx.emitPageChange(event);
@@ -2264,11 +2436,13 @@ function createGridSourceDataFeature(ctx) {
             return;
         }
         if (source.updateSort) {
-            void source.updateSort(sort ?? null);
+            resetSession();
+            void runSortRequest(source, { operation: 'sort', sort: sort ?? null }, () => source.updateSort(sort ?? null));
             return;
         }
         if (source.updateSorts) {
-            void source.updateSorts(sort ? [sort] : []);
+            resetSession();
+            void runSortRequest(source, { operation: 'multi-sort', sorts: sort ? [sort] : [] }, () => source.updateSorts(sort ? [sort] : []));
         }
     };
     const requestMultiSort = (sorts) => {
@@ -2277,14 +2451,31 @@ function createGridSourceDataFeature(ctx) {
             return;
         }
         if (source.updateSorts) {
-            void source.updateSorts(sorts);
+            resetSession();
+            void runSortRequest(source, { operation: 'multi-sort', sorts }, () => source.updateSorts(sorts));
             return;
         }
         if (source.updateSort) {
+            resetSession();
             const active = sorts[sorts.length - 1] ?? null;
-            void source.updateSort(active);
+            void runSortRequest(source, { operation: 'sort', sort: active }, () => source.updateSort(active));
         }
     };
+    const runSortRequest = (source, event, request) => {
+        const requestId = activeSortRequestId + 1;
+        activeSortRequestId = requestId;
+        return normalizeRequest(request)
+            .catch((error) => {
+            if (activeSortRequestId === requestId) {
+                reportRequestError(source, event, error);
+            }
+        })
+            .finally(() => {
+            if (activeSortRequestId === requestId) {
+                activeSortRequestId = 0;
+            }
+        });
+    };
     const ensureBufferedRange = (state) => {
         const source = ctx.getSource();
         if (!source || ctx.getMode() !== 'infinity' || state.total <= 0 || !hasReceivedData) {
@@ -2324,6 +2515,14 @@ function createGridSourceDataFeature(ctx) {
             return;
         }
         const version = source.version?.();
+        if (mode === 'infinity' &&
+            !source.version &&
+            !source.immutable &&
+            isDevMode() &&
+            warnedInfinitySourceWithoutVersion !== source) {
+            warnedInfinitySourceWithoutVersion = source;
+            console.warn('[data-grid] Infinity sources without version cannot invalidate mutable datasets automatically. Expose version or call resetSourceBuffer() after replacement/filter changes.');
+        }
         if (lastSourceRef !== source) {
             lastSourceRef = source;
             lastSourceVersion = version ?? null;
@@ -2358,18 +2557,25 @@ function createGridSourceDataFeature(ctx) {
     const clearState = () => {
         lastSourceRef = null;
         lastSourceVersion = null;
-        if (!hasSessionState()) {
+        if (!hasSessionState() && !currentPageResult) {
             return;
         }
         resetSession();
     };
     const resetSession = () => {
+        for (const controller of statelessRequestControllers) {
+            controller.abort();
+        }
+        statelessRequestControllers.clear();
+        activePageRequestController = null;
         requestGeneration++;
         hasReceivedData = false;
         pageBase = 0;
         queuedPages.length = 0;
         pendingPages.clear();
         activeRequests = 0;
+        statelessPageRequestId++;
+        currentPageResult = null;
         sourcePages.clear();
         knownRowCount = 0;
         endReached = false;
@@ -2408,12 +2614,48 @@ function createGridSourceDataFeature(ctx) {
         }
         pages.push(page);
     };
+    const runPrefetchRequest = (source, page, generation, controller, request, onSuccess) => {
+        void normalizeRequest(request)
+            .then((result) => {
+            if (requestGeneration === generation && ctx.getSource() === source && ctx.getMode() === 'infinity') {
+                onSuccess(result);
+            }
+        })
+            .catch((error) => {
+            if (requestGeneration === generation && ctx.getSource() === source && !controller?.signal.aborted) {
+                reportRequestError(source, { operation: 'prefetch', page }, error);
+            }
+        })
+            .finally(() => {
+            if (controller) {
+                statelessRequestControllers.delete(controller);
+            }
+            // Stateful updatePage requests cannot be aborted. A stale completion must
+            // not release a same-page request created by the next source generation.
+            if (requestGeneration !== generation) {
+                return;
+            }
+            pendingPages.delete(page);
+            activeRequests = Math.max(0, activeRequests - 1);
+            bufferVersion.update((current) => current + 1);
+            if (queuedPages.length) {
+                queueMicrotask(() => drainQueuedPages());
+            }
+        });
+    };
     const drainQueuedPages = () => {
         const source = ctx.getSource();
         if (!source || ctx.getMode() !== 'infinity' || !hasReceivedData) {
             return;
         }
-        const maxConcurrentRequests = source.prefetchMode === 'parallel' ? PARALLEL_PREFETCH_REQUESTS : SEQUENTIAL_PREFETCH_REQUESTS;
+        if (source.prefetchMode === 'parallel' &&
+            !source.loadPage &&
+            isDevMode() &&
+            warnedStatefulParallelSource !== source) {
+            warnedStatefulParallelSource = source;
+            console.warn('[data-grid] Parallel prefetch requires the stateless loadPage() capability. Falling back to sequential updatePage().');
+        }
+        const maxConcurrentRequests = source.prefetchMode === 'parallel' && source.loadPage ? PARALLEL_PREFETCH_REQUESTS : SEQUENTIAL_PREFETCH_REQUESTS;
         while (activeRequests < maxConcurrentRequests && queuedPages.length) {
             const nextPage = queuedPages.shift();
             const activeSource = ctx.getSource();
@@ -2427,34 +2669,31 @@ function createGridSourceDataFeature(ctx) {
             pendingPages.add(nextPage);
             bufferVersion.update((current) => current + 1);
             const capturedGeneration = requestGeneration;
-            void activeSource
-                .updatePage(nextPage)
-                .then(() => {
-                // Пропускаем запись если буфер был сброшен пока запрос летел
-                // (смена источника, смена версии, clearState). Без этой проверки
-                // устаревший ответ затирал бы свежий буфер.
-                if (requestGeneration !== capturedGeneration) {
-                    return;
-                }
-                // Параллельный режим: захватываем данные страницы сразу, пока источник
-                // ещё хранит именно эту страницу. Без этого sync() (Angular effect) видит
-                // только последнюю из страниц, если несколько запросов завершились до
-                // того, как эффект успел выполниться, и все промежуточные страницы теряются.
-                if (ctx.getMode() === 'infinity' && !sourcePages.has(nextPage)) {
-                    const capturedItems = activeSource.items() ?? [];
-                    const pageSize = Math.max(1, activeSource.pageSize || ctx.getFallbackPageSize());
-                    sourcePages.set(nextPage, capturedItems);
-                    recordPageKnowledge(nextPage, capturedItems, pageSize);
-                }
-            })
-                .finally(() => {
-                pendingPages.delete(nextPage);
-                activeRequests = Math.max(0, activeRequests - 1);
-                bufferVersion.update((current) => current + 1);
-                if (queuedPages.length) {
-                    queueMicrotask(() => drainQueuedPages());
-                }
-            });
+            if (activeSource.loadPage) {
+                const requestController = new AbortController();
+                statelessRequestControllers.add(requestController);
+                runPrefetchRequest(activeSource, nextPage, capturedGeneration, requestController, () => loadPageResult(activeSource, nextPage, requestController.signal), (result) => {
+                    if (!sourcePages.has(result.page)) {
+                        const capturedItems = [...result.items];
+                        sourcePages.set(result.page, capturedItems);
+                        recordPageKnowledge(result.page, capturedItems, result.pageSize || ctx.getFallbackPageSize());
+                    }
+                });
+            }
+            else if (activeSource.updatePage) {
+                runPrefetchRequest(activeSource, nextPage, capturedGeneration, null, () => activeSource.updatePage(nextPage), (result) => {
+                    if (!sourcePages.has(nextPage)) {
+                        // Capture legacy source state immediately so parallel completions cannot collapse to the last snapshot.
+                        const capturedItems = Array.isArray(result) ? [...result] : (activeSource.items() ?? []);
+                        const pageSize = Math.max(1, activeSource.pageSize || ctx.getFallbackPageSize());
+                        sourcePages.set(nextPage, capturedItems);
+                        recordPageKnowledge(nextPage, capturedItems, pageSize);
+                    }
+                });
+            }
+            else {
+                runPrefetchRequest(activeSource, nextPage, capturedGeneration, null, () => Promise.reject(new TypeError('Grid source must implement loadPage() or updatePage()')), () => undefined);
+            }
         }
     };
     const contiguousLoadedRowCount = (source) => {
@@ -2471,16 +2710,16 @@ function createGridSourceDataFeature(ctx) {
         }
         return loaded;
     };
-    const resolvedTotalElements = (source) => {
-        if (typeof source.totalElements !== 'number' || !Number.isFinite(source.totalElements)) {
+    const resolvedTotalElements = (source, totalElements = source.totalElements) => {
+        if (typeof totalElements !== 'number' || !Number.isFinite(totalElements)) {
             return null;
         }
-        return Math.max(0, source.totalElements);
+        return Math.max(0, totalElements);
     };
     const estimateOpenEndedPaginationTotal = (source) => {
-        const pageSize = Math.max(1, source.pageSize || ctx.getFallbackPageSize());
-        const page = Math.max(0, source.page || 0);
-        const itemsCount = source.items()?.length ?? 0;
+        const pageSize = Math.max(1, effectivePageSize(source));
+        const page = Math.max(0, currentPageResult?.page ?? source.page ?? 0);
+        const itemsCount = effectiveItems(source).length;
         const loadedBefore = page * pageSize;
         const hasUnknownNextPage = itemsCount === pageSize;
         return loadedBefore + itemsCount + (hasUnknownNextPage ? pageSize : 0);
@@ -2515,11 +2754,15 @@ function createGridSourceDataFeature(ctx) {
     const localToAbsolutePage = (page) => pageBase + page;
     return {
         activePageSize,
+        dataRowOffset,
         ensureBufferedRange,
         requestMultiSort,
         requestPage,
         requestRowCount,
+        resetSourceBuffer: resetSession,
+        renderRowCount,
         requestSort,
+        resolvedBlockingLoading,
         resolvedLoading,
         rowAt,
         selectionRows,
@@ -2637,7 +2880,7 @@ function createGridVirtualScrollFeature(ctx) {
             total,
         });
         if (viewportHeight <= 0 || !isFinite(viewportHeight) || !isFinite(rowHeight)) {
-            const fallbackCount = Math.min(total, Math.max(1, ctx.getPageSize()));
+            const fallbackCount = ctx.getMode() === 'pagination' ? Math.min(total, Math.max(1, ctx.getPageSize())) : total;
             ctx.setRenderCount(fallbackCount);
             ensureRenderSlots(fallbackCount);
             ctx.updateStickyRow(scrollTop, rowHeight, pinnedTopH);
@@ -3116,7 +3359,8 @@ class DataGrid {
     /**
      * Pagination mode: 'none', 'pagination', or 'infinity'.
      *
-     * - `none` - No pagination, all data is rendered
+     * -
+  one` - No pagination, all data is rendered
      * - `pagination` - Classic page-based pagination with fixed page size
      * - `infinity` - Infinite scroll mode, loads more data as user scrolls
      */
@@ -3165,6 +3409,10 @@ class DataGrid {
      * When selection is enabled, a `key` must be provided to identify rows.
      */
     selection = input(this.defaults.selection, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /** Controlled selection values. When set, the consumer owns selection state. */
+    selectedKeys = input(undefined, ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    /** Selection reconciliation policy. Defaults to preserving keys across source pages. */
+    selectionPolicy = input('preserve-unloaded', ...(ngDevMode ? [{ debugName: "selectionPolicy" }] : /* istanbul ignore next */ []));
     /**
      * Number of items per page.
      *
@@ -3182,7 +3430,8 @@ class DataGrid {
     /**
      * Grid height configuration.
      *
-     * - `number` - Fixed height in pixels
+     * -
+  umber` - Fixed height in pixels
      * - `'full'` - Fill container height (100%), can be managed by host component style
      * - `'default'` - Height by CSS var (--re-data-grid-height)
      */
@@ -3264,6 +3513,8 @@ class DataGrid {
      * ```
      */
     pageChange = output();
+    /** Emitted for a failed source request when the source has no error signal. */
+    sourceError = output();
     /**
      * Event emitted when sort order changes.
      *
@@ -3286,6 +3537,8 @@ class DataGrid {
      * Contains an array of currently selected row keys.
      */
     selectChange = output();
+    /** Emits proposed controlled selection values after user interaction. */
+    selectedKeysChange = output();
     /**
      * Event emitted when a row is clicked.
      *
@@ -3345,7 +3598,7 @@ class DataGrid {
         isRowDisabled: (row, index) => this.isDisabledRow(row, index),
         getSelectionMode: () => this.selection().mode,
         selectRow: (row) => this.selector.select(row),
-        emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+        emitSelectChange: (selected) => this.emitSelectionChange(selected),
         emitCellClick: (payload) => this.cellClick.emit(payload),
         emitCellContext: (payload) => this.cellContext.emit(payload),
         emitCellDoubleClick: (payload) => this.cellDoubleClick.emit(payload),
@@ -3365,7 +3618,7 @@ class DataGrid {
         getPageSize: () => this.activePageSize(),
         isPageStartFromZero: () => this.pageStartFromZero(),
         isLoading: () => this.resolvedLoading(),
-        emitPageChange: (event) => this.requestPage(event),
+        emitPageChange: (event) => this.handlePageRequest(event),
     });
     expanderFeature = createGridExpanderFeature({
         runUntracked: (fn) => untracked(fn),
@@ -3389,15 +3642,16 @@ class DataGrid {
         getSelection: () => this.selection(),
         getData: () => this.selectionRows(),
         getSelectedKeys: () => this.selector.selectedKeys(),
+        getSelectionPolicy: () => this.selectionPolicy(),
         setSelectedKeys: (keys) => this.selector.selectedKeys.set(keys),
-        emitSelectChange: (keys) => this.selectChange.emit({ selected: keys }),
+        emitSelectChange: (keys) => this.emitSelectionChange(keys),
     });
     gridApiFeature = createGridApiFeature({
         getSelectionFeature: () => this.selectionFeatureRef,
         getSelectionMode: () => this.selection().mode,
         clearSelectedKeys: () => this.selector.selectedKeys.set([]),
         selectAll: () => this.selector.selectAll(),
-        emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+        emitSelectChange: (selected) => this.emitSelectionChange(selected),
         loadSelectionFeature: () => this.loadSelectionFeature(),
         resetSort: () => this.sortFeature.resetSort(),
         setSort: (sort) => this.sortFeature.setSort(sort),
@@ -3415,10 +3669,11 @@ class DataGrid {
         getFallbackLoading: () => this.loading(),
         getFallbackPageSize: () => this.pageSize(),
         emitPageChange: (event) => this.pageChange.emit(event),
+        emitSourceError: (event) => this.sourceError.emit(event),
     });
     virtualScrollFeature = createGridVirtualScrollFeature({
         getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
-        getTotalCount: () => this.totalRowCount(),
+        getTotalCount: () => this.sourceDataFeature.renderRowCount(),
         getRequestTotalCount: () => this.sourceDataFeature.requestRowCount(),
         getRowHeight: () => this.rowHeight(),
         getVirtualBuffer: () => this.virtualBuffer(),
@@ -3479,7 +3734,7 @@ class DataGrid {
     gapLoaderFeature = createGridGapLoaderFeature({
         hasSource: () => !!this.source(),
         getMode: () => this.mode(),
-        getTotalCount: () => this.totalRowCount(),
+        getTotalCount: () => this.sourceDataFeature.renderRowCount(),
         getStartIndex: () => this.startIndex,
         getRenderCount: () => this.renderCount,
         isStickyRowIndex: (index) => this.isStickyRowIndex(index),
@@ -3520,6 +3775,10 @@ class DataGrid {
     stickyRowTpl = computed(() => this.stickyRowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "stickyRowTpl" }] : /* istanbul ignore next */ []));
     rowTpl = computed(() => this.rowSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "rowTpl" }] : /* istanbul ignore next */ []));
     renderSlots = signal([], ...(ngDevMode ? [{ debugName: "renderSlots" }] : /* istanbul ignore next */ []));
+    renderSlotEntries = computed(() => this.renderSlots().map((slot) => ({
+        slot,
+        key: this.trackVirtualRow(slot, this.startIndex, this.rowAt(this.startIndex + slot)),
+    })), ...(ngDevMode ? [{ debugName: "renderSlotEntries" }] : /* istanbul ignore next */ []));
     renderCount = 0;
     lastStartIndex = -1;
     lastEndIndex = -1;
@@ -3533,13 +3792,15 @@ class DataGrid {
         visible: false,
     }, ...(ngDevMode ? [{ debugName: "tooltipState" }] : /* istanbul ignore next */ []));
     activeTooltipCellId = signal(null, ...(ngDevMode ? [{ debugName: "activeTooltipCellId" }] : /* istanbul ignore next */ []));
-    tooltipId = `re-dg-tooltip-${DataGrid.nextAriaId++}`;
+    ariaInstanceId = DataGrid.nextAriaId++;
+    tooltipId = `re-dg-tooltip-${this.ariaInstanceId}`;
     expanderRegionId = `re-dg-expander-${DataGrid.nextAriaId++}`;
+    warnedPinnedIds = new Set();
     stickyRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "stickyRowIndex" }] : /* istanbul ignore next */ []));
     stickyRowTopPx = signal(0, ...(ngDevMode ? [{ debugName: "stickyRowTopPx" }] : /* istanbul ignore next */ []));
     stickyRowData = computed(() => {
         const index = this.stickyRowIndex();
-        if (index === null || index < 0 || index >= this.totalRowCount()) {
+        if (index === null || index < 0 || index >= this.renderRowCount()) {
             return null;
         }
         return this.rowAt(index);
@@ -3555,6 +3816,7 @@ class DataGrid {
         return normalizeDeclarativeColumns(this.declarativeColumnRefs().map((columnRef) => columnRef.toDeclarativeColumn()), this.rowKey());
     }, ...(ngDevMode ? [{ debugName: "declarativeColumns" }] : /* istanbul ignore next */ []));
     sourceColumns = computed(() => mergeDeclarativeColumns(this.declarativeColumns().columns, this.columns()), ...(ngDevMode ? [{ debugName: "sourceColumns" }] : /* istanbul ignore next */ []));
+    resolvedHeaderTemplates = signal(new Map(), ...(ngDevMode ? [{ debugName: "resolvedHeaderTemplates" }] : /* istanbul ignore next */ []));
     slotsFeature = createGridSlotsFeature({
         clearTypeTemplates: () => this.vm.globalTypeCellTpls.clear(),
         clearDataTemplates: () => this.vm.globalDataCellTpls.clear(),
@@ -3562,6 +3824,7 @@ class DataGrid {
         setTypeTemplate: (type, tpl) => this.vm.globalTypeCellTpls.set(type, tpl),
         setDataTemplate: (key, tpl) => this.vm.globalDataCellTpls.set(key, tpl),
         setRowTemplate: (key, tpl) => this.vm.globalRowCellTpls.set(key, tpl),
+        setHeaderTemplates: (templates) => this.resolvedHeaderTemplates.set(templates),
         getTypeTemplateRefs: () => this.cellTypedSlotRefs(),
         getDataTemplateRefs: () => this.cellDataSlotRefs(),
         getHeaderTemplateRefs: () => this.headerSlotRefs(),
@@ -3579,7 +3842,12 @@ class DataGrid {
                 header: this.defaults.translations.indexColumnHeader,
                 resizable: this.defaults.resizable,
             });
-        return [...newColumns, ...this.sourceColumns()];
+        const resolvedHeaderTemplates = this.resolvedHeaderTemplates();
+        const resolvedColumns = this.sourceColumns().map((column) => {
+            const headerTemplate = resolvedHeaderTemplates.get(String(column.key));
+            return !column.headerTemplate && headerTemplate ? { ...column, headerTemplate } : column;
+        });
+        return [...newColumns, ...resolvedColumns];
     }, ...(ngDevMode ? [{ debugName: "extendedColumns" }] : /* istanbul ignore next */ []));
     /**
      * Computed CSS height value based on height setting.
@@ -3595,7 +3863,9 @@ class DataGrid {
         return 'var(--re-data-grid-height)';
     }, ...(ngDevMode ? [{ debugName: "styleHeight" }] : /* istanbul ignore next */ []));
     resolvedLoading = computed(() => this.sourceDataFeature.resolvedLoading(), ...(ngDevMode ? [{ debugName: "resolvedLoading" }] : /* istanbul ignore next */ []));
+    resolvedBlockingLoading = computed(() => this.sourceDataFeature.resolvedBlockingLoading(), ...(ngDevMode ? [{ debugName: "resolvedBlockingLoading" }] : /* istanbul ignore next */ []));
     totalRowCount = computed(() => this.sourceDataFeature.totalRowCount(), ...(ngDevMode ? [{ debugName: "totalRowCount" }] : /* istanbul ignore next */ []));
+    renderRowCount = computed(() => this.sourceDataFeature.renderRowCount(), ...(ngDevMode ? [{ debugName: "renderRowCount" }] : /* istanbul ignore next */ []));
     selectionRows = computed(() => this.sourceDataFeature.selectionRows(), ...(ngDevMode ? [{ debugName: "selectionRows" }] : /* istanbul ignore next */ []));
     ariaColCount = computed(() => this.vm.columnsToShow().length, ...(ngDevMode ? [{ debugName: "ariaColCount" }] : /* istanbul ignore next */ []));
     ariaHeaderRowCount = computed(() => 1 + (this.vm.normalizedHeaderGroups().length ? 1 : 0), ...(ngDevMode ? [{ debugName: "ariaHeaderRowCount" }] : /* istanbul ignore next */ []));
@@ -3644,16 +3914,26 @@ class DataGrid {
                     this.onVerticalScroll(true);
                 },
                 () => {
-                    this.pinnedRows();
-                    this.vm.pinnedRows.set(this.pinnedRows());
+                    const pinnedRows = this.pinnedRows();
+                    this.vm.pinnedRows.set(pinnedRows);
+                    this.warnDuplicatePinnedIds(pinnedRows);
                     this.vm.containerWidth();
                     this.onVerticalScroll();
                 },
                 () => this.infinityPageRequestFeature.onDataTotalChanged(this.sourceDataFeature.requestRowCount()),
                 () => {
                     const selection = this.selection();
-                    if ('defaultSelected' in selection) {
-                        this.selector.selectedKeys.set(selection.defaultSelected || []);
+                    const controlledSelectedKeys = this.selectedKeys();
+                    const defaultSelectedKeys = 'defaultSelectedKeys' in selection
+                        ? selection.defaultSelectedKeys
+                        : 'defaultSelected' in selection
+                            ? selection.defaultSelected
+                            : undefined;
+                    if (controlledSelectedKeys !== undefined) {
+                        this.selector.selectedKeys.set([...controlledSelectedKeys]);
+                    }
+                    else if (defaultSelectedKeys !== undefined) {
+                        this.selector.selectedKeys.set([...defaultSelectedKeys]);
                     }
                     if (selection.mode !== 'none') {
                         void this.loadSelectionFeature();
@@ -3683,6 +3963,7 @@ class DataGrid {
                 this.cleanupCallbacks.splice(0).forEach((cleanup) => cleanup());
                 this.resizeObserverFeature.disconnect();
                 this.infinityPageRequestFeature.reset();
+                this.overlayScrollFeatureRef?.destroy();
                 clearTimeout(this.hideSbTimeout);
                 this.headerMeasureFeature.clearMeasure();
                 this.clearScrollRaf();
@@ -3706,6 +3987,22 @@ class DataGrid {
         this.gridApiFeature.resetSort();
         this.sourceDataFeature.requestMultiSort([]);
     }
+    /** Clears the grid-owned source page buffer and invalidates in-flight page results. */
+    resetSourceBuffer() {
+        this.sourceDataFeature.resetSourceBuffer();
+    }
+    /** Requests a page through the source contract or legacy pageChange output. */
+    requestPage(page) {
+        this.handlePageRequest({ page: Math.max(0, page), rows: this.activePageSize() });
+    }
+    /** Changes the page size and restarts from page zero through the shared request path. */
+    requestPageSize(pageSize) {
+        this.handlePageRequest({ page: 0, rows: pageSize });
+    }
+    /** Retries the current source page, or an explicitly supplied page. */
+    retryPage(page = this.source()?.page ?? 0) {
+        this.requestPage(page);
+    }
     /** Sets a single-column sorting state and emits sort events. */
     setSort(sort) {
         this.gridApiFeature.setSort(sort);
@@ -3739,6 +4036,11 @@ class DataGrid {
     onColumnResizeStart(event, col) {
         this.columnResizeFeature.onResizeStart(event, col);
     }
+    onColumnResizeKeydown(event, col) {
+        if (event instanceof KeyboardEvent) {
+            this.columnResizeFeature.onResizeKeydown(event, col);
+        }
+    }
     /**
      * Handles cell click events.
      *
@@ -3773,7 +4075,7 @@ class DataGrid {
         if (this.isDisabledRow(row, index) || this.selection().mode === 'none') {
             return;
         }
-        this.selectChange.emit({ selected: this.selector.select(row) });
+        this.emitSelectionChange(this.selector.select(row));
         void this.loadSelectionFeature();
     }
     onSelectAllKeydown(event) {
@@ -3799,6 +4101,48 @@ class DataGrid {
     onRowClick(row, index, event) {
         this.rowInteractionsFeature.onRowClick(row, index, event);
     }
+    onRowKeydown(index, event) {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        const direction = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+        if (!direction) {
+            return;
+        }
+        const targetIndex = Math.max(0, Math.min(this.renderRowCount() - 1, index + direction));
+        if (targetIndex === index) {
+            return;
+        }
+        event.preventDefault();
+        this.focusVirtualRow(targetIndex);
+    }
+    focusVirtualRow(index) {
+        const scrollEl = this.scrollEl()?.nativeElement;
+        if (!scrollEl) {
+            return;
+        }
+        const focusTarget = () => {
+            const target = scrollEl.querySelector(`[data-re-dg-row-index="${index}"]`);
+            if (!target) {
+                return false;
+            }
+            target.focus({ preventScroll: true });
+            return true;
+        };
+        if (focusTarget()) {
+            return;
+        }
+        scrollEl.scrollTop = Math.max(0, index * this.rowHeight());
+        scrollEl.dispatchEvent(new Event('scroll'));
+        let remainingFrames = 3;
+        const focusWhenRendered = () => {
+            if (focusTarget() || --remainingFrames === 0) {
+                return;
+            }
+            requestAnimationFrame(focusWhenRendered);
+        };
+        requestAnimationFrame(focusWhenRendered);
+    }
     onRowContext(row, index, event) {
         this.rowInteractionsFeature.onRowContext(row, index, event);
     }
@@ -3846,7 +4190,7 @@ class DataGrid {
      * to track thumb position and update scroll position accordingly.
      * Automatically cleans up listeners when dragging ends.
      *
-     * @param e - Mouse down event from a scrollbar thumb element
+     * @param e - Pointer down event from a scrollbar thumb element
      */
     onThumbDown(e) {
         if (this.overlayScrollFeatureRef) {
@@ -3876,7 +4220,7 @@ class DataGrid {
         this.hideSbTimeout = setTimeout(() => this.vm.scrollbarVisible.set(false), delay);
         void this.loadOverlayScrollFeature();
     }
-    trackPinnedRow = (row) => row.order;
+    trackPinnedRow = (row, region, index) => row.id ?? `${region}-${index}`;
     isDisabledRow(row, index) {
         if (index < 0) {
             return false;
@@ -3917,6 +4261,13 @@ class DataGrid {
         this.activeTooltipCellId.set(cellId);
         this.showTooltip(event, row, col, index);
     }
+    onTooltipFocus(event, row, col, index, cellId) {
+        const element = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
+        const rect = element?.getBoundingClientRect();
+        const x = rect ? rect.left + rect.width / 2 : 0;
+        const y = rect ? rect.top + rect.height / 2 : 0;
+        this.onTooltipEnter({ clientX: x, clientY: y }, row, col, index, cellId);
+    }
     isStickyRowIndex(index) {
         return this.stickyFeatureRef?.isStickyRowIndex(index) ?? false;
     }
@@ -3932,6 +4283,19 @@ class DataGrid {
     }
     rowAt(index) {
         return this.sourceDataFeature.rowAt(index);
+    } /**
+     * Keys virtual row views by record identity rather than by recyclable slot.
+     * Without a rowKey, the absolute index still prevents a replaced row from inheriting slot state.
+     */
+    trackVirtualRow(slot, startIndex, row) {
+        const rowIndex = startIndex + slot;
+        const currentRow = row ?? this.rowAt(rowIndex);
+        const rowKey = this.rowKey();
+        if (!currentRow || !rowKey) {
+            return `index-${rowIndex}`;
+        }
+        const key = typeof rowKey === 'function' ? rowKey(currentRow) : currentRow[rowKey];
+        return `row-${String(key)}`;
     }
     shouldRenderLoadingRow(index, topGap, bottomGap) {
         return this.gapLoaderFeature.shouldRenderInnerSkeleton(index, topGap, bottomGap);
@@ -3947,7 +4311,7 @@ class DataGrid {
         return this.readResolvedHeaderText(cacheKey, () => this.headerTextResolver(col.header, { kind: 'column', column: col }));
     }
     ariaDataRowIndex(index) {
-        return this.ariaHeaderRowCount() + this.vm.pinnedTop().length + index + 1;
+        return this.ariaHeaderRowCount() + this.vm.pinnedTop().length + this.sourceDataFeature.dataRowOffset() + index + 1;
     }
     ariaPinnedTopRowIndex(index) {
         return this.ariaHeaderRowCount() + index + 1;
@@ -3972,6 +4336,15 @@ class DataGrid {
     ariaResizeLabel(col) {
         return `Resize column ${this.resolveHeaderText(col)}`;
     }
+    ariaResizeMin(col) {
+        return Math.max(0, col.minWidth ?? 40);
+    }
+    ariaResizeMax(col) {
+        return typeof col.maxWidth === 'number' ? col.maxWidth : null;
+    }
+    ariaResizeValue(col) {
+        return this.vm.widthByKey(col.key);
+    }
     ariaHeaderGroupColIndex(group) {
         if (!group.startKey) {
             return null;
@@ -3980,7 +4353,10 @@ class DataGrid {
         return colIndex >= 0 ? colIndex + 1 : null;
     }
     cellAriaId(colKey, rowIndex, isPinned) {
-        return `re-dg-cell-${isPinned ? 'p' : 'r'}-${rowIndex}-${String(colKey)}`;
+        return `re-dg-cell-${this.ariaInstanceId}-${isPinned ? 'p' : 'r'}-${rowIndex}-${String(colKey)}`;
+    }
+    pinnedCellAriaId(colKey, row, region, index) {
+        return `re-dg-cell-${this.ariaInstanceId}-p-${region}-${row.id ?? index}-${String(colKey)}`;
     }
     isTooltipTarget(cellId) {
         return this.tooltipState().visible && this.activeTooltipCellId() === cellId;
@@ -4003,7 +4379,36 @@ class DataGrid {
     activePageSize() {
         return this.sourceDataFeature.activePageSize();
     }
-    requestPage(event) {
+    warnDuplicatePinnedIds(rows) {
+        if (!ngDevMode) {
+            return;
+        }
+        for (const region of ['top', 'bottom']) {
+            const seen = new Set();
+            for (const row of rows) {
+                if (row.position !== region || row.id === undefined) {
+                    continue;
+                }
+                if (seen.has(row.id)) {
+                    const warningKey = `${region}:${row.id}`;
+                    if (!this.warnedPinnedIds.has(warningKey)) {
+                        this.warnedPinnedIds.add(warningKey);
+                        console.warn(`[DataGrid] Duplicate pinned row id "${row.id}" in the ${region} region.`);
+                    }
+                }
+                seen.add(row.id);
+            }
+        }
+    }
+    emitSelectionChange(selected) {
+        this.selectChange.emit({ selected: [...selected] });
+        this.selectedKeysChange.emit([...selected]);
+        const controlledSelectedKeys = this.selectedKeys();
+        if (controlledSelectedKeys !== undefined) {
+            this.selector.selectedKeys.set([...controlledSelectedKeys]);
+        }
+    }
+    handlePageRequest(event) {
         this.sourceDataFeature.requestPage(event);
     }
     initVm() {
@@ -4087,7 +4492,7 @@ class DataGrid {
                 clearSelectedKeys: () => this.selector.selectedKeys.set([]),
                 selectAll: () => this.selector.selectAll(),
                 selectRow: (row) => this.selector.select(row),
-                emitSelectChange: (selected) => this.selectChange.emit({ selected }),
+                emitSelectChange: (selected) => this.emitSelectionChange(selected),
                 isRowDisabled: (row, index) => this.isDisabledRow(row, index),
             });
             this.selectionFeatureRef = feature;
@@ -4121,7 +4526,7 @@ class DataGrid {
         if (this.overlayScrollFeaturePromise) {
             return this.overlayScrollFeaturePromise;
         }
-        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-DQp-sU6c.mjs').then(({ createGridOverlayScrollFeature }) => {
+        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-XfJnWjT5.mjs').then(({ createGridOverlayScrollFeature }) => {
             const feature = createGridOverlayScrollFeature({
                 getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
                 getThumbTop: () => this.vm.thumbTopPx(),
@@ -4234,16 +4639,19 @@ class DataGrid {
         void this.loadStickyFeature().then((feature) => feature.updateStickyFromScroll());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, isRowSticky: { classPropertyName: "isRowSticky", publicName: "isRowSticky", isSignal: true, isRequired: false, transformFunction: null }, isRowDisabled: { classPropertyName: "isRowDisabled", publicName: "isRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, getRowClass: { classPropertyName: "getRowClass", publicName: "getRowClass", isSignal: true, isRequired: false, transformFunction: null }, getRowTemplate: { classPropertyName: "getRowTemplate", publicName: "getRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, hasIndexColumn: { classPropertyName: "hasIndexColumn", publicName: "hasIndexColumn", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, lockVerticalScroll: { classPropertyName: "lockVerticalScroll", publicName: "lockVerticalScroll", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null }, deferContent: { classPropertyName: "deferContent", publicName: "deferContent", isSignal: true, isRequired: false, transformFunction: null }, deferHeader: { classPropertyName: "deferHeader", publicName: "deferHeader", isSignal: true, isRequired: false, transformFunction: null }, deferPinned: { classPropertyName: "deferPinned", publicName: "deferPinned", isSignal: true, isRequired: false, transformFunction: null }, deferCells: { classPropertyName: "deferCells", publicName: "deferCells", isSignal: true, isRequired: false, transformFunction: null }, deferIcons: { classPropertyName: "deferIcons", publicName: "deferIcons", isSignal: true, isRequired: false, transformFunction: null }, deferTooltip: { classPropertyName: "deferTooltip", publicName: "deferTooltip", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChange: "sortChange", multiSortChange: "multiSortChange", selectChange: "selectChange", rowClick: "rowClick", rowContext: "rowContext", rowDoubleClick: "rowDoubleClick", cellClick: "cellClick", cellContext: "cellContext", cellDoubleClick: "cellDoubleClick", columnResizeEnd: "columnResizeEnd" }, 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 = selectionRows();\r\n@let totalRows = totalRowCount();\r\n@let empty = !resolvedLoading() && !totalRows;\r\n@let notEmpty = !!totalRows;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = resolvedLoading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = resolvedLoading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = resolvedLoading() && 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  [attr.id]=\"expanderRegionId\"\r\n  [class.re-dg-loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [class.resizing-columns]=\"isColumnResizing()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  [attr.aria-rowcount]=\"ariaRowCount()\"\r\n  [attr.aria-colcount]=\"ariaColCount()\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\" aria-live=\"polite\" role=\"status\">\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; let groupIndex = $index) {\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              @let resolvedGroupTitle = resolveHeaderGroupTitle(group);\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]=\"resolvedGroupTitle\"\r\n                [attr.aria-colindex]=\"ariaHeaderGroupColIndex(group)\"\r\n                [attr.aria-rowindex]=\"groupIndex + 1\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvedGroupTitle }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ resolvedGroupTitle }}</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; let colIndex = $index) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"isActiveSort(col)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.aria-colindex]=\"colIndex + 1\"\r\n              [attr.aria-rowindex]=\"normalizedHeaderGroups.length ? 2 : 1\"\r\n              [attr.aria-label]=\"col.sortKey ? ariaSortLabel(col) : null\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\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\r\n                      aria-label=\"Select loaded rows\"\r\n                      [state]=\"selector.isAllSelected()\"\r\n                      tabindex=\"0\"\r\n                      (click)=\"onSelectAll($event)\"\r\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                      (keydown.space)=\"onSelectAllKeydown($event)\" />\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\r\n                    aria-label=\"Select loaded rows\"\r\n                    [state]=\"selector.isAllSelected()\"\r\n                    tabindex=\"0\"\r\n                    (click)=\"onSelectAll($event)\"\r\n                    (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                    (keydown.space)=\"onSelectAllKeydown($event)\" />\r\n                }\r\n              } @else {\r\n                @let resolvedHeader = resolveHeaderText(col);\r\n\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvedHeader }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ resolvedHeader }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = sortOrderFor(col);\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-sort-ic [direction]=\"direction\" />\r\n                    }\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button\r\n                  [attr.aria-controls]=\"expanderRegionId\"\r\n                  [attr.aria-expanded]=\"expanderMap().get(col.key) ? 'true' : 'false'\"\r\n                  [attr.aria-label]=\"ariaExpandLabel(col)\"\r\n                  (click)=\"$event.stopPropagation(); onExpand(col)\"\r\n                >\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\r\n              @if (canResizeColumn(col)) {\r\n                <button\r\n                  class=\"re-dg-column-resize-handle\"\r\n                  aria-orientation=\"vertical\"\r\n                  role=\"separator\"\r\n                  [attr.aria-label]=\"ariaResizeLabel(col)\"\r\n                  (mousedown)=\"onColumnResizeStart($event, col)\"\r\n                  (click)=\"$event.stopPropagation()\"\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); let pinnedTopIndex = $index) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\" [attr.aria-rowindex]=\"ariaPinnedTopRowIndex(pinnedTopIndex)\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n\r\n          @if (deferPinned()) {\r\n            @defer (when true) {\r\n              <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n            } @placeholder {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            } @loading {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\" let-isPinned=\"isPinned\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\r\n          aria-label=\"Toggle row selection\"\r\n          [state]=\"selector.isSelected(row)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\r\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\r\n          (click)=\"onCheckboxToggle(row, index, $event)\"\r\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\r\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\" />\r\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" [isPinned]=\"!!isPinned\" />\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\" [isPinned]=\"!!isPinned\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class]=\"resolveRowClass(stickyRow, stickyIndex)\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.aria-rowindex]=\"ariaDataRowIndex(stickyIndex)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.id]=\"cellAriaId(col.key, stickyIndex, false)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, stickyIndex, false)) ? tooltipId : null\"\r\n                [attr.tabindex]=\"0\"\r\n                (mouseenter)=\"onTooltipEnter($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\"\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, isPinned: false }\"\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\" aria-live=\"polite\" role=\"status\">\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        @let topGap = topGapLoader();\r\n        @let bottomGap = bottomGapLoader();\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(totalRows + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n        @if (topGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"topGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (topGap.start * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n\r\n        @for (slot of renderSlots(); track slot) {\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = rowAt(rowIndex);\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class]=\"resolveRowClass(row, rowIndex)\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.aria-rowindex]=\"ariaDataRowIndex(rowIndex)\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key; let colIndex = $index) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.id]=\"cellAriaId(col.key, rowIndex, false)\"\r\n                    [attr.aria-colindex]=\"colIndex + 1\"\r\n                    [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, rowIndex, false)) ? tooltipId : null\"\r\n                    [attr.tabindex]=\"0\"\r\n                    (mouseenter)=\"onTooltipEnter($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\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, isPinned: false }\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n            </div>\r\n          } @else if (shouldRenderLoadingRow(rowIndex, topGap, bottomGap)) {\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(' + (rowIndex * 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        @if (bottomGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"bottomGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (bottomGap.start * 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      @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); let pinnedBottomIndex = $index) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\" [attr.aria-rowindex]=\"ariaPinnedBottomRowIndex(pinnedBottomIndex)\">\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; let colIndex = $index) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.id]=\"cellAriaId(col.key, -1, true)\"\r\n        [attr.aria-colindex]=\"colIndex + 1\"\r\n        [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, -1, true)) ? tooltipId : null\"\r\n        [attr.tabindex]=\"isCheckbox || isIndex ? -1 : 0\"\r\n        (mouseenter)=\"!isCheckbox && !isIndex && onTooltipEnter($event, $any(row), col, -1, cellAriaId(col.key, -1, true))\"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event);\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1, isPinned: true }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        role=\"tooltip\"\r\n        [attr.id]=\"tooltipId\"\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      role=\"tooltip\"\r\n      [attr.id]=\"tooltipId\"\r\n      [class.visible]=\"tooltipStateValue.visible\"\r\n      [style.left.px]=\"tooltipStateValue.x\"\r\n      [style.top.px]=\"tooltipStateValue.y\"\r\n    >\r\n      @if (tooltipStateValue.tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n          [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n        />\r\n      } @else {\r\n        {{ tooltipStateValue.text }}\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Overlay scrollbar -->\r\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\r\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.re-dg-loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.re-dg-loading .re-dg-body{overflow:hidden}.re-dg-root.re-dg-loading .re-dg-scrollbar{display:none!important}.re-dg-root.re-dg-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-root.resizing-columns{-webkit-user-select:none;user-select:none;cursor:col-resize}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{position:relative;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-column-resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:5}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-gap-loader{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:color-mix(in srgb,var(--re-data-grid-cell-surface) 88%,var(--re-data-grid-skeleton-line));pointer-events:none;opacity:.9}.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", "isPinned", "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]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataGrid, isStandalone: true, selector: "re-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pinnedRows: { classPropertyName: "pinnedRows", publicName: "pinnedRows", isSignal: true, isRequired: false, transformFunction: null }, isRowSticky: { classPropertyName: "isRowSticky", publicName: "isRowSticky", isSignal: true, isRequired: false, transformFunction: null }, isRowDisabled: { classPropertyName: "isRowDisabled", publicName: "isRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, getRowClass: { classPropertyName: "getRowClass", publicName: "getRowClass", 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 }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionPolicy: { classPropertyName: "selectionPolicy", publicName: "selectionPolicy", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, virtualBuffer: { classPropertyName: "virtualBuffer", publicName: "virtualBuffer", isSignal: true, isRequired: false, transformFunction: null }, lockVerticalScroll: { classPropertyName: "lockVerticalScroll", publicName: "lockVerticalScroll", isSignal: true, isRequired: false, transformFunction: null }, headerGroups: { classPropertyName: "headerGroups", publicName: "headerGroups", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: true, isRequired: false, transformFunction: null }, deferContent: { classPropertyName: "deferContent", publicName: "deferContent", isSignal: true, isRequired: false, transformFunction: null }, deferHeader: { classPropertyName: "deferHeader", publicName: "deferHeader", isSignal: true, isRequired: false, transformFunction: null }, deferPinned: { classPropertyName: "deferPinned", publicName: "deferPinned", isSignal: true, isRequired: false, transformFunction: null }, deferCells: { classPropertyName: "deferCells", publicName: "deferCells", isSignal: true, isRequired: false, transformFunction: null }, deferIcons: { classPropertyName: "deferIcons", publicName: "deferIcons", isSignal: true, isRequired: false, transformFunction: null }, deferTooltip: { classPropertyName: "deferTooltip", publicName: "deferTooltip", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pageStartFromZero: { classPropertyName: "pageStartFromZero", publicName: "pageStartFromZero", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sourceError: "sourceError", sortChange: "sortChange", multiSortChange: "multiSortChange", selectChange: "selectChange", selectedKeysChange: "selectedKeysChange", rowClick: "rowClick", rowContext: "rowContext", rowDoubleClick: "rowDoubleClick", cellClick: "cellClick", cellContext: "cellContext", cellDoubleClick: "cellDoubleClick", columnResizeEnd: "columnResizeEnd" }, 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 = selectionRows();\r\n@let totalRows = totalRowCount();\r\n@let renderRows = renderRowCount();\r\n@let empty = !resolvedLoading() && !renderRows;\r\n@let notEmpty = !!renderRows;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = resolvedBlockingLoading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = resolvedBlockingLoading() && skeletonMode && mode() === 'pagination';\r\n@let showSpinnerLoading = resolvedBlockingLoading() && 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  [attr.id]=\"expanderRegionId\"\r\n  [class.re-dg-loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [class.resizing-columns]=\"isColumnResizing()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  [attr.aria-rowcount]=\"ariaRowCount()\"\r\n  [attr.aria-colcount]=\"ariaColCount()\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\" aria-live=\"polite\" role=\"status\">\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 #scroll class=\"re-dg-body\" role=\"rowgroup\" (mouseenter)=\"showScrollbar()\" (mouseleave)=\"hideScrollbarSoon()\">\r\n    <ng-template #headerContent>\r\n      <div class=\"re-dg-header\" role=\"rowgroup\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n        <div #header class=\"re-dg-header-rows\">\r\n          @if (normalizedHeaderGroups.length) {\r\n            <div\r\n              class=\"re-dg-row re-dg-header-group-row\"\r\n              role=\"row\"\r\n              [style.width.px]=\"vm.contentWidth()\"\r\n              [style.min-width.%]=\"100\"\r\n            >\r\n              @for (group of normalizedHeaderGroups; track group.key; let groupIndex = $index) {\r\n                @let groupStickyLeft =\r\n                  !!group.startKey &&\r\n                  !!group.endKey &&\r\n                  vm.isStickyLeft(group.startKey) &&\r\n                  vm.isStickyLeft(group.endKey);\r\n                @let groupStickyRight =\r\n                  !!group.startKey &&\r\n                  !!group.endKey &&\r\n                  vm.isStickyRight(group.startKey) &&\r\n                  vm.isStickyRight(group.endKey);\r\n\r\n                @let resolvedGroupTitle = resolveHeaderGroupTitle(group);\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]=\"resolvedGroupTitle\"\r\n                  [attr.aria-colindex]=\"ariaHeaderGroupColIndex(group)\"\r\n                  [attr.aria-rowindex]=\"groupIndex + 1\"\r\n                >\r\n                  @if (group.titleTemplate) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: resolvedGroupTitle }\"\r\n                    />\r\n                  } @else {\r\n                    <span class=\"re-dg-header-text\">{{ resolvedGroupTitle }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"re-dg-row re-dg-header-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"vm.contentWidth()\"\r\n            [style.min-width.%]=\"100\"\r\n          >\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-header-cell\"\r\n                role=\"columnheader\"\r\n                [class.sortable]=\"!!col.sortKey\"\r\n                [class.active-sort]=\"isActiveSort(col)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [style.min-width.px]=\"col.minWidth || null\"\r\n                [style.max-width.px]=\"col.maxWidth || null\"\r\n                [style.justify-content]=\"col.align || 'left'\"\r\n                [attr.aria-sort]=\"ariaSort(col)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-rowindex]=\"normalizedHeaderGroups.length ? 2 : 1\"\r\n                [attr.aria-label]=\"col.sortKey ? ariaSortLabel(col) : null\"\r\n                [attr.tabindex]=\"col.sortKey ? 0 : -1\"\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\r\n                        aria-label=\"Select loaded rows\"\r\n                        [state]=\"selector.isAllSelected()\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"onSelectAll($event)\"\r\n                        (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                        (keydown.space)=\"onSelectAllKeydown($event)\"\r\n                      />\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\r\n                      aria-label=\"Select loaded rows\"\r\n                      [state]=\"selector.isAllSelected()\"\r\n                      tabindex=\"0\"\r\n                      (click)=\"onSelectAll($event)\"\r\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                      (keydown.space)=\"onSelectAllKeydown($event)\"\r\n                    />\r\n                  }\r\n                } @else {\r\n                  @let resolvedHeader = resolveHeaderText(col);\r\n\r\n                  @if (col.headerTemplate) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: resolvedHeader }\"\r\n                    />\r\n                  } @else {\r\n                    <span class=\"re-dg-header-text\">{{ resolvedHeader }}</span>\r\n                  }\r\n                }\r\n\r\n                @if (col.sortKey) {\r\n                  <span class=\"re-dg-sort-ind\">\r\n                    @let direction = sortOrderFor(col);\r\n\r\n                    @if (sortTpl()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                      />\r\n                    } @else {\r\n                      @if (deferIcons()) {\r\n                        @defer (when true) {\r\n                          <re-sort-ic [direction]=\"direction\" />\r\n                        } @placeholder {\r\n                          <span class=\"re-dg-icon-placeholder\"></span>\r\n                        } @loading {\r\n                          <span class=\"re-dg-icon-placeholder\"></span>\r\n                        }\r\n                      } @else {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      }\r\n                    }\r\n                  </span>\r\n                }\r\n\r\n                @if (isExpandable(col)) {\r\n                  <button\r\n                    [attr.aria-controls]=\"expanderRegionId\"\r\n                    [attr.aria-expanded]=\"expanderMap().get(col.key) ? 'true' : 'false'\"\r\n                    [attr.aria-label]=\"ariaExpandLabel(col)\"\r\n                    (click)=\"$event.stopPropagation(); onExpand(col)\"\r\n                  >\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                      />\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\r\n                @if (canResizeColumn(col)) {\r\n                  <div\n                    class=\"re-dg-column-resize-handle\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    [attr.aria-label]=\"ariaResizeLabel(col)\"\n                    [attr.aria-valuemin]=\"ariaResizeMin(col)\"\n                    [attr.aria-valuemax]=\"ariaResizeMax(col)\"\n                    [attr.aria-valuenow]=\"ariaResizeValue(col)\"\n                    tabindex=\"0\"\n                    (mousedown)=\"onColumnResizeStart($event, col)\"\n                    (keydown)=\"onColumnResizeKeydown($event, col)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></div>\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, 'top', pinnedTopIndex); let pinnedTopIndex = $index) {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-top\"\r\n                role=\"row\"\r\n                [style.width.px]=\"contentW\"\r\n                [style.min-width.%]=\"100\"\r\n                [attr.aria-rowindex]=\"ariaPinnedTopRowIndex(pinnedTopIndex)\"\r\n              >\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]=\"{\r\n                      $implicit: resolvePinnedData(pr),\r\n                      row: pr,\r\n                      index: pinnedTopIndex,\r\n                      region: 'top',\r\n                    }\"\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\r\n                class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\"\r\n                [style.min-height.px]=\"rowH\"\r\n              ></div>\r\n            } @loading {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\"\r\n                [style.min-height.px]=\"rowH\"\r\n              ></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\" let-isPinned=\"isPinned\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\r\n          aria-label=\"Toggle row selection\"\r\n          [state]=\"selector.isSelected(row)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\r\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\r\n          (click)=\"onCheckboxToggle(row, index, $event)\"\r\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\r\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\"\r\n        />\r\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" [isPinned]=\"!!isPinned\" />\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\" [isPinned]=\"!!isPinned\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class]=\"resolveRowClass(stickyRow, stickyIndex)\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.data-re-dg-row-index]=\"stickyIndex\"\n          [attr.aria-rowindex]=\"ariaDataRowIndex(stickyIndex)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\n          (keydown.arrowdown)=\"onRowKeydown(stickyIndex, $event)\"\n          (keydown.arrowup)=\"onRowKeydown(stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true,\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.id]=\"cellAriaId(col.key, stickyIndex, false)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, stickyIndex, false)) ? tooltipId : null\"\r\n                (mouseenter)=\"\r\n                  onTooltipEnter($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\r\n                \"\r\n                (mouseleave)=\"hideTooltip()\"\r\n                (focusin)=\"onTooltipFocus($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\"\r\n                (focusout)=\"hideTooltip()\"\r\n                (keydown.escape)=\"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, isPinned: false }\"\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\" aria-live=\"polite\" role=\"status\">\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        @let topGap = topGapLoader();\r\n        @let bottomGap = bottomGapLoader();\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(renderRows + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"\r\n        ></div>\r\n\r\n        @if (topGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"topGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (topGap.start * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n\r\n        @for (entry of renderSlotEntries(); track entry.key) {\n          @let slot = entry.slot;\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = rowAt(rowIndex);\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class]=\"resolveRowClass(row, rowIndex)\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.data-re-dg-row-index]=\"rowIndex\"\n              [attr.aria-rowindex]=\"ariaDataRowIndex(rowIndex)\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\n              (keydown.arrowdown)=\"onRowKeydown(rowIndex, $event)\"\n              (keydown.arrowup)=\"onRowKeydown(rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false,\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key; let colIndex = $index) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.id]=\"cellAriaId(col.key, rowIndex, false)\"\r\n                    [attr.aria-colindex]=\"colIndex + 1\"\r\n                    [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, rowIndex, false)) ? tooltipId : null\"\r\n                    (mouseenter)=\"onTooltipEnter($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\r\n                    (mouseleave)=\"hideTooltip()\"\r\n                    (focusin)=\"onTooltipFocus($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\r\n                    (focusout)=\"hideTooltip()\"\r\n                    (keydown.escape)=\"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, isPinned: false }\"\r\n                    />\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          } @else if (shouldRenderLoadingRow(rowIndex, topGap, bottomGap)) {\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(' + (rowIndex * 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        @if (bottomGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"bottomGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (bottomGap.start * 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      @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]=\"\r\n                'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\r\n              \"\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 (\r\n              pr of vm.pinnedBottom();\r\n              track trackPinnedRow(pr, 'bottom', pinnedBottomIndex);\r\n              let pinnedBottomIndex = $index\r\n            ) {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-bottom\"\r\n                role=\"row\"\r\n                [style.width.px]=\"contentW\"\r\n                [style.min-width.%]=\"100\"\r\n                [attr.aria-rowindex]=\"ariaPinnedBottomRowIndex(pinnedBottomIndex)\"\r\n              >\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]=\"{\r\n                      $implicit: resolvePinnedData(pr),\r\n                      row: pr,\r\n                      index: pinnedBottomIndex,\r\n                      region: 'bottom',\r\n                    }\"\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 let-pinnedRow=\"row\" let-pinnedIndex=\"index\" let-pinnedRegion=\"region\">\r\n    @for (col of cols; track col.key; let colIndex = $index) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.id]=\"pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex)\"\r\n        [attr.aria-colindex]=\"colIndex + 1\"\r\n        [attr.aria-describedby]=\"\r\n          isTooltipTarget(pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex)) ? tooltipId : null\r\n        \"\r\n        (mouseenter)=\"\r\n          !isCheckbox &&\r\n            !isIndex &&\r\n            onTooltipEnter($event, $any(row), col, -1, pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex))\r\n        \"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (focusin)=\"\r\n          !isCheckbox &&\r\n            !isIndex &&\r\n            onTooltipFocus($event, $any(row), col, -1, pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex))\r\n        \"\r\n        (focusout)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (keydown.escape)=\"hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1, isPinned: true }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        role=\"tooltip\"\r\n        [attr.id]=\"tooltipId\"\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 [ngTemplateOutlet]=\"tooltipStateValue.tpl\" [ngTemplateOutletContext]=\"tooltipStateValue.ctx\" />\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      role=\"tooltip\"\r\n      [attr.id]=\"tooltipId\"\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 [ngTemplateOutlet]=\"tooltipStateValue.tpl\" [ngTemplateOutletContext]=\"tooltipStateValue.ctx\" />\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      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (pointerdown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.re-dg-loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.re-dg-loading .re-dg-body{overflow:hidden}.re-dg-root.re-dg-loading .re-dg-scrollbar{display:none!important}.re-dg-root.re-dg-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-root.resizing-columns{-webkit-user-select:none;user-select:none;cursor:col-resize}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{position:relative;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-column-resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:5}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-gap-loader{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:color-mix(in srgb,var(--re-data-grid-cell-surface) 88%,var(--re-data-grid-skeleton-line));pointer-events:none;opacity:.9}.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;touch-action: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", "isPinned", "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.2.4", ngImport: i0, type: DataGrid, decorators: [{
             type: Component,
-            args: [{ selector: 're-data-grid', imports: [NgTemplateOutlet, DataGridCellComponent, SortIcon, ExpandIcon, CheckboxIcon], providers: [DataGridVm], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = selectionRows();\r\n@let totalRows = totalRowCount();\r\n@let empty = !resolvedLoading() && !totalRows;\r\n@let notEmpty = !!totalRows;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = resolvedLoading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = resolvedLoading() && skeletonMode && mode() === 'pagination' && !notEmpty;\r\n@let showSpinnerLoading = resolvedLoading() && 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  [attr.id]=\"expanderRegionId\"\r\n  [class.re-dg-loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [class.resizing-columns]=\"isColumnResizing()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  [attr.aria-rowcount]=\"ariaRowCount()\"\r\n  [attr.aria-colcount]=\"ariaColCount()\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\" aria-live=\"polite\" role=\"status\">\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; let groupIndex = $index) {\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              @let resolvedGroupTitle = resolveHeaderGroupTitle(group);\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]=\"resolvedGroupTitle\"\r\n                [attr.aria-colindex]=\"ariaHeaderGroupColIndex(group)\"\r\n                [attr.aria-rowindex]=\"groupIndex + 1\"\r\n              >\r\n                @if (group.titleTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvedGroupTitle }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ resolvedGroupTitle }}</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; let colIndex = $index) {\r\n            <div\r\n              class=\"re-dg-header-cell\"\r\n              role=\"columnheader\"\r\n              [class.sortable]=\"!!col.sortKey\"\r\n              [class.active-sort]=\"isActiveSort(col)\"\r\n              [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n              [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n              [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n              [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n              [style.width.px]=\"vm.widthByKey(col.key)\"\r\n              [style.min-width.px]=\"col.minWidth || null\"\r\n              [style.max-width.px]=\"col.maxWidth || null\"\r\n              [style.justify-content]=\"col.align || 'left'\"\r\n              [attr.aria-sort]=\"ariaSort(col)\"\r\n              [attr.aria-colindex]=\"colIndex + 1\"\r\n              [attr.aria-rowindex]=\"normalizedHeaderGroups.length ? 2 : 1\"\r\n              [attr.aria-label]=\"col.sortKey ? ariaSortLabel(col) : null\"\r\n              [attr.tabindex]=\"col.sortKey ? 0 : -1\"\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\r\n                      aria-label=\"Select loaded rows\"\r\n                      [state]=\"selector.isAllSelected()\"\r\n                      tabindex=\"0\"\r\n                      (click)=\"onSelectAll($event)\"\r\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                      (keydown.space)=\"onSelectAllKeydown($event)\" />\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\r\n                    aria-label=\"Select loaded rows\"\r\n                    [state]=\"selector.isAllSelected()\"\r\n                    tabindex=\"0\"\r\n                    (click)=\"onSelectAll($event)\"\r\n                    (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                    (keydown.space)=\"onSelectAllKeydown($event)\" />\r\n                }\r\n              } @else {\r\n                @let resolvedHeader = resolveHeaderText(col);\r\n\r\n                @if (col.headerTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvedHeader }\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"re-dg-header-text\">{{ resolvedHeader }}</span>\r\n                }\r\n              }\r\n\r\n              @if (col.sortKey) {\r\n                <span class=\"re-dg-sort-ind\">\r\n                  @let direction = sortOrderFor(col);\r\n\r\n                  @if (sortTpl()) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                    />\r\n                  } @else {\r\n                    @if (deferIcons()) {\r\n                      @defer (when true) {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      } @placeholder {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      } @loading {\r\n                        <span class=\"re-dg-icon-placeholder\"></span>\r\n                      }\r\n                    } @else {\r\n                      <re-sort-ic [direction]=\"direction\" />\r\n                    }\r\n                  }\r\n                </span>\r\n              }\r\n\r\n              @if (isExpandable(col)) {\r\n                <button\r\n                  [attr.aria-controls]=\"expanderRegionId\"\r\n                  [attr.aria-expanded]=\"expanderMap().get(col.key) ? 'true' : 'false'\"\r\n                  [attr.aria-label]=\"ariaExpandLabel(col)\"\r\n                  (click)=\"$event.stopPropagation(); onExpand(col)\"\r\n                >\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\r\n              @if (canResizeColumn(col)) {\r\n                <button\r\n                  class=\"re-dg-column-resize-handle\"\r\n                  aria-orientation=\"vertical\"\r\n                  role=\"separator\"\r\n                  [attr.aria-label]=\"ariaResizeLabel(col)\"\r\n                  (mousedown)=\"onColumnResizeStart($event, col)\"\r\n                  (click)=\"$event.stopPropagation()\"\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); let pinnedTopIndex = $index) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\" [attr.aria-rowindex]=\"ariaPinnedTopRowIndex(pinnedTopIndex)\">\r\n                @if (pr.rowTemplate) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pr.rowTemplate!\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                } @else {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"pinnedRowCells\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: resolvePinnedData(pr) }\"\r\n                  />\r\n                }\r\n              </div>\r\n            }\r\n          </ng-template>\r\n\r\n          @if (deferPinned()) {\r\n            @defer (when true) {\r\n              <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n            } @placeholder {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            } @loading {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\" [style.min-height.px]=\"rowH\"></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\" let-isPinned=\"isPinned\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\r\n          aria-label=\"Toggle row selection\"\r\n          [state]=\"selector.isSelected(row)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\r\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\r\n          (click)=\"onCheckboxToggle(row, index, $event)\"\r\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\r\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\" />\r\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" [isPinned]=\"!!isPinned\" />\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\" [isPinned]=\"!!isPinned\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class]=\"resolveRowClass(stickyRow, stickyIndex)\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.aria-rowindex]=\"ariaDataRowIndex(stickyIndex)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.id]=\"cellAriaId(col.key, stickyIndex, false)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, stickyIndex, false)) ? tooltipId : null\"\r\n                [attr.tabindex]=\"0\"\r\n                (mouseenter)=\"onTooltipEnter($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\"\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, isPinned: false }\"\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\" aria-live=\"polite\" role=\"status\">\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        @let topGap = topGapLoader();\r\n        @let bottomGap = bottomGapLoader();\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(totalRows + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"></div>\r\n\r\n        @if (topGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"topGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (topGap.start * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n\r\n        @for (slot of renderSlots(); track slot) {\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = rowAt(rowIndex);\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class]=\"resolveRowClass(row, rowIndex)\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.aria-rowindex]=\"ariaDataRowIndex(rowIndex)\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key; let colIndex = $index) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.id]=\"cellAriaId(col.key, rowIndex, false)\"\r\n                    [attr.aria-colindex]=\"colIndex + 1\"\r\n                    [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, rowIndex, false)) ? tooltipId : null\"\r\n                    [attr.tabindex]=\"0\"\r\n                    (mouseenter)=\"onTooltipEnter($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\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, isPinned: false }\"\r\n                  />\r\n                </div>\r\n              }\r\n            }\r\n            </div>\r\n          } @else if (shouldRenderLoadingRow(rowIndex, topGap, bottomGap)) {\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(' + (rowIndex * 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        @if (bottomGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"bottomGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (bottomGap.start * 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      @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); let pinnedBottomIndex = $index) {\r\n              <div class=\"re-dg-row re-dg-pinned re-dg-bottom\" role=\"row\" [style.width.px]=\"contentW\" [style.min-width.%]=\"100\" [attr.aria-rowindex]=\"ariaPinnedBottomRowIndex(pinnedBottomIndex)\">\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; let colIndex = $index) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.id]=\"cellAriaId(col.key, -1, true)\"\r\n        [attr.aria-colindex]=\"colIndex + 1\"\r\n        [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, -1, true)) ? tooltipId : null\"\r\n        [attr.tabindex]=\"isCheckbox || isIndex ? -1 : 0\"\r\n        (mouseenter)=\"!isCheckbox && !isIndex && onTooltipEnter($event, $any(row), col, -1, cellAriaId(col.key, -1, true))\"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event);\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1, isPinned: true }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        role=\"tooltip\"\r\n        [attr.id]=\"tooltipId\"\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      role=\"tooltip\"\r\n      [attr.id]=\"tooltipId\"\r\n      [class.visible]=\"tooltipStateValue.visible\"\r\n      [style.left.px]=\"tooltipStateValue.x\"\r\n      [style.top.px]=\"tooltipStateValue.y\"\r\n    >\r\n      @if (tooltipStateValue.tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tooltipStateValue.tpl\"\r\n          [ngTemplateOutletContext]=\"tooltipStateValue.ctx\"\r\n        />\r\n      } @else {\r\n        {{ tooltipStateValue.text }}\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <!-- Overlay scrollbar -->\r\n  <div class=\"re-dg-scrollbar\" [class.visible]=\"vm.scrollbarVisible()\">\r\n    <div\r\n      class=\"re-dg-scrollbar-thumb\"\r\n      role=\"scrollbar\"\r\n      aria-orientation=\"vertical\"\r\n      aria-hidden=\"false\"\r\n      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (mousedown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.re-dg-loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.re-dg-loading .re-dg-body{overflow:hidden}.re-dg-root.re-dg-loading .re-dg-scrollbar{display:none!important}.re-dg-root.re-dg-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-root.resizing-columns{-webkit-user-select:none;user-select:none;cursor:col-resize}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{position:relative;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-column-resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:5}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-gap-loader{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:color-mix(in srgb,var(--re-data-grid-cell-surface) 88%,var(--re-data-grid-skeleton-line));pointer-events:none;opacity:.9}.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 }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], isRowSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSticky", required: false }] }], isRowDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowDisabled", required: false }] }], getRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowClass", required: false }] }], getRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowTemplate", required: false }] }], hasIndexColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasIndexColumn", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], lockVerticalScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockVerticalScroll", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }], deferContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferContent", required: false }] }], deferHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferHeader", required: false }] }], deferPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferPinned", required: false }] }], deferCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferCells", required: false }] }], deferIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferIcons", required: false }] }], deferTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferTooltip", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], multiSortChange: [{ type: i0.Output, args: ["multiSortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowContext: [{ type: i0.Output, args: ["rowContext"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellContext: [{ type: i0.Output, args: ["cellContext"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], columnResizeEnd: [{ type: i0.Output, args: ["columnResizeEnd"] }], 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], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@let items = selectionRows();\r\n@let totalRows = totalRowCount();\r\n@let renderRows = renderRowCount();\r\n@let empty = !resolvedLoading() && !renderRows;\r\n@let notEmpty = !!renderRows;\r\n@let skeletonRowsCount = 4;\r\n@let skeletonMode = loadingMode() === 'skeleton';\r\n@let spinnerMode = loadingMode() === 'spinner';\r\n@let showInfinitySkeleton = resolvedBlockingLoading() && skeletonMode && mode() === 'infinity';\r\n@let showPaginationSkeleton = resolvedBlockingLoading() && skeletonMode && mode() === 'pagination';\r\n@let showSpinnerLoading = resolvedBlockingLoading() && 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  [attr.id]=\"expanderRegionId\"\r\n  [class.re-dg-loading]=\"showSpinnerLoading\"\r\n  [class.lock-vertical-scroll]=\"lockVerticalScroll()\"\r\n  [class.resizing-columns]=\"isColumnResizing()\"\r\n  [style.height]=\"styleHeight()\"\r\n  [attr.aria-multiselectable]=\"selection().mode === 'multi' ? true : null\"\r\n  [attr.aria-rowcount]=\"ariaRowCount()\"\r\n  [attr.aria-colcount]=\"ariaColCount()\"\r\n  role=\"grid\"\r\n>\r\n  @if (showSpinnerLoading) {\r\n    <div class=\"re-dg-loader\" aria-live=\"polite\" role=\"status\">\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 #scroll class=\"re-dg-body\" role=\"rowgroup\" (mouseenter)=\"showScrollbar()\" (mouseleave)=\"hideScrollbarSoon()\">\r\n    <ng-template #headerContent>\r\n      <div class=\"re-dg-header\" role=\"rowgroup\" [style.width.px]=\"vm.contentWidth()\" [style.min-width.%]=\"100\">\r\n        <div #header class=\"re-dg-header-rows\">\r\n          @if (normalizedHeaderGroups.length) {\r\n            <div\r\n              class=\"re-dg-row re-dg-header-group-row\"\r\n              role=\"row\"\r\n              [style.width.px]=\"vm.contentWidth()\"\r\n              [style.min-width.%]=\"100\"\r\n            >\r\n              @for (group of normalizedHeaderGroups; track group.key; let groupIndex = $index) {\r\n                @let groupStickyLeft =\r\n                  !!group.startKey &&\r\n                  !!group.endKey &&\r\n                  vm.isStickyLeft(group.startKey) &&\r\n                  vm.isStickyLeft(group.endKey);\r\n                @let groupStickyRight =\r\n                  !!group.startKey &&\r\n                  !!group.endKey &&\r\n                  vm.isStickyRight(group.startKey) &&\r\n                  vm.isStickyRight(group.endKey);\r\n\r\n                @let resolvedGroupTitle = resolveHeaderGroupTitle(group);\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]=\"resolvedGroupTitle\"\r\n                  [attr.aria-colindex]=\"ariaHeaderGroupColIndex(group)\"\r\n                  [attr.aria-rowindex]=\"groupIndex + 1\"\r\n                >\r\n                  @if (group.titleTemplate) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"group.titleTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: resolvedGroupTitle }\"\r\n                    />\r\n                  } @else {\r\n                    <span class=\"re-dg-header-text\">{{ resolvedGroupTitle }}</span>\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          <div\r\n            class=\"re-dg-row re-dg-header-row\"\r\n            role=\"row\"\r\n            [style.width.px]=\"vm.contentWidth()\"\r\n            [style.min-width.%]=\"100\"\r\n          >\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-header-cell\"\r\n                role=\"columnheader\"\r\n                [class.sortable]=\"!!col.sortKey\"\r\n                [class.active-sort]=\"isActiveSort(col)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [style.min-width.px]=\"col.minWidth || null\"\r\n                [style.max-width.px]=\"col.maxWidth || null\"\r\n                [style.justify-content]=\"col.align || 'left'\"\r\n                [attr.aria-sort]=\"ariaSort(col)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-rowindex]=\"normalizedHeaderGroups.length ? 2 : 1\"\r\n                [attr.aria-label]=\"col.sortKey ? ariaSortLabel(col) : null\"\r\n                [attr.tabindex]=\"col.sortKey ? 0 : -1\"\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\r\n                        aria-label=\"Select loaded rows\"\r\n                        [state]=\"selector.isAllSelected()\"\r\n                        tabindex=\"0\"\r\n                        (click)=\"onSelectAll($event)\"\r\n                        (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                        (keydown.space)=\"onSelectAllKeydown($event)\"\r\n                      />\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\r\n                      aria-label=\"Select loaded rows\"\r\n                      [state]=\"selector.isAllSelected()\"\r\n                      tabindex=\"0\"\r\n                      (click)=\"onSelectAll($event)\"\r\n                      (keydown.enter)=\"onSelectAllKeydown($event)\"\r\n                      (keydown.space)=\"onSelectAllKeydown($event)\"\r\n                    />\r\n                  }\r\n                } @else {\r\n                  @let resolvedHeader = resolveHeaderText(col);\r\n\r\n                  @if (col.headerTemplate) {\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\r\n                      [ngTemplateOutletContext]=\"{ $implicit: resolvedHeader }\"\r\n                    />\r\n                  } @else {\r\n                    <span class=\"re-dg-header-text\">{{ resolvedHeader }}</span>\r\n                  }\r\n                }\r\n\r\n                @if (col.sortKey) {\r\n                  <span class=\"re-dg-sort-ind\">\r\n                    @let direction = sortOrderFor(col);\r\n\r\n                    @if (sortTpl()) {\r\n                      <ng-container\r\n                        [ngTemplateOutlet]=\"sortTpl()!.tpl\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: direction }\"\r\n                      />\r\n                    } @else {\r\n                      @if (deferIcons()) {\r\n                        @defer (when true) {\r\n                          <re-sort-ic [direction]=\"direction\" />\r\n                        } @placeholder {\r\n                          <span class=\"re-dg-icon-placeholder\"></span>\r\n                        } @loading {\r\n                          <span class=\"re-dg-icon-placeholder\"></span>\r\n                        }\r\n                      } @else {\r\n                        <re-sort-ic [direction]=\"direction\" />\r\n                      }\r\n                    }\r\n                  </span>\r\n                }\r\n\r\n                @if (isExpandable(col)) {\r\n                  <button\r\n                    [attr.aria-controls]=\"expanderRegionId\"\r\n                    [attr.aria-expanded]=\"expanderMap().get(col.key) ? 'true' : 'false'\"\r\n                    [attr.aria-label]=\"ariaExpandLabel(col)\"\r\n                    (click)=\"$event.stopPropagation(); onExpand(col)\"\r\n                  >\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                      />\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\r\n                @if (canResizeColumn(col)) {\r\n                  <div\n                    class=\"re-dg-column-resize-handle\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    [attr.aria-label]=\"ariaResizeLabel(col)\"\n                    [attr.aria-valuemin]=\"ariaResizeMin(col)\"\n                    [attr.aria-valuemax]=\"ariaResizeMax(col)\"\n                    [attr.aria-valuenow]=\"ariaResizeValue(col)\"\n                    tabindex=\"0\"\n                    (mousedown)=\"onColumnResizeStart($event, col)\"\n                    (keydown)=\"onColumnResizeKeydown($event, col)\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></div>\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, 'top', pinnedTopIndex); let pinnedTopIndex = $index) {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-top\"\r\n                role=\"row\"\r\n                [style.width.px]=\"contentW\"\r\n                [style.min-width.%]=\"100\"\r\n                [attr.aria-rowindex]=\"ariaPinnedTopRowIndex(pinnedTopIndex)\"\r\n              >\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]=\"{\r\n                      $implicit: resolvePinnedData(pr),\r\n                      row: pr,\r\n                      index: pinnedTopIndex,\r\n                      region: 'top',\r\n                    }\"\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\r\n                class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\"\r\n                [style.min-height.px]=\"rowH\"\r\n              ></div>\r\n            } @loading {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-top re-dg-deferred-placeholder\"\r\n                [style.min-height.px]=\"rowH\"\r\n              ></div>\r\n            }\r\n          } @else {\r\n            <ng-container [ngTemplateOutlet]=\"pinnedTopContent\" />\r\n          }\r\n        }\r\n      </div>\r\n    </ng-template>\r\n\r\n    @if (deferHeader()) {\r\n      @defer (when true) {\r\n        <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n      } @placeholder {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      } @loading {\r\n        <div class=\"re-dg-header re-dg-deferred-placeholder\" [style.min-height.px]=\"headerHeight()\"></div>\r\n      }\r\n    } @else {\r\n      <ng-container [ngTemplateOutlet]=\"headerContent\" />\r\n    }\r\n\r\n    <ng-template #dataCellContent let-row let-col=\"col\" let-index=\"index\" let-isPinned=\"isPinned\">\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n\r\n      @if (isCheckbox) {\r\n        <re-checkbox-ic\r\n          aria-label=\"Toggle row selection\"\r\n          [state]=\"selector.isSelected(row)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(row, index)\"\r\n          [attr.tabindex]=\"isDisabledRow(row, index) ? -1 : 0\"\r\n          (click)=\"onCheckboxToggle(row, index, $event)\"\r\n          (keydown.enter)=\"onCheckboxKeydown(row, index, $event)\"\r\n          (keydown.space)=\"onCheckboxKeydown(row, index, $event)\"\r\n        />\r\n      } @else {\r\n        @if (deferCells()) {\r\n          @defer (when true) {\r\n            <re-data-grid-cell [index]=\"index\" [item]=\"row\" [column]=\"col\" [isPinned]=\"!!isPinned\" />\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\" [isPinned]=\"!!isPinned\" />\r\n        }\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template #gridContent>\r\n      <!-- STICKY ROW -->\r\n      @if (stickyRow && stickyIndex !== null) {\r\n        <div\r\n          class=\"re-dg-row re-dg-data-row re-dg-sticky-row\"\r\n          role=\"row\"\r\n          [class]=\"resolveRowClass(stickyRow, stickyIndex)\"\r\n          [class.re-dg-row-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [style.width.px]=\"vm.contentWidth()\"\r\n          [style.min-width.%]=\"100\"\r\n          [style.height.px]=\"rowHeight()\"\r\n          [style.top.px]=\"stickyRowTopPx()\"\r\n          [attr.data-re-dg-row-index]=\"stickyIndex\"\n          [attr.aria-rowindex]=\"ariaDataRowIndex(stickyIndex)\"\r\n          [attr.aria-disabled]=\"isDisabledRow(stickyRow, stickyIndex)\"\r\n          [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(stickyRow) : null\"\r\n          [attr.tabindex]=\"0\"\r\n          (click)=\"onRowClick(stickyRow, stickyIndex, $event)\"\r\n          (contextmenu)=\"onRowContext(stickyRow, stickyIndex, $event)\"\r\n          (dblclick)=\"onRowDoubleClick(stickyRow, stickyIndex, $event)\"\r\n          (keydown.enter)=\"onRowClick(stickyRow, stickyIndex, $event)\"\n          (keydown.arrowdown)=\"onRowKeydown(stickyIndex, $event)\"\n          (keydown.arrowup)=\"onRowKeydown(stickyIndex, $event)\"\r\n        >\r\n          @let stickyTemplate = stickyRowTpl();\r\n          @let rowTemplate = resolveRowTemplate(stickyRow, stickyIndex);\r\n\r\n          @if (stickyTemplate?.tpl) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"stickyTemplate!.tpl\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: stickyRow, index: stickyIndex }\"\r\n            />\r\n          } @else if (rowTemplate) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"rowTemplate\"\r\n              [ngTemplateOutletContext]=\"{\r\n                $implicit: stickyRow,\r\n                index: stickyIndex,\r\n                columns: vm.columnsToShow(),\r\n                rowHeight: rowHeight(),\r\n                isSticky: true,\r\n              }\"\r\n            />\r\n          } @else {\r\n            @for (col of vm.columnsToShow(); track col.key; let colIndex = $index) {\r\n              <div\r\n                class=\"re-dg-cell\"\r\n                role=\"gridcell\"\r\n                [class.expanded]=\"!!col.expandBy\"\r\n                [class]=\"cellClass(col, stickyRow)\"\r\n                [class.sticky-left]=\"vm.isStickyLeft(col.key)\"\r\n                [class.sticky-right]=\"vm.isStickyRight(col.key)\"\r\n                [style.left.px]=\"vm.stickyOffset(col.key, 'left')\"\r\n                [style.right.px]=\"vm.stickyOffset(col.key, 'right')\"\r\n                [style.justify-items]=\"col.align || 'left'\"\r\n                [style.text-align]=\"col.align || 'left'\"\r\n                [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                [attr.id]=\"cellAriaId(col.key, stickyIndex, false)\"\r\n                [attr.aria-colindex]=\"colIndex + 1\"\r\n                [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, stickyIndex, false)) ? tooltipId : null\"\r\n                (mouseenter)=\"\r\n                  onTooltipEnter($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\r\n                \"\r\n                (mouseleave)=\"hideTooltip()\"\r\n                (focusin)=\"onTooltipFocus($event, stickyRow, col, stickyIndex, cellAriaId(col.key, stickyIndex, false))\"\r\n                (focusout)=\"hideTooltip()\"\r\n                (keydown.escape)=\"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, isPinned: false }\"\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\" aria-live=\"polite\" role=\"status\">\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        @let topGap = topGapLoader();\r\n        @let bottomGap = bottomGapLoader();\r\n        <div\r\n          class=\"re-dg-spacer\"\r\n          [style.width.px]=\"contentW\"\r\n          [style.height.px]=\"(renderRows + extraInfinitySkeletonRows) * rowH - pinnedBottomH\"\r\n        ></div>\r\n\r\n        @if (topGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"topGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (topGap.start * rowH + stickyTop) + 'px)'\"\r\n          >\r\n            <span class=\"re-dg-skeleton-row-line\"></span>\r\n          </div>\r\n        }\r\n\r\n        @for (entry of renderSlotEntries(); track entry.key) {\n          @let slot = entry.slot;\r\n          @let rowIndex = startIndex + slot;\r\n          @let row = rowAt(rowIndex);\r\n          @let rowTemplate = row ? resolveRowTemplate(row, rowIndex) : null;\r\n\r\n          @if (row && !isStickyRowIndex(rowIndex)) {\r\n            <div\r\n              class=\"re-dg-row re-dg-data-row\"\r\n              role=\"row\"\r\n              [class]=\"resolveRowClass(row, rowIndex)\"\r\n              [class.re-dg-row-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [style.width.px]=\"contentW\"\r\n              [style.min-width.%]=\"100\"\r\n              [style.height.px]=\"rowH\"\r\n              [style.transform]=\"'translateY(' + (rowIndex * rowH + stickyTop) + 'px)'\"\r\n              [attr.data-re-dg-row-index]=\"rowIndex\"\n              [attr.aria-rowindex]=\"ariaDataRowIndex(rowIndex)\"\r\n              [attr.aria-disabled]=\"isDisabledRow(row, rowIndex)\"\r\n              [attr.aria-selected]=\"selection().mode !== 'none' ? selector.isSelected(row) : null\"\r\n              [attr.tabindex]=\"0\"\r\n              (click)=\"onRowClick(row, rowIndex, $event)\"\r\n              (contextmenu)=\"onRowContext(row, rowIndex, $event)\"\r\n              (dblclick)=\"onRowDoubleClick(row, rowIndex, $event)\"\r\n              (keydown.enter)=\"onRowClick(row, rowIndex, $event)\"\n              (keydown.arrowdown)=\"onRowKeydown(rowIndex, $event)\"\n              (keydown.arrowup)=\"onRowKeydown(rowIndex, $event)\"\r\n            >\r\n              @if (rowTemplate) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"rowTemplate\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: rowIndex,\r\n                    columns: vm.columnsToShow(),\r\n                    rowHeight: rowHeight(),\r\n                    isSticky: false,\r\n                  }\"\r\n                />\r\n              } @else {\r\n                @for (col of cols; track col.key; let colIndex = $index) {\r\n                  @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n                  @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n                  @let isLeft = vm.isStickyLeft(col.key);\r\n                  @let isRight = vm.isStickyRight(col.key);\r\n\r\n                  <div\r\n                    class=\"re-dg-cell\"\r\n                    role=\"gridcell\"\r\n                    [class.expanded]=\"!!col.expandBy\"\r\n                    [class]=\"cellClass(col, row)\"\r\n                    [class.sticky-left]=\"isLeft\"\r\n                    [class.sticky-right]=\"isRight\"\r\n                    [style.left.px]=\"stickyLeft\"\r\n                    [style.right.px]=\"stickyRight\"\r\n                    [style.justify-items]=\"col.align || 'left'\"\r\n                    [style.text-align]=\"col.align || 'left'\"\r\n                    [style.width.px]=\"vm.widthByKey(col.key)\"\r\n                    [attr.id]=\"cellAriaId(col.key, rowIndex, false)\"\r\n                    [attr.aria-colindex]=\"colIndex + 1\"\r\n                    [attr.aria-describedby]=\"isTooltipTarget(cellAriaId(col.key, rowIndex, false)) ? tooltipId : null\"\r\n                    (mouseenter)=\"onTooltipEnter($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\r\n                    (mouseleave)=\"hideTooltip()\"\r\n                    (focusin)=\"onTooltipFocus($event, row, col, rowIndex, cellAriaId(col.key, rowIndex, false))\"\r\n                    (focusout)=\"hideTooltip()\"\r\n                    (keydown.escape)=\"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, isPinned: false }\"\r\n                    />\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          } @else if (shouldRenderLoadingRow(rowIndex, topGap, bottomGap)) {\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(' + (rowIndex * 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        @if (bottomGap) {\r\n          <div\r\n            class=\"re-dg-row re-dg-data-row re-dg-gap-loader\"\r\n            role=\"row\"\r\n            [style.width.px]=\"contentW\"\r\n            [style.min-width.%]=\"100\"\r\n            [style.height.px]=\"bottomGap.count * rowH\"\r\n            [style.transform]=\"'translateY(' + (bottomGap.start * 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      @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]=\"\r\n                'translateY(' + (((showInfinitySkeleton ? items.length : 0) + si) * rowH + stickyTop) + 'px)'\r\n              \"\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 (\r\n              pr of vm.pinnedBottom();\r\n              track trackPinnedRow(pr, 'bottom', pinnedBottomIndex);\r\n              let pinnedBottomIndex = $index\r\n            ) {\r\n              <div\r\n                class=\"re-dg-row re-dg-pinned re-dg-bottom\"\r\n                role=\"row\"\r\n                [style.width.px]=\"contentW\"\r\n                [style.min-width.%]=\"100\"\r\n                [attr.aria-rowindex]=\"ariaPinnedBottomRowIndex(pinnedBottomIndex)\"\r\n              >\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]=\"{\r\n                      $implicit: resolvePinnedData(pr),\r\n                      row: pr,\r\n                      index: pinnedBottomIndex,\r\n                      region: 'bottom',\r\n                    }\"\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 let-pinnedRow=\"row\" let-pinnedIndex=\"index\" let-pinnedRegion=\"region\">\r\n    @for (col of cols; track col.key; let colIndex = $index) {\r\n      @let isCheckbox = 'type' in col && col.type === 'checkbox';\r\n      @let isIndex = 'type' in col && col.type === 'index';\r\n      @let stickyLeft = vm.stickyOffset(col.key, 'left');\r\n      @let stickyRight = vm.stickyOffset(col.key, 'right');\r\n      @let isLeft = vm.isStickyLeft(col.key);\r\n      @let isRight = vm.isStickyRight(col.key);\r\n\r\n      <div\r\n        class=\"re-dg-cell\"\r\n        role=\"gridcell\"\r\n        [class.expanded]=\"!!col.expandBy\"\r\n        [class]=\"cellClass(col, $any(row))\"\r\n        [class.sticky-left]=\"isLeft\"\r\n        [class.sticky-right]=\"isRight\"\r\n        [style.left.px]=\"stickyLeft\"\r\n        [style.right.px]=\"stickyRight\"\r\n        [style.justify-items]=\"col.align || 'left'\"\r\n        [style.text-align]=\"col.align || 'left'\"\r\n        [style.height.px]=\"rowH\"\r\n        [style.width.px]=\"vm.widthByKey(col.key)\"\r\n        [attr.id]=\"pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex)\"\r\n        [attr.aria-colindex]=\"colIndex + 1\"\r\n        [attr.aria-describedby]=\"\r\n          isTooltipTarget(pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex)) ? tooltipId : null\r\n        \"\r\n        (mouseenter)=\"\r\n          !isCheckbox &&\r\n            !isIndex &&\r\n            onTooltipEnter($event, $any(row), col, -1, pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex))\r\n        \"\r\n        (mouseleave)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (focusin)=\"\r\n          !isCheckbox &&\r\n            !isIndex &&\r\n            onTooltipFocus($event, $any(row), col, -1, pinnedCellAriaId(col.key, pinnedRow, pinnedRegion, pinnedIndex))\r\n        \"\r\n        (focusout)=\"!isCheckbox && !isIndex && hideTooltip()\"\r\n        (keydown.escape)=\"hideTooltip()\"\r\n        (click)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n        (contextmenu)=\"!isCheckbox && !isIndex && onCellContext($any(row), col, -1, $event)\"\r\n        (dblclick)=\"!isCheckbox && !isIndex && onCellDoubleClick($any(row), col, -1, $event)\"\r\n        (keydown.enter)=\"!isCheckbox && !isIndex && onCellClick($any(row), col, -1, $event)\"\r\n      >\r\n        @if (!isCheckbox && !isIndex) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"dataCellContent\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: $any(row), col: col, index: -1, isPinned: true }\"\r\n          />\r\n        }\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  @if (deferTooltip()) {\r\n    @defer (when true) {\r\n      @let tooltipStateValue = tooltipState();\r\n      <div\r\n        class=\"re-dg-tooltip\"\r\n        #tooltip\r\n        role=\"tooltip\"\r\n        [attr.id]=\"tooltipId\"\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 [ngTemplateOutlet]=\"tooltipStateValue.tpl\" [ngTemplateOutletContext]=\"tooltipStateValue.ctx\" />\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      role=\"tooltip\"\r\n      [attr.id]=\"tooltipId\"\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 [ngTemplateOutlet]=\"tooltipStateValue.tpl\" [ngTemplateOutletContext]=\"tooltipStateValue.ctx\" />\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      [style.height.px]=\"vm.thumbHeightPx()\"\r\n      [style.transform]=\"'translateY(' + vm.thumbTopPx() + 'px)'\"\r\n      (pointerdown)=\"onThumbDown($event)\"\r\n    ></div>\r\n  </div>\r\n</div>\r\n", styles: [":host{--re-data-grid-min-height: 200px;--re-data-grid-height: 400px;--re-data-grid-rounded: var(--radius-md, 6px);--re-data-grid-separator-color: var(--border-color);--re-data-grid-separator: 1px solid var(--re-data-grid-separator-color);--re-data-grid-surface: var(--surface-neutral, #fff);--re-data-grid-active: var(--primary-color, #2a90f4);--re-data-grid-empty-color: #777;--re-data-grid-empty-surface: transparent;--re-data-grid-loading-color: #444;--re-data-grid-loading-surface: rgba(255, 255, 255, .5);--re-data-grid-spinner-size: 2rem;--re-data-grid-spinner-width: .25rem;--re-data-grid-spinner-track-color: rgba(0, 0, 0, .12);--re-data-grid-skeleton-width: 100%;--re-data-grid-skeleton-height: 100%;--re-data-grid-skeleton-rounded: var(--re-data-grid-rounded, .75rem);--re-data-grid-skeleton-shine: rgba(255, 255, 255, .8);--re-data-grid-skeleton-line: #e7ebf0;--re-data-grid-scrollbar-size: 4px;--re-data-grid-scrollbar-offset: 2px;--re-data-grid-scrollbar-track-rounded: .25rem;--re-data-grid-scrollbar-track-surface: transparent;--re-data-grid-scrollbar-thumb-size: 8px;--re-data-grid-scrollbar-thumb-color: rgba(0, 0, 0, .25);--re-data-grid-scrollbar-thumb-active-color: rgba(0, 0, 0, .45);--re-data-grid-scrollbar-thumb-rounded: var(--re-data-grid-scrollbar-track-rounded);--re-data-grid-tooltip-surface: #0f172a;--re-data-grid-tooltip-color: #f8fafc;--re-data-grid-tooltip-radius: .5rem;--re-data-grid-tooltip-padding: .4rem .6rem;--re-data-grid-tooltip-shadow: 0 8px 24px rgba(15, 23, 42, .25);--re-data-grid-tooltip-z: 60;--re-data-grid-header-rounded: var(--re-data-grid-rounded);--re-data-grid-header-surface: #fff;--re-data-grid-header-body-gap: 0px;--re-data-grid-header-row-height: 40px;--re-data-grid-header-row-separator-color: #ccc;--re-data-grid-header-row-separator: 1px solid var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-height: var(--re-data-grid-header-row-height);--re-data-grid-header-group-row-separator-color: var(--re-data-grid-header-row-separator-color);--re-data-grid-header-group-row-separator: 1px solid var(--re-data-grid-header-group-row-separator-color);--re-data-grid-header-group-cell-font-weight: var(--re-data-grid-header-cell-font-weight);--re-data-grid-header-group-cell-font-size: var(--re-data-grid-header-cell-font-size);--re-data-grid-header-group-cell-color: var(--re-data-grid-header-cell-color);--re-data-grid-header-group-cell-surface: var(--re-data-grid-header-cell-surface);--re-data-grid-header-cell-font-weight: 600;--re-data-grid-header-cell-font-size: .8rem;--re-data-grid-header-cell-color: #000;--re-data-grid-header-cell-surface: #fafafa;--re-data-grid-header-cell-line-height: 1.2;--re-data-grid-header-cell-max-lines: 2;--re-data-grid-footer-separator-color: #ccc;--re-data-grid-footer-separator: 1px solid var(--re-data-grid-footer-separator-color);--re-data-grid-footer-surface: #fff;--re-data-grid-row-separator-color: #bbb;--re-data-grid-row-separator: 1px solid var(--re-data-grid-row-separator-color);--re-data-grid-row-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-surface: var(--re-data-grid-cell-surface);--re-data-grid-row-hover-color: var(--re-data-grid-cell-color);--re-data-grid-row-hover-rounded: 0px;--re-data-grid-column-separator-color: transparent;--re-data-grid-column-separator: 1px solid var(--re-data-grid-column-separator-color);--re-data-grid-column-odd-surface: var(--re-data-grid-cell-surface);--re-data-grid-cell-paddings: .4rem .625rem;--re-data-grid-cell-font-weight: 400;--re-data-grid-cell-font-size: .75rem;--re-data-grid-cell-color: #000;--re-data-grid-cell-surface: #fff;--re-data-grid-cell-line-height: 1.2;--re-data-grid-cell-max-lines: 2;--re-data-grid-sticky-header-cell-surface: #fff;--re-data-grid-sticky-cell-surface: #fdfdfd;--re-data-grid-sticky-cell-row-odd-surface: #fdfdfd;--re-data-grid-sticky-cell-left-shadow: 2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-sticky-cell-right-shadow: -2px 0 2px rgba(0, 0, 0, .03);--re-data-grid-pinned-surface: #fcfcfc;--re-data-grid-pinned-separator-color: #eee;--re-data-grid-pinned-separator: 1px solid var(--re-data-grid-pinned-separator-color);--re-data-grid-expander-color: var(--primary-color, currentColor);--re-data-grid-expanded-color: var(--re-data-grid-cell-color, #000);--re-data-grid-expanded-surface: var(--re-data-grid-cell-surface, #fff);--re-data-grid-focus-ring-color: color-mix(in srgb, var(--primary-color, #2a90f4) 55%, transparent);--re-data-grid-focus-ring-width: 2px;--re-data-grid-focus-ring-offset: -2px;display:block;min-height:0;min-width:0}:host,:host *,:host *:before,:host *:after{box-sizing:border-box;outline:none}:host button{outline:none}.re-dg-root{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:var(--re-data-grid-min-height);border-radius:var(--re-data-grid-rounded);border:var(--re-data-grid-separator)}.re-dg-root.fill{display:block}.re-dg-root.re-dg-loading{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:wait}.re-dg-root.re-dg-loading .re-dg-body{overflow:hidden}.re-dg-root.re-dg-loading .re-dg-scrollbar{display:none!important}.re-dg-root.re-dg-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-root.resizing-columns{-webkit-user-select:none;user-select:none;cursor:col-resize}.re-dg-body{position:relative;flex:1 1 auto;min-height:0;min-width:0;height:inherit;border:var(--re-data-grid-separator);border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-surface);overflow:auto;scrollbar-width:auto;-ms-overflow-style:auto}.re-dg-body::-webkit-scrollbar{width:var(--re-data-grid-scrollbar-size);height:var(--re-data-grid-scrollbar-size)}.re-dg-body::-webkit-scrollbar:vertical{width:0}.re-dg-body::-webkit-scrollbar-track{border-radius:var(--re-data-grid-scrollbar-track-rounded);background:var(--re-data-grid-scrollbar-track-surface)}.re-dg-body::-webkit-scrollbar-thumb{border-radius:var(--re-data-grid-scrollbar-thumb-rounded);background:var(--re-data-grid-scrollbar-thumb-color);transition:opacity .3s ease}.re-dg-body::-webkit-scrollbar-thumb:hover{background:var(--re-data-grid-scrollbar-thumb-active-color)}.re-dg-header,.re-dg-footer{position:sticky;z-index:3}.re-dg-header{top:0;background-color:var(--re-data-grid-header-surface)}.re-dg-header-row{min-height:var(--re-data-grid-header-row-height)}.re-dg-header-group-row{min-height:var(--re-data-grid-header-group-row-height)}.re-dg-header-rows{display:flex;flex-direction:column;padding-bottom:var(--re-data-grid-header-body-gap)}.re-dg-footer{bottom:0;border-radius:0 0 var(--re-data-grid-rounded) var(--re-data-grid-rounded);background-color:var(--re-data-grid-footer-surface)}.re-dg-row{position:relative;display:flex}.re-dg-data-row{position:absolute;left:0;top:0;min-width:100%;cursor:default;will-change:transform}.re-dg-sticky-row{z-index:2;top:0}.re-dg-cell,.re-dg-header-cell{display:flex;flex:0 0 auto;align-items:center;padding:var(--re-data-grid-cell-paddings);border-right:var(--re-data-grid-column-separator);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:focus-visible,.re-dg-header-cell:focus-visible,.re-dg-header-cell button:focus-visible,.re-dg-row[tabindex=\"0\"]:focus-visible{outline:var(--re-data-grid-focus-ring-width) solid var(--re-data-grid-focus-ring-color);outline-offset:var(--re-data-grid-focus-ring-offset);z-index:4}.re-dg-cell{width:100%;border-bottom:var(--re-data-grid-row-separator);font-weight:var(--re-data-grid-cell-font-weight);font-size:var(--re-data-grid-cell-font-size);color:var(--re-data-grid-cell-color);background-color:var(--re-data-grid-cell-surface)}.re-dg-row:nth-child(odd) .re-dg-cell{background-color:var(--re-data-grid-row-odd-surface)}.re-dg-row.re-dg-row-disabled .re-dg-cell{opacity:.6;cursor:not-allowed}.re-dg-row:nth-child(odd) .re-dg-cell.sticky-left,.re-dg-row:nth-child(odd) .re-dg-cell.sticky-right{background-color:var(--re-data-grid-sticky-cell-row-odd-surface)}.re-dg-cell:nth-child(odd){background-color:var(--re-data-grid-column-odd-surface)}.re-dg-bottom>.re-dg-cell{border-top:var(--re-data-grid-footer-separator)}.re-dg-header-cell{position:relative;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-column-resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:5}.re-dg-header-cell.re-dg-header-group-cell{border-bottom:var(--re-data-grid-header-group-row-separator);font-weight:var(--re-data-grid-header-group-cell-font-weight);font-size:var(--re-data-grid-header-group-cell-font-size);color:var(--re-data-grid-header-group-cell-color);background:var(--re-data-grid-header-group-cell-surface)}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:first-child{border-radius:var(--re-data-grid-header-rounded) 0 0 0}.re-dg-header-rows>.re-dg-row:first-child .re-dg-header-cell:last-child{border-radius:0 var(--re-data-grid-header-rounded) 0 0}.re-dg-data-row:last-child .re-dg-cell:first-child{border-radius:0 0 0 var(--re-data-grid-rounded)}.re-dg-data-row:last-child .re-dg-cell:last-child{border-radius:0 0 var(--re-data-grid-rounded) 0}.re-dg-header-cell .re-dg-header-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-header-cell-line-height);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-header-cell-max-lines)}.re-dg-row.re-dg-pinned>.re-dg-cell{border-bottom:var(--re-data-grid-pinned-separator);background-color:var(--re-data-grid-pinned-surface)}.re-dg-row .re-dg-header-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-left{box-shadow:var(--re-data-grid-sticky-cell-left-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row .re-dg-header-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-header-cell-surface)}.re-dg-row .re-dg-cell.sticky-right{box-shadow:var(--re-data-grid-sticky-cell-right-shadow);background-color:var(--re-data-grid-sticky-cell-surface)}.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-left,.re-dg-row.re-dg-pinned>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-pinned-surface)}.re-dg-row:hover>.re-dg-cell,.re-dg-row:hover>.re-dg-cell.sticky-left,.re-dg-row:hover>.re-dg-cell.sticky-right{background-color:var(--re-data-grid-row-hover-surface)!important;color:var(--re-data-grid-row-hover-color)!important}.re-dg-row:hover>.re-dg-cell:first-child{border-radius:var(--re-data-grid-row-hover-rounded) 0 0 var(--re-data-grid-row-hover-rounded)}.re-dg-row:hover>.re-dg-cell:last-child{border-radius:0 var(--re-data-grid-row-hover-rounded) var(--re-data-grid-row-hover-rounded) 0}.sticky-left,.sticky-right{position:sticky;z-index:2}.sortable{cursor:pointer}.active-sort{color:var(--re-data-grid-active)}.re-dg-sort-ind{margin-left:6px}.re-dg-icon-placeholder{display:inline-block;width:1rem;height:1rem}.re-dg-cell-deferred{display:block;width:100%;height:100%}.re-dg-deferred-placeholder{background:transparent}.re-dg-data-row .re-dg-cell.expanded{color:var(--re-data-grid-expanded-color);background:var(--re-data-grid-expanded-surface)}.re-dg-empty{position:absolute;inset:0;display:grid;place-items:center;height:inherit;width:100%;border-radius:var(--re-data-grid-rounded);color:var(--re-data-grid-empty-color);background:var(--re-data-grid-empty-surface)}.re-dg-empty-text{width:100%;text-align:center}.re-dg-loader{position:absolute;inset:0;display:grid;place-items:center;height:inherit;border-radius:var(--re-data-grid-rounded);background-color:var(--re-data-grid-loading-surface);color:var(--re-data-grid-loading-color);z-index:5}.re-dg-tooltip{position:fixed;left:0;top:0;max-width:min(28rem,70vw);padding:var(--re-data-grid-tooltip-padding);border-radius:var(--re-data-grid-tooltip-radius);background:var(--re-data-grid-tooltip-surface);color:var(--re-data-grid-tooltip-color);box-shadow:var(--re-data-grid-tooltip-shadow);font-size:.75rem;line-height:1.2;z-index:var(--re-data-grid-tooltip-z);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.re-dg-tooltip.visible{opacity:1;transform:translateY(0)}.re-dg-loader-spinner{width:var(--re-data-grid-spinner-size);height:var(--re-data-grid-spinner-size);border-radius:50%;border:var(--re-data-grid-spinner-width) solid var(--re-data-grid-spinner-track-color);border-top-color:var(--re-data-grid-loading-color);animation:re-dg-spinner .8s linear infinite}.re-dg-skeleton-row{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:var(--re-data-grid-cell-surface);pointer-events:none}.re-dg-gap-loader{display:flex;align-items:center;padding:var(--re-data-grid-cell-paddings);border-bottom:var(--re-data-grid-row-separator);background-color:color-mix(in srgb,var(--re-data-grid-cell-surface) 88%,var(--re-data-grid-skeleton-line));pointer-events:none;opacity:.9}.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;touch-action: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 }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pinnedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedRows", required: false }] }], isRowSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSticky", required: false }] }], isRowDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowDisabled", required: false }] }], getRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowClass", 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 }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], selectionPolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionPolicy", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], virtualBuffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualBuffer", required: false }] }], lockVerticalScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockVerticalScroll", required: false }] }], headerGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerGroups", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMode", required: false }] }], deferContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferContent", required: false }] }], deferHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferHeader", required: false }] }], deferPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferPinned", required: false }] }], deferCells: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferCells", required: false }] }], deferIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferIcons", required: false }] }], deferTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "deferTooltip", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageStartFromZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageStartFromZero", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sourceError: [{ type: i0.Output, args: ["sourceError"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], multiSortChange: [{ type: i0.Output, args: ["multiSortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], selectedKeysChange: [{ type: i0.Output, args: ["selectedKeysChange"] }], 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"] }], columnResizeEnd: [{ type: i0.Output, args: ["columnResizeEnd"] }], 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 }] }] } });
+
+/** Marks a backend-only sort field explicitly at the call site. */
+const gridBackendSortField = (field) => field;
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DataGridTypeCellTemplateDirective as D, clampThumbTop as a, DataGridCellTemplateDirective as b, computeScrollbarState as c, DataGridHeaderTemplateDirective as d, DataGridRowDirective as e, DataGridDeclarativeColumn as f, DataGridDeclarativeHeaderDirective as g, DataGridDeclarativeCellDirective as h, DataGridCellEmptyDirective as i, DataGridCellLoadingDirective as j, DataGridStickyRowDirective as k, DataGridSortIconDirective as l, mapThumbTopToScrollTop as m, DataGridExpanderIconDirective as n, DATA_GRID_CONFIG as o, DATA_GRID_HEADER_TEXT_RESOLVER as p, DATA_GRID_TYPE_RENDERERS as q, DATA_GRID_TYPE_TRANSFORMERS as r, DEFAULT_DATA_GRID_DEFAULTS as s, provideDataGridDefaults as t, provideDataGridHeaderTextResolver as u, provideDataGridHeaderTextResolverWithParent as v, provideDataGridTypeRenderers as w, provideDataGridTypeTransformers as x, DataGrid as y };
-//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-DUpCJ9P0.mjs.map
+export { DataGridTypeCellTemplateDirective as D, clampThumbTop as a, DataGridCellTemplateDirective as b, computeScrollbarState as c, DataGridHeaderTemplateDirective as d, DataGridRowDirective as e, DataGridDeclarativeColumn as f, DataGridDeclarativeHeaderDirective as g, DataGridDeclarativeCellDirective as h, DataGridCellEmptyDirective as i, DataGridCellLoadingDirective as j, DataGridStickyRowDirective as k, DataGridSortIconDirective as l, mapThumbTopToScrollTop as m, DataGridExpanderIconDirective as n, DATA_GRID_CONFIG as o, DATA_GRID_HEADER_TEXT_RESOLVER as p, DATA_GRID_TYPE_RENDERERS as q, DATA_GRID_TYPE_TRANSFORMERS as r, DEFAULT_DATA_GRID_DEFAULTS as s, provideDataGridDefaults as t, provideDataGridHeaderTextResolver as u, provideDataGridHeaderTextResolverWithParent as v, provideDataGridTypeRenderers as w, provideDataGridTypeTransformers as x, DataGrid as y, gridBackendSortField as z };
+//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-YzRaXPVK.mjs.map