npm - @reforgium/data-grid - Versions diffs - 3.2.7 → 3.2.8 - Mend

@reforgium/data-grid 3.2.7 → 3.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,16 @@
+## [3.2.8] - 17.09.2026
+### Added
+- Public CSS hooks for body geometry, header rows and cells, body cells, row height, final-row separators, template alignment, and paginator page geometry.
+### Fixed
+- Active paginator border color now resolves through a declared active-page token.
+- Consumer applications can reproduce compact and report-specific grid layouts without `::ng-deep` selectors.
+---
 ## [3.2.7] - 17.09.2026
 ### Added

package/README.md CHANGED Viewed

@@ -597,8 +597,10 @@ Layout / Appearance:
 - `--re-data-grid-rounded` - border radius (`var(--radius-md, 6px)`)
 - `--re-data-grid-separator-color` - outer border color (`var(--border-color)`)
 - `--re-data-grid-separator` - outer border (`1px solid var(--re-data-grid-separator-color)`)
-- `--re-data-grid-surface` - table background (`#fff`)
-- `--re-data-grid-active` - active color (`#2a90f4`)
+- `--re-data-grid-surface` - table background (`#fff`)
+- `--re-data-grid-active` - active color (`#2a90f4`)
+- `--re-data-grid-body-border` - scrollable body border (`var(--re-data-grid-separator)`)
+- `--re-data-grid-body-radius` - scrollable body radius (`var(--re-data-grid-rounded)`)
 Empty / Loading States:
@@ -641,13 +643,17 @@ Header:
 - `--re-data-grid-header-rounded` - header corner radius (`var(--re-data-grid-rounded)`)
 - `--re-data-grid-header-surface` - header area background (`#fff`)
-- `--re-data-grid-header-body-gap` - gap between header and body (`0px`)
+- `--re-data-grid-header-body-gap` - gap between header and body (`0px`)
+- `--re-data-grid-header-rows-padding` - header rows container padding (`0`)
+- `--re-data-grid-header-rows-border-bottom` - header rows container bottom border (`0`)
+- `--re-data-grid-header-rows-surface` - header rows container background (`transparent`)
 - `--re-data-grid-header-row-height` - main header row height (`40px`)
 - `--re-data-grid-header-row-separator-color` - main header separator color (`#ccc`)
 - `--re-data-grid-header-row-separator` - main header separator (`1px solid var(--re-data-grid-header-row-separator-color)`)
 - `--re-data-grid-header-group-row-height` - group header row height (`var(--re-data-grid-header-row-height)`)
 - `--re-data-grid-header-group-row-separator-color` - group header separator color (`var(--re-data-grid-header-row-separator-color)`)
-- `--re-data-grid-header-group-row-separator` - group header separator (`1px solid var(--re-data-grid-header-group-row-separator-color)`)
+- `--re-data-grid-header-group-row-separator` - group header separator (`1px solid var(--re-data-grid-header-group-row-separator-color)`)
+- `--re-data-grid-header-group-row-border-bottom` - group row container bottom border (`0`)
 Header Cells:
@@ -656,7 +662,14 @@ Header Cells:
 - `--re-data-grid-header-cell-color` - text color (`#000`)
 - `--re-data-grid-header-cell-surface` - cell background (`#fafafa`)
 - `--re-data-grid-header-cell-line-height` - header text line-height for clamp (`1.2`)
-- `--re-data-grid-header-cell-max-lines` - header max text lines (`2`)
+- `--re-data-grid-header-cell-max-lines` - header max text lines (`2`)
+- `--re-data-grid-header-cell-min-height` - header cell minimum height (`auto`)
+- `--re-data-grid-header-cell-padding` - header cell padding (`var(--re-data-grid-cell-paddings)`)
+- `--re-data-grid-header-cell-border-right` - header column divider (`var(--re-data-grid-column-separator)`)
+- `--re-data-grid-header-cell-border-bottom` - header bottom divider (`var(--re-data-grid-header-row-separator)`)
+- `--re-data-grid-header-cell-radius` - header cell radius (`0`)
+- `--re-data-grid-header-cell-direction` - header cell flex direction (`row`)
+- `--re-data-grid-header-cell-gap` - header cell content gap (`0.75rem`)
 - `--re-data-grid-header-group-cell-font-weight` - group font weight (`var(--re-data-grid-header-cell-font-weight)`)
 - `--re-data-grid-header-group-cell-font-size` - group font size (`var(--re-data-grid-header-cell-font-size)`)
 - `--re-data-grid-header-group-cell-color` - group text color (`var(--re-data-grid-header-cell-color)`)
@@ -675,7 +688,9 @@ Rows:
 - `--re-data-grid-row-odd-surface` - odd rows background (`var(--re-data-grid-cell-surface)`)
 - `--re-data-grid-row-hover-surface` - hover rows background (`var(--re-data-grid-cell-surface)`)
 - `--re-data-grid-row-hover-color` - hover rows text color (`var(--re-data-grid-cell-color)`)
-- `--re-data-grid-row-hover-rounded` - hover row corner radius (`0px`)
+- `--re-data-grid-row-hover-rounded` - hover row corner radius (`0px`)
+- `--re-data-grid-row-min-height` - row minimum height (`auto`)
+- `--re-data-grid-last-row-border-bottom` - final body-row separator (`var(--re-data-grid-row-separator)`)
 Columns:
@@ -691,7 +706,15 @@ Cells:
 - `--re-data-grid-cell-color` - text color (`#000`)
 - `--re-data-grid-cell-surface` - cell background (`#fff`)
 - `--re-data-grid-cell-line-height` - body text line-height for clamp (`1.2`)
-- `--re-data-grid-cell-max-lines` - body max text lines (`2`)
+- `--re-data-grid-cell-max-lines` - body max text lines (`2`)
+- `--re-data-grid-cell-min-height` - body cell minimum height (`auto`)
+- `--re-data-grid-cell-border-right` - body cell column divider (`var(--re-data-grid-column-separator)`)
+- `--re-data-grid-cell-border-bottom` - body cell row divider (`var(--re-data-grid-row-separator)`)
+- `--re-data-grid-cell-radius` - body cell radius (`0`)
+- `--re-data-grid-cell-direction` - body cell flex direction (`row`)
+- `--re-data-grid-cell-gap` - body cell content gap (`0`)
+- `--re-data-grid-cell-template-justify` - default projected-template alignment (`left`)
+- `--re-data-grid-cell-template-text-align` - default projected-template text alignment (`left`)
 Checkbox:
@@ -821,12 +844,16 @@ Page:
 - `--re-data-grid-paginator-page-rounded` - page button border radius (`var(--re-data-grid-rounded, var(--radius-md, 0.375rem))`)
 - `--re-data-grid-paginator-page-surface` - page button background (`var(--re-data-grid-surface, white)`)
 - `--re-data-grid-paginator-page-color` - page button text color (`var(--text-primary, #1e293b)`)
-- `--re-data-grid-paginator-page-font-size` - page button font size (`0.875rem`)
+- `--re-data-grid-paginator-page-font-size` - page button font size (`0.875rem`)
+- `--re-data-grid-paginator-page-width` - page button width (`auto`)
+- `--re-data-grid-paginator-page-flex-shrink` - page button flex shrink (`0`)
+- `--re-data-grid-paginator-page-font-variant-numeric` - numeric glyph variant (`normal`)
 Active Page:
 - `--re-data-grid-paginator-page-active-surface` - active page button background (`var(--re-data-grid-active, #3b82f6)`)
-- `--re-data-grid-paginator-page-active-color` - active page button text color (`white`)
+- `--re-data-grid-paginator-page-active-color` - active page button text color (`white`)
+- `--re-data-grid-paginator-page-active-border-color` - active page border color (`var(--re-data-grid-paginator-page-active-surface)`)
 Hover Page:

package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-DS2YKA3c.mjs → reforgium-data-grid-grid-overlay-scroll.feature-BjGZGMGU.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-CJw8rTN4.mjs';
+import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs';
 function createGridOverlayScrollFeature(ctx) {
     let activeMove = null;
@@ -111,4 +111,4 @@ function createGridOverlayScrollFeature(ctx) {
 }
 export { createGridOverlayScrollFeature };
-//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-DS2YKA3c.mjs.map
+//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-BjGZGMGU.mjs.map

package/fesm2022/reforgium-data-grid-paginator.mjs CHANGED Viewed

@@ -217,7 +217,7 @@ class DataGridPaginator {
         }
       </button>
     }
-  `, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-active-shadow: none;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridDropdown, selector: "re-data-grid-dropdown", inputs: ["options", "value", "disabled", "placeholder"], outputs: ["selectValue"] }] });
+  `, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-width: auto;--re-data-grid-paginator-page-flex-shrink: 0;--re-data-grid-paginator-page-font-variant-numeric: normal;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-active-shadow: none;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);width:var(--re-data-grid-paginator-page-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);font-variant-numeric:var(--re-data-grid-paginator-page-font-variant-numeric);flex-shrink:var(--re-data-grid-paginator-page-flex-shrink);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var( --re-data-grid-paginator-page-active-border-color, var(--re-data-grid-paginator-page-active-surface) );background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridDropdown, selector: "re-data-grid-dropdown", inputs: ["options", "value", "disabled", "placeholder"], outputs: ["selectValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, decorators: [{
             type: Component,
@@ -311,7 +311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }
       </button>
     }
-  `, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-active-shadow: none;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\n"] }]
+  `, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-width: auto;--re-data-grid-paginator-page-flex-shrink: 0;--re-data-grid-paginator-page-font-variant-numeric: normal;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-active-shadow: none;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);width:var(--re-data-grid-paginator-page-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);font-variant-numeric:var(--re-data-grid-paginator-page-font-variant-numeric);flex-shrink:var(--re-data-grid-paginator-page-flex-shrink);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var( --re-data-grid-paginator-page-active-border-color, var(--re-data-grid-paginator-page-active-surface) );background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\n"] }]
         }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxShowPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxShowPages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], showPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPerPage", required: false }] }], perPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageLabel", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], firstSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorFirstDirective), { isSignal: true }] }], lastSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorLastDirective), { isSignal: true }] }], pageSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorPageDirective), { isSignal: true }] }] } });
 /**

package/fesm2022/{reforgium-data-grid-reforgium-data-grid-CJw8rTN4.mjs → reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs} RENAMED Viewed

@@ -1362,7 +1362,7 @@ class DataGridCellComponent {
     @let col = $any(column());
     @let val = $any(value());
     @let pinned = isPinned();
-    @let align = col.align ?? 'left';
+    @let align = col.align;
     @switch (type()) {
       @case ('tpl') {
@@ -1410,7 +1410,7 @@ class DataGridCellComponent {
         <span class="re-dg-cell-text">{{ val }}</span>
       }
     }
-  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;justify-content:var(--re-data-grid-cell-template-justify, left);text-align:var(--re-data-grid-cell-template-text-align, left);width:100%;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridCellComponent, decorators: [{
             type: Component,
@@ -1419,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
     @let col = $any(column());
     @let val = $any(value());
     @let pinned = isPinned();
-    @let align = col.align ?? 'left';
+    @let align = col.align;
     @switch (type()) {
       @case ('tpl') {
@@ -1467,7 +1467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         <span class="re-dg-cell-text">{{ val }}</span>
       }
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;width:100%;min-width:0}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, DatePipe, DecimalPipe], styles: [":host{display:block;width:100%;min-width:0;text-align:inherit}.re-dg-cell-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:var(--re-data-grid-cell-line-height, 1.2);-webkit-box-orient:vertical;-webkit-line-clamp:var(--re-data-grid-cell-max-lines, 2)}.re-dg-cell-template{display:flex;justify-content:var(--re-data-grid-cell-template-justify, left);text-align:var(--re-data-grid-cell-template-text-align, left);width:100%;min-width:0}\n"] }]
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isPinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPinned", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 // noinspection ES6PreferShortImport
@@ -4474,7 +4474,7 @@ class DataGrid {
         if (this.overlayScrollFeaturePromise) {
             return this.overlayScrollFeaturePromise;
         }
-        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-DS2YKA3c.mjs').then(({ createGridOverlayScrollFeature }) => {
+        this.overlayScrollFeaturePromise = import('./reforgium-data-grid-grid-overlay-scroll.feature-BjGZGMGU.mjs').then(({ createGridOverlayScrollFeature }) => {
             const feature = createGridOverlayScrollFeature({
                 getScrollElement: () => this.scrollEl()?.nativeElement ?? null,
                 getThumbTop: () => this.vm.thumbTopPx(),
@@ -4587,11 +4587,11 @@ 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 }, 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-last-column-separator: 0;--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:last-child,.re-dg-header-cell:last-child{border-right:var(--re-data-grid-last-column-separator)}.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]] });
+    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-rows-padding: 0;--re-data-grid-header-rows-border-bottom: 0;--re-data-grid-header-rows-surface: transparent;--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-row-border-bottom: 0;--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-header-cell-min-height: auto;--re-data-grid-header-cell-padding: var(--re-data-grid-cell-paddings);--re-data-grid-header-cell-border-right: var(--re-data-grid-column-separator);--re-data-grid-header-cell-border-bottom: var(--re-data-grid-header-row-separator);--re-data-grid-header-cell-radius: 0;--re-data-grid-header-cell-direction: row;--re-data-grid-header-cell-gap: .75rem;--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-last-column-separator: 0;--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-cell-min-height: auto;--re-data-grid-cell-border-right: var(--re-data-grid-column-separator);--re-data-grid-cell-border-bottom: var(--re-data-grid-row-separator);--re-data-grid-cell-radius: 0;--re-data-grid-cell-direction: row;--re-data-grid-cell-gap: 0;--re-data-grid-cell-template-justify: left;--re-data-grid-cell-template-text-align: left;--re-data-grid-row-min-height: auto;--re-data-grid-last-row-border-bottom: var(--re-data-grid-row-separator);--re-data-grid-body-border: var(--re-data-grid-separator);--re-data-grid-body-radius: var(--re-data-grid-rounded);--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-body-border);border-radius:var(--re-data-grid-body-radius);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);border-bottom:var(--re-data-grid-header-group-row-border-bottom)}.re-dg-header-rows{display:flex;flex-direction:column;padding:var(--re-data-grid-header-rows-padding);padding-bottom:var(--re-data-grid-header-body-gap);border-bottom:var(--re-data-grid-header-rows-border-bottom);background:var(--re-data-grid-header-rows-surface)}.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;min-height:var(--re-data-grid-row-min-height)}.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-cell-border-right);border-radius:var(--re-data-grid-cell-radius);flex-direction:var(--re-data-grid-cell-direction);gap:var(--re-data-grid-cell-gap);min-height:var(--re-data-grid-cell-min-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:last-child,.re-dg-header-cell:last-child{border-right:var(--re-data-grid-last-column-separator)}.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-cell-border-bottom);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;flex-direction:var(--re-data-grid-header-cell-direction);gap:var(--re-data-grid-header-cell-gap);min-height:var(--re-data-grid-header-cell-min-height);padding:var(--re-data-grid-header-cell-padding);border-right:var(--re-data-grid-header-cell-border-right);border-bottom:var(--re-data-grid-header-cell-border-bottom);border-radius:var(--re-data-grid-header-cell-radius);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{border-bottom:var(--re-data-grid-last-row-border-bottom)}.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 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-last-column-separator: 0;--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:last-child,.re-dg-header-cell:last-child{border-right:var(--re-data-grid-last-column-separator)}.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"] }]
+            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-rows-padding: 0;--re-data-grid-header-rows-border-bottom: 0;--re-data-grid-header-rows-surface: transparent;--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-row-border-bottom: 0;--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-header-cell-min-height: auto;--re-data-grid-header-cell-padding: var(--re-data-grid-cell-paddings);--re-data-grid-header-cell-border-right: var(--re-data-grid-column-separator);--re-data-grid-header-cell-border-bottom: var(--re-data-grid-header-row-separator);--re-data-grid-header-cell-radius: 0;--re-data-grid-header-cell-direction: row;--re-data-grid-header-cell-gap: .75rem;--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-last-column-separator: 0;--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-cell-min-height: auto;--re-data-grid-cell-border-right: var(--re-data-grid-column-separator);--re-data-grid-cell-border-bottom: var(--re-data-grid-row-separator);--re-data-grid-cell-radius: 0;--re-data-grid-cell-direction: row;--re-data-grid-cell-gap: 0;--re-data-grid-cell-template-justify: left;--re-data-grid-cell-template-text-align: left;--re-data-grid-row-min-height: auto;--re-data-grid-last-row-border-bottom: var(--re-data-grid-row-separator);--re-data-grid-body-border: var(--re-data-grid-separator);--re-data-grid-body-radius: var(--re-data-grid-rounded);--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-body-border);border-radius:var(--re-data-grid-body-radius);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);border-bottom:var(--re-data-grid-header-group-row-border-bottom)}.re-dg-header-rows{display:flex;flex-direction:column;padding:var(--re-data-grid-header-rows-padding);padding-bottom:var(--re-data-grid-header-body-gap);border-bottom:var(--re-data-grid-header-rows-border-bottom);background:var(--re-data-grid-header-rows-surface)}.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;min-height:var(--re-data-grid-row-min-height)}.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-cell-border-right);border-radius:var(--re-data-grid-cell-radius);flex-direction:var(--re-data-grid-cell-direction);gap:var(--re-data-grid-cell-gap);min-height:var(--re-data-grid-cell-min-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.re-dg-cell:last-child,.re-dg-header-cell:last-child{border-right:var(--re-data-grid-last-column-separator)}.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-cell-border-bottom);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;flex-direction:var(--re-data-grid-header-cell-direction);gap:var(--re-data-grid-header-cell-gap);min-height:var(--re-data-grid-header-cell-min-height);padding:var(--re-data-grid-header-cell-padding);border-right:var(--re-data-grid-header-cell-border-right);border-bottom:var(--re-data-grid-header-cell-border-bottom);border-radius:var(--re-data-grid-header-cell-radius);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{border-bottom:var(--re-data-grid-last-row-border-bottom)}.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. */
@@ -4602,4 +4602,4 @@ const gridBackendSortField = (field) => field;
  */
 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_HEADER_TEXT_RESOLVER as o, DATA_GRID_TYPE_RENDERERS as p, DATA_GRID_TYPE_TRANSFORMERS as q, provideDataGridHeaderTextResolver as r, provideDataGridHeaderTextResolverWithParent as s, provideDataGridTypeRenderers as t, provideDataGridTypeTransformers as u, DataGrid as v, gridBackendSortField as w };
-//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-CJw8rTN4.mjs.map
+//# sourceMappingURL=reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs.map

package/fesm2022/reforgium-data-grid.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-export { o as DATA_GRID_HEADER_TEXT_RESOLVER, p as DATA_GRID_TYPE_RENDERERS, q as DATA_GRID_TYPE_TRANSFORMERS, v as DataGrid, i as DataGridCellEmptyDirective, j as DataGridCellLoadingDirective, b as DataGridCellTemplateDirective, h as DataGridDeclarativeCellDirective, f as DataGridDeclarativeColumn, g as DataGridDeclarativeHeaderDirective, n as DataGridExpanderIconDirective, d as DataGridHeaderTemplateDirective, e as DataGridRowDirective, l as DataGridSortIconDirective, k as DataGridStickyRowDirective, D as DataGridTypeCellTemplateDirective, w as gridBackendSortField, r as provideDataGridHeaderTextResolver, s as provideDataGridHeaderTextResolverWithParent, t as provideDataGridTypeRenderers, u as provideDataGridTypeTransformers } from './reforgium-data-grid-reforgium-data-grid-CJw8rTN4.mjs';
+export { o as DATA_GRID_HEADER_TEXT_RESOLVER, p as DATA_GRID_TYPE_RENDERERS, q as DATA_GRID_TYPE_TRANSFORMERS, v as DataGrid, i as DataGridCellEmptyDirective, j as DataGridCellLoadingDirective, b as DataGridCellTemplateDirective, h as DataGridDeclarativeCellDirective, f as DataGridDeclarativeColumn, g as DataGridDeclarativeHeaderDirective, n as DataGridExpanderIconDirective, d as DataGridHeaderTemplateDirective, e as DataGridRowDirective, l as DataGridSortIconDirective, k as DataGridStickyRowDirective, D as DataGridTypeCellTemplateDirective, w as gridBackendSortField, r as provideDataGridHeaderTextResolver, s as provideDataGridHeaderTextResolverWithParent, t as provideDataGridTypeRenderers, u as provideDataGridTypeTransformers } from './reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs';
 export { DATA_GRID_CONFIG, DEFAULT_DATA_GRID_DEFAULTS, provideDataGridDefaults } from '@reforgium/data-grid/config';
 //# sourceMappingURL=reforgium-data-grid.mjs.map

package/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "3.2.7",
+  "version": "3.2.8",
   "name": "@reforgium/data-grid",
   "description": "reforgium DataGrid component",
   "author": "rtommievich",