@ngstarter-ui/components 1.0.21

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

@@ -0,0 +1,1494 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, input, numberAttribute, booleanAttribute, Component, signal, ChangeDetectionStrategy, makeEnvironmentProviders, ChangeDetectorRef, DestroyRef, PLATFORM_ID, NgZone, ElementRef, contentChild, viewChild, model, computed, effect, untracked, Injector, output, forwardRef } from '@angular/core';
+import { TableDataSource } from '@ngstarter-ui/components/table';
+import { EmptyState, EmptyStateIcon, EmptyStateContent } from '@ngstarter-ui/components/empty-state';
+import { Icon } from '@ngstarter-ui/components/icon';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Paginator } from '@ngstarter-ui/components/paginator';
+import { SortDirective, SortHeader } from '@ngstarter-ui/components/sort';
+import { DOCUMENT, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet, NgStyle } from '@angular/common';
+import { Checkbox } from '@ngstarter-ui/components/checkbox';
+import { ScrollbarArea } from '@ngstarter-ui/components/scrollbar-area';
+import { BlockLoader, BlockLoaderContainerDirective } from '@ngstarter-ui/components/block-loader';
+import { Button } from '@ngstarter-ui/components/button';
+import { Menu, MenuTrigger, MenuContent, MenuItem, MenuDivider } from '@ngstarter-ui/components/menu';
+import { DialogRef, DIALOG_DATA, DialogTitle, DialogContent, DialogActions, Dialog } from '@ngstarter-ui/components/dialog';
+import * as i1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { fromEvent, Subject, takeUntil, timer, take, merge } from 'rxjs';
+
+const DATA_VIEW = new InjectionToken('DATA_VIEW');
+
+class DataViewEmptyDataDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewEmptyDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataViewEmptyDataDirective, isStandalone: true, selector: "[ngsDataViewEmptyData]", host: { classAttribute: "ngs-data-view-empty-data" }, exportAs: ["ngsDataViewEmptyData"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewEmptyDataDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDataViewEmptyData]',
+                    exportAs: 'ngsDataViewEmptyData',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-data-view-empty-data',
+                    }
+                }]
+        }] });
+
+class DataViewEmptyFilterResultsDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewEmptyFilterResultsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataViewEmptyFilterResultsDirective, isStandalone: true, selector: "[ngsDataViewEmptyFilterResults]", host: { classAttribute: "ngs-data-view-empty-filter-results" }, exportAs: ["ngsDataViewEmptyFilterResults"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewEmptyFilterResultsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDataViewEmptyFilterResults]',
+                    exportAs: 'ngsDataViewEmptyFilterResults',
+                    standalone: true,
+                    host: {
+                        'class': 'ngs-data-view-empty-filter-results',
+                    }
+                }]
+        }] });
+
+class DataViewActionBarDirective {
+    templateRef = inject(TemplateRef);
+    width = input(100, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), alias: 'ngsDataViewActionBarWidth',
+        transform: numberAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewActionBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: DataViewActionBarDirective, isStandalone: true, selector: "[ngsDataViewActionBar]", inputs: { width: { classPropertyName: "width", publicName: "ngsDataViewActionBarWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewActionBarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsDataViewActionBar]',
+                    standalone: true
+                }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsDataViewActionBarWidth", required: false }] }] } });
+
+class DataViewActionBar {
+    forceVisible = input(false, { ...(ngDevMode ? { debugName: "forceVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    width = input(100, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    _forceVisible = false;
+    get api() {
+        return {
+            setForceVisible: (forceVisible) => {
+                this._forceVisible = forceVisible;
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: DataViewActionBar, isStandalone: true, selector: "ngs-data-view-action-bar", inputs: { forceVisible: { classPropertyName: "forceVisible", publicName: "forceVisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.force-visible": "forceVisible() || _forceVisible" }, classAttribute: "ngs-data-view-action-bar" }, exportAs: ["ngsDataViewActionBar"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{height:100%;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);position:relative}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewActionBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-data-view-action-bar', exportAs: 'ngsDataViewActionBar', host: {
+                        'class': 'ngs-data-view-action-bar',
+                        '[class.force-visible]': 'forceVisible() || _forceVisible'
+                    }, template: "<ng-content/>\n", styles: [":host{height:100%;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);position:relative}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { forceVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceVisible", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+class DataViewColumnSettingsDialog {
+    _dialogRef = inject((DialogRef));
+    _data = inject(DIALOG_DATA);
+    columns = signal(this._data.columns
+        .filter(c => c.withColumnSettings !== false)
+        .map(c => ({ ...c })), ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    drop(event) {
+        const updated = [...this.columns()];
+        moveItemInArray(updated, event.previousIndex, event.currentIndex);
+        this.columns.set(updated);
+    }
+    toggleVisibility(index, visible) {
+        const updated = [...this.columns()];
+        updated[index] = { ...updated[index], visible };
+        this.columns.set(updated);
+    }
+    pinColumn(index, align) {
+        const updated = [...this.columns()];
+        if (align === null) {
+            updated[index] = { ...updated[index], pinned: false, pinAlign: undefined };
+        }
+        else {
+            updated[index] = { ...updated[index], pinned: true, pinAlign: align };
+        }
+        this.columns.set(updated);
+    }
+    apply() {
+        this._dialogRef.close({ columns: this.columns() });
+    }
+    cancel() {
+        this._dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewColumnSettingsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataViewColumnSettingsDialog, isStandalone: true, selector: "ngs-data-view-column-settings-dialog", ngImport: i0, template: "<h3 ngsDialogTitle>Choose Columns</h3>\n<div ngsDialogContent>\n  <div class=\"columns flex flex-col gap-2 min-w-[300px]\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (col of columns(); track col.field; let i = $index) {\n      <div class=\"flex items-center gap-1 px-1 py-2 bg-surface-container rounded-lg cursor-default\"\n           cdkDrag\n           cdkDragLockAxis=\"y\"\n           cdkDragBoundary=\"columns\">\n        <div class=\"cursor-move text-[var(--ngs-text-secondary)] flex items-center\" cdkDragHandle>\n          <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n        </div>\n        <ngs-checkbox [checked]=\"col.visible !== false\"\n                      (change)=\"toggleVisibility(i, $event.checked)\">\n          {{ col.name }}\n        </ngs-checkbox>\n        <div class=\"grow\"></div>\n        <button ngsIconButton\n                class=\"shrink-0\"\n                [ngsMenuTriggerFor]=\"pinMenu\"\n                [ngsMenuTriggerData]=\"{ col: col, index: i }\">\n          <ngs-icon [name]=\"col.pinned ? (col.pinAlign === 'end' ? 'fluent:pin-off-24-filled' : 'fluent:pin-24-filled') : 'fluent:pin-24-regular'\"\n                    size=\"20\"/>\n        </button>\n      </div>\n    }\n  </div>\n</div>\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<div ngsDialogActions align=\"end\">\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\" (click)=\"apply()\">Apply</button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { 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: 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: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataViewColumnSettingsDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-data-view-column-settings-dialog', imports: [
+                        DialogTitle,
+                        DialogContent,
+                        DialogActions,
+                        Checkbox,
+                        Button,
+                        Icon,
+                        Menu,
+                        MenuTrigger,
+                        MenuContent,
+                        MenuItem,
+                        DragDropModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h3 ngsDialogTitle>Choose Columns</h3>\n<div ngsDialogContent>\n  <div class=\"columns flex flex-col gap-2 min-w-[300px]\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n    @for (col of columns(); track col.field; let i = $index) {\n      <div class=\"flex items-center gap-1 px-1 py-2 bg-surface-container rounded-lg cursor-default\"\n           cdkDrag\n           cdkDragLockAxis=\"y\"\n           cdkDragBoundary=\"columns\">\n        <div class=\"cursor-move text-[var(--ngs-text-secondary)] flex items-center\" cdkDragHandle>\n          <ngs-icon name=\"fluent:re-order-dots-vertical-24-regular\"/>\n        </div>\n        <ngs-checkbox [checked]=\"col.visible !== false\"\n                      (change)=\"toggleVisibility(i, $event.checked)\">\n          {{ col.name }}\n        </ngs-checkbox>\n        <div class=\"grow\"></div>\n        <button ngsIconButton\n                class=\"shrink-0\"\n                [ngsMenuTriggerFor]=\"pinMenu\"\n                [ngsMenuTriggerData]=\"{ col: col, index: i }\">\n          <ngs-icon [name]=\"col.pinned ? (col.pinAlign === 'end' ? 'fluent:pin-off-24-filled' : 'fluent:pin-24-filled') : 'fluent:pin-24-regular'\"\n                    size=\"20\"/>\n        </button>\n      </div>\n    }\n  </div>\n</div>\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<div ngsDialogActions align=\"end\">\n  <button ngsButton (click)=\"cancel()\">Cancel</button>\n  <button ngsButton=\"filled\" (click)=\"apply()\">Apply</button>\n</div>\n" }]
+        }] });
+
+const DATA_VIEW_CONFIG = new InjectionToken('DATA_VIEW_CONFIG');
+function provideDataView(config) {
+    return makeEnvironmentProviders([
+        { provide: DATA_VIEW_CONFIG, useValue: config }
+    ]);
+}
+
+class DataView {
+    _cdr = inject(ChangeDetectorRef);
+    _destroyRef = inject(DestroyRef);
+    _platformId = inject(PLATFORM_ID);
+    _ngZone = inject(NgZone);
+    _doc = inject(DOCUMENT);
+    _config = inject(DATA_VIEW_CONFIG, { optional: true });
+    _elRef = inject(ElementRef);
+    _dialog = inject(Dialog);
+    _isDestroyed = false;
+    _requestId = 0;
+    _lastRequestKey = null;
+    _refreshTrigger = signal(0, ...(ngDevMode ? [{ debugName: "_refreshTrigger" }] : /* istanbul ignore next */ []));
+    _serverSideRowCount = signal(0, ...(ngDevMode ? [{ debugName: "_serverSideRowCount" }] : /* istanbul ignore next */ []));
+    _manualOrder = signal(null, ...(ngDevMode ? [{ debugName: "_manualOrder" }] : /* istanbul ignore next */ []));
+    _manualVisibility = signal({}, ...(ngDevMode ? [{ debugName: "_manualVisibility" }] : /* istanbul ignore next */ []));
+    _hasDataOnServer = signal(undefined, ...(ngDevMode ? [{ debugName: "_hasDataOnServer" }] : /* istanbul ignore next */ []));
+    _internalLoading = signal(false, ...(ngDevMode ? [{ debugName: "_internalLoading" }] : /* istanbul ignore next */ []));
+    _isFiltering = signal(false, ...(ngDevMode ? [{ debugName: "_isFiltering" }] : /* istanbul ignore next */ []));
+    _isSorting = signal(false, ...(ngDevMode ? [{ debugName: "_isSorting" }] : /* istanbul ignore next */ []));
+    _emptyDataRef = contentChild(DataViewEmptyDataDirective, ...(ngDevMode ? [{ debugName: "_emptyDataRef" }] : /* istanbul ignore next */ []));
+    _emptyFilterResults = contentChild(DataViewEmptyFilterResultsDirective, ...(ngDevMode ? [{ debugName: "_emptyFilterResults" }] : /* istanbul ignore next */ []));
+    _actionBarRef = contentChild(DataViewActionBarDirective, ...(ngDevMode ? [{ debugName: "_actionBarRef" }] : /* istanbul ignore next */ []));
+    _actionBarComp = contentChild(DataViewActionBarDirective, { ...(ngDevMode ? { debugName: "_actionBarComp" } : /* istanbul ignore next */ {}), read: DataViewActionBar });
+    _table = viewChild('table', ...(ngDevMode ? [{ debugName: "_table" }] : /* istanbul ignore next */ []));
+    _ngsSort = viewChild(SortDirective, ...(ngDevMode ? [{ debugName: "_ngsSort" }] : /* istanbul ignore next */ []));
+    _internalPaginator = viewChild(Paginator, ...(ngDevMode ? [{ debugName: "_internalPaginator" }] : /* istanbul ignore next */ []));
+    // Optional external paginator passed from parent. If provided, it overrides the internal one.
+    paginator = input(null, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
+    _dataSource = new TableDataSource([]);
+    // ViewChildren for scroll synchronization
+    _headerCenter = viewChild('headerCenter', { ...(ngDevMode ? { debugName: "_headerCenter" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    _headerCenterInner = viewChild('headerCenterInner', { ...(ngDevMode ? { debugName: "_headerCenterInner" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    _bodyLeftContent = viewChild('bodyLeftContent', { ...(ngDevMode ? { debugName: "_bodyLeftContent" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    _scrollbarArea = viewChild(ScrollbarArea, ...(ngDevMode ? [{ debugName: "_scrollbarArea" }] : /* istanbul ignore next */ []));
+    _bodyCenterContent = viewChild('bodyCenterContent', { ...(ngDevMode ? { debugName: "_bodyCenterContent" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    _bodyRightContent = viewChild('bodyRightContent', { ...(ngDevMode ? { debugName: "_bodyRightContent" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    columnDefs = input([], ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
+    defaultColDef = input(this._config?.defaultColDef ?? {}, ...(ngDevMode ? [{ debugName: "defaultColDef" }] : /* istanbul ignore next */ []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    datasource = input(null, ...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
+    rowHeight = input(this._config?.rowHeight ?? 50, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (v) => parseInt(v, 10) || this._config?.rowHeight || 50 });
+    headerHeight = input(this._config?.headerHeight ?? 50, { ...(ngDevMode ? { debugName: "headerHeight" } : /* istanbul ignore next */ {}), transform: (v) => parseInt(v, 10) || this._config?.headerHeight || 50 });
+    bufferRows = input(this._config?.bufferRows ?? 10, { ...(ngDevMode ? { debugName: "bufferRows" } : /* istanbul ignore next */ {}), transform: (v) => parseInt(v, 10) || this._config?.bufferRows || 10 });
+    withSelection = input(false, { ...(ngDevMode ? { debugName: "withSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    highlightHeader = input(false, { ...(ngDevMode ? { debugName: "highlightHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    rowModelType = input('clientSide', ...(ngDevMode ? [{ debugName: "rowModelType" }] : /* istanbul ignore next */ []));
+    autoHeight = input(this._config?.autoHeight ?? false, { ...(ngDevMode ? { debugName: "autoHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    stickyHeader = input(this._config?.stickyHeader ?? true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    withPagination = input(this._config?.withPagination ?? false, { ...(ngDevMode ? { debugName: "withPagination" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    bodyScroll = input(false, { ...(ngDevMode ? { debugName: "bodyScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    pageSizeOptions = input(this._config?.pageSizeOptions ?? [5, 10, 20], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    showFirstLastButtons = input(this._config?.showFirstLastButtons ?? false, { ...(ngDevMode ? { debugName: "showFirstLastButtons" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    paginatorAriaLabel = input('', ...(ngDevMode ? [{ debugName: "paginatorAriaLabel" }] : /* istanbul ignore next */ []));
+    pageSize = model(this._config?.pageSize ?? 10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageIndex = model(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    snapshot = input(null, ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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;
+    _lastScrollLeft = 0;
+    // Virtualization state
+    _scrollTop = signal(0, ...(ngDevMode ? [{ debugName: "_scrollTop" }] : /* istanbul ignore next */ []));
+    _viewportHeight = signal(0, ...(ngDevMode ? [{ debugName: "_viewportHeight" }] : /* istanbul ignore next */ []));
+    _viewportWidth = signal(0, ...(ngDevMode ? [{ debugName: "_viewportWidth" }] : /* istanbul ignore next */ []));
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+    isBrowser = signal(false, ...(ngDevMode ? [{ debugName: "isBrowser" }] : /* istanbul ignore next */ []));
+    hoveredRowIndex = signal(null, ...(ngDevMode ? [{ debugName: "hoveredRowIndex" }] : /* istanbul ignore next */ []));
+    _initialViewState = signal([], ...(ngDevMode ? [{ debugName: "_initialViewState" }] : /* istanbul ignore next */ []));
+    // Resize and Pin state
+    _manualWidths = signal({}, ...(ngDevMode ? [{ debugName: "_manualWidths" }] : /* istanbul ignore next */ []));
+    _manualPinned = signal({}, ...(ngDevMode ? [{ debugName: "_manualPinned" }] : /* istanbul ignore next */ []));
+    _isResizing = signal(false, ...(ngDevMode ? [{ debugName: "_isResizing" }] : /* istanbul ignore next */ []));
+    _resizeLineLeft = signal(0, ...(ngDevMode ? [{ debugName: "_resizeLineLeft" }] : /* istanbul ignore next */ []));
+    _resizeStartX = 0;
+    _resizeStartWidth = 0;
+    _resizeColField = null;
+    isResizing() { return this._isResizing(); }
+    resizeLineLeft() { return this._resizeLineLeft(); }
+    _normalizeWidth(width) {
+        if (width === null || width === undefined || width === '')
+            return undefined;
+        const sWidth = String(width);
+        return /^\d+$/.test(sWidth) ? `${sWidth}px` : sWidth;
+    }
+    normalizedColumns = computed(() => {
+        const overrides = this._manualWidths();
+        const pinOverrides = this._manualPinned();
+        const order = this._manualOrder();
+        const visibility = this._manualVisibility();
+        const defs = this.columnDefs();
+        let orderedDefs = [...defs];
+        if (order) {
+            orderedDefs.sort((a, b) => {
+                const indexA = order.indexOf(a.field);
+                const indexB = order.indexOf(b.field);
+                if (indexA === -1 && indexB === -1)
+                    return 0;
+                if (indexA === -1)
+                    return 1;
+                if (indexB === -1)
+                    return -1;
+                return indexA - indexB;
+            });
+        }
+        const defaultColDef = this.defaultColDef() || {};
+        return orderedDefs.map(col => {
+            const mergedCol = {
+                ...defaultColDef,
+                ...col
+            };
+            const overrideWidth = overrides[mergedCol.field];
+            const pinOverride = pinOverrides[mergedCol.field];
+            const visibleOverride = visibility[mergedCol.field];
+            const width = this._normalizeWidth(overrideWidth ?? mergedCol.width);
+            const flex = (overrideWidth ? undefined : mergedCol.flex) ?? (width ? undefined : 1);
+            const pinned = pinOverride ? pinOverride.pinned : mergedCol.pinned;
+            const pinAlign = pinOverride ? pinOverride.pinAlign : mergedCol.pinAlign;
+            return {
+                ...mergedCol,
+                visible: visibleOverride ?? mergedCol.visible ?? true,
+                width,
+                flex,
+                pinned,
+                pinAlign: pinned && !pinAlign ? 'start' : pinAlign
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "normalizedColumns" }] : /* istanbul ignore next */ []));
+    isSortingEnabled = computed(() => {
+        return this.normalizedColumns().some(col => col.sortable);
+    }, ...(ngDevMode ? [{ debugName: "isSortingEnabled" }] : /* istanbul ignore next */ []));
+    pinnedLeftColumns = computed(() => this.normalizedColumns().filter(c => c.visible && c.pinned && c.pinAlign === 'start'), ...(ngDevMode ? [{ debugName: "pinnedLeftColumns" }] : /* istanbul ignore next */ []));
+    pinnedRightColumns = computed(() => this.normalizedColumns().filter(c => c.visible && c.pinned && c.pinAlign === 'end'), ...(ngDevMode ? [{ debugName: "pinnedRightColumns" }] : /* istanbul ignore next */ []));
+    centerColumns = computed(() => this.normalizedColumns().filter(c => c.visible && !c.pinned), ...(ngDevMode ? [{ debugName: "centerColumns" }] : /* istanbul ignore next */ []));
+    leftPinnedWidth = computed(() => {
+        let width = 0;
+        if (this.withSelection()) {
+            width += this.selectionWidth();
+        }
+        width += this.pinnedLeftColumns().reduce((acc, col) => acc + (col.width ? parseInt(col.width, 10) : (col.flex ? 150 : 0)), 0);
+        return width;
+    }, ...(ngDevMode ? [{ debugName: "leftPinnedWidth" }] : /* istanbul ignore next */ []));
+    leftPinnedWidthStyles = computed(() => {
+        return {
+            'width.px': this.leftPinnedWidth(),
+            'min-width.px': this.leftPinnedWidth()
+        };
+    }, ...(ngDevMode ? [{ debugName: "leftPinnedWidthStyles" }] : /* istanbul ignore next */ []));
+    rightPinnedWidth = computed(() => {
+        let width = 0;
+        width += this.pinnedRightColumns().reduce((acc, col) => acc + (col.width ? parseInt(col.width, 10) : (col.flex ? 150 : 0)), 0);
+        if (this.actionBarTemplateRef)
+            width += this.actionBarWidth();
+        return width;
+    }, ...(ngDevMode ? [{ debugName: "rightPinnedWidth" }] : /* istanbul ignore next */ []));
+    rightPinnedWidthStyles = computed(() => {
+        return {
+            'width.px': this.rightPinnedWidth(),
+            'min-width.px': this.rightPinnedWidth()
+        };
+    }, ...(ngDevMode ? [{ debugName: "rightPinnedWidthStyles" }] : /* istanbul ignore next */ []));
+    centerWidth = computed(() => {
+        const totalFixed = this.centerColumns().reduce((acc, col) => acc + (col.width ? parseInt(col.width, 10) : 0), 0);
+        const hasFlex = this.centerColumns().some(c => !!c.flex);
+        const availableWidth = this._viewportWidth();
+        if (hasFlex) {
+            const isBrowser = this.isBrowser();
+            // Ensure we have at least some width for flex columns, and handle initial zero viewportWidth
+            if (availableWidth === 0 && !isBrowser) {
+                // In SSR, we don't know the viewport width, but we want flex columns to expand.
+                // Returning totalFixed might cause the center to collapse if all columns are flex.
+                return '100%';
+            }
+            return Math.max(totalFixed, availableWidth, 300);
+        }
+        return Math.max(totalFixed, availableWidth);
+    }, ...(ngDevMode ? [{ debugName: "centerWidth" }] : /* istanbul ignore next */ []));
+    onColumnResizeStart(event, col) {
+        if (!this.isBrowser() || !col?.resizable || event.button !== 0 || this._isResizing())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        // Determine initial width from DOM if not fixed yet
+        const target = event.currentTarget;
+        const cell = target.closest('.header-cell');
+        const startWidth = (col?.width ? parseInt(col.width, 10) : (cell ? cell.getBoundingClientRect().width : 0)) || 0;
+        // Before starting resize — freeze widths of all columns to the left within the same section
+        try {
+            const overrides = { ...this._manualWidths() };
+            const gridRoot = this._elRef.nativeElement.querySelector('.grid-root');
+            const leftCols = this.pinnedLeftColumns();
+            const centerCols = this.centerColumns();
+            const rightCols = this.pinnedRightColumns();
+            const byField = (arr) => arr.findIndex(c => c.field === col.field);
+            const leftIdx = byField(leftCols);
+            const centerIdx = byField(centerCols);
+            const rightIdx = byField(rightCols);
+            const freezeAll = (cols, containerSelector, extraOffset = 0) => {
+                const container = gridRoot?.querySelector(containerSelector);
+                if (!container)
+                    return;
+                const cells = Array.from(container.querySelectorAll(':scope .header-cell'));
+                for (let i = 0; i < cols.length; i++) {
+                    const colDef = cols[i];
+                    if (!colDef)
+                        continue;
+                    if (!overrides[colDef.field]) {
+                        const domIndex = i + extraOffset;
+                        const cellEl = cells[domIndex];
+                        const w = cellEl ? Math.round(cellEl.getBoundingClientRect().width) : (colDef.width ? parseInt(colDef.width, 10) : undefined);
+                        if (w && w > 0) {
+                            overrides[colDef.field] = `${w}px`;
+                        }
+                    }
+                }
+            };
+            const extraLeft = this.withSelection() ? 1 : 0;
+            freezeAll(leftCols, '.grid-header-left .header-inner', extraLeft);
+            freezeAll(centerCols, '.grid-header-center .header-inner');
+            freezeAll(rightCols, '.grid-header-right .header-inner');
+            this._manualWidths.set(overrides);
+        }
+        catch {
+            // best-effort freezing; ignore errors and continue
+        }
+        let nextCol = null;
+        let nextColStartWidth = 0;
+        try {
+            const leftCols = this.pinnedLeftColumns();
+            const centerCols = this.centerColumns();
+            const rightCols = this.pinnedRightColumns();
+            const byField = (arr) => arr.findIndex(c => c.field === col.field);
+            const leftIdx = byField(leftCols);
+            const centerIdx = byField(centerCols);
+            const rightIdx = byField(rightCols);
+            const findNextInfo = (cols, idx, containerSelector, extraOffset = 0) => {
+                if (idx < 0 || idx >= cols.length - 1)
+                    return null;
+                const next = cols[idx + 1];
+                const gridRoot = this._elRef.nativeElement.querySelector('.grid-root');
+                const container = gridRoot?.querySelector(containerSelector);
+                const cells = container ? Array.from(container.querySelectorAll(':scope .header-cell')) : [];
+                const domIndex = idx + 1 + extraOffset;
+                const cellEl = cells[domIndex];
+                const width = cellEl ? Math.round(cellEl.getBoundingClientRect().width) : (next.width ? parseInt(next.width, 10) : 0);
+                return { col: next, width };
+            };
+            let nextInfo = null;
+            if (leftIdx >= 0) {
+                nextInfo = findNextInfo(leftCols, leftIdx, '.grid-header-left .header-inner', this.withSelection() ? 1 : 0);
+            }
+            else if (rightIdx >= 0) {
+                nextInfo = findNextInfo(rightCols, rightIdx, '.grid-header-right .header-inner');
+            }
+            if (nextInfo) {
+                nextCol = nextInfo.col;
+                nextColStartWidth = nextInfo.width;
+            }
+        }
+        catch { }
+        const gridRoot = this._elRef.nativeElement.querySelector('.grid-root');
+        const hostRect = gridRoot.getBoundingClientRect();
+        const handleRect = target.getBoundingClientRect();
+        const borderLeft = gridRoot.clientLeft || 0;
+        const initialManualWidths = { ...this._manualWidths() };
+        this._resizeStartX = event.clientX;
+        this._resizeStartWidth = startWidth;
+        this._resizeColField = col?.field ?? null;
+        this._resizeLineLeft.set(handleRect.right - hostRect.left - borderLeft);
+        this._isResizing.set(true);
+        const rightPinnedWidth = this.rightPinnedWidth();
+        const maxLineLeft = hostRect.width - borderLeft - rightPinnedWidth;
+        const leftPinnedWidth = this.leftPinnedWidth();
+        const minLineLeft = leftPinnedWidth;
+        let moved = false;
+        const colStartInHost = (handleRect.right - this._resizeStartWidth) - hostRect.left - borderLeft;
+        this._ngZone.runOutsideAngular(() => {
+            const mouseMove$ = fromEvent(this._doc, 'mousemove', { capture: true });
+            const mouseUp$ = fromEvent(this._doc, 'mouseup', { capture: true });
+            const blur$ = fromEvent(window, 'blur');
+            const dragStart$ = fromEvent(window, 'dragstart');
+            const selectStart$ = fromEvent(window, 'selectstart');
+            const stopResize$ = new Subject();
+            // Prevent native drag and selection
+            dragStart$.pipe(takeUntil(stopResize$)).subscribe(e => e.preventDefault());
+            selectStart$.pipe(takeUntil(stopResize$)).subscribe(e => e.preventDefault());
+            // Fix cursor for the whole document and block interactions
+            const originalCursor = this._doc.body.style.cursor;
+            this._doc.body.style.cursor = 'col-resize';
+            this._doc.body.style.userSelect = 'none';
+            const overlay = this._doc.createElement('div');
+            overlay.style.position = 'fixed';
+            overlay.style.top = '0';
+            overlay.style.left = '0';
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.zIndex = '9999';
+            overlay.style.cursor = 'col-resize';
+            this._doc.body.appendChild(overlay);
+            const endResize = () => {
+                stopResize$.next();
+                stopResize$.complete();
+                this._doc.body.style.cursor = originalCursor;
+                this._doc.body.style.userSelect = '';
+                if (overlay.parentNode) {
+                    overlay.parentNode.removeChild(overlay);
+                }
+                if (moved) {
+                    // More aggressive click suppression
+                    const clickSub = fromEvent(this._doc, 'click', { capture: true })
+                        .pipe(takeUntil(timer(50)), take(1))
+                        .subscribe(clickEvent => {
+                        clickEvent.stopImmediatePropagation();
+                        clickEvent.preventDefault();
+                    });
+                }
+                this._ngZone.run(() => {
+                    this._isResizing.set(false);
+                    if (!moved) {
+                        this._manualWidths.set(initialManualWidths);
+                    }
+                    else {
+                        // Restore flex for columns that were not manually resized but were frozen
+                        const finalManualWidths = { ...this._manualWidths() };
+                        const currentFields = new Set([this._resizeColField, nextCol?.field].filter(Boolean));
+                        for (const field of Object.keys(finalManualWidths)) {
+                            if (!currentFields.has(field) && !initialManualWidths[field]) {
+                                delete finalManualWidths[field];
+                            }
+                        }
+                        this._manualWidths.set(finalManualWidths);
+                    }
+                    this._resizeColField = null;
+                });
+            };
+            merge(mouseUp$, blur$).pipe(take(1)).subscribe(e => {
+                if (e instanceof MouseEvent) {
+                    e.stopImmediatePropagation();
+                    e.preventDefault();
+                }
+                endResize();
+            });
+            mouseMove$.pipe(takeUntil(stopResize$)).subscribe(e => {
+                if (!this._isResizing())
+                    return;
+                const dx = e.clientX - this._resizeStartX;
+                if (Math.abs(dx) > 2)
+                    moved = true;
+                const minWidthVal = col.minWidth !== undefined ? parseInt(col.minWidth, 10) : this.minColumnWidth();
+                const maxWidthVal = col.maxWidth !== undefined ? parseInt(col.maxWidth, 10) : Infinity;
+                let newWidth = Math.round(this._resizeStartWidth + dx);
+                newWidth = Math.max(minWidthVal, Math.min(maxWidthVal, newWidth));
+                const lineLeft = colStartInHost + newWidth;
+                const isCenterCol = !col.pinned;
+                const isLeftPinned = col.pinned && col.pinAlign !== 'end';
+                const isRightPinned = col.pinned && col.pinAlign === 'end';
+                if (isCenterCol) {
+                    if (lineLeft > maxLineLeft) {
+                        newWidth = maxLineLeft - colStartInHost;
+                    }
+                    else if (lineLeft < minLineLeft) {
+                        newWidth = minLineLeft - colStartInHost;
+                    }
+                }
+                else if (isLeftPinned) {
+                    // Can't push beyond the start of right pinned columns (maxLineLeft)
+                    // Also if we are pushing into the center columns, they will be pushed or next col in pinned will be squeezed.
+                    if (lineLeft > maxLineLeft) {
+                        newWidth = maxLineLeft - colStartInHost;
+                    }
+                }
+                else if (isRightPinned) {
+                    // For right pinned, colStartInHost is relative to grid-root left.
+                    // The line shouldn't go to the left of leftPinnedWidth.
+                    if (lineLeft < minLineLeft) {
+                        newWidth = minLineLeft - colStartInHost;
+                    }
+                    // Also can't push beyond table right edge if there is an action bar
+                    const hostWidth = hostRect.width - borderLeft;
+                    if (lineLeft > hostWidth) {
+                        newWidth = hostWidth - colStartInHost;
+                    }
+                }
+                // Final check on newWidth after all constraints
+                newWidth = Math.max(minWidthVal, newWidth);
+                // If we are resizing a column that has a next column, we must ensure next column doesn't shrink below its minWidth
+                if (nextCol) {
+                    const nextMinWidth = nextCol.minWidth !== undefined ? parseInt(nextCol.minWidth, 10) : this.minColumnWidth();
+                    const maxPossibleWidth = (this._resizeStartWidth + nextColStartWidth) - nextMinWidth;
+                    if (newWidth > maxPossibleWidth) {
+                        newWidth = maxPossibleWidth;
+                    }
+                }
+                // Ensure lineLeft doesn't go over bounds after nextCol check
+                const finalLineLeft = colStartInHost + newWidth;
+                if (isCenterCol || isLeftPinned) {
+                    if (finalLineLeft > maxLineLeft) {
+                        newWidth = maxLineLeft - colStartInHost;
+                    }
+                }
+                if (isCenterCol || isRightPinned) {
+                    if (finalLineLeft < minLineLeft) {
+                        newWidth = minLineLeft - colStartInHost;
+                    }
+                }
+                if (isRightPinned) {
+                    const hostWidth = hostRect.width - borderLeft;
+                    if (colStartInHost + newWidth > hostWidth) {
+                        newWidth = hostWidth - colStartInHost;
+                    }
+                }
+                this._ngZone.run(() => {
+                    this._resizeLineLeft.set(colStartInHost + newWidth);
+                    if (this._resizeColField) {
+                        const map = { ...this._manualWidths() };
+                        map[this._resizeColField] = `${newWidth}px`;
+                        // If we have a next column, it gets squeezed until its minimum, then it just shifts
+                        if (nextCol) {
+                            const currentNextWidth = Math.max(0, // Already checked minWidth in newWidth calculation
+                            nextColStartWidth - (newWidth - this._resizeStartWidth));
+                            map[nextCol.field] = `${currentNextWidth}px`;
+                        }
+                        this._manualWidths.set(map);
+                        // Force recalculation of centerWidth if it's based on fixed columns
+                        // by triggering signal update if needed
+                    }
+                });
+            });
+        });
+    }
+    effectiveDataLength = computed(() => {
+        // depend on data source render changes
+        this._dsRenderTick();
+        const dataSource = this.dataSource();
+        // Use filteredData because it contains all items that passed filtering
+        // and is what we should base pagination on.
+        const totalDataLength = (this.rowModelType() === 'serverSide' ? dataSource.data : dataSource.filteredData)?.length || 0;
+        const pSize = this.pageSize();
+        const pIndex = this.pageIndex();
+        if (this.rowModelType() === 'serverSide') {
+            return totalDataLength;
+        }
+        if (this.withPagination()) {
+            const start = pIndex * pSize;
+            const end = Math.min(start + pSize, totalDataLength);
+            return Math.max(0, end - start);
+        }
+        return totalDataLength;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDataLength" }] : /* istanbul ignore next */ []));
+    effectivePaginatorLength = computed(() => {
+        this._dsRenderTick();
+        if (this.rowModelType() === 'serverSide') {
+            return this._serverSideRowCount() || 0;
+        }
+        // Since we now manage pagination ourselves and don't set dataSource.paginator,
+        // we should use the length of filtered data for the paginator.
+        const ds = this.dataSource();
+        return ds.filteredData?.length || 0;
+    }, ...(ngDevMode ? [{ debugName: "effectivePaginatorLength" }] : /* istanbul ignore next */ []));
+    totalHeight = computed(() => {
+        return this.effectiveDataLength() * this.rowHeight();
+    }, ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    visibleRange = computed(() => {
+        // We still use signals here for parts that should trigger re-computation
+        // like dataSource changes, but we access _scrollTop and _viewportHeight
+        // which are updated manually.
+        const top = this._scrollTop();
+        const height = this._viewportHeight();
+        const rowHeight = this.rowHeight();
+        const buffer = this.bufferRows();
+        const dataSource = this.dataSource();
+        const dataLength = this.effectiveDataLength();
+        let start = Math.floor(top / rowHeight) - buffer;
+        let end = Math.ceil((top + height) / rowHeight) + buffer;
+        start = Math.max(0, start);
+        end = Math.min(dataLength, end);
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    visibleRows = computed(() => {
+        // depend on data source render changes
+        this._dsRenderTick();
+        this.columnDefs(); // depend on columns
+        this.data(); // depend on data
+        this.loaded(); // depend on loaded state to ensure re-calculation after loading
+        const pIndex = this.pageIndex();
+        const pSize = this.pageSize();
+        const { start, end } = this.visibleRange();
+        const dataSource = this.dataSource();
+        let data;
+        if (this.rowModelType() === 'serverSide') {
+            data = dataSource.data;
+        }
+        else if (this.withPagination()) {
+            data = dataSource.sortedData.slice(pIndex * pSize, (pIndex + 1) * pSize);
+        }
+        else {
+            data = dataSource.sortedData;
+        }
+        // For serverSide, if we are loading but have some data already, we might want to keep it or show a loader.
+        // The current logic in noFilteredResults handles the switch between table and empty state.
+        // We only clear rows here if we are NOT in serverSide and loading, or if we want to force empty.
+        if (this.rowModelType() !== 'serverSide' && (this._isLoading() || this._isFiltering()) && data.length === 0) {
+            data = [];
+        }
+        return data.slice(start, end).map((item, index) => ({
+            item,
+            index: start + index,
+            top: (start + index) * this.rowHeight(),
+            isLast: (start + index) === data.length - 1
+        }));
+    }, ...(ngDevMode ? [{ debugName: "visibleRows" }] : /* istanbul ignore next */ []));
+    displayedColumns = computed(() => {
+        const displayedColumns = this
+            .normalizedColumns()
+            .filter(colDef => colDef.visible)
+            .map(colDef => colDef.field);
+        if (this.withSelection()) {
+            displayedColumns.unshift('selection');
+        }
+        if (this.actionBarTemplateRef) {
+            displayedColumns.push('__actionBar');
+        }
+        return [...displayedColumns];
+    }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    isSelectionSticky = computed(() => {
+        if (!this.withSelection()) {
+            return false;
+        }
+        return this.normalizedColumns().some(col => col.pinned && (col.pinAlign === 'start' || !col.pinAlign));
+    }, ...(ngDevMode ? [{ debugName: "isSelectionSticky" }] : /* istanbul ignore next */ []));
+    hasHorizontalScroll = computed(() => {
+        return this.centerWidth() > this._viewportWidth() + 1;
+    }, ...(ngDevMode ? [{ debugName: "hasHorizontalScroll" }] : /* istanbul ignore next */ []));
+    dataSource = computed(() => {
+        return this._dataSource;
+    }, ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    _syncEffect = effect(() => {
+        const data = this.data();
+        const search = this.search().trim().toLowerCase();
+        const rowModelType = this.rowModelType();
+        const refreshTriggerValue = this._refreshTrigger();
+        if (rowModelType === 'serverSide') {
+            return;
+        }
+        untracked(() => {
+            this._dataSource.data = data;
+            if (rowModelType === 'clientSide') {
+                this._dataSource.filter = search;
+            }
+            if (refreshTriggerValue > 0) {
+                this.refreshEnd.emit();
+            }
+            else {
+                this.loadEnd.emit();
+            }
+        });
+    }, ...(ngDevMode ? [{ debugName: "_syncEffect" }] : /* istanbul ignore next */ []));
+    _loadDataEffect = effect(() => {
+        const datasource = this.datasource();
+        if (!datasource || this.rowModelType() !== 'serverSide' || this._isDestroyed) {
+            return;
+        }
+        const pIndex = this.pageIndex();
+        const pSize = this.pageSize();
+        const search = this._debouncedSearch()?.trim() || '';
+        // Capture sort params outside untracked but avoid triggering when sort is null due to @if toggling
+        const sort = this._ngsSort();
+        const sortActive = sort?.active();
+        const sortDirection = sort?.direction();
+        const sortModel = sortActive ? [{ colId: sortActive, sort: sortDirection || '' }] : [];
+        const refreshTriggerValue = this._refreshTrigger();
+        // Build a stable request key to avoid refetch loops when the view toggles (e.g. empty state removes ngsSort)
+        const requestKey = `${pIndex}|${pSize}|${JSON.stringify(sortModel)}|${search}|${refreshTriggerValue}`;
+        if (this._lastRequestKey === requestKey) {
+            return; // no meaningful params change — skip triggering a new request
+        }
+        // Special case: if sort was active and now is undefined because component was removed from DOM,
+        // but we ARE loading or in a state where we expect it to come back, we might want to wait.
+        // However, the requestKey should handle it. If sortActive becomes undefined, requestKey changes.
+        const isFilterRequest = this._lastRequestKey !== null && this._lastRequestKey.split('|')[3] !== search;
+        const isSortRequest = this._lastRequestKey !== null && this._lastRequestKey.split('|')[2] !== JSON.stringify(sortModel);
+        this._lastRequestKey = requestKey;
+        untracked(() => {
+            const currentRequestId = ++this._requestId;
+            if (isFilterRequest) {
+                this._isFiltering.set(true);
+            }
+            if (isSortRequest) {
+                this._isSorting.set(true);
+            }
+            this._internalLoading.set(true);
+            const params = {
+                startRow: pIndex * pSize,
+                endRow: (pIndex + 1) * pSize,
+                page: pIndex,
+                pageSize: pSize,
+                sortModel,
+                filterModel: search,
+                successCallback: (rows, lastRow) => {
+                    this._ngZone.run(() => {
+                        if (this._isDestroyed || currentRequestId !== this._requestId)
+                            return;
+                        this._dataSource.data = rows;
+                        if (lastRow !== undefined) {
+                            this._serverSideRowCount.set(lastRow);
+                            // Update _hasDataOnServer if we have any rows OR if we are doing a clean request (no filters)
+                            if (lastRow > 0) {
+                                this._hasDataOnServer.set(true);
+                            }
+                            else if (!search && !sortModel.length) {
+                                this._hasDataOnServer.set(false);
+                            }
+                        }
+                        else {
+                            // If lastRow is not provided, we can only infer _hasDataOnServer if we actually got rows
+                            if (rows.length > 0) {
+                                this._hasDataOnServer.set(true);
+                            }
+                            else if (!search && !sortModel.length) {
+                                this._hasDataOnServer.set(false);
+                            }
+                        }
+                        this.loaded.set(true);
+                        this._internalLoading.set(false);
+                        this._isFiltering.set(false);
+                        this._isSorting.set(false);
+                        if (refreshTriggerValue > 0) {
+                            this.refreshEnd.emit();
+                        }
+                        else {
+                            this.loadEnd.emit();
+                        }
+                        this._cdr.markForCheck();
+                    });
+                },
+                failCallback: () => {
+                    this._ngZone.run(() => {
+                        if (this._isDestroyed || currentRequestId !== this._requestId)
+                            return;
+                        this.loaded.set(true);
+                        this._internalLoading.set(false);
+                        this._isFiltering.set(false);
+                        this._isSorting.set(false);
+                        if (refreshTriggerValue > 0) {
+                            this.refreshEnd.emit();
+                        }
+                        else {
+                            this.loadEnd.emit();
+                        }
+                        this._cdr.markForCheck();
+                    });
+                }
+            };
+            this._ngZone.runOutsideAngular(() => {
+                datasource.getItems(params);
+            });
+        });
+    }, ...(ngDevMode ? [{ debugName: "_loadDataEffect" }] : /* istanbul ignore next */ []));
+    _dsRenderTick = signal(0, ...(ngDevMode ? [{ debugName: "_dsRenderTick" }] : /* istanbul ignore next */ []));
+    _connectEffect = effect((onCleanup) => {
+        const ds = this.dataSource();
+        const sub = ds.connect().subscribe(() => {
+            // bump a signal to re-compute derived values depending on sortedData
+            this._dsRenderTick.update(v => v + 1);
+            untracked(() => this._cdr.markForCheck());
+        });
+        onCleanup(() => sub.unsubscribe());
+    }, ...(ngDevMode ? [{ debugName: "_connectEffect" }] : /* istanbul ignore next */ []));
+    cellRenderers = input([], ...(ngDevMode ? [{ debugName: "cellRenderers" }] : /* istanbul ignore next */ []));
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hoverRows = input(false, { ...(ngDevMode ? { debugName: "hoverRows" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    search = input('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    _debouncedSearch = signal('', ...(ngDevMode ? [{ debugName: "_debouncedSearch" }] : /* istanbul ignore next */ []));
+    _debounceSearchEffect = effect((onCleanup) => {
+        const search = this.search();
+        if (this.rowModelType() === 'clientSide') {
+            this._isFiltering.set(true);
+        }
+        const timeout = setTimeout(() => {
+            untracked(() => {
+                this._debouncedSearch.set(search);
+                if (this.rowModelType() === 'clientSide') {
+                    this._isFiltering.set(false);
+                }
+            });
+        }, 300);
+        onCleanup(() => clearTimeout(timeout));
+    }, ...(ngDevMode ? [{ debugName: "_debounceSearchEffect" }] : /* istanbul ignore next */ []));
+    emptyIcon = input('fluent:document-search-24-regular', ...(ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []));
+    emptyText = input('There are no data to display', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    emptyFilterResultsIcon = input('fluent:search-info-24-regular', ...(ngDevMode ? [{ debugName: "emptyFilterResultsIcon" }] : /* istanbul ignore next */ []));
+    emptyFilterResultsText = input('No data matching the filter "{{ search }}"', ...(ngDevMode ? [{ debugName: "emptyFilterResultsText" }] : /* istanbul ignore next */ []));
+    interpolatedEmptyFilterResultsText = computed(() => {
+        return this.emptyFilterResultsText().replace('{{ search }}', this.search());
+    }, ...(ngDevMode ? [{ debugName: "interpolatedEmptyFilterResultsText" }] : /* istanbul ignore next */ []));
+    _isLoading = computed(() => (this.loading() || this._internalLoading() || this._isFiltering()), ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    selection = new SelectionModel(this.rowSelection() === 'multiple', []);
+    cellRenderersMap = new Map();
+    loadingCellRenderers = signal(false, ...(ngDevMode ? [{ debugName: "loadingCellRenderers" }] : /* istanbul ignore next */ []));
+    rowSelectionChanged = output();
+    selectionChanged = output();
+    allRowsSelectionChanged = output();
+    sortChange = output();
+    loadEnd = output();
+    refreshEnd = output();
+    get api() {
+        return {
+            search: (value) => {
+                this.dataSource().filter = value.trim().toLowerCase();
+            },
+            selectAll: () => {
+                this._selectAll();
+            },
+            unselectAll: () => {
+                this._unselectAll();
+            },
+            refresh: () => {
+                this.refresh();
+            },
+            getSnapshot: () => {
+                return this.getSnapshot();
+            }
+        };
+    }
+    refresh() {
+        this._lastRequestKey = null;
+        this._refreshTrigger.update(v => v + 1);
+    }
+    get noFilteredResults() {
+        const dataSource = this.dataSource();
+        const isClientSide = this.rowModelType() === 'clientSide';
+        const rawDataLength = isClientSide ? this.data().length : (dataSource.data?.length ?? 0);
+        const currentlyEmpty = rawDataLength === 0;
+        // During client-side filtering, immediately show empty state if filtered data is empty,
+        // to avoid a short flash of an empty table before debounce takes effect.
+        if (isClientSide && (this._isFiltering() || this.hasFilterValue)) {
+            const filteredEmpty = (dataSource.filteredData?.length ?? 0) === 0;
+            if (filteredEmpty) {
+                return true;
+            }
+        }
+        if (this._isLoading() || this.loadingCellRenderers()) {
+            // For serverSide, while loading the first time (when we don't know yet if we have data),
+            // we show the table (potentially for skeletons) instead of empty state.
+            if (this.rowModelType() === 'serverSide' && this._hasDataOnServer() === undefined) {
+                return false;
+            }
+            // If we are already in an empty state (data is empty and no previous data was confirmed on server),
+            // keep showing it during loading/filtering to avoid flashing the table headers/structure.
+            if (currentlyEmpty && !this.isBrowser()) {
+                return true;
+            }
+            return false;
+        }
+        if (this.rowModelType() === 'serverSide' && this._hasDataOnServer() === undefined) {
+            return false;
+        }
+        return this.isNoData || this.isNoResults;
+    }
+    get isNoResults() {
+        const dataSource = this.dataSource();
+        const isClientSide = this.rowModelType() === 'clientSide';
+        const rawDataLength = isClientSide ? this.data().length : (dataSource.data?.length ?? 0);
+        const dataLength = dataSource.data?.length ?? 0;
+        const filteredDataLength = dataSource.filteredData?.length ?? 0;
+        if (isClientSide) {
+            return filteredDataLength === 0 && (this.hasFilterValue || this._isSorting());
+        }
+        if (this.rowModelType() === 'serverSide') {
+            const loadingTransition = this._isLoading() && this._hasDataOnServer() === true;
+            // If we have 0 data, but loading is in progress (and we don't know if there will be data), we show skeletons, so isNoResults should be false
+            if (this._isLoading() && this._hasDataOnServer() === undefined) {
+                return false;
+            }
+            return dataLength === 0 && (this.hasFilterValue || this._isSorting() || loadingTransition) && this._hasDataOnServer() !== false;
+        }
+        return false;
+    }
+    get isNoData() {
+        const dataSource = this.dataSource();
+        const isClientSide = this.rowModelType() === 'clientSide';
+        const rawDataLength = isClientSide ? this.data().length : (dataSource.data?.length ?? 0);
+        const dataLength = dataSource.data?.length ?? 0;
+        if (isClientSide) {
+            return rawDataLength === 0 && !this.hasFilterValue && !this._isSorting();
+        }
+        if (this.rowModelType() === 'serverSide') {
+            if (this._isLoading() && this._hasDataOnServer() === undefined) {
+                return false;
+            }
+            return dataLength === 0 && !this.hasFilterValue && !this._isSorting() && this._hasDataOnServer() === false;
+        }
+        return false;
+    }
+    get actionBarTemplateRef() {
+        return this._actionBarRef()?.templateRef;
+    }
+    actionBarWidth = computed(() => {
+        return this._actionBarComp()?.width() ?? this._actionBarRef()?.width() ?? 100;
+    }, ...(ngDevMode ? [{ debugName: "actionBarWidth" }] : /* istanbul ignore next */ []));
+    get emptyTemplateRef() {
+        return this._emptyDataRef()?.templateRef;
+    }
+    get emptyFilterResultsTemplateRef() {
+        return this._emptyFilterResults()?.templateRef;
+    }
+    get hasFilterValue() {
+        return !!this.search().trim();
+    }
+    getNestedValue(item, path) {
+        if (!item || !path) {
+            return null;
+        }
+        if (!path.includes('.')) {
+            return item[path];
+        }
+        return path.split('.').reduce((obj, key) => obj?.[key], item);
+    }
+    constructor() {
+        effect(() => {
+            const mode = this.rowSelection();
+            untracked(() => {
+                const currentSelection = this.selection.selected;
+                this.selection = new SelectionModel(mode === 'multiple', currentSelection);
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            this._isDestroyed = true;
+        });
+        // Reactively bind scroll-sync and ResizeObserver to the current ScrollbarArea,
+        // to work correctly with conditional rendering (empty state / table)
+        effect((onCleanup) => {
+            const scrollbarArea = this._scrollbarArea();
+            const isBrowser = this.isBrowser();
+            if (!scrollbarArea || !isBrowser || this._isDestroyed) {
+                return;
+            }
+            const centerEl = scrollbarArea.scrollableContentRef().nativeElement;
+            // Set initial viewport dimensions to avoid 0 width after returning from empty state
+            const rect = centerEl.getBoundingClientRect();
+            this._viewportHeight.set(rect.height);
+            this._viewportWidth.set(rect.width);
+            // Attach scroll-sync
+            const scrollHandler = () => {
+                if (this._isDestroyed)
+                    return;
+                this._syncScrolls(centerEl);
+            };
+            this._ngZone.runOutsideAngular(() => {
+                centerEl.addEventListener('scroll', scrollHandler, { passive: true });
+            });
+            // Bind ResizeObserver with safe layout
+            const observer = new ResizeObserver((entries) => {
+                this._ngZone.runOutsideAngular(() => {
+                    requestAnimationFrame(() => {
+                        if (this._isDestroyed)
+                            return;
+                        this._ngZone.run(() => {
+                            try {
+                                for (const entry of entries) {
+                                    const { height, width } = entry.contentRect;
+                                    // Use 1px threshold to prevent infinite loops due to subpixels
+                                    if (Math.abs(this._viewportHeight() - height) > 1) {
+                                        this._viewportHeight.set(height);
+                                    }
+                                    if (Math.abs(this._viewportWidth() - width) > 1) {
+                                        this._viewportWidth.set(width);
+                                    }
+                                }
+                            }
+                            catch {
+                                // ignore, dimensions will be delivered on the next tick
+                            }
+                        });
+                    });
+                });
+            });
+            observer.observe(centerEl);
+            // Synchronize transforms immediately after rebinding
+            this._lastScrollTop = centerEl.scrollTop;
+            this._lastScrollLeft = centerEl.scrollLeft;
+            this._syncTransforms();
+            onCleanup(() => {
+                try {
+                    centerEl.removeEventListener('scroll', scrollHandler);
+                }
+                catch { }
+                try {
+                    observer.disconnect();
+                }
+                catch { }
+            });
+        });
+        effect(() => {
+            const sort = this._ngsSort();
+            const dataSource = this.dataSource();
+            if (sort && dataSource && !this._isDestroyed && this.rowModelType() !== 'serverSide') {
+                dataSource.sort = sort;
+                dataSource._updateChangeSubscription();
+            }
+        });
+        effect(() => {
+            const active = this.paginator() ?? this._internalPaginator();
+            const dataSource = this.dataSource();
+            if (dataSource && !this._isDestroyed) {
+                if (this.withPagination() && this.rowModelType() !== 'serverSide' && active && this.isBrowser()) {
+                    // We handle pagination manually in visibleRows to have better control over virtualization.
+                    // If we assign it to dataSource.paginator, TableDataSource would also start paging data,
+                    // which would cause issues when we also slice data in visibleRows (double paging).
+                    dataSource.paginator = null;
+                }
+                else {
+                    dataSource.paginator = null;
+                }
+            }
+        });
+        // Sync external paginator page events with internal page state when provided
+        effect((onCleanup) => {
+            const ext = this.paginator();
+            if (ext) {
+                const sub = ext.page.subscribe(event => this.onPageChange(event));
+                onCleanup(() => sub.unsubscribe());
+            }
+        });
+        effect(() => {
+            this.dataSource().sortingDataAccessor = (item, property) => {
+                const columnDef = this.columnDefs().find(colDef => colDef.field === property);
+                if (columnDef) {
+                    if (columnDef.valueGetter) {
+                        return columnDef.valueGetter(this.getNestedValue(item, property));
+                    }
+                }
+                switch (property) {
+                    default: {
+                        return this.getNestedValue(item, property);
+                    }
+                }
+            };
+        });
+        effect(() => {
+            // Force table to re-render when column definitions change
+            // to avoid "Could not find column" errors when using signals
+            this.columnDefs();
+            this.displayedColumns();
+            untracked(() => {
+                this.table?.renderRows();
+                // CdkTable uses _cacheColumnDefs internally, but it's private.
+                // renderRows should trigger it if definitions changed.
+            });
+        });
+        effect(() => {
+            this.hoveredRowIndex();
+            this._syncHoverState();
+        });
+    }
+    ngOnDestroy() {
+        this._isDestroyed = true;
+    }
+    ngOnInit() {
+        this._initialViewState.set(this.columnDefs().map(col => ({
+            field: col.field,
+            visible: col.visible ?? true,
+            width: col.width,
+            pinned: col.pinned,
+            pinAlign: col.pinAlign
+        })));
+        const snapshot = this.snapshot();
+        if (snapshot) {
+            this.applyState(snapshot);
+        }
+        if (this.rowModelType() !== 'serverSide') {
+            this.loaded.set(true);
+        }
+        if (this.rowModelType() === 'serverSide' && this._dataSource.data.length === 0) {
+            this._internalLoading.set(true);
+        }
+        if (this.cellRenderers().length === 0) {
+            return;
+        }
+        this.loadingCellRenderers.set(true);
+        const components = this.cellRenderers().map(cellRenderer => cellRenderer.component());
+        Promise.all(components).then(components => {
+            components.forEach((component, index) => {
+                this.cellRenderersMap.set(this.cellRenderers()[index].cellRenderer, component);
+            });
+            this.loadingCellRenderers.set(false);
+            this._cdr.detectChanges();
+        }).catch(() => {
+            this.loadingCellRenderers.set(false);
+            this._cdr.detectChanges();
+        });
+    }
+    ngAfterViewInit() {
+        this.isBrowser.set(isPlatformBrowser(this._platformId));
+        this._cdr.detectChanges();
+    }
+    _syncScrolls(source) {
+        const scrollTop = source.scrollTop;
+        const scrollLeft = source.scrollLeft;
+        this._lastScrollTop = scrollTop;
+        this._lastScrollLeft = scrollLeft;
+        if (this._isDestroyed)
+            return;
+        this._syncTransforms();
+        this._ngZone.run(() => {
+            this._scheduleVirtualUpdate(scrollTop);
+        });
+    }
+    _scheduleVirtualUpdate(scrollTop) {
+        const delta = Math.abs(this._scrollTop() - scrollTop);
+        const threshold = this.rowHeight() * (this.bufferRows() / 2);
+        if (delta >= threshold || scrollTop === 0 || scrollTop + this._viewportHeight() >= this.totalHeight()) {
+            this._scrollTop.set(scrollTop);
+            this._syncTransforms();
+        }
+    }
+    _syncTransforms() {
+        const scrollTop = this._lastScrollTop;
+        const scrollLeft = this._lastScrollLeft;
+        const headerCenterInner = this._headerCenterInner()?.nativeElement;
+        if (headerCenterInner) {
+            headerCenterInner.style.transform = `translate3d(${-scrollLeft}px, 0, 0)`;
+        }
+        const bodyLeftContent = this._bodyLeftContent()?.nativeElement;
+        const bodyRightContent = this._bodyRightContent()?.nativeElement;
+        const bodyCenterContent = this._bodyCenterContent()?.nativeElement;
+        if (bodyLeftContent) {
+            bodyLeftContent.style.transform = `translate3d(0, ${-scrollTop}px, 0)`;
+        }
+        if (bodyRightContent) {
+            bodyRightContent.style.transform = `translate3d(0, ${-scrollTop}px, 0)`;
+        }
+        if (bodyCenterContent) {
+            bodyCenterContent.style.transform = `translate3d(${-scrollLeft}px, ${-scrollTop}px, 0)`;
+        }
+        // Sync hovered row if needed
+        this._syncHoverState();
+    }
+    _syncHoverState() {
+        // if (!isPlatformBrowser(this._platformId)) return;
+        //
+        // this._ngZone.runOutsideAngular(() => {
+        //   const rows = Array.from(document.querySelectorAll('.ngs-data-view .grid-row'));
+        //   const hoveredIndex = this.hoveredRowIndex();
+        //   rows.forEach(row => {
+        //     const indexAttr = row.getAttribute('data-row-index');
+        //     if (indexAttr !== null) {
+        //       const index = parseInt(indexAttr, 10);
+        //       if (index === hoveredIndex) {
+        //         row.classList.add('is-hovered');
+        //       } else {
+        //         row.classList.remove('is-hovered');
+        //       }
+        //     }
+        //   });
+        // });
+    }
+    get table() {
+        return this._table();
+    }
+    get ngsSort() {
+        return this._ngsSort();
+    }
+    hasCellRenderer(cellRenderer) {
+        return this.cellRenderersMap.has(cellRenderer);
+    }
+    getCellRenderer(cellRenderer) {
+        return this.cellRenderersMap.get(cellRenderer);
+    }
+    isAllSelected() {
+        const data = this.rowModelType() === 'serverSide' ? this.dataSource().data : this.data();
+        return this.selection.selected.length === data.length;
+    }
+    toggleAllRows() {
+        if (this.isAllSelected()) {
+            this._unselectAll();
+        }
+        else {
+            this._selectAll();
+        }
+    }
+    rowSelectionToggle(event, row) {
+        if (event.checked) {
+            this.selection.select(row);
+        }
+        else {
+            this.selection.deselect(row);
+        }
+        this.rowSelectionChanged.emit({
+            checkboxChange: event,
+            row,
+            checked: event.checked
+        });
+        this.selectionChanged.emit(this.selection.selected);
+    }
+    onPageChange(event) {
+        this.pageIndex.set(event.pageIndex);
+        this.pageSize.set(event.pageSize);
+    }
+    sortColumn(col, direction) {
+        const sort = this.ngsSort;
+        if (sort) {
+            sort.active.set(col.field);
+            sort.direction.set(direction);
+            sort.sortChange.emit({ active: col.field, direction });
+        }
+        this.onSortChange({ active: col.field, direction });
+    }
+    getSnapshot() {
+        return this.normalizedColumns().map(col => ({
+            field: col.field,
+            visible: col.visible ?? true,
+            width: col.width,
+            pinned: col.pinned,
+            pinAlign: col.pinAlign
+        }));
+    }
+    applyState(state) {
+        if (!state || state.length === 0)
+            return;
+        const pinOverrides = { ...this._manualPinned() };
+        const widthOverrides = { ...this._manualWidths() };
+        this.columnDefs().forEach(col => {
+            const colState = state.find(s => s.field === col.field);
+            if (colState) {
+                if (colState.width !== undefined) {
+                    widthOverrides[col.field] = colState.width;
+                }
+                pinOverrides[col.field] = {
+                    pinned: !!colState.pinned,
+                    pinAlign: colState.pinAlign
+                };
+            }
+        });
+        this._manualPinned.set(pinOverrides);
+        this._manualWidths.set(widthOverrides);
+        this._cdr.markForCheck();
+    }
+    pinColumn(col, align) {
+        const pinOverrides = { ...this._manualPinned() };
+        if (align === null) {
+            pinOverrides[col.field] = { pinned: false, pinAlign: undefined };
+        }
+        else {
+            pinOverrides[col.field] = { pinned: true, pinAlign: align };
+        }
+        this._manualPinned.set(pinOverrides);
+        this._cdr.markForCheck();
+    }
+    autosizeColumn(col) {
+        const width = this._calculateColumnAutosize(col);
+        if (width > 0) {
+            const widths = { ...this._manualWidths() };
+            widths[col.field] = `${width}px`;
+            this._manualWidths.set(widths);
+            this._cdr.markForCheck();
+        }
+    }
+    autosizeAllColumns() {
+        const widths = { ...this._manualWidths() };
+        let changed = false;
+        this.normalizedColumns().forEach(col => {
+            if (col.visible) {
+                const width = this._calculateColumnAutosize(col);
+                if (width > 0) {
+                    widths[col.field] = `${width}px`;
+                    changed = true;
+                }
+            }
+        });
+        if (changed) {
+            this._manualWidths.set(widths);
+            this._cdr.markForCheck();
+        }
+    }
+    _calculateColumnAutosize(col) {
+        if (!isPlatformBrowser(this._platformId))
+            return 0;
+        const gridRoot = this._elRef.nativeElement;
+        const headerCells = Array.from(gridRoot.querySelectorAll(`.header-cell`));
+        const targetHeaderCell = headerCells.find(cell => {
+            const sortHeader = cell.querySelector('[ngs-sort-header]');
+            return sortHeader?.getAttribute('ngs-sort-header') === col.field;
+        });
+        if (!targetHeaderCell)
+            return 0;
+        const headerContent = targetHeaderCell.querySelector('.grow');
+        const headerWidth = (headerContent?.scrollWidth ?? 0)
+            + 32 // padding-left/right
+            + 32; // extra space for sort icon and menu button
+        let maxContentWidth = headerWidth;
+        const visibleCols = this.normalizedColumns().filter(c => c.visible);
+        const colIndex = visibleCols.indexOf(visibleCols.find(c => c.field === col.field));
+        if (colIndex !== -1) {
+            const rows = Array.from(gridRoot.querySelectorAll('.grid-row'));
+            const rowsToMeasure = rows.slice(0, 50);
+            rowsToMeasure.forEach(row => {
+                const cells = Array.from(row.querySelectorAll('.cell'));
+                const cell = cells[colIndex];
+                if (cell) {
+                    const content = cell.firstElementChild;
+                    if (content) {
+                        const width = content.scrollWidth + 32; // + padding
+                        if (width > maxContentWidth) {
+                            maxContentWidth = width;
+                        }
+                    }
+                }
+            });
+        }
+        return Math.min(Math.max(maxContentWidth, 60), 500);
+    }
+    resetColumns() {
+        const initialState = this._initialViewState();
+        if (initialState.length > 0) {
+            this.applyState(initialState);
+        }
+        this._manualWidths.set({});
+        this._manualPinned.set({});
+        this._manualOrder.set(null);
+        this._manualVisibility.set({});
+        this._cdr.markForCheck();
+    }
+    openColumnSettingsDialog() {
+        const dialogRef = this._dialog.open(DataViewColumnSettingsDialog, {
+            minWidth: '400px',
+            data: {
+                columns: this.normalizedColumns(),
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                const newOrder = result.columns.map((c) => c.field);
+                const newVisibility = { ...this._manualVisibility() };
+                const newPinned = { ...this._manualPinned() };
+                result.columns.forEach((c) => {
+                    newVisibility[c.field] = c.visible !== false;
+                    newPinned[c.field] = { pinned: !!c.pinned, pinAlign: c.pinAlign };
+                });
+                // Add back missing columns that were filtered out in dialog
+                const currentOrder = this._manualOrder() || this.columnDefs().map(c => c.field);
+                const resultFields = new Set(newOrder);
+                const fullOrder = [...newOrder];
+                currentOrder.forEach(field => {
+                    if (!resultFields.has(field)) {
+                        // Find where it should be inserted to keep relative order if possible,
+                        // but just appending is also a common strategy for "static" columns.
+                        // Let's try to maintain the original relative order.
+                        fullOrder.push(field);
+                    }
+                });
+                this._manualOrder.set(fullOrder);
+                this._manualVisibility.set(newVisibility);
+                this._manualPinned.set(newPinned);
+                this._cdr.markForCheck();
+            }
+        });
+    }
+    onSortChange(event) {
+        if (this.rowModelType() !== 'serverSide') {
+            this.dataSource().sort = this.ngsSort || null;
+        }
+        this.sortChange.emit(event);
+    }
+    _selectAll() {
+        const data = this.rowModelType() === 'serverSide' ? this.dataSource().data : this.data();
+        this.selection.select(...data);
+        this.selectionChanged.emit(data);
+        this.allRowsSelectionChanged.emit(true);
+    }
+    _unselectAll() {
+        this.selection.clear();
+        this.selectionChanged.emit([]);
+        this.allRowsSelectionChanged.emit(false);
+    }
+    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: [
+            {
+                provide: DATA_VIEW,
+                useExisting: forwardRef(() => DataView),
+            },
+        ], queries: [{ propertyName: "_emptyDataRef", first: true, predicate: DataViewEmptyDataDirective, descendants: true, isSignal: true }, { propertyName: "_emptyFilterResults", first: true, predicate: DataViewEmptyFilterResultsDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarRef", first: true, predicate: DataViewActionBarDirective, descendants: true, isSignal: true }, { propertyName: "_actionBarComp", first: true, predicate: DataViewActionBarDirective, descendants: true, read: DataViewActionBar, isSignal: true }], viewQueries: [{ propertyName: "_table", first: true, predicate: ["table"], descendants: true, isSignal: true }, { propertyName: "_ngsSort", first: true, predicate: SortDirective, descendants: true, isSignal: true }, { propertyName: "_internalPaginator", first: true, predicate: Paginator, descendants: true, isSignal: true }, { propertyName: "_headerCenter", first: true, predicate: ["headerCenter"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_headerCenterInner", first: true, predicate: ["headerCenterInner"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyLeftContent", first: true, predicate: ["bodyLeftContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_scrollbarArea", first: true, predicate: ScrollbarArea, descendants: true, isSignal: true }, { propertyName: "_bodyCenterContent", first: true, predicate: ["bodyCenterContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_bodyRightContent", first: true, predicate: ["bodyRightContent"], descendants: true, read: ElementRef, isSignal: true }], exportAs: ["ngsDataView"], ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Checkbox, selector: "ngs-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["checkedChange", "disabledChange", "indeterminateChange", "change"], exportAs: ["ngsCheckbox"] }, { kind: "component", type: SortHeader, selector: "[ngs-sort-header]", inputs: ["ngs-sort-header", "sortActionDescription", "disabled"], exportAs: ["ngsSortHeader"] }, { kind: "directive", type: SortDirective, selector: "[ngsSort]", inputs: ["ngsSortActive", "ngsSortStart", "ngsSortDirection", "ngsSortDisableClear", "ngsSortDisabled"], outputs: ["ngsSortActiveChange", "ngsSortDirectionChange", "ngsSortChange"], exportAs: ["ngsSort"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Paginator, selector: "ngs-paginator", inputs: ["pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "disabled"], outputs: ["page"], exportAs: ["ngsPaginator"] }, { kind: "component", type: ScrollbarArea, selector: "ngs-scrollbar-area", inputs: ["scrollbarWidth", "autoHide", "absolute"], outputs: ["scrolled"], exportAs: ["ngsScrollbarArea"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: EmptyState, selector: "ngs-empty-state", exportAs: ["ngsEmptyState"] }, { kind: "component", type: EmptyStateIcon, selector: "ngs-empty-state-icon", exportAs: ["ngsEmptyStateIcon"] }, { kind: "component", type: EmptyStateContent, selector: "ngs-empty-state-content", exportAs: ["ngsEmptyStateContent"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: BlockLoader, selector: "ngs-block-loader", inputs: ["loading", "spinnerDiameter", "spinnerStrokeWidth"], exportAs: ["ngsBlockLoader"] }, { kind: "directive", type: BlockLoaderContainerDirective, selector: "[ngsBlockLoaderContainer]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Menu, selector: "ngs-menu", inputs: ["role", "classList", "xPosition", "yPosition"], outputs: ["closed"], exportAs: ["ngsMenu"] }, { kind: "component", type: MenuItem, selector: "ngs-menu-item, [ngs-menu-item]", inputs: ["disabled", "role", "selected"], outputs: ["_triggered"], exportAs: ["ngsMenuItem"] }, { kind: "directive", type: MenuTrigger, selector: "[ngsMenuTriggerFor]", inputs: ["ngsMenuTriggerFor", "ngsMenuTriggerData", "ngsMenuDisabled", "xPosition", "yPosition", "ngsMenuTriggerRestoreFocus"], outputs: ["menuOpened", "menuClosed"], exportAs: ["ngsMenuTrigger"] }, { kind: "component", type: MenuDivider, selector: "ngs-menu-divider" }, { kind: "directive", type: MenuContent, selector: "[ngsMenuContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataView, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-data-view', exportAs: 'ngsDataView', imports: [
+                        Checkbox,
+                        SortHeader,
+                        SortDirective,
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
+                        Paginator,
+                        ScrollbarArea,
+                        NgStyle,
+                        EmptyState,
+                        EmptyStateIcon,
+                        EmptyStateContent,
+                        Icon,
+                        BlockLoader,
+                        BlockLoaderContainerDirective,
+                        Button,
+                        Menu,
+                        MenuItem,
+                        MenuTrigger,
+                        MenuDivider,
+                        MenuContent,
+                    ], providers: [
+                        {
+                            provide: DATA_VIEW,
+                            useExisting: forwardRef(() => DataView),
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-data-view',
+                        '[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()',
+                    }, template: "<div class=\"flex flex-col h-full overflow-hidden relative\"\n     ngsBlockLoaderContainer>\n  <ngs-block-loader [loading]=\"_isLoading()\"/>\n  @if (loaded()) {\n    @if (!noFilteredResults) {\n      <div class=\"grid-root flex flex-col grow overflow-hidden relative\">\n        @if (isResizing()) {\n          <div class=\"ngs-data-view-resize-line\" [style.left.px]=\"resizeLineLeft()\"></div>\n        }\n\n        <!-- GRID HEADER -->\n        <div class=\"grid-header pinned top-0 z-20 flex overflow-hidden shrink-0 font-medium\"\n             ngsSort\n             [style.height.px]=\"headerHeight()\"\n             [ngsSortDisabled]=\"!isSortingEnabled() || _isLoading() || _isFiltering()\"\n             (ngsSortChange)=\"onSortChange($event)\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div class=\"grid-header-left shrink-0 flex z-30\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"leftPinnedWidth()\">\n                @if (withSelection()) {\n                  <div class=\"header-cell cell-selection flex items-center justify-center shrink-0\">\n                    @if (rowSelection() === 'multiple') {\n                      <ngs-checkbox (change)=\"$event ? toggleAllRows() : null\"\n                                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\" />\n                    }\n                  </div>\n                }\n                @for (col of pinnedLeftColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n\n          <div #headerCenter class=\"grid-header-center grow flex overflow-hidden\">\n            <div #headerCenterInner class=\"flex header-inner\" [style.width.px]=\"centerWidth()\">\n              @for (col of centerColumns(); track col.field) {\n                <div class=\"header-cell flex items-center truncate relative\"\n                     [class.shrink-0]=\"!col.flex\"\n                     [style.flex]=\"col.flex\"\n                     [style.width]=\"col.width\"\n                     [style.min-width]=\"col.width\"\n                     [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div class=\"grid-header-right shrink-0 flex z-30\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div class=\"header-inner flex\" [style.width.px]=\"rightPinnedWidth()\">\n                @for (col of pinnedRightColumns(); track col.field) {\n                  <div class=\"header-cell flex items-center truncate relative\"\n                       [class.shrink-0]=\"!col.flex\"\n                       [style.flex]=\"col.flex\"\n                       [style.width]=\"col.width\"\n                       [style.min-width]=\"col.width\"\n                       [style.max-width]=\"col.width\">\n                    <div class=\"flex items-center grow truncate\"\n                         [ngs-sort-header]=\"col.field\"\n                         [disabled]=\"!col.sortable\">\n                      <span class=\"truncate\">{{ col.name }}</span>\n                    </div>\n                    @if (col.withColumnSettings !== false && withColumnSettings()) {\n                      <button ngsIconButton\n                              #menuTrigger=\"ngsMenuTrigger\"\n                              [ngsMenuTriggerFor]=\"columnMenu\"\n                              [ngsMenuTriggerData]=\"{ col: col }\"\n                              class=\"ngs-data-view-column-settings-btn shrink-0\"\n                              [class.is-menu-open]=\"menuTrigger.menuOpen()\">\n                        <ngs-icon name=\"fluent:more-vertical-24-regular\" size=\"20\"/>\n                      </button>\n                    }\n                    @if (col.resizable) {\n                      <div class=\"col-resize-handle\" (mousedown)=\"onColumnResizeStart($event, col)\"></div>\n                    }\n                  </div>\n                }\n                @if (actionBarTemplateRef) {\n                  <div class=\"header-cell flex items-center shrink-0\"\n                       [style.width.px]=\"actionBarWidth()\"\n                       [style.min-width.px]=\"actionBarWidth()\"\n                       [style.max-width.px]=\"actionBarWidth()\">\n                    &nbsp;\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <div class=\"grid-body grow flex relative\">\n          @if (pinnedLeftColumns().length > 0 || withSelection()) {\n            <div #bodyLeft class=\"grid-body-left pinned-viewport shrink-0 overflow-hidden z-10 pinned left-0\"\n                 [ngStyle]=\"leftPinnedWidthStyles()\">\n              <div #bodyLeftCanvas class=\"pinned-canvas\">\n                <div #bodyLeftContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @if (withSelection()) {\n                        <div class=\"cell cell-selection flex items-center justify-center shrink-0\">\n                          <ngs-checkbox (click)=\"$event.stopPropagation()\"\n                                        (change)=\"$event ? rowSelectionToggle($event, row.item) : null\"\n                                        [checked]=\"selection.isSelected(row.item)\" />\n                        </div>\n                      }\n                      @for (col of pinnedLeftColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n\n          <div #bodyCenter class=\"grid-body-center grow overflow-hidden relative\">\n            <ngs-scrollbar-area>\n              <div #bodyCenterContent class=\"rows-container\">\n                @for (row of visibleRows(); track row.index) {\n                  <div class=\"grid-row flex absolute left-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                       [style.top.px]=\"row.top\"\n                       [style.height.px]=\"rowHeight()\"\n                       [style.width.px]=\"centerWidth()\"\n                       [attr.data-row-index]=\"row.index\"\n                       [class.is-selected]=\"selection.isSelected(row.item)\"\n                       [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                       [class.is-last]=\"row.isLast\"\n                       (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                       (mouseleave)=\"hoveredRowIndex.set(null)\">\n                    @for (col of centerColumns(); track col.field) {\n                      <div class=\"cell flex items-center truncate\"\n                           [class.shrink-0]=\"!col.flex\"\n                           [style.flex]=\"col.flex\"\n                           [style.width]=\"col.width\"\n                           [style.min-width]=\"col.width\"\n                           [style.max-width]=\"col.width\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"/>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"virtual-spacer relative\" [style.height.px]=\"totalHeight()\" [style.width.px]=\"centerWidth()\"></div>\n            </ngs-scrollbar-area>\n          </div>\n\n          @if (pinnedRightColumns().length > 0 || actionBarTemplateRef) {\n            <div #bodyRight class=\"grid-body-right pinned-viewport shrink-0 overflow-hidden z-10 pinned right-0\"\n                 [ngStyle]=\"rightPinnedWidthStyles()\">\n              <div #bodyRightCanvas class=\"pinned-canvas\">\n                <div #bodyRightContent class=\"pinned-content relative\" [style.height.px]=\"totalHeight()\">\n                  @for (row of visibleRows(); track row.index) {\n                    <div class=\"grid-row flex absolute left-0 right-0 hover:bg-[var(--ngs-data-view-row-hover-bg)]\"\n                         [style.top.px]=\"row.top\"\n                         [style.height.px]=\"rowHeight()\"\n                         [attr.data-row-index]=\"row.index\"\n                         [class.is-selected]=\"selection.isSelected(row.item)\"\n                         [class.is-hovered]=\"hoveredRowIndex() === row.index\"\n                         [class.is-last]=\"row.isLast\"\n                         (mouseenter)=\"hoveredRowIndex.set(row.index)\"\n                         (mouseleave)=\"hoveredRowIndex.set(null)\">\n                      @for (col of pinnedRightColumns(); track col.field) {\n                        <div class=\"cell flex items-center truncate\"\n                             [class.shrink-0]=\"!col.flex\"\n                             [style.flex]=\"col.flex\"\n                             [style.width]=\"col.width\"\n                             [style.min-width]=\"col.width\"\n                             [style.max-width]=\"col.width\">\n                          <ng-container *ngTemplateOutlet=\"cellContent; context: { row: row.item, col: col }\"></ng-container>\n                        </div>\n                      }\n                      @if (actionBarTemplateRef) {\n                        <div class=\"cell flex items-center shrink-0\"\n                             [style.width.px]=\"actionBarWidth()\"\n                             [style.min-width.px]=\"actionBarWidth()\"\n                             [style.max-width.px]=\"actionBarWidth()\">\n                          <ng-container [ngTemplateOutlet]=\"actionBarTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\"/>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n\n        @if (withPagination() && !paginator()) {\n          <ngs-paginator [pageSizeOptions]=\"pageSizeOptions()\"\n                         [showFirstLastButtons]=\"showFirstLastButtons()\"\n                         [pageSize]=\"pageSize()\"\n                         [pageIndex]=\"pageIndex()\"\n                         [length]=\"effectivePaginatorLength()\"\n                         [disabled]=\"_isLoading() || _isFiltering()\"\n                         (page)=\"onPageChange($event)\"/>\n        }\n      </div>\n    } @else {\n      @if (isNoResults) {\n        @if (emptyFilterResultsTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyFilterResultsTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyFilterResultsIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ interpolatedEmptyFilterResultsText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      } @else {\n        @if (emptyTemplateRef) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplateRef\"/>\n        } @else {\n          <ngs-empty-state>\n            <ngs-empty-state-icon>\n              <ngs-icon [name]=\"emptyIcon()\"/>\n            </ngs-empty-state-icon>\n            <ngs-empty-state-content>{{ emptyText() }}</ngs-empty-state-content>\n          </ngs-empty-state>\n        }\n      }\n    }\n  }\n</div>\n\n<ng-template #cellContent let-row=\"row\" let-col=\"col\">\n  <div class=\"overflow-hidden w-full\">\n    @if (col.cellRenderer && hasCellRenderer(col.cellRenderer)) {\n      <ng-container [ngComponentOutlet]=\"getCellRenderer(col.cellRenderer)\"\n                    [ngComponentOutletInputs]=\"{ element: row, columnDef: col, fieldData: getNestedValue(row, col.field) }\"\n                    [ngComponentOutletInjector]=\"injector\"/>\n    } @else {\n      {{ getNestedValue(row, col.field) }}\n    }\n  </div>\n</ng-template>\n\n<ngs-menu #columnMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    @if (col.sortable) {\n      <button ngs-menu-item (click)=\"sortColumn(col, 'asc')\">\n        <ngs-icon name=\"fluent:arrow-sort-up-24-regular\" size=\"20\"/>\n        Sort Ascending\n      </button>\n      <button ngs-menu-item (click)=\"sortColumn(col, 'desc')\">\n        <ngs-icon name=\"fluent:arrow-sort-down-24-regular\" size=\"20\"/>\n        Sort Descending\n      </button>\n      <ngs-menu-divider/>\n    }\n    <button ngs-menu-item [ngsMenuTriggerFor]=\"pinMenu\" [ngsMenuTriggerData]=\"{ col: col }\">\n      <ngs-icon name=\"fluent:pin-24-regular\" size=\"20\"/>\n      Pin Column\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"autosizeColumn(col)\">\n      Autosize This Column\n    </button>\n    <button ngs-menu-item (click)=\"autosizeAllColumns()\">\n      Autosize All Columns\n    </button>\n    <ngs-menu-divider/>\n    <button ngs-menu-item (click)=\"openColumnSettingsDialog()\">\n      Choose Columns\n    </button>\n    <button ngs-menu-item (click)=\"resetColumns()\">\n      Reset Columns\n    </button>\n  </ng-template>\n</ngs-menu>\n\n<ngs-menu #pinMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-col=\"col\">\n    <button ngs-menu-item\n            [selected]=\"!col.pinned\"\n            (click)=\"pinColumn(col, null)\">\n      No Pin\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'start'\"\n            (click)=\"pinColumn(col, 'start')\">\n      Pin Left\n    </button>\n    <button ngs-menu-item\n            [selected]=\"col.pinned && col.pinAlign === 'end'\"\n            (click)=\"pinColumn(col, 'end')\">\n      Pin Right\n    </button>\n  </ng-template>\n</ngs-menu>\n", styles: [":host{--ngs-data-view-header-height: 48px;--ngs-data-view-selection-column-width: 48px;--ngs-data-view-header-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-body-bg: var(--color-background);--ngs-data-view-row-bg: var(--color-background);--ngs-data-view-row-hover-bg: var(--color-surface-container-low, #f8fafc);--ngs-data-view-hl-header-row-bg: var(--color-surface-container);--ngs-data-view-border-color: var(--color-border);--ngs-data-view-bg: transparent;--ngs-data-view-min-height: 300px;--ngs-table-row-item-outline-width: 0;--ngs-table-background: var(--ngs-data-view-bg);--ngs-content-fade-color: var(--ngs-data-view-row-bg);--ngs-table-header-cell-background: var(--ngs-data-view-header-bg);--ngs-data-view-radius: .75rem;--ngs-data-view-root-border: 1px solid var(--ngs-data-view-border-color);--ngs-data-view-cell-padding: 0 calc(var(--spacing, .25rem) * 4)}:host .ngs-data-view-resize-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--color-primary);z-index:1000;pointer-events:none;margin-left:-1px}:host.embedded{--ngs-data-view-radius: 0;--ngs-data-view-root-border: none}:host.highlight-header{--ngs-data-view-header-bg: var(--ngs-data-view-hl-header-row-bg)}:host{display:flex;flex-direction:column;min-height:var(--ngs-data-view-min-height)}:host:not(.is-auto-height){height:var(--ngs-data-view-min-height)}:host>div:first-child{flex:1 1 auto}:host.is-loading{pointer-events:none;-webkit-user-select:none;user-select:none}:host .grid-root{background-color:var(--ngs-data-view-body-bg);border:var(--ngs-data-view-root-border);border-radius:var(--ngs-data-view-radius);min-height:inherit;flex:1 1 auto}:host .grid-header,:host .grid-body,:host ngs-paginator{transition:opacity .3s ease-in-out;opacity:1}:host:not(.is-browser) .grid-header,:host:not(.is-browser) .grid-body,:host:not(.is-browser) ngs-paginator{opacity:0;transition:none}:host .grid-header-center,:host .grid-body-center{flex:1 1 0;min-width:0}:host .grid-header .header-cell .ngs-data-view-column-settings-btn{z-index:10;margin-inline-end:calc(calc(var(--spacing, .25rem) * 2.5) * -1);display:none;transition:opacity .2s,color .2s}:host .grid-header .header-cell .ngs-data-view-column-settings-btn:not(:hover) ngs-icon{color:var(--color-neutral-500)}:host .grid-header .header-cell:hover .ngs-data-view-column-settings-btn{display:inline-flex}:host .grid-header .header-cell .ngs-data-view-column-settings-btn.is-menu-open{display:inline-flex}:host ::ng-deep .header-cell,:host ::ng-deep .cell{box-sizing:border-box;padding:var(--ngs-data-view-cell-padding);border-right:1px solid transparent;overflow:hidden;min-width:40px}:host ::ng-deep .header-cell.cell-selection,:host ::ng-deep .cell.cell-selection{padding:0 calc(var(--spacing, .25rem) * 2);width:var(--ngs-data-view-selection-column-width);min-width:var(--ngs-data-view-selection-column-width)}:host ::ng-deep .header-cell{background-color:var(--ngs-data-view-header-bg)}:host ::ng-deep .cell{background-color:transparent}:host ::ng-deep .ngs-header-cell,:host ::ng-deep .ngs-cell{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .grid-header{-webkit-user-select:text;user-select:text;background-color:var(--ngs-data-view-header-bg);color:var(--color-on-background);font-size:.875rem;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-header .header-cell{height:var(--ngs-data-view-header-height);position:relative}:host .grid-header .header-cell .col-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;cursor:col-resize;z-index:10;border-right:1px solid var(--color-border);transition:border-color .2s}:host .grid-header .header-cell .col-resize-handle:hover{border-right-color:var(--color-primary)}:host .grid-header .grid-header-left{box-sizing:border-box;position:relative}:host .grid-header .grid-header-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-header .grid-header-right{box-sizing:border-box;position:relative}:host .grid-header .grid-header-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body{font-size:.875rem;overflow:hidden;flex:1 1 auto;min-height:100px}:host .grid-body .grid-body-left,:host .grid-body .grid-body-center,:host .grid-body .grid-body-right{background-color:var(--ngs-data-view-body-bg, var(--color-background))}:host .grid-body .grid-row{background-color:var(--ngs-data-view-row-bg);box-sizing:border-box;color:var(--color-on-background);border-bottom:1px solid var(--ngs-data-view-border-color)}:host .grid-body .grid-row.is-last{border-bottom:none}:host .grid-body .grid-row.is-selected{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected{background-color:color-mix(in srgb,var(--color-primary) 10%,transparent)}}:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:var(--color-primary)}@supports (color: color-mix(in lab,red,red)){:host .grid-body .grid-row.is-selected:hover,:host .grid-body .grid-row.is-selected.is-hovered{background-color:color-mix(in srgb,var(--color-primary) 20%,transparent)}}:host .grid-body .grid-row:hover,:host .grid-body .grid-row.is-hovered{background-color:var(--ngs-data-view-row-hover-bg)}:host .grid-body .grid-body-left,:host .grid-body .grid-body-right{scrollbar-width:none}:host .grid-body .grid-body-left::-webkit-scrollbar,:host .grid-body .grid-body-right::-webkit-scrollbar{display:none}:host .grid-body .grid-body-left.grid-body-left,:host .grid-body .grid-body-right.grid-body-left{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-left:after,:host .grid-body .grid-body-right.grid-body-left:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.grid-body-right,:host .grid-body .grid-body-right.grid-body-right{box-sizing:border-box;position:relative}:host .grid-body .grid-body-left.grid-body-right:after,:host .grid-body .grid-body-right.grid-body-right:after{content:\"\";position:absolute;top:0;left:0;bottom:0;width:1px;background-color:var(--ngs-data-view-border-color);z-index:100;pointer-events:none}:host .grid-body .grid-body-left.pinned-viewport,:host .grid-body .grid-body-right.pinned-viewport{overflow:hidden;position:sticky;top:0;z-index:10;contain:layout paint}:host .grid-body .grid-body-left .pinned-canvas,:host .grid-body .grid-body-right .pinned-canvas{will-change:transform;height:100%;width:100%;contain:layout paint}:host .grid-body .grid-body-left .pinned-content,:host .grid-body .grid-body-right .pinned-content{position:relative}:host .grid-body .grid-body-center{contain:layout paint}:host .grid-body .grid-body-center .rows-container{position:sticky;top:0;left:0;will-change:transform;width:100%;z-index:1}:host .grid-header-center{scrollbar-width:none}:host .grid-header-center::-webkit-scrollbar{display:none}:host .grid-header-center{contain:layout paint}:host .grid-header-center .header-inner{will-change:transform;contain:layout paint}:host:not(.has-horizontal-scroll) .grid-header-left:after,:host:not(.has-horizontal-scroll) .grid-body-left:after,:host:not(.has-horizontal-scroll) .grid-header-right:after,:host:not(.has-horizontal-scroll) .grid-body-right:after{display:none}:host ngs-paginator{padding:calc(var(--spacing, .25rem) * 2.5) 0;border-top:1px solid var(--ngs-data-view-border-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _emptyDataRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyDataDirective), { isSignal: true }] }], _emptyFilterResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewEmptyFilterResultsDirective), { isSignal: true }] }], _actionBarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewActionBarDirective), { isSignal: true }] }], _actionBarComp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataViewActionBarDirective), { ...{ read: DataViewActionBar }, isSignal: true }] }], _table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }], _ngsSort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SortDirective), { isSignal: true }] }], _internalPaginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Paginator), { isSignal: true }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], _headerCenter: [{ type: i0.ViewChild, args: ['headerCenter', { ...{ read: (ElementRef) }, isSignal: true }] }], _headerCenterInner: [{ type: i0.ViewChild, args: ['headerCenterInner', { ...{ read: (ElementRef) }, isSignal: true }] }], _bodyLeftContent: [{ type: i0.ViewChild, args: ['bodyLeftContent', { ...{ read: (ElementRef) }, isSignal: true }] }], _scrollbarArea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollbarArea), { isSignal: true }] }], _bodyCenterContent: [{ type: i0.ViewChild, args: ['bodyCenterContent', { ...{ read: (ElementRef) }, isSignal: true }] }], _bodyRightContent: [{ type: i0.ViewChild, args: ['bodyRightContent', { ...{ read: (ElementRef) }, isSignal: true }] }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: false }] }], defaultColDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColDef", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], bufferRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferRows", required: false }] }], withSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSelection", required: false }] }], highlightHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightHeader", required: false }] }], rowModelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowModelType", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], withPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPagination", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], paginatorAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginatorAriaLabel", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }, { type: i0.Output, args: ["pageIndexChange"] }], snapshot: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapshot", required: false }] }], withColumnSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "withColumnSettings", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], selectionWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionWidth", required: false }] }], minColumnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColumnWidth", required: false }] }], cellRenderers: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellRenderers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], hoverRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverRows", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyFilterResultsIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterResultsIcon", required: false }] }], emptyFilterResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterResultsText", required: false }] }], rowSelectionChanged: [{ type: i0.Output, args: ["rowSelectionChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], allRowsSelectionChanged: [{ type: i0.Output, args: ["allRowsSelectionChanged"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], loadEnd: [{ type: i0.Output, args: ["loadEnd"] }], refreshEnd: [{ type: i0.Output, args: ["refreshEnd"] }] } });
+
+function cellRenderer(cellRenderer, component) {
+    return {
+        cellRenderer,
+        component
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATA_VIEW, DATA_VIEW_CONFIG, DataView, DataViewActionBar, DataViewActionBarDirective, DataViewEmptyDataDirective, DataViewEmptyFilterResultsDirective, cellRenderer, provideDataView };
+//# sourceMappingURL=ngstarter-ui-components-data-view.mjs.map