@ngstarter-ui/components 1.0.21 → 1.0.22

package/fesm2022/ngstarter-ui-components-data-view.mjs

@@ -416,6 +416,8 @@ class DataView {
         const hostRect = gridRoot.getBoundingClientRect();
         const handleRect = target.getBoundingClientRect();
         const borderLeft = gridRoot.clientLeft || 0;
+        const scrollbarArea = this._scrollbarArea();
+        const initialScrollLeft = (!col.pinned && scrollbarArea) ? scrollbarArea.scrollableContentRef().nativeElement.scrollLeft : 0;
         const initialManualWidths = { ...this._manualWidths() };
         this._resizeStartX = event.clientX;
         this._resizeStartWidth = startWidth;
@@ -427,7 +429,7 @@ class DataView {
         const leftPinnedWidth = this.leftPinnedWidth();
         const minLineLeft = leftPinnedWidth;
         let moved = false;
-        const colStartInHost = (handleRect.right - this._resizeStartWidth) - hostRect.left - borderLeft;
+        const colStartInHost = (handleRect.right - this._resizeStartWidth) - hostRect.left - borderLeft + initialScrollLeft;
         this._ngZone.runOutsideAngular(() => {
             const mouseMove$ = fromEvent(this._doc, 'mousemove', { capture: true });
             const mouseUp$ = fromEvent(this._doc, 'mouseup', { capture: true });
@@ -502,42 +504,11 @@ class DataView {
                     moved = true;
                 const minWidthVal = col.minWidth !== undefined ? parseInt(col.minWidth, 10) : this.minColumnWidth();
                 const maxWidthVal = col.maxWidth !== undefined ? parseInt(col.maxWidth, 10) : Infinity;
+                // 1. Initial width based on mouse movement
                 let newWidth = Math.round(this._resizeStartWidth + dx);
+                // 2. Constraints for the column itself
                 newWidth = Math.max(minWidthVal, Math.min(maxWidthVal, newWidth));
-                const lineLeft = colStartInHost + newWidth;
-                const isCenterCol = !col.pinned;
-                const isLeftPinned = col.pinned && col.pinAlign !== 'end';
-                const isRightPinned = col.pinned && col.pinAlign === 'end';
-                if (isCenterCol) {
-                    if (lineLeft > maxLineLeft) {
-                        newWidth = maxLineLeft - colStartInHost;
-                    }
-                    else if (lineLeft < minLineLeft) {
-                        newWidth = minLineLeft - colStartInHost;
-                    }
-                }
-                else if (isLeftPinned) {
-                    // Can't push beyond the start of right pinned columns (maxLineLeft)
-                    // Also if we are pushing into the center columns, they will be pushed or next col in pinned will be squeezed.
-                    if (lineLeft > maxLineLeft) {
-                        newWidth = maxLineLeft - colStartInHost;
-                    }
-                }
-                else if (isRightPinned) {
-                    // For right pinned, colStartInHost is relative to grid-root left.
-                    // The line shouldn't go to the left of leftPinnedWidth.
-                    if (lineLeft < minLineLeft) {
-                        newWidth = minLineLeft - colStartInHost;
-                    }
-                    // Also can't push beyond table right edge if there is an action bar
-                    const hostWidth = hostRect.width - borderLeft;
-                    if (lineLeft > hostWidth) {
-                        newWidth = hostWidth - colStartInHost;
-                    }
-                }
-                // Final check on newWidth after all constraints
-                newWidth = Math.max(minWidthVal, newWidth);
-                // If we are resizing a column that has a next column, we must ensure next column doesn't shrink below its minWidth
+                // 3. Constraint by next column (if exists, e.g. in pinned sections)
                 if (nextCol) {
                     const nextMinWidth = nextCol.minWidth !== undefined ? parseInt(nextCol.minWidth, 10) : this.minColumnWidth();
                     const maxPossibleWidth = (this._resizeStartWidth + nextColStartWidth) - nextMinWidth;
@@ -545,38 +516,36 @@ class DataView {
                         newWidth = maxPossibleWidth;
                     }
                 }
-                // Ensure lineLeft doesn't go over bounds after nextCol check
-                const finalLineLeft = colStartInHost + newWidth;
-                if (isCenterCol || isLeftPinned) {
-                    if (finalLineLeft > maxLineLeft) {
-                        newWidth = maxLineLeft - colStartInHost;
+                // 4. Final check on newWidth
+                newWidth = Math.max(minWidthVal, newWidth);
+                const isCenterCol = !col.pinned;
+                const isLeftPinned = col.pinned && col.pinAlign !== 'end';
+                const isRightPinned = col.pinned && col.pinAlign === 'end';
+                this._ngZone.run(() => {
+                    // Update line position with latest scroll
+                    const currentScrollLeft = (!col.pinned && scrollbarArea) ? scrollbarArea.scrollableContentRef().nativeElement.scrollLeft : 0;
+                    let lineLeft = colStartInHost + newWidth - (col.pinned ? 0 : currentScrollLeft);
+                    const hostWidth = hostRect.width - borderLeft;
+                    // Visual clamping: stop the line at viewport/pinned boundaries
+                    if (isCenterCol) {
+                        lineLeft = Math.max(minLineLeft, Math.min(maxLineLeft, lineLeft));
                     }
-                }
-                if (isCenterCol || isRightPinned) {
-                    if (finalLineLeft < minLineLeft) {
-                        newWidth = minLineLeft - colStartInHost;
+                    else if (isLeftPinned) {
+                        lineLeft = Math.max(0, Math.min(maxLineLeft, lineLeft));
                     }
-                }
-                if (isRightPinned) {
-                    const hostWidth = hostRect.width - borderLeft;
-                    if (colStartInHost + newWidth > hostWidth) {
-                        newWidth = hostWidth - colStartInHost;
+                    else if (isRightPinned) {
+                        lineLeft = Math.max(minLineLeft, Math.min(hostWidth, lineLeft));
                     }
-                }
-                this._ngZone.run(() => {
-                    this._resizeLineLeft.set(colStartInHost + newWidth);
+                    this._resizeLineLeft.set(lineLeft);
                     if (this._resizeColField) {
                         const map = { ...this._manualWidths() };
                         map[this._resizeColField] = `${newWidth}px`;
-                        // If we have a next column, it gets squeezed until its minimum, then it just shifts
+                        // If we have a next column, it gets squeezed/expanded
                         if (nextCol) {
-                            const currentNextWidth = Math.max(0, // Already checked minWidth in newWidth calculation
-                            nextColStartWidth - (newWidth - this._resizeStartWidth));
+                            const currentNextWidth = Math.max(0, nextColStartWidth - (newWidth - this._resizeStartWidth));
                             map[nextCol.field] = `${currentNextWidth}px`;
                         }
                         this._manualWidths.set(map);
-                        // Force recalculation of centerWidth if it's based on fixed columns
-                        // by triggering signal update if needed
                     }
                 });
             });
@@ -1434,7 +1403,7 @@ class DataView {
                 provide: DATA_VIEW,
                 useExisting: forwardRef(() => DataView),
             },
-        ], queries: [{ propertyName: "_emptyDataRef", first: true, predicate: DataViewEmptyDataDirective, descendants: true, isSignal: true }, { propertyName: "_emptyFilterResults", first: true, predicate: DataViewEmptyFilterResultsDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarRef", first: true, predicate: DataViewActionBarDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarComp", first: true, predicate: DataViewActionBarDirective, descendants: true, read: DataViewActionBar, isSignal: true }], viewQueries: [{ propertyName: "_table", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "_ngsSort", first: true, predicate: SortDirective, descendants: true, isSignal: true }, { propertyName: "_internalPaginator", first: true, predicate: Paginator, descendants: true, isSignal: true }, { propertyName: "_headerCenter", first: true, predicate: ["headerCenter"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_headerCenterInner", first: true, predicate: ["headerCenterInner"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyLeftContent", first: true, predicate: ["bodyLeftContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_scrollbarArea", first: true, predicate: ScrollbarArea, descendants: true, isSignal: true }, { propertyName: "_bodyCenterContent", first: true, predicate: ["bodyCenterContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyRightContent", first: true, predicate: ["bodyRightContent"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsDataView"], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SortHeader, selector: "[ngs-sort-header]", inputs: ["ngs-sort-header", "sortActionDescription", "disabled"], exportAs: ["ngsSortHeader"] }, { kind: "directive", type: SortDirective, selector: "[ngsSort]", inputs: ["ngsSortActive", "ngsSortStart", "ngsSortDirection", "ngsSortDisableClear", "ngsSortDisabled"], outputs: ["ngsSortActiveChange", "ngsSortDirectionChange", "ngsSortChange"], exportAs: ["ngsSort"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Paginator, selector: "ngs-paginator", inputs: ["pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "disabled"], outputs: ["page"], exportAs: ["ngsPaginator"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: EmptyState, selector: "ngs-empty-state", exportAs: ["ngsEmptyState"] }, { kind: "component", type: EmptyStateIcon, selector: "ngs-empty-state-icon", exportAs: ["ngsEmptyStateIcon"] }, { kind: "component", type: EmptyStateContent, selector: "ngs-empty-state-content", exportAs: ["ngsEmptyStateContent"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: BlockLoader, selector: "ngs-block-loader", inputs: ["loading", "spinnerDiameter", "spinnerStrokeWidth"], exportAs: ["ngsBlockLoader"] }, { kind: "directive", type: BlockLoaderContainerDirective, selector: "[ngsBlockLoaderContainer]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: MenuDivider, selector: "ngs-menu-divider" }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "_emptyDataRef", first: true, predicate: DataViewEmptyDataDirective, descendants: true, isSignal: true }, { propertyName: "_emptyFilterResults", first: true, predicate: DataViewEmptyFilterResultsDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarRef", first: true, predicate: DataViewActionBarDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarComp", first: true, predicate: DataViewActionBarDirective, descendants: true, read: DataViewActionBar, isSignal: true }], viewQueries: [{ propertyName: "_table", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "_ngsSort", first: true, predicate: SortDirective, descendants: true, isSignal: true }, { propertyName: "_internalPaginator", first: true, predicate: Paginator, descendants: true, isSignal: true }, { propertyName: "_headerCenter", first: true, predicate: ["headerCenter"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_headerCenterInner", first: true, predicate: ["headerCenterInner"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyLeftContent", first: true, predicate: ["bodyLeftContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_scrollbarArea", first: true, predicate: ScrollbarArea, descendants: true, isSignal: true }, { propertyName: "_bodyCenterContent", first: true, predicate: ["bodyCenterContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyRightContent", first: true, predicate: ["bodyRightContent"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsDataView"], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px;transform:translate(0);will-change:transform}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SortHeader, selector: "[ngs-sort-header]", inputs: ["ngs-sort-header", "sortActionDescription", "disabled"], exportAs: ["ngsSortHeader"] }, { kind: "directive", type: SortDirective, selector: "[ngsSort]", inputs: ["ngsSortActive", "ngsSortStart", "ngsSortDirection", "ngsSortDisableClear", "ngsSortDisabled"], outputs: ["ngsSortActiveChange", "ngsSortDirectionChange", "ngsSortChange"], exportAs: ["ngsSort"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Paginator, selector: "ngs-paginator", inputs: ["pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "disabled"], outputs: ["page"], exportAs: ["ngsPaginator"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: EmptyState, selector: "ngs-empty-state", exportAs: ["ngsEmptyState"] }, { kind: "component", type: EmptyStateIcon, selector: "ngs-empty-state-icon", exportAs: ["ngsEmptyStateIcon"] }, { kind: "component", type: EmptyStateContent, selector: "ngs-empty-state-content", exportAs: ["ngsEmptyStateContent"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: BlockLoader, selector: "ngs-block-loader", inputs: ["loading", "spinnerDiameter", "spinnerStrokeWidth"], exportAs: ["ngsBlockLoader"] }, { kind: "directive", type: BlockLoaderContainerDirective, selector: "[ngsBlockLoaderContainer]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: MenuDivider, selector: "ngs-menu-divider" }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataView, decorators: [{
             type: Component,
@@ -1476,7 +1445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[style.--ngs-data-view-header-height.px]': 'headerHeight()',
                         '[style.--ngs-data-view-selection-column-width.px]': 'selectionWidth()',
                         '[class.is-auto-height]': 'autoHeight()',
-                    }, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px;transform:translate(0);will-change:transform}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { _emptyDataRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyDataDirective), { isSignal: true }] }], _emptyFilterResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyFilterResultsDirective), { isSignal: true }] }], _actionBarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewActionBarDirective), { isSignal: true }] }], _actionBarComp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewActionBarDirective), { ...{ read: DataViewActionBar }, isSignal: true }] }], _table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], _ngsSort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SortDirective), { isSignal: true }] }], _internalPaginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Paginator), { isSignal: true }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], _headerCenter: [{ type: i0.ViewChild, args: ['headerCenter', { ...{ read: (ElementRef) }, isSignal: true }] }], _headerCenterInner: [{ type: i0.ViewChild, args: ['headerCenterInner', { ...{ read: (ElementRef) }, isSignal: true }] }], _bodyLeftContent: [{ type: i0.ViewChild, args: ['bodyLeftContent', { ...{ read: (ElementRef) }, isSignal: true }] }], _scrollbarArea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollbarArea), { isSignal: true }] }], _bodyCenterContent: [{ type: i0.ViewChild, args: ['bodyCenterContent', { ...{ read: (ElementRef) }, isSignal: true }] }], _bodyRightContent: [{ type: i0.ViewChild, args: ['bodyRightContent', { ...{ read: (ElementRef) }, isSignal: true }] }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: false }] }], defaultColDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColDef", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], bufferRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferRows", required: false }] }], withSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelection", required: false }] }], highlightHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightHeader", required: false }] }], rowModelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowModelType", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], withPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPagination", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], paginatorAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorAriaLabel", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], withColumnSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "withColumnSettings", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], selectionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionWidth", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hoverRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverRows", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyFilterResultsIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterResultsIcon", required: false }] }], emptyFilterResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterResultsText", required: false }] }], rowSelectionChanged: [{ type: i0.Output, args: ["rowSelectionChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], allRowsSelectionChanged: [{ type: i0.Output, args: ["allRowsSelectionChanged"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], loadEnd: [{ type: i0.Output, args: ["loadEnd"] }], refreshEnd: [{ type: i0.Output, args: ["refreshEnd"] }] } });
 
 function cellRenderer(cellRenderer, component) {