@ngstarter-ui/components 21.0.48 → 21.0.50

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

@@ -206,6 +206,7 @@ class DataView {
     withColumnSettings = input(false, { ...(ngDevMode ? { debugName: "withColumnSettings" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     embedded = input(this._config?.embedded ?? false, { ...(ngDevMode ? { debugName: "embedded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     rowSelection = input(this._config?.rowSelection ?? 'multiple', ...(ngDevMode ? [{ debugName: "rowSelection" }] : /* istanbul ignore next */ []));
+    allowSingleRowSelectionByClick = input(this._config?.allowSingleRowSelectionByClick ?? false, { ...(ngDevMode ? { debugName: "allowSingleRowSelectionByClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     selectionWidth = input(this._config?.selectionWidth ?? 52, { ...(ngDevMode ? { debugName: "selectionWidth" } : /* istanbul ignore next */ {}), transform: (v) => parseInt(v, 10) || this._config?.selectionWidth || 52 });
     minColumnWidth = input(this._config?.minColumnWidth ?? 50, { ...(ngDevMode ? { debugName: "minColumnWidth" } : /* istanbul ignore next */ {}), transform: (v) => parseInt(v, 10) || this._config?.minColumnWidth || 40 });
     _lastScrollTop = 0;
@@ -830,10 +831,19 @@ class DataView {
                 this.dataSource().filter = value.trim().toLowerCase();
             },
             selectAll: () => {
-                this._selectAll();
+                this.selectAll();
             },
             unselectAll: () => {
-                this._unselectAll();
+                this.unselectAll();
+            },
+            selectOne: (row) => {
+                this.selectOne(row);
+            },
+            isSelected: (row) => {
+                return this.isSelected(row);
+            },
+            hasSelected: () => {
+                return this.hasSelected();
             },
             refresh: () => {
                 this.refresh();
@@ -1194,10 +1204,10 @@ class DataView {
     }
     toggleAllRows() {
         if (this.isAllSelected()) {
-            this._unselectAll();
+            this.unselectAll();
         }
         else {
-            this._selectAll();
+            this.selectAll();
         }
     }
     rowSelectionToggle(event, row) {
@@ -1208,12 +1218,42 @@ class DataView {
             this.selection.deselect(row);
         }
         this.rowSelectionChanged.emit({
+            source: 'checkbox',
             checkboxChange: event,
             row,
             checked: event.checked
         });
         this.selectionChanged.emit(this.selection.selected);
     }
+    selectRowByClick(event, row) {
+        if (!this.allowSingleRowSelectionByClick() || this._isInteractiveRowClick(event)) {
+            return;
+        }
+        this.selectOne(row);
+    }
+    _isInteractiveRowClick(event) {
+        if (event.defaultPrevented) {
+            return true;
+        }
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return false;
+        }
+        return !!target.closest([
+            'a',
+            'button',
+            'input',
+            'select',
+            'textarea',
+            '[contenteditable="true"]',
+            '[role="button"]',
+            '[role="checkbox"]',
+            '[role="menuitem"]',
+            'ngs-checkbox',
+            'ngs-menu',
+            'ngs-data-view-action-bar',
+        ].join(','));
+    }
     onPageChange(event) {
         this.pageIndex.set(event.pageIndex);
         this.pageSize.set(event.pageSize);
@@ -1383,24 +1423,43 @@ class DataView {
         }
         this.sortChange.emit(event);
     }
-    _selectAll() {
+    selectAll() {
         const data = this.rowModelType() === 'serverSide' ? this.dataSource().data : this.data();
         this.selection.select(...data);
         this.selectionChanged.emit(data);
         this.allRowsSelectionChanged.emit(true);
     }
-    _unselectAll() {
+    unselectAll() {
         this.selection.clear();
         this.selectionChanged.emit([]);
         this.allRowsSelectionChanged.emit(false);
     }
+    selectOne(row) {
+        if (this.selection.selected.length === 1 && this.selection.isSelected(row)) {
+            return;
+        }
+        this.selection.clear();
+        this.selection.select(row);
+        this.rowSelectionChanged.emit({
+            source: 'row',
+            row,
+            checked: true
+        });
+        this.selectionChanged.emit(this.selection.selected);
+    }
+    isSelected(row) {
+        return this.selection.isSelected(row);
+    }
+    hasSelected() {
+        return this.selection.hasValue();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataView, isStandalone: true, selector: "ngs-data-view", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: false, transformFunction: null }, defaultColDef: { classPropertyName: "defaultColDef", publicName: "defaultColDef", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, bufferRows: { classPropertyName: "bufferRows", publicName: "bufferRows", isSignal: true, isRequired: false, transformFunction: null }, withSelection: { classPropertyName: "withSelection", publicName: "withSelection", isSignal: true, isRequired: false, transformFunction: null }, highlightHeader: { classPropertyName: "highlightHeader", publicName: "highlightHeader", isSignal: true, isRequired: false, transformFunction: null }, rowModelType: { classPropertyName: "rowModelType", publicName: "rowModelType", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, withPagination: { classPropertyName: "withPagination", publicName: "withPagination", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, paginatorAriaLabel: { classPropertyName: "paginatorAriaLabel", publicName: "paginatorAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, withColumnSettings: { classPropertyName: "withColumnSettings", publicName: "withColumnSettings", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionWidth: { classPropertyName: "selectionWidth", publicName: "selectionWidth", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hoverRows: { classPropertyName: "hoverRows", publicName: "hoverRows", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterResultsIcon: { classPropertyName: "emptyFilterResultsIcon", publicName: "emptyFilterResultsIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterResultsText: { classPropertyName: "emptyFilterResultsText", publicName: "emptyFilterResultsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", rowSelectionChanged: "rowSelectionChanged", selectionChanged: "selectionChanged", allRowsSelectionChanged: "allRowsSelectionChanged", sortChange: "sortChange", loadEnd: "loadEnd", refreshEnd: "refreshEnd" }, host: { properties: { "class.highlight-header": "highlightHeader()", "class.pinned-header": "stickyHeader()", "class.hover-rows": "hoverRows()", "class.is-loading": "_isLoading()", "class.embedded": "embedded()", "class.has-horizontal-scroll": "hasHorizontalScroll()", "class.is-browser": "isBrowser()", "style.--ngs-data-view-header-height.px": "headerHeight()", "style.--ngs-data-view-selection-column-width.px": "selectionWidth()", "class.is-auto-height": "autoHeight()" }, classAttribute: "ngs-data-view" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataView, isStandalone: true, selector: "ngs-data-view", inputs: { paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: false, transformFunction: null }, defaultColDef: { classPropertyName: "defaultColDef", publicName: "defaultColDef", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, bufferRows: { classPropertyName: "bufferRows", publicName: "bufferRows", isSignal: true, isRequired: false, transformFunction: null }, withSelection: { classPropertyName: "withSelection", publicName: "withSelection", isSignal: true, isRequired: false, transformFunction: null }, highlightHeader: { classPropertyName: "highlightHeader", publicName: "highlightHeader", isSignal: true, isRequired: false, transformFunction: null }, rowModelType: { classPropertyName: "rowModelType", publicName: "rowModelType", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, withPagination: { classPropertyName: "withPagination", publicName: "withPagination", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, paginatorAriaLabel: { classPropertyName: "paginatorAriaLabel", publicName: "paginatorAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, snapshot: { classPropertyName: "snapshot", publicName: "snapshot", isSignal: true, isRequired: false, transformFunction: null }, withColumnSettings: { classPropertyName: "withColumnSettings", publicName: "withColumnSettings", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, allowSingleRowSelectionByClick: { classPropertyName: "allowSingleRowSelectionByClick", publicName: "allowSingleRowSelectionByClick", isSignal: true, isRequired: false, transformFunction: null }, selectionWidth: { classPropertyName: "selectionWidth", publicName: "selectionWidth", isSignal: true, isRequired: false, transformFunction: null }, minColumnWidth: { classPropertyName: "minColumnWidth", publicName: "minColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, cellRenderers: { classPropertyName: "cellRenderers", publicName: "cellRenderers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hoverRows: { classPropertyName: "hoverRows", publicName: "hoverRows", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterResultsIcon: { classPropertyName: "emptyFilterResultsIcon", publicName: "emptyFilterResultsIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterResultsText: { classPropertyName: "emptyFilterResultsText", publicName: "emptyFilterResultsText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", pageIndex: "pageIndexChange", rowSelectionChanged: "rowSelectionChanged", selectionChanged: "selectionChanged", allRowsSelectionChanged: "allRowsSelectionChanged", sortChange: "sortChange", loadEnd: "loadEnd", refreshEnd: "refreshEnd" }, host: { properties: { "class.highlight-header": "highlightHeader()", "class.pinned-header": "stickyHeader()", "class.hover-rows": "hoverRows()", "class.is-loading": "_isLoading()", "class.embedded": "embedded()", "class.has-horizontal-scroll": "hasHorizontalScroll()", "class.is-browser": "isBrowser()", "class.allow-row-click-selection": "allowSingleRowSelectionByClick()", "style.--ngs-data-view-header-height.px": "headerHeight()", "style.--ngs-data-view-selection-column-width.px": "selectionWidth()", "class.is-auto-height": "autoHeight()" }, classAttribute: "ngs-data-view" }, providers: [
             {
                 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(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--ngs-color-background);--ngs-data-view-row-bg: var(--ngs-color-background);--ngs-data-view-row-hover-bg: var(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--ngs-color-surface-container);--ngs-data-view-border-color: var(--ngs-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: var(--ngs-radius-xl);--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(--ngs-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(--ngs-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(--ngs-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(--ngs-color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--ngs-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(--ngs-color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--ngs-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(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--ngs-color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--ngs-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(--ngs-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                         (click)=\"selectRowByClick($event, row.item)\">\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                       (click)=\"selectRowByClick($event, row.item)\">\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                         (click)=\"selectRowByClick($event, row.item)\">\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(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--ngs-color-background);--ngs-data-view-row-bg: var(--ngs-color-background);--ngs-data-view-row-hover-bg: var(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--ngs-color-surface-container);--ngs-data-view-border-color: var(--ngs-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: var(--ngs-radius-xl);--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.allow-row-click-selection .grid-row{cursor:pointer}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--ngs-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(--ngs-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(--ngs-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(--ngs-color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--ngs-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(--ngs-color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--ngs-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(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--ngs-color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--ngs-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(--ngs-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,
@@ -1439,11 +1498,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[class.embedded]': 'embedded()',
                         '[class.has-horizontal-scroll]': 'hasHorizontalScroll()',
                         '[class.is-browser]': 'isBrowser()',
+                        '[class.allow-row-click-selection]': 'allowSingleRowSelectionByClick()',
                         '[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(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--ngs-color-background);--ngs-data-view-row-bg: var(--ngs-color-background);--ngs-data-view-row-hover-bg: var(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--ngs-color-surface-container);--ngs-data-view-border-color: var(--ngs-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: var(--ngs-radius-xl);--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(--ngs-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(--ngs-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(--ngs-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(--ngs-color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--ngs-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(--ngs-color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--ngs-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(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--ngs-color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--ngs-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(--ngs-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"] }] } });
+                    }, 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                         (click)=\"selectRowByClick($event, row.item)\">\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                       (click)=\"selectRowByClick($event, row.item)\">\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                         (click)=\"selectRowByClick($event, row.item)\">\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(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--ngs-color-background);--ngs-data-view-row-bg: var(--ngs-color-background);--ngs-data-view-row-hover-bg: var(--ngs-color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--ngs-color-surface-container);--ngs-data-view-border-color: var(--ngs-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: var(--ngs-radius-xl);--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.allow-row-click-selection .grid-row{cursor:pointer}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--ngs-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(--ngs-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(--ngs-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(--ngs-color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--ngs-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(--ngs-color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--ngs-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(--ngs-color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--ngs-color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--ngs-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(--ngs-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 }] }], allowSingleRowSelectionByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSingleRowSelectionByClick", 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) {
     return {