ngx-simple-datatables 1.17.0

package/esm2022/lib/ngx-simple-datatable.service.mjs

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import * as i0 from "@angular/core";
+export class NgxSimpleDatatableService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNpbXBsZS1kYXRhdGFibGUuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zaW1wbGUtZGF0YXRhYmxlL3NyYy9saWIvbmd4LXNpbXBsZS1kYXRhdGFibGUuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQUszQyxNQUFNLE9BQU8seUJBQXlCO0lBRXBDLGdCQUFnQixDQUFDOytHQUZOLHlCQUF5QjttSEFBekIseUJBQXlCLGNBRnhCLE1BQU07OzRGQUVQLHlCQUF5QjtrQkFIckMsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIE5neFNpbXBsZURhdGF0YWJsZVNlcnZpY2Uge1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iXX0=

package/esm2022/ngx-simple-datatables.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNpbXBsZS1kYXRhdGFibGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNpbXBsZS1kYXRhdGFibGUvc3JjL25neC1zaW1wbGUtZGF0YXRhYmxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19

package/esm2022/public-api.mjs

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of ngx-simple-datatable
+ */
+export * from './lib/ngx-simple-datatable.service';
+export * from './lib/ngx-simple-datatable.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1zaW1wbGUtZGF0YXRhYmxlL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLHNDQUFzQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBuZ3gtc2ltcGxlLWRhdGF0YWJsZVxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL25neC1zaW1wbGUtZGF0YXRhYmxlLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbmd4LXNpbXBsZS1kYXRhdGFibGUuY29tcG9uZW50JztcbiJdfQ==

package/fesm2022/ngx-simple-datatables.mjs

@@ -0,0 +1,506 @@
+import * as i0 from '@angular/core';
+import { Injectable, PLATFORM_ID, ContentChild, ViewChild, Input, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+
+class NgxSimpleDatatableService {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxSimpleDatatableComponent {
+    constructor(cdr, platformId, ngZone) {
+        this.cdr = cdr;
+        this.platformId = platformId;
+        this.ngZone = ngZone;
+        this.columns = [];
+        this.data = [];
+        this.rowHeight = 40;
+        this.headerHeight = 50;
+        this.bufferSize = 10;
+        // Virtualization properties
+        this.visibleStartIndex = 0;
+        this.visibleEndIndex = 0;
+        this.visibleRows = [];
+        this.totalHeight = 0;
+        this.offsetY = 0;
+        this.containerHeight = 0;
+        // Column properties
+        this.leftFrozenColumns = [];
+        this.centerColumns = [];
+        this.rightFrozenColumns = [];
+        this.columnWidths = {};
+        // Sorting
+        this.sortState = { field: "", direction: null };
+        // Resizing
+        this.isResizing = false;
+        this.resizingColumn = "";
+        this.startX = 0;
+        this.startWidth = 0;
+        // Scroll listeners
+        this.scrollListener = null;
+        this.resizeListener = null;
+        this.storageKey = "ngx-simple-datatable-column-widths";
+        this.scrollRequestId = null;
+        this.resizeTimer = null;
+        this.mouseMoveHandler = null;
+        this.mouseUpHandler = null;
+        // Track last scroll time to prevent feedback loops
+        this.lastScrollTime = 0;
+        this.SCROLL_DEBOUNCE = 10; // ms
+        // Track scroll position for header transform
+        this.headerTransform = "translateX(0)";
+        // TrackBy functions for performance
+        this.trackByRowIndex = (index) => this.visibleStartIndex + index;
+        this.trackByColumnField = (index, column) => column.field;
+        this.isBrowser = isPlatformBrowser(this.platformId);
+    }
+    ngOnInit() {
+        this.initializeColumns();
+        if (this.isBrowser) {
+            this.setupEventListeners();
+        }
+        this.calculateVirtualization();
+    }
+    ngOnDestroy() {
+        if (this.isBrowser) {
+            this.removeEventListeners();
+            // Clean up any pending animations or timeouts
+            if (this.scrollRequestId) {
+                cancelAnimationFrame(this.scrollRequestId);
+            }
+            if (this.resizeTimer) {
+                clearTimeout(this.resizeTimer);
+            }
+        }
+    }
+    ngAfterContentInit() {
+        // if (!this.headerTemplate) {
+        //   throw new Error("ngx-simple-datatable requires a headerTemplate.");
+        // }
+        // if (!this.cellTemplate) {
+        //   throw new Error("ngx-simple-datatable requires a cellTemplate.");
+        // }
+    }
+    initializeColumns() {
+        this.leftFrozenColumns = this.columns.filter((col) => col.freeze === "left");
+        this.rightFrozenColumns = this.columns.filter((col) => col.freeze === "right");
+        this.centerColumns = this.columns.filter((col) => !col.freeze);
+        // Load saved column widths if available
+        const savedWidths = this.loadColumnWidths();
+        // Initialize column widths
+        this.columns.forEach((col) => {
+            if (col.width) {
+                this.columnWidths[col.field] = Number.parseInt(col.width.replace("px", ""));
+            }
+            else if (savedWidths && savedWidths[col.field]) {
+                this.columnWidths[col.field] = savedWidths[col.field];
+            }
+            else {
+                this.columnWidths[col.field] = 150; // default width
+            }
+        });
+    }
+    setupEventListeners() {
+        // Store references for cleanup
+        this.scrollListener = (event) => this.onBodyScroll(event);
+        this.resizeListener = () => this.onResize();
+        this.mouseMoveHandler = (event) => this.onMouseMove(event);
+        this.mouseUpHandler = (event) => this.onMouseUp();
+        // Add event listeners
+        if (this.isBrowser) {
+            // For the header scroll (horizontal only)
+            if (this.headerRow?.nativeElement) {
+                this.headerRow.nativeElement.addEventListener("scroll", () => this.onHeaderScroll(null));
+            }
+            // For the body scroll (both vertical and horizontal)
+            if (this.tableBody?.nativeElement && this.scrollListener) {
+                this.tableBody.nativeElement.addEventListener("scroll", this.scrollListener);
+            }
+            // Window resize and mouse events
+            if (this.resizeListener) {
+                window.addEventListener("resize", this.resizeListener);
+            }
+            if (this.mouseMoveHandler) {
+                document.addEventListener("mousemove", this.mouseMoveHandler);
+            }
+            if (this.mouseUpHandler) {
+                document.addEventListener("mouseup", this.mouseUpHandler);
+            }
+        }
+    }
+    removeEventListeners() {
+        if (this.isBrowser) {
+            // Clear any pending animations or timeouts
+            if (this.scrollRequestId) {
+                cancelAnimationFrame(this.scrollRequestId);
+                this.scrollRequestId = null;
+            }
+            if (this.resizeTimer) {
+                clearTimeout(this.resizeTimer);
+                this.resizeTimer = null;
+            }
+            // Reset all event listeners
+            this.scrollListener = null;
+            this.resizeListener = null;
+            this.mouseMoveHandler = null;
+            this.mouseUpHandler = null;
+        }
+    }
+    calculateVirtualization() {
+        if (!this.tableContainer || !this.tableBody)
+            return;
+        // Update container height based on available space
+        const container = this.tableBody.nativeElement;
+        this.containerHeight = container.clientHeight - this.headerHeight;
+        this.totalHeight = this.data.length * this.rowHeight;
+        // Get scroll position
+        const scrollTop = container.scrollTop;
+        // Calculate visible rows
+        const visibleRowCount = Math.ceil(this.containerHeight / this.rowHeight) + 1;
+        // Calculate start and end indices with buffer
+        this.visibleStartIndex = Math.max(0, Math.floor(scrollTop / this.rowHeight) - this.bufferSize);
+        this.visibleEndIndex = Math.min(this.data.length - 1, this.visibleStartIndex + visibleRowCount + this.bufferSize * 2);
+        // Update visible rows
+        this.visibleRows = this.data.slice(this.visibleStartIndex, this.visibleEndIndex + 1);
+        console.log(scrollTop, this.visibleStartIndex, this.visibleEndIndex);
+        // Update vertical offset for virtual scrolling
+        this.offsetY = this.visibleStartIndex * this.rowHeight;
+        // Trigger change detection in the next tick to avoid ExpressionChangedAfterItHasBeenCheckedError
+        Promise.resolve().then(() => {
+            this.cdr.detectChanges();
+        });
+    }
+    // Handle body scroll events
+    onBodyScroll(event) {
+        if (!event)
+            return;
+        const now = Date.now();
+        if (now - this.lastScrollTime < this.SCROLL_DEBOUNCE)
+            return;
+        this.lastScrollTime = now;
+        const target = event.target;
+        // Sync header scroll with body (horizontally)
+        // if (this.headerRow?.nativeElement) {
+        // this.headerRow.nativeElement.scrollLeft = target.scrollLeft;
+        this.syncHorizontalScroll(target.scrollLeft);
+        // }
+        // Handle virtualization (vertical scrolling)
+        if (this.scrollRequestId) {
+            cancelAnimationFrame(this.scrollRequestId);
+        }
+        this.scrollRequestId = requestAnimationFrame(() => {
+            this.calculateVirtualization();
+            this.scrollRequestId = null;
+        });
+    }
+    // Handle header scroll events
+    onHeaderScroll(event) {
+        if (!event)
+            return;
+        const now = Date.now();
+        if (now - this.lastScrollTime < this.SCROLL_DEBOUNCE)
+            return;
+        this.lastScrollTime = now;
+        // Sync body scroll with header (horizontally)
+        const scrollLeft = event.target.scrollLeft;
+        if (this.tableBody?.nativeElement) {
+            this.tableBody.nativeElement.scrollLeft = scrollLeft;
+        }
+    }
+    onResize() {
+        // Debounce resize events for better performance
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = setTimeout(() => {
+            this.calculateVirtualization();
+            this.resizeTimer = null;
+        }, 50);
+    }
+    syncHorizontalScroll(scrollLeft) {
+        if (!this.tableContainer)
+            return;
+        // Update the transform value
+        this.headerTransform = `translateX(-${scrollLeft}px)`;
+        // Trigger change detection
+        this.cdr.detectChanges();
+    }
+    // Sorting functionality
+    onSort(column) {
+        if (!column.sortable)
+            return;
+        if (this.sortState.field === column.field) {
+            // Toggle sort direction
+            if (this.sortState.direction === "asc") {
+                this.sortState.direction = "desc";
+            }
+            else if (this.sortState.direction === "desc") {
+                this.sortState.direction = null;
+                this.sortState.field = "";
+            }
+            else {
+                this.sortState.direction = "asc";
+            }
+        }
+        else {
+            this.sortState.field = column.field;
+            this.sortState.direction = "asc";
+        }
+        this.applySorting();
+    }
+    applySorting() {
+        if (!this.sortState.direction || !this.sortState.field) {
+            // Reset to original order if no sorting
+            return;
+        }
+        this.data.sort((a, b) => {
+            const aValue = a[this.sortState.field];
+            const bValue = b[this.sortState.field];
+            let comparison = 0;
+            if (aValue > bValue)
+                comparison = 1;
+            if (aValue < bValue)
+                comparison = -1;
+            return this.sortState.direction === "desc" ? -comparison : comparison;
+        });
+        this.calculateVirtualization();
+    }
+    getSortIcon(column) {
+        if (!column.sortable || this.sortState.field !== column.field)
+            return "";
+        if (this.sortState.direction === "asc")
+            return "▲";
+        if (this.sortState.direction === "desc")
+            return "▼";
+        return "";
+    }
+    // Column resizing functionality
+    onResizeStart(event, column) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.resizingColumn = column.field;
+        this.startX = event.clientX;
+        this.startWidth = this.columnWidths[column.field];
+        if (this.isBrowser) {
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+        }
+    }
+    onMouseMove(event) {
+        if (!this.isResizing || !this.resizingColumn)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const deltaX = event.clientX - this.startX;
+            const newWidth = Math.max(50, this.startWidth + deltaX); // Minimum width of 50px
+            // Only update if width actually changed
+            if (this.columnWidths[this.resizingColumn] !== newWidth) {
+                this.columnWidths[this.resizingColumn] = newWidth;
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    onMouseUp() {
+        if (this.isResizing) {
+            this.isResizing = false;
+            if (this.isBrowser) {
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+                // Save column widths when resizing is complete
+                this.saveColumnWidths();
+            }
+            this.resizingColumn = "";
+        }
+    }
+    // Utility methods
+    getColumnWidth(column) {
+        return `${this.columnWidths[column.field]}px`;
+    }
+    getCellValue(row, column) {
+        const value = row[column.field];
+        return column.formatter
+            ? column.formatter(value, row)
+            : value?.toString() || "";
+    }
+    getLeftFrozenWidth() {
+        return this.leftFrozenColumns.reduce((sum, col) => sum + this.columnWidths[col.field], 0);
+    }
+    getRightFrozenWidth() {
+        return this.rightFrozenColumns.reduce((sum, col) => sum + this.columnWidths[col.field], 0);
+    }
+    // Accessibility methods
+    getAriaSort(column) {
+        if (this.sortState.field !== column.field || !column.sortable) {
+            return null;
+        }
+        return this.sortState.direction === "asc" ? "ascending" : "descending";
+    }
+    // Keyboard navigation
+    onKeydown(event) {
+        if (!this.tableContainer)
+            return;
+        const { key, ctrlKey, shiftKey } = event;
+        const scrollAmount = shiftKey ? 100 : 30; // Larger scroll with shift key
+        console.log(key);
+        switch (key) {
+            case "ArrowLeft":
+                this.tableContainer.nativeElement.scrollLeft -= scrollAmount;
+                break;
+            case "ArrowRight":
+                this.tableContainer.nativeElement.scrollLeft += scrollAmount;
+                break;
+            case "ArrowUp":
+                if (ctrlKey) {
+                    this.tableContainer.nativeElement.scrollTo({
+                        top: 0,
+                        behavior: "smooth",
+                    });
+                }
+                else {
+                    this.tableContainer.nativeElement.scrollTop -= scrollAmount;
+                }
+                break;
+            case "ArrowDown":
+                if (ctrlKey) {
+                    this.tableContainer.nativeElement.scrollTo({
+                        top: this.tableContainer.nativeElement.scrollHeight,
+                        behavior: "smooth",
+                    });
+                }
+                else {
+                    this.tableContainer.nativeElement.scrollTop += scrollAmount;
+                }
+                break;
+            case "1":
+                if (ctrlKey) {
+                    this.tableContainer.nativeElement.scrollTo({
+                        top: 0,
+                        left: 0,
+                        behavior: "smooth",
+                    });
+                }
+                else {
+                    this.tableContainer.nativeElement.scrollTo({
+                        left: 0,
+                        behavior: "smooth",
+                    });
+                }
+                break;
+            case "0":
+                if (ctrlKey) {
+                    this.tableContainer.nativeElement.scrollTo({
+                        top: this.tableContainer.nativeElement.scrollHeight,
+                        left: this.tableContainer.nativeElement.scrollWidth,
+                        behavior: "smooth",
+                    });
+                }
+                else {
+                    this.tableContainer.nativeElement.scrollTo({
+                        left: this.tableContainer.nativeElement.scrollWidth,
+                        behavior: "smooth",
+                    });
+                }
+                break;
+            default:
+                return; // Exit for other keys
+        }
+        event.preventDefault();
+    }
+    // Save column widths to localStorage
+    saveColumnWidths() {
+        if (this.isBrowser) {
+            try {
+                localStorage.setItem(this.storageKey, JSON.stringify(this.columnWidths));
+            }
+            catch (e) {
+                console.warn("Failed to save column widths to localStorage", e);
+            }
+        }
+    }
+    // Load column widths from localStorage
+    loadColumnWidths() {
+        if (!this.isBrowser)
+            return null;
+        try {
+            const saved = localStorage.getItem(this.storageKey);
+            return saved ? JSON.parse(saved) : null;
+        }
+        catch (e) {
+            console.warn("Failed to load column widths from localStorage", e);
+            return null;
+        }
+    }
+    // Clear saved column widths
+    clearSavedWidths() {
+        if (this.isBrowser) {
+            try {
+                localStorage.removeItem(this.storageKey);
+                // Reset to default widths
+                this.columns.forEach((col) => {
+                    this.columnWidths[col.field] = col.width
+                        ? Number.parseInt(col.width.replace("px", ""))
+                        : 150;
+                });
+                this.cdr.detectChanges();
+            }
+            catch (e) {
+                console.warn("Failed to clear saved column widths", e);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxSimpleDatatableComponent, isStandalone: true, selector: "ngx-simple-datatable", inputs: { columns: "columns", data: "data", rowHeight: "rowHeight", headerHeight: "headerHeight", bufferSize: "bufferSize" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: ["cellTemplate"], descendants: true, static: true }], viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true, static: true }, { propertyName: "tableBody", first: true, predicate: ["tableBody"], descendants: true, static: true }, { propertyName: "headerRow", first: true, predicate: ["headerRow"], descendants: true, static: true }, { propertyName: "headeCenterRow", first: true, predicate: ["headeCenterRow"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"dynamic-table-container\" #tableContainer>\n  <!-- Sticky Header -->\n  <div class=\"table-header\" [style.height.px]=\"headerHeight\">\n    <div class=\"header-row\" #headerRow (scroll)=\"onHeaderScroll($event)\">\n      <!-- Left Frozen Columns -->\n      <div class=\"frozen-left\" [style.width.px]=\"getLeftFrozenWidth()\" *ngIf=\"leftFrozenColumns.length > 0\"\n        role=\"presentation\">\n        <div class=\"header-cell\"\n          *ngFor=\"let column of leftFrozenColumns; trackBy: trackByColumnField; let colIndex = index\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\"\n          [class.sort-asc]=\"sortState.field === column.field && sortState.direction === 'asc'\"\n          [class.sort-desc]=\"sortState.field === column.field && sortState.direction === 'desc'\"\n          [attr.role]=\"'columnheader'\" [attr.aria-sort]=\"getAriaSort(column)\" [attr.aria-colindex]=\"colIndex + 1\"\n          [attr.aria-label]=\"column.header + (column.sortable ? ' (click to sort)' : '')\" (click)=\"onSort(column)\"\n          (keydown.enter)=\"onSort(column)\" (keydown.space)=\"onSort(column); $event.preventDefault()\"\n          [tabindex]=\"column.sortable ? '0' : '-1'\" [attr.data-column-id]=\"column.field\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n            </ng-container>\n\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n\n      <!-- Center Scrollable Columns -->\n      <div class=\"center-columns\" #headeCenterRow role=\"presentation\" [ngStyle]=\"{'transform': headerTransform}\">\n        <div class=\"header-cell\" *ngFor=\"let column of centerColumns; trackBy: trackByColumnField; let colIndex = index\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\"\n          [class.sort-asc]=\"sortState.field === column.field && sortState.direction === 'asc'\"\n          [class.sort-desc]=\"sortState.field === column.field && sortState.direction === 'desc'\"\n          [attr.role]=\"'columnheader'\" [attr.aria-sort]=\"getAriaSort(column)\"\n          [attr.aria-colindex]=\"leftFrozenColumns.length + colIndex + 1\"\n          [attr.aria-label]=\"column.header + (column.sortable ? ' (click to sort)' : '')\" (click)=\"onSort(column)\"\n          (keydown.enter)=\"onSort(column)\" (keydown.space)=\"onSort(column); $event.preventDefault()\"\n          [tabindex]=\"column.sortable ? '0' : '-1'\" [attr.data-column-id]=\"column.field\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n\n      <!-- Right Frozen Columns -->\n      <div class=\"frozen-right\" [style.width.px]=\"getRightFrozenWidth()\" *ngIf=\"rightFrozenColumns.length > 0\">\n        <div class=\"header-cell\" *ngFor=\"let column of rightFrozenColumns; trackBy: trackByColumnField\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\" (click)=\"onSort(column)\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table Body with Virtual Scrolling -->\n  <div class=\"table-body\" #tableBody [style.height]=\"'calc(100% - ' + headerHeight + 'px)'\"\n    (scroll)=\"onBodyScroll($event)\">\n    <!-- Virtual spacer for total height -->\n    <div class=\"virtual-spacer\" [style.height.px]=\"totalHeight\"></div>\n\n    <!-- Visible rows container -->\n    <div class=\"visible-rows\" [style.transform]=\"'translateY(' + offsetY + 'px)'\">\n      <div class=\"table-row\" *ngFor=\"let row of visibleRows; let i = index; trackBy: trackByRowIndex\"\n        [style.height.px]=\"rowHeight\">\n\n        <!-- Left Frozen Columns -->\n        <div class=\"frozen-left\" [style.width.px]=\"getLeftFrozenWidth()\" *ngIf=\"leftFrozenColumns.length > 0\">\n          <div class=\"table-cell\" *ngFor=\"let column of leftFrozenColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n\n        <!-- Center Scrollable Columns -->\n        <div class=\"center-columns\">\n          <div class=\"table-cell\" *ngFor=\"let column of centerColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n\n        <!-- Right Frozen Columns -->\n        <div class=\"frozen-right\" [style.width.px]=\"getRightFrozenWidth()\" *ngIf=\"rightFrozenColumns.length > 0\">\n          <div class=\"table-cell\" *ngFor=\"let column of rightFrozenColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":root{--ngx-simple-dt-bg: #ffffff;--ngx-simple-dt-border: 1px solid #e0e0e0;--ngx-simple-dt-border-radius: 8px;--ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, .1);--ngx-simple-dt-transition: all .2s ease-in-out;--ngx-simple-dt-header-bg: #f8f9fa;--ngx-simple-dt-header-hover-bg: #e9ecef;--ngx-simple-dt-header-border: 1px solid #e0e0e0;--ngx-simple-dt-header-text: #495057;--ngx-simple-dt-header-height: 98px;--ngx-simple-dt-header-font-weight: 600;--ngx-simple-dt-header-padding: 0 16px;--ngx-simple-dt-cell-hover-bg: #f1f3f5;--ngx-simple-dt-cell-active-bg: #e9ecef;--ngx-simple-dt-row-height: 48px;--ngx-simple-dt-cell-padding: 0 16px;--ngx-simple-dt-cell-border: 1px solid #e9ecef;--ngx-simple-dt-cell-font-size: .875rem;--ngx-simple-dt-cell-line-height: 1.5;--ngx-simple-dt-row-bg: #ffffff;--ngx-simple-dt-row-hover-bg: #f8f9fa;--ngx-simple-dt-row-stripe-bg: #f8f9fa;--ngx-simple-dt-row-active-bg: #e9ecef;--ngx-simple-dt-row-border: 1px solid #e9ecef}.dynamic-table-container{width:100%;height:100%;position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ngx-simple-dt-bg);border:var(--ngx-simple-dt-border);border-radius:var(--ngx-simple-dt-border-radius);box-shadow:var(--ngx-simple-dt-box-shadow);transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header{position:sticky;top:0;z-index:10;background:var(--ngx-simple-dt-header-bg);border-bottom:var(--ngx-simple-dt-header-border);overflow:hidden;height:var(--ngx-simple-dt-header-height);color:var(--ngx-simple-dt-header-text)}.dynamic-table-container .table-header .header-row{display:flex;min-width:100%;position:relative;height:100%}.dynamic-table-container .table-header .header-row .frozen-left,.dynamic-table-container .table-header .header-row .frozen-right{position:sticky;z-index:12;background:var(--ngx-simple-dt-header-bg);display:flex;box-shadow:2px 0 8px #0000000d;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .frozen-left{left:0;border-right:var(--ngx-simple-dt-header-border)}.dynamic-table-container .table-header .header-row .center-columns{display:flex;flex:1}.dynamic-table-container .table-header .header-row .frozen-right{right:0;border-left:var(--ngx-simple-dt-header-border)}.dynamic-table-container .table-header .header-row .header-cell{display:flex;align-items:center;justify-content:space-between;padding:var(--ngx-simple-dt-cell-padding);border-right:var(--ngx-simple-dt-cell-border);background:inherit;font-weight:var(--ngx-simple-dt-header-font-weight);position:relative;min-width:0;font-size:var(--ngx-simple-dt-cell-font-size);line-height:var(--ngx-simple-dt-cell-line-height);color:inherit;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell.sortable:hover{background:var(--ngx-simple-dt-header-hover-bg)}.dynamic-table-container .table-header .header-row .header-cell.sortable:active{background:var(--ngx-simple-dt-cell-active-bg)}.dynamic-table-container .table-header .header-row .header-cell .header-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-table-container .table-header .header-row .header-cell .sort-icon{margin-left:8px;font-size:12px;color:#6c757d;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell .sort-icon.sort-asc,.dynamic-table-container .table-header .header-row .header-cell .sort-icon.sort-desc{color:#0d6efd}.dynamic-table-container .table-header .header-row .header-cell .resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell .resize-handle:hover,.dynamic-table-container .table-header .header-row .header-cell .resize-handle:active{background:#0d6efd}.dynamic-table-container .table-body{position:relative;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#ced4da #f8f9fa;-webkit-overflow-scrolling:touch}.dynamic-table-container .table-body::-webkit-scrollbar{width:8px;height:8px}.dynamic-table-container .table-body::-webkit-scrollbar-track{background:#f8f9fa;scroll-margin-left:100px}.dynamic-table-container .table-body::-webkit-scrollbar-thumb{background-color:#ced4da;border-radius:4px}.dynamic-table-container .table-body::-webkit-scrollbar-thumb:hover{background-color:#adb5bd}.dynamic-table-container .table-body .virtual-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none}.dynamic-table-container .table-body .visible-rows{position:absolute;top:0;left:0;right:0;min-width:fit-content}.dynamic-table-container .table-body .visible-rows .table-row{display:flex;min-width:100%;border-bottom:var(--ngx-simple-dt-row-border);background:var(--ngx-simple-dt-row-bg);transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-body .visible-rows .table-row:nth-child(2n){background:var(--ngx-simple-dt-row-stripe-bg)}.dynamic-table-container .table-body .visible-rows .table-row:hover{background:var(--ngx-simple-dt-row-hover-bg)}.dynamic-table-container .table-body .visible-rows .table-row:active{background:var(--ngx-simple-dt-row-active-bg)}.dynamic-table-container .table-body .visible-rows .table-row .frozen-left{position:sticky;left:0;z-index:5;background:#fff;border-right:2px solid #ccc;display:flex}.table-row:hover .dynamic-table-container .table-body .visible-rows .table-row .frozen-left{background:#f9f9f9}.dynamic-table-container .table-body .visible-rows .table-row .center-columns{display:flex;flex:0 0 auto}.dynamic-table-container .table-body .visible-rows .table-row .frozen-right{position:sticky;right:0;z-index:5;background:#fff;border-left:2px solid #ccc;display:flex}.table-row:hover .dynamic-table-container .table-body .visible-rows .table-row .frozen-right{background:#f9f9f9}.dynamic-table-container .table-body .visible-rows .table-row .table-cell{padding:var(--ngx-simple-dt-cell-padding);border-right:var(--ngx-simple-dt-cell-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ngx-simple-dt-cell-font-size);line-height:var(--ngx-simple-dt-cell-line-height);display:flex;align-items:center;transition:var(--ngx-simple-dt-transition);min-width:0}.dynamic-table-container .frozen-left .table-cell,.dynamic-table-container .frozen-right .table-cell{background:inherit;box-shadow:2px 0 8px #0000000d}@media (max-width: 768px){.dynamic-table-container{font-size:14px}.dynamic-table-container .header-cell,.dynamic-table-container .table-cell{padding:0 8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxSimpleDatatableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ngx-simple-datatable", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-table-container\" #tableContainer>\n  <!-- Sticky Header -->\n  <div class=\"table-header\" [style.height.px]=\"headerHeight\">\n    <div class=\"header-row\" #headerRow (scroll)=\"onHeaderScroll($event)\">\n      <!-- Left Frozen Columns -->\n      <div class=\"frozen-left\" [style.width.px]=\"getLeftFrozenWidth()\" *ngIf=\"leftFrozenColumns.length > 0\"\n        role=\"presentation\">\n        <div class=\"header-cell\"\n          *ngFor=\"let column of leftFrozenColumns; trackBy: trackByColumnField; let colIndex = index\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\"\n          [class.sort-asc]=\"sortState.field === column.field && sortState.direction === 'asc'\"\n          [class.sort-desc]=\"sortState.field === column.field && sortState.direction === 'desc'\"\n          [attr.role]=\"'columnheader'\" [attr.aria-sort]=\"getAriaSort(column)\" [attr.aria-colindex]=\"colIndex + 1\"\n          [attr.aria-label]=\"column.header + (column.sortable ? ' (click to sort)' : '')\" (click)=\"onSort(column)\"\n          (keydown.enter)=\"onSort(column)\" (keydown.space)=\"onSort(column); $event.preventDefault()\"\n          [tabindex]=\"column.sortable ? '0' : '-1'\" [attr.data-column-id]=\"column.field\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\" [ngTemplateOutletContext]=\"{ column: column }\">\n            </ng-container>\n\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n\n      <!-- Center Scrollable Columns -->\n      <div class=\"center-columns\" #headeCenterRow role=\"presentation\" [ngStyle]=\"{'transform': headerTransform}\">\n        <div class=\"header-cell\" *ngFor=\"let column of centerColumns; trackBy: trackByColumnField; let colIndex = index\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\"\n          [class.sort-asc]=\"sortState.field === column.field && sortState.direction === 'asc'\"\n          [class.sort-desc]=\"sortState.field === column.field && sortState.direction === 'desc'\"\n          [attr.role]=\"'columnheader'\" [attr.aria-sort]=\"getAriaSort(column)\"\n          [attr.aria-colindex]=\"leftFrozenColumns.length + colIndex + 1\"\n          [attr.aria-label]=\"column.header + (column.sortable ? ' (click to sort)' : '')\" (click)=\"onSort(column)\"\n          (keydown.enter)=\"onSort(column)\" (keydown.space)=\"onSort(column); $event.preventDefault()\"\n          [tabindex]=\"column.sortable ? '0' : '-1'\" [attr.data-column-id]=\"column.field\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n\n      <!-- Right Frozen Columns -->\n      <div class=\"frozen-right\" [style.width.px]=\"getRightFrozenWidth()\" *ngIf=\"rightFrozenColumns.length > 0\">\n        <div class=\"header-cell\" *ngFor=\"let column of rightFrozenColumns; trackBy: trackByColumnField\"\n          [style.width]=\"getColumnWidth(column)\" [class.sortable]=\"column.sortable\" (click)=\"onSort(column)\">\n          <ng-container *ngIf=\"!headerTemplate; else customHeader\">\n            <span class=\"header-text\">{{ column.header }}</span>\n          </ng-container>\n          <ng-template #customHeader>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate\"\n              [ngTemplateOutletContext]=\"{ column: column }\"></ng-container>\n          </ng-template>\n          <span class=\"sort-icon\" *ngIf=\"column.sortable\">{{ getSortIcon(column) }}</span>\n          <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event, column)\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table Body with Virtual Scrolling -->\n  <div class=\"table-body\" #tableBody [style.height]=\"'calc(100% - ' + headerHeight + 'px)'\"\n    (scroll)=\"onBodyScroll($event)\">\n    <!-- Virtual spacer for total height -->\n    <div class=\"virtual-spacer\" [style.height.px]=\"totalHeight\"></div>\n\n    <!-- Visible rows container -->\n    <div class=\"visible-rows\" [style.transform]=\"'translateY(' + offsetY + 'px)'\">\n      <div class=\"table-row\" *ngFor=\"let row of visibleRows; let i = index; trackBy: trackByRowIndex\"\n        [style.height.px]=\"rowHeight\">\n\n        <!-- Left Frozen Columns -->\n        <div class=\"frozen-left\" [style.width.px]=\"getLeftFrozenWidth()\" *ngIf=\"leftFrozenColumns.length > 0\">\n          <div class=\"table-cell\" *ngFor=\"let column of leftFrozenColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n\n        <!-- Center Scrollable Columns -->\n        <div class=\"center-columns\">\n          <div class=\"table-cell\" *ngFor=\"let column of centerColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n\n        <!-- Right Frozen Columns -->\n        <div class=\"frozen-right\" [style.width.px]=\"getRightFrozenWidth()\" *ngIf=\"rightFrozenColumns.length > 0\">\n          <div class=\"table-cell\" *ngFor=\"let column of rightFrozenColumns; trackBy: trackByColumnField\"\n            [style.width]=\"getColumnWidth(column)\">\n            <ng-container *ngIf=\"!cellTemplate; else customCell\">\n              {{ getCellValue(row, column) }}\n            </ng-container>\n            <ng-template #customCell>\n              <ng-container [ngTemplateOutlet]=\"cellTemplate\"\n                [ngTemplateOutletContext]=\"{ row: row, column: column }\"></ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":root{--ngx-simple-dt-bg: #ffffff;--ngx-simple-dt-border: 1px solid #e0e0e0;--ngx-simple-dt-border-radius: 8px;--ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, .1);--ngx-simple-dt-transition: all .2s ease-in-out;--ngx-simple-dt-header-bg: #f8f9fa;--ngx-simple-dt-header-hover-bg: #e9ecef;--ngx-simple-dt-header-border: 1px solid #e0e0e0;--ngx-simple-dt-header-text: #495057;--ngx-simple-dt-header-height: 98px;--ngx-simple-dt-header-font-weight: 600;--ngx-simple-dt-header-padding: 0 16px;--ngx-simple-dt-cell-hover-bg: #f1f3f5;--ngx-simple-dt-cell-active-bg: #e9ecef;--ngx-simple-dt-row-height: 48px;--ngx-simple-dt-cell-padding: 0 16px;--ngx-simple-dt-cell-border: 1px solid #e9ecef;--ngx-simple-dt-cell-font-size: .875rem;--ngx-simple-dt-cell-line-height: 1.5;--ngx-simple-dt-row-bg: #ffffff;--ngx-simple-dt-row-hover-bg: #f8f9fa;--ngx-simple-dt-row-stripe-bg: #f8f9fa;--ngx-simple-dt-row-active-bg: #e9ecef;--ngx-simple-dt-row-border: 1px solid #e9ecef}.dynamic-table-container{width:100%;height:100%;position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ngx-simple-dt-bg);border:var(--ngx-simple-dt-border);border-radius:var(--ngx-simple-dt-border-radius);box-shadow:var(--ngx-simple-dt-box-shadow);transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header{position:sticky;top:0;z-index:10;background:var(--ngx-simple-dt-header-bg);border-bottom:var(--ngx-simple-dt-header-border);overflow:hidden;height:var(--ngx-simple-dt-header-height);color:var(--ngx-simple-dt-header-text)}.dynamic-table-container .table-header .header-row{display:flex;min-width:100%;position:relative;height:100%}.dynamic-table-container .table-header .header-row .frozen-left,.dynamic-table-container .table-header .header-row .frozen-right{position:sticky;z-index:12;background:var(--ngx-simple-dt-header-bg);display:flex;box-shadow:2px 0 8px #0000000d;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .frozen-left{left:0;border-right:var(--ngx-simple-dt-header-border)}.dynamic-table-container .table-header .header-row .center-columns{display:flex;flex:1}.dynamic-table-container .table-header .header-row .frozen-right{right:0;border-left:var(--ngx-simple-dt-header-border)}.dynamic-table-container .table-header .header-row .header-cell{display:flex;align-items:center;justify-content:space-between;padding:var(--ngx-simple-dt-cell-padding);border-right:var(--ngx-simple-dt-cell-border);background:inherit;font-weight:var(--ngx-simple-dt-header-font-weight);position:relative;min-width:0;font-size:var(--ngx-simple-dt-cell-font-size);line-height:var(--ngx-simple-dt-cell-line-height);color:inherit;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell.sortable:hover{background:var(--ngx-simple-dt-header-hover-bg)}.dynamic-table-container .table-header .header-row .header-cell.sortable:active{background:var(--ngx-simple-dt-cell-active-bg)}.dynamic-table-container .table-header .header-row .header-cell .header-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dynamic-table-container .table-header .header-row .header-cell .sort-icon{margin-left:8px;font-size:12px;color:#6c757d;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell .sort-icon.sort-asc,.dynamic-table-container .table-header .header-row .header-cell .sort-icon.sort-desc{color:#0d6efd}.dynamic-table-container .table-header .header-row .header-cell .resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-header .header-row .header-cell .resize-handle:hover,.dynamic-table-container .table-header .header-row .header-cell .resize-handle:active{background:#0d6efd}.dynamic-table-container .table-body{position:relative;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#ced4da #f8f9fa;-webkit-overflow-scrolling:touch}.dynamic-table-container .table-body::-webkit-scrollbar{width:8px;height:8px}.dynamic-table-container .table-body::-webkit-scrollbar-track{background:#f8f9fa;scroll-margin-left:100px}.dynamic-table-container .table-body::-webkit-scrollbar-thumb{background-color:#ced4da;border-radius:4px}.dynamic-table-container .table-body::-webkit-scrollbar-thumb:hover{background-color:#adb5bd}.dynamic-table-container .table-body .virtual-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none}.dynamic-table-container .table-body .visible-rows{position:absolute;top:0;left:0;right:0;min-width:fit-content}.dynamic-table-container .table-body .visible-rows .table-row{display:flex;min-width:100%;border-bottom:var(--ngx-simple-dt-row-border);background:var(--ngx-simple-dt-row-bg);transition:var(--ngx-simple-dt-transition)}.dynamic-table-container .table-body .visible-rows .table-row:nth-child(2n){background:var(--ngx-simple-dt-row-stripe-bg)}.dynamic-table-container .table-body .visible-rows .table-row:hover{background:var(--ngx-simple-dt-row-hover-bg)}.dynamic-table-container .table-body .visible-rows .table-row:active{background:var(--ngx-simple-dt-row-active-bg)}.dynamic-table-container .table-body .visible-rows .table-row .frozen-left{position:sticky;left:0;z-index:5;background:#fff;border-right:2px solid #ccc;display:flex}.table-row:hover .dynamic-table-container .table-body .visible-rows .table-row .frozen-left{background:#f9f9f9}.dynamic-table-container .table-body .visible-rows .table-row .center-columns{display:flex;flex:0 0 auto}.dynamic-table-container .table-body .visible-rows .table-row .frozen-right{position:sticky;right:0;z-index:5;background:#fff;border-left:2px solid #ccc;display:flex}.table-row:hover .dynamic-table-container .table-body .visible-rows .table-row .frozen-right{background:#f9f9f9}.dynamic-table-container .table-body .visible-rows .table-row .table-cell{padding:var(--ngx-simple-dt-cell-padding);border-right:var(--ngx-simple-dt-cell-border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ngx-simple-dt-cell-font-size);line-height:var(--ngx-simple-dt-cell-line-height);display:flex;align-items:center;transition:var(--ngx-simple-dt-transition);min-width:0}.dynamic-table-container .frozen-left .table-cell,.dynamic-table-container .frozen-right .table-cell{background:inherit;box-shadow:2px 0 8px #0000000d}@media (max-width: 768px){.dynamic-table-container{font-size:14px}.dynamic-table-container .header-cell,.dynamic-table-container .table-cell{padding:0 8px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.NgZone }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], headerHeight: [{
+                type: Input
+            }], bufferSize: [{
+                type: Input
+            }], tableContainer: [{
+                type: ViewChild,
+                args: ["tableContainer", { static: true }]
+            }], tableBody: [{
+                type: ViewChild,
+                args: ["tableBody", { static: true }]
+            }], headerRow: [{
+                type: ViewChild,
+                args: ["headerRow", { static: true }]
+            }], headeCenterRow: [{
+                type: ViewChild,
+                args: ["headeCenterRow", { static: true }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ["headerTemplate", { static: true }]
+            }], cellTemplate: [{
+                type: ContentChild,
+                args: ["cellTemplate", { static: true }]
+            }] } });
+
+/*
+ * Public API Surface of ngx-simple-datatable
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxSimpleDatatableComponent, NgxSimpleDatatableService };
+//# sourceMappingURL=ngx-simple-datatables.mjs.map