tangrid 0.1.0

package/fesm2022/tangrid-table.mjs

@@ -0,0 +1,1618 @@
+import * as i0 from '@angular/core';
+import { untracked, computed, signal, effect, afterNextRender, AfterRenderPhase, inject, DestroyRef, EventEmitter, TemplateRef, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Virtualizer, elementScroll, observeElementOffset, observeElementRect, windowScroll, observeWindowOffset, observeWindowRect } from '@tanstack/virtual-core';
+import Sortable from 'sortablejs';
+import { createAngularTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, getCoreRowModel, FlexRenderDirective } from '@tanstack/angular-table';
+
+function proxyVirtualizer(virtualizerSignal, lazyInit) {
+    return new Proxy(virtualizerSignal, {
+        apply() {
+            return virtualizerSignal();
+        },
+        get(target, property) {
+            const untypedTarget = target;
+            if (untypedTarget[property]) {
+                return untypedTarget[property];
+            }
+            let virtualizer = untracked(virtualizerSignal);
+            if (virtualizer == null) {
+                virtualizer = lazyInit();
+                untracked(() => virtualizerSignal.set(virtualizer));
+            }
+            // Create computed signals for each property that represents a reactive value
+            if (typeof property === 'string' &&
+                [
+                    'getTotalSize',
+                    'getVirtualItems',
+                    'isScrolling',
+                    'options',
+                    'range',
+                    'scrollDirection',
+                    'scrollElement',
+                    'scrollOffset',
+                    'scrollRect',
+                    'measureElementCache',
+                    'measurementsCache',
+                ].includes(property)) {
+                const isFunction = typeof virtualizer[property] === 'function';
+                Object.defineProperty(untypedTarget, property, {
+                    value: isFunction
+                        ? computed(() => target()[property]())
+                        : computed(() => target()[property]),
+                    configurable: true,
+                    enumerable: true,
+                });
+            }
+            // Create plain signals for functions that accept arguments and return reactive values
+            if (typeof property === 'string' &&
+                [
+                    'getOffsetForAlignment',
+                    'getOffsetForIndex',
+                    'getVirtualItemForOffset',
+                    'indexFromElement',
+                ].includes(property)) {
+                const fn = virtualizer[property];
+                Object.defineProperty(untypedTarget, property, {
+                    value: toComputed(virtualizerSignal, fn),
+                    configurable: true,
+                    enumerable: true,
+                });
+            }
+            return untypedTarget[property] || virtualizer[property];
+        },
+        has(_, property) {
+            return !!untracked(virtualizerSignal)[property];
+        },
+        ownKeys() {
+            return Reflect.ownKeys(untracked(virtualizerSignal));
+        },
+        getOwnPropertyDescriptor() {
+            return {
+                enumerable: true,
+                configurable: true,
+            };
+        },
+    });
+}
+function toComputed(signal, fn) {
+    const computedCache = {};
+    return (...args) => {
+        // Cache computeds by their arguments to avoid re-creating the computed on each call
+        const serializedArgs = serializeArgs(...args);
+        if (Object.prototype.hasOwnProperty.call(computedCache, serializedArgs)) {
+            return computedCache[serializedArgs]?.();
+        }
+        const computedSignal = computed(() => {
+            void signal();
+            return fn(...args);
+        });
+        computedCache[serializedArgs] = computedSignal;
+        return computedSignal();
+    };
+}
+function serializeArgs(...args) {
+    return JSON.stringify(args);
+}
+function createVirtualizerBase(options) {
+    let virtualizer;
+    function lazyInit() {
+        if (!virtualizer) {
+            virtualizer = new Virtualizer(options());
+        }
+        return virtualizer;
+    }
+    const virtualizerSignal = signal(virtualizer, { equal: () => false });
+    // two-way sync options
+    effect(() => {
+        const _options = options();
+        lazyInit();
+        virtualizerSignal.set(virtualizer);
+        virtualizer.setOptions({
+            ..._options,
+            onChange: (instance, sync) => {
+                // update virtualizerSignal so that dependent computeds recompute.
+                virtualizerSignal.set(instance);
+                _options.onChange?.(instance, sync);
+            },
+        });
+        // update virtualizerSignal so that dependent computeds recompute.
+        virtualizerSignal.set(virtualizer);
+    }, { allowSignalWrites: true });
+    const scrollElement = computed(() => options().getScrollElement());
+    // let the virtualizer know when the scroll element is changed
+    effect(() => {
+        const el = scrollElement();
+        if (el) {
+            untracked(virtualizerSignal)._willUpdate();
+        }
+    }, { allowSignalWrites: true });
+    let cleanup;
+    // FIX: Use function callback with options for afterNextRender
+    afterNextRender(() => (virtualizer ?? lazyInit())._didMount(), { phase: AfterRenderPhase.Read });
+    inject(DestroyRef).onDestroy(() => cleanup?.());
+    return proxyVirtualizer(virtualizerSignal, lazyInit);
+}
+function injectVirtualizer(options) {
+    const resolvedOptions = computed(() => {
+        const opts = options();
+        return {
+            observeElementRect: observeElementRect,
+            observeElementOffset: observeElementOffset,
+            scrollToFn: elementScroll,
+            getScrollElement: () => {
+                const elementOrRef = opts.scrollElement;
+                return ((isElementRef(elementOrRef)
+                    ? elementOrRef.nativeElement
+                    : elementOrRef) ?? null);
+            },
+            ...opts,
+        };
+    });
+    return createVirtualizerBase(resolvedOptions);
+}
+function isElementRef(elementOrRef) {
+    return elementOrRef != null && 'nativeElement' in elementOrRef;
+}
+function injectWindowVirtualizer(options) {
+    const resolvedOptions = computed(() => {
+        return {
+            getScrollElement: () => (typeof document !== 'undefined' ? window : null),
+            observeElementRect: observeWindowRect,
+            observeElementOffset: observeWindowOffset,
+            scrollToFn: windowScroll,
+            initialOffset: () => (typeof document !== 'undefined' ? window.scrollY : 0),
+            ...options(),
+        };
+    });
+    return createVirtualizerBase(resolvedOptions);
+}
+
+/**
+ * Data table component with sorting, filtering, pagination, and selection.
+ * Wraps TanStack Table for Angular.
+ */
+class TanGrid {
+    set virtualScrollViewport(el) {
+        this.scrollElementSignal.set(el?.nativeElement || null);
+    }
+    set headerRowContainer(el) {
+        this._headerRowContainer = el;
+        this._initSortable();
+    }
+    get headerRowContainer() {
+        return this._headerRowContainer;
+    }
+    constructor(ngZone, cdr) {
+        this.ngZone = ngZone;
+        this.cdr = cdr;
+        /**
+         * Table data array
+         */
+        this.data = [];
+        /**
+         * Column definitions
+         */
+        this.columns = [];
+        /**
+         * Whether table is in loading state
+         * @default false
+         */
+        this.loading = false;
+        /**
+         * Whether table is striped
+         * @default false
+         */
+        this.striped = false;
+        /**
+         * Whether table has borders
+         * @default true
+         */
+        this.bordered = true;
+        /**
+         * Whether table is hoverable
+         * @default true
+         */
+        this.hoverable = true;
+        /**
+         * Whether table is compact
+         * @default true
+         */
+        this.compact = true;
+        /**
+         * Table theme
+         * @default 'default'
+         */
+        this.theme = 'default';
+        /**
+         * Selection mode
+         * @default 'none'
+         */
+        this.selectionMode = 'none';
+        /**
+         * Selected row IDs
+         */
+        this.selectedRowIds = [];
+        /**
+         * Row ID accessor function
+         */
+        this.rowIdFn = (row, index) => String(index);
+        /**
+         * Pagination enabled
+         * @default true
+         */
+        this.pagination = true;
+        /**
+         * Initial page size
+         * @default 10
+         */
+        this.pageSize = 10;
+        /**
+         * Page size options
+         * @default [10, 20, 50, 100]
+         */
+        this.pageSizeOptions = [10, 20, 50, 100];
+        /**
+         * Pagination mode: 'client' | 'server'
+         * - 'client': Pagination is handled by TanStack Table (default)
+         * - 'server': Pagination is handled by the server, emits paginationChange event
+         * @default 'client'
+         */
+        this.paginationMode = 'client';
+        /**
+         * Total items (required for server-side pagination)
+         * @default 0
+         */
+        this.totalItems = 0;
+        /**
+         * Sorting enabled
+         * @default true
+         */
+        this.sorting = true;
+        /**
+         * Sorting mode: 'client' | 'server'
+         * - 'client': Sorting is handled by TanStack Table (default)
+         * - 'server': Sorting is handled by the server, emits sortChange event
+         * @default 'client'
+         */
+        this.sortingMode = 'client';
+        /**
+         * Filtering enabled
+         * @default true
+         */
+        this.filtering = true;
+        /**
+         * Filtering mode: 'client' | 'server'
+         * - 'client': Filtering is handled by TanStack Table (default)
+         * - 'server': Filtering is handled by the server, emits filterChange event
+         * @default 'client'
+         */
+        this.filteringMode = 'client';
+        /**
+         * Global search enabled
+         * @default false
+         */
+        this.globalSearch = false;
+        /**
+         * Show global search input
+         * @default true
+         */
+        this.showGlobalSearchInput = true;
+        /**
+         * Global filter value
+         */
+        this.globalFilter = '';
+        /**
+         * Empty state message
+         * @default 'No data available'
+         */
+        this.emptyMessage = 'No data available';
+        /**
+         * Loading message
+         * @default 'Loading...'
+         */
+        this.loadingMessage = 'Loading...';
+        /**
+         * Loading type: 'spinner' | 'placeholder' | 'template'
+         * @default 'spinner'
+         */
+        this.loadingType = 'spinner';
+        /**
+         * Number of placeholder rows to show when loadingType is 'placeholder'
+         * @default 5
+         */
+        this.placeholderRows = 5;
+        /**
+         * Enable virtual scrolling for large datasets
+         * Requires @angular/cdk to be installed
+         * @default false
+         */
+        this.virtualScroll = false;
+        /**
+         * Height of each row in pixels when virtual scrolling is enabled
+         * @default 48
+         */
+        this.rowHeight = 48;
+        /**
+         * Number of buffer rows to render outside the viewport
+         * Higher values provide smoother scrolling but use more memory
+         * @default 3
+         */
+        this.virtualScrollBufferSize = 3;
+        /**
+         * Column IDs to pin to the left side
+         * These columns will remain visible when scrolling horizontally
+         */
+        this.pinnedLeft = [];
+        /**
+         * Column IDs to pin to the right side
+         * These columns will remain visible when scrolling horizontally
+         */
+        this.pinnedRight = [];
+        /**
+         * Whether to show column pinning UI (icons in headers)
+         * @default false
+         */
+        this.enablePinning = false;
+        /**
+         * Enable column reordering via drag-and-drop on headers
+         * @default false
+         */
+        this.reorderable = false;
+        /**
+         * Whether rows can be expanded
+         * @default false
+         */
+        this.expandable = false;
+        /**
+         * Pre-expanded row IDs
+         */
+        this.expandedRowIds = [];
+        /**
+         * Whether inline editing is enabled
+         * @default false
+         */
+        this.editable = false;
+        /**
+         * Whether export functionality is enabled
+         * @default false
+         */
+        this.exportable = false;
+        /**
+         * Available export formats
+         * @default ['csv']
+         */
+        this.exportFormats = ['csv'];
+        /**
+         * Event emitted when row is clicked
+         */
+        this.rowClick = new EventEmitter();
+        this.rowDblClick = new EventEmitter();
+        /**
+         * Event emitted when selection changes
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Event emitted when sorting changes
+         */
+        this.sortChange = new EventEmitter();
+        /**
+         * Event emitted when pagination changes
+         */
+        this.paginationChange = new EventEmitter();
+        /**
+         * Event emitted when filter changes
+         */
+        this.filterChange = new EventEmitter();
+        /**
+         * Event emitted when row expansion changes
+         */
+        this.expansionChange = new EventEmitter();
+        /**
+         * Event emitted when column pinning changes
+         */
+        this.pinChange = new EventEmitter();
+        /**
+         * Event emitted when a cell is edited
+         */
+        this.cellEditChange = new EventEmitter();
+        /**
+         * Event emitted when column order changes
+         */
+        this.columnOrderChange = new EventEmitter();
+        // Internal state
+        this.dataSignal = signal([]);
+        this.columnsSignal = signal([]);
+        this.globalFilterSignal = signal('');
+        this.sortingSignal = signal([]);
+        this.rowSelectionSignal = signal({});
+        this.columnSizingSignal = signal({});
+        this.rowExpansionSignal = signal({});
+        this.editingCellSignal = signal(null);
+        this.editingValueSignal = signal(null);
+        this.columnOrderSignal = signal([]);
+        this.hasHorizontalScroll = signal(false);
+        this.pageIndex = signal(0);
+        this.pageSizeSignal = signal(10);
+        this.resizeAnimationFrame = null;
+        this.resizeObserver = null;
+        this.scrollElementSignal = signal(null);
+        this._sortable = null;
+        /**
+         * Virtualizer for row rendering
+         */
+        this.virtualizer = injectVirtualizer(() => ({
+            count: this.table ? this.table.getRowModel().rows.length : 0,
+            scrollElement: this.scrollElementSignal() || undefined,
+            estimateSize: () => this.rowHeight,
+            overscan: this.virtualScrollBufferSize,
+        }));
+    }
+    ngOnInit() {
+        this.dataSignal.set(this.data);
+        this.pageSizeSignal.set(this.pageSize);
+        // Initialize expanded rows from input
+        if (this.expandedRowIds.length > 0) {
+            const expansionState = {};
+            this.expandedRowIds.forEach((id) => {
+                expansionState[id] = true;
+            });
+            this.rowExpansionSignal.set(expansionState);
+        }
+        this._convertColumns();
+        this._createTable();
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] && !changes['data'].firstChange) {
+            this.dataSignal.set(this.data);
+        }
+        if (changes['columns'] && !changes['columns'].firstChange) {
+            this._convertColumns();
+            this._createTable();
+        }
+        if (changes['pageSize'] && !changes['pageSize'].firstChange) {
+            this.pageSizeSignal.set(this.pageSize);
+        }
+        if (changes['expandedRowIds'] && !changes['expandedRowIds'].firstChange) {
+            const expansionState = {};
+            this.expandedRowIds.forEach((id) => {
+                expansionState[id] = true;
+            });
+            this.rowExpansionSignal.set(expansionState);
+            if (this.table) {
+                this._createTable();
+            }
+        }
+        if (changes['globalFilter']) {
+            this.onGlobalSearch(this.globalFilter);
+        }
+        if (changes['reorderable']) {
+            this._initSortable();
+        }
+    }
+    /**
+     * Get selected rows
+     */
+    getSelectedRows() {
+        const selectedIds = Object.keys(this.rowSelectionSignal()).filter((id) => this.rowSelectionSignal()[id] === true);
+        return this.data.filter((row, index) => selectedIds.includes(this.rowIdFn(row, index)));
+    }
+    /**
+     * Clear selection
+     */
+    clearSelection() {
+        this.rowSelectionSignal.set({});
+        this._emitSelectionChange();
+    }
+    /**
+     * Select all rows
+     */
+    selectAll() {
+        if (this.selectionMode !== 'multiple') {
+            return;
+        }
+        const selection = {};
+        this.data.forEach((row, index) => {
+            selection[this.rowIdFn(row, index)] = true;
+        });
+        this.rowSelectionSignal.set(selection);
+        this._emitSelectionChange();
+    }
+    /**
+     * Toggle row selection
+     */
+    toggleRowSelection(rowId) {
+        const current = this.rowSelectionSignal();
+        const newSelection = { ...current };
+        if (this.selectionMode === 'single') {
+            // Single selection - clear others
+            Object.keys(newSelection).forEach((id) => {
+                newSelection[id] = false;
+            });
+            newSelection[rowId] = !newSelection[rowId];
+        }
+        else if (this.selectionMode === 'multiple') {
+            newSelection[rowId] = !newSelection[rowId];
+        }
+        this.rowSelectionSignal.set(newSelection);
+        this._emitSelectionChange();
+    }
+    /**
+     * Check if row is selected
+     */
+    isRowSelected(rowId) {
+        return this.rowSelectionSignal()[rowId] === true;
+    }
+    /**
+     * Handle global search
+     */
+    onGlobalSearch(value) {
+        this.globalFilterSignal.set(value);
+        if (this.table) {
+            this.table.setGlobalFilter(value);
+        }
+    }
+    /**
+     * Handle column filter change
+     */
+    onColumnFilterChange(column, value) {
+        column.setFilterValue(value || undefined);
+        this._emitFilterChange();
+    }
+    /**
+     * Get filter placeholder text
+     */
+    getFilterPlaceholder(column) {
+        const header = column.columnDef.header;
+        if (typeof header === 'string') {
+            return `Filter ${header}`;
+        }
+        return 'Filter';
+    }
+    /**
+     * Handle resize start
+     */
+    onResizeStart(event, header) {
+        event.preventDefault();
+        event.stopPropagation();
+        const resizeHandler = header.getResizeHandler();
+        if (resizeHandler && typeof resizeHandler === 'function') {
+            // Run resize handler outside Angular zone for better performance
+            this.ngZone.runOutsideAngular(() => {
+                resizeHandler(event);
+            });
+        }
+    }
+    /**
+     * Track by function for virtual scrolling
+     */
+    trackByRowId(index, row) {
+        return row.id;
+    }
+    /**
+     * Get row index for virtual scrolling
+     */
+    getRowIndex(row) {
+        return this.table.getRowModel().rows.findIndex((r) => r.id === row.id);
+    }
+    /**
+     * Check if a column is pinned to the left
+     */
+    isPinnedLeft(columnId) {
+        return this.pinnedLeft.includes(columnId);
+    }
+    /**
+     * Check if a column is pinned to the right
+     */
+    isPinnedRight(columnId) {
+        return this.pinnedRight.includes(columnId);
+    }
+    /**
+     * Check if a column is in the left half of the visible columns
+     */
+    isColumnOnLeft(columnId) {
+        if (!this.table)
+            return true;
+        const allColumns = this.table.getVisibleLeafColumns();
+        const index = allColumns.findIndex((c) => c.id === columnId);
+        if (index === -1)
+            return true;
+        return index < allColumns.length / 2;
+    }
+    /**
+     * Get the left offset for a pinned column
+     */
+    getPinnedLeftOffset(columnId) {
+        if (!this.isPinnedLeft(columnId))
+            return 0;
+        let offset = 0;
+        if (this.selectionMode !== 'none') {
+            offset += 40; // Selection column width
+        }
+        const pinnedIndex = this.pinnedLeft.indexOf(columnId);
+        for (let i = 0; i < pinnedIndex; i++) {
+            const col = this.table.getColumn(this.pinnedLeft[i]);
+            if (col) {
+                offset += col.getSize();
+            }
+        }
+        return offset;
+    }
+    /**
+     * Get the right offset for a pinned column
+     */
+    getPinnedRightOffset(columnId) {
+        if (!this.isPinnedRight(columnId))
+            return 0;
+        let offset = 0;
+        const pinnedIndex = this.pinnedRight.indexOf(columnId);
+        const totalPinnedRight = this.pinnedRight.length;
+        // Calculate offset from right
+        for (let i = pinnedIndex + 1; i < totalPinnedRight; i++) {
+            const col = this.table.getColumn(this.pinnedRight[i]);
+            if (col) {
+                offset += col.getSize();
+            }
+        }
+        return offset;
+    }
+    /**
+     * Check if a row is expanded
+     */
+    isRowExpanded(rowId) {
+        return this.rowExpansionSignal()[rowId] === true;
+    }
+    /**
+     * Toggle row expansion
+     */
+    toggleRowExpansion(row) {
+        const rowId = row.id;
+        const currentState = this.rowExpansionSignal();
+        const newState = { ...currentState };
+        const isExpanded = currentState[rowId] === true;
+        if (isExpanded) {
+            delete newState[rowId];
+        }
+        else {
+            newState[rowId] = true;
+        }
+        this.rowExpansionSignal.set(newState);
+        this.expansionChange.emit({ rowId, expanded: !isExpanded });
+        // Recreate table to reflect expansion state
+        if (this.table) {
+            this._createTable();
+        }
+    }
+    /**
+     * Check if a cell is currently being edited
+     */
+    isEditing(rowId, columnId) {
+        const editing = this.editingCellSignal();
+        return editing !== null && editing.rowId === rowId && editing.columnId === columnId;
+    }
+    /**
+     * Start editing a cell
+     */
+    startEdit(row, columnId) {
+        if (!this.editable)
+            return;
+        const rowId = row.id;
+        const column = this.table.getColumn(columnId);
+        if (!column)
+            return;
+        // Get current cell value
+        const cell = row.getVisibleCells().find((c) => c.column.id === columnId);
+        if (!cell)
+            return;
+        // Get the original value from the row data
+        const originalValue = this._getCellValue(row.original, columnId);
+        this.editingCellSignal.set({ rowId, columnId });
+        this.editingValueSignal.set(originalValue);
+    }
+    /**
+     * Save the edited cell value
+     */
+    saveEdit(row, columnId) {
+        const editing = this.editingCellSignal();
+        if (!editing || editing.rowId !== row.id || editing.columnId !== columnId) {
+            return;
+        }
+        const newValue = this.editingValueSignal();
+        const oldValue = this._getCellValue(row.original, columnId);
+        // Validate if validator exists
+        const column = this.columns.find((col) => (col.id || String(col.accessorKey)) === columnId);
+        if (column?.editValidator) {
+            const validationResult = column.editValidator(newValue, row.original);
+            if (validationResult !== true) {
+                // Validation failed - don't save
+                this.cancelEdit();
+                return;
+            }
+        }
+        // Update the data
+        this._setCellValue(row.original, columnId, newValue);
+        // Emit edit change event
+        const rowIndex = this.table.getRowModel().rows.findIndex((r) => r.id === row.id);
+        this.cellEditChange.emit({
+            row: row.original,
+            rowIndex,
+            columnId,
+            oldValue,
+            newValue,
+        });
+        // Clear editing state
+        this.editingCellSignal.set(null);
+        this.editingValueSignal.set(null);
+        // Update data signal to trigger change detection
+        this.dataSignal.set([...this.dataSignal()]);
+    }
+    /**
+     * Cancel editing a cell
+     */
+    cancelEdit() {
+        this.editingCellSignal.set(null);
+        this.editingValueSignal.set(null);
+    }
+    /**
+     * Get cell value for editing
+     */
+    getEditingValue() {
+        return this.editingValueSignal();
+    }
+    /**
+     * Update editing value
+     */
+    updateEditingValue(value) {
+        this.editingValueSignal.set(value);
+    }
+    /**
+     * Get cell value from row data
+     */
+    _getCellValue(row, columnId) {
+        const column = this.columns.find((col) => (col.id || String(col.accessorKey)) === columnId);
+        if (!column)
+            return undefined;
+        if (column.accessorFn) {
+            return column.accessorFn(row);
+        }
+        else if (column.accessorKey) {
+            return row[column.accessorKey];
+        }
+        return undefined;
+    }
+    /**
+     * Set cell value in row data
+     */
+    _setCellValue(row, columnId, value) {
+        const column = this.columns.find((col) => (col.id || String(col.accessorKey)) === columnId);
+        if (!column || !column.accessorKey)
+            return;
+        row[column.accessorKey] = value;
+    }
+    /**
+     * Check if a column is editable
+     */
+    getColumnEditable(columnId) {
+        const column = this.columns.find((col) => (col.id || String(col.accessorKey)) === columnId);
+        return column?.editable === true;
+    }
+    /**
+     * Get input type for editable column
+     */
+    getColumnEditType(columnId) {
+        const column = this.columns.find((col) => (col.id || String(col.accessorKey)) === columnId);
+        return column?.editType || 'text';
+    }
+    /**
+     * Export to CSV (Public API)
+     * Allows triggering CSV export programmatically or from custom UI
+     */
+    exportToCsv(options) {
+        const exportOptions = {
+            format: 'csv',
+            filename: 'table-export',
+            selectedOnly: false,
+            currentPageOnly: false,
+            includeHeaders: true,
+            ...options
+        };
+        this.exportData(exportOptions);
+    }
+    /**
+     * Export to Excel (Public API)
+     * Allows triggering Excel export programmatically or from custom UI
+     */
+    exportToExcel(options) {
+        const exportOptions = {
+            format: 'excel',
+            filename: 'table-export',
+            selectedOnly: false,
+            currentPageOnly: false,
+            includeHeaders: true,
+            ...options
+        };
+        this.exportData(exportOptions);
+    }
+    /**
+     * Export to PDF (Public API)
+     * Allows triggering PDF export programmatically or from custom UI
+     */
+    exportToPdf(options) {
+        const exportOptions = {
+            format: 'pdf',
+            filename: 'table-export',
+            selectedOnly: false,
+            currentPageOnly: false,
+            includeHeaders: true,
+            ...options
+        };
+        this.exportData(exportOptions);
+    }
+    /**
+     * Export table data
+     */
+    exportData(options) {
+        if (!this.table)
+            return;
+        let dataToExport = [];
+        const visibleColumns = this.columns.filter((col) => col.visible !== false);
+        // Determine which rows to export
+        if (options.selectedOnly && this.selectionMode !== 'none') {
+            const selectedRows = this.getSelectedRows();
+            dataToExport = selectedRows;
+        }
+        else if (options.currentPageOnly && this.pagination) {
+            dataToExport = this.table.getRowModel().rows.map((row) => row.original);
+        }
+        else {
+            dataToExport = this.dataSignal();
+        }
+        // Export based on format
+        switch (options.format) {
+            case 'csv':
+                this._exportToCSV(dataToExport, visibleColumns, options);
+                break;
+            case 'excel':
+                this._exportToExcel(dataToExport, visibleColumns, options);
+                break;
+            case 'pdf':
+                this._exportToPDF(dataToExport, visibleColumns, options);
+                break;
+        }
+    }
+    /**
+     * Toggle pin state for a column
+     */
+    togglePin(column) {
+        const columnId = column.id;
+        if (this.isPinnedLeft(columnId) || this.isPinnedRight(columnId)) {
+            this.onPinChange(columnId, 'none');
+        }
+        else {
+            // Determine which side to pin based on column position
+            if (this.isColumnOnLeft(columnId)) {
+                if (this.canPinLeft(columnId)) {
+                    this.onPinChange(columnId, 'left');
+                }
+            }
+            else {
+                if (this.canPinRight(columnId)) {
+                    this.onPinChange(columnId, 'right');
+                }
+            }
+        }
+    }
+    /**
+     * Export to CSV
+     */
+    _exportToCSV(data, columns, options) {
+        const rows = [];
+        // Add headers if requested
+        if (options.includeHeaders !== false) {
+            const headers = columns.map((col) => {
+                const header = typeof col.header === 'string' ? col.header : col.id || String(col.accessorKey) || '';
+                return this._escapeCSV(header);
+            });
+            rows.push(headers.join(','));
+        }
+        // Add data rows
+        data.forEach((row) => {
+            const values = columns.map((col) => {
+                let value;
+                if (col.accessorFn) {
+                    value = col.accessorFn(row);
+                }
+                else if (col.accessorKey) {
+                    value = row[col.accessorKey];
+                }
+                // Convert value to string and escape
+                return this._escapeCSV(value != null ? String(value) : '');
+            });
+            rows.push(values.join(','));
+        });
+        // Create CSV content
+        const csvContent = rows.join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        this._downloadFile(blob, options.filename || 'table-export', 'csv');
+    }
+    /**
+     * Export to Excel (XLSX)
+     * Note: Requires xlsx library to be installed
+     */
+    _exportToExcel(data, columns, options) {
+        // Use a dynamic import that Vite won't try to resolve at build time
+        // We use Function constructor to make the import path truly dynamic
+        const importXlsx = new Function('return import("xlsx")');
+        importXlsx()
+            .then((XLSX) => {
+            // Prepare data for Excel export
+            const worksheetData = [];
+            // Add headers if requested
+            if (options.includeHeaders !== false) {
+                const headers = {};
+                columns.forEach((col) => {
+                    const header = typeof col.header === 'string' ? col.header : col.id || String(col.accessorKey) || '';
+                    const key = col.id || String(col.accessorKey) || '';
+                    headers[key] = header;
+                });
+                worksheetData.push(headers);
+            }
+            // Add data rows
+            data.forEach((row) => {
+                const rowData = {};
+                columns.forEach((col) => {
+                    let value;
+                    if (col.accessorFn) {
+                        value = col.accessorFn(row);
+                    }
+                    else if (col.accessorKey) {
+                        value = row[col.accessorKey];
+                    }
+                    const key = col.id || String(col.accessorKey) || '';
+                    rowData[key] = value != null ? value : '';
+                });
+                worksheetData.push(rowData);
+            });
+            // Create worksheet from JSON data
+            const worksheet = XLSX.utils.json_to_sheet(worksheetData, { skipHeader: options.includeHeaders === false });
+            const workbook = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+            // Generate Excel file
+            const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+            const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+            this._downloadFile(blob, options.filename || 'table-export', 'xlsx');
+        })
+            .catch(() => {
+            console.warn('xlsx library is not installed. Please install it: npm install xlsx');
+            // Fallback to CSV
+            this._exportToCSV(data, columns, { ...options, format: 'csv' });
+        });
+    }
+    /**
+     * Export to PDF
+     * Note: Requires jspdf library to be installed
+     */
+    _exportToPDF(data, columns, options) {
+        // Use dynamic imports that Vite won't try to resolve at build time
+        // We use Function constructor to make the import paths truly dynamic
+        const importJspdf = new Function('return import("jspdf")');
+        const importAutotable = new Function('return import("jspdf-autotable")');
+        Promise.all([importJspdf(), importAutotable()])
+            .then(([jsPDF, autoTable]) => {
+            const doc = new jsPDF.default();
+            // Prepare table data
+            const tableData = [];
+            // Add headers if requested
+            if (options.includeHeaders !== false) {
+                const headers = columns.map((col) => {
+                    return typeof col.header === 'string' ? col.header : col.id || String(col.accessorKey) || '';
+                });
+                tableData.push(headers);
+            }
+            // Add data rows
+            data.forEach((row) => {
+                const rowData = columns.map((col) => {
+                    let value;
+                    if (col.accessorFn) {
+                        value = col.accessorFn(row);
+                    }
+                    else if (col.accessorKey) {
+                        value = row[col.accessorKey];
+                    }
+                    return value != null ? String(value) : '';
+                });
+                tableData.push(rowData);
+            });
+            // Generate PDF
+            doc.autoTable({
+                head: options.includeHeaders !== false ? [tableData[0]] : undefined,
+                body: options.includeHeaders !== false ? tableData.slice(1) : tableData,
+            });
+            doc.save(`${options.filename || 'table-export'}.pdf`);
+        })
+            .catch(() => {
+            console.warn('jspdf or jspdf-autotable library is not installed. Please install it: npm install jspdf jspdf-autotable');
+            // Fallback to CSV
+            this._exportToCSV(data, columns, { ...options, format: 'csv' });
+        });
+    }
+    /**
+     * Escape CSV value
+     */
+    _escapeCSV(value) {
+        if (value.includes(',') || value.includes('"') || value.includes('\n')) {
+            return `"${value.replace(/"/g, '""')}"`;
+        }
+        return value;
+    }
+    /**
+     * Download file
+     */
+    _downloadFile(blob, filename, extension) {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${filename}.${extension}`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    /**
+     * Emit filter change event
+     */
+    _emitFilterChange() {
+        if (!this.table)
+            return;
+        const filters = [];
+        this.table.getAllColumns().forEach((col) => {
+            const filterValue = col.getFilterValue();
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+                filters.push({
+                    columnId: col.id,
+                    value: filterValue,
+                });
+            }
+        });
+        this.filterChange.emit(filters);
+    }
+    /**
+     * Check if value is a TemplateRef
+     */
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    /**
+     * Handle page change
+     */
+    onPageChange(page) {
+        this.pageIndex.set(page - 1); // TanStack uses 0-indexed
+        this.table.setPageIndex(page - 1);
+        this._emitPaginationChange();
+    }
+    /**
+     * Handle page size change
+     */
+    onPageSizeChange(size) {
+        if (!this.table) {
+            return;
+        }
+        const newPageSize = size;
+        // Always reset to the first page when page size changes
+        const newPageIndex = 0;
+        // Update signals first
+        this.pageSizeSignal.set(newPageSize);
+        this.pageIndex.set(newPageIndex);
+        // Ensure view is updated
+        this.cdr.markForCheck();
+        // Emit pagination change manually since we're handling it here
+        // Use setTimeout to ensure the table state has been fully updated
+        setTimeout(() => {
+            this._emitPaginationChange();
+        }, 0);
+    }
+    /**
+     * Handle row click
+     */
+    onRowClick(row, index) {
+        this.rowClick.emit({ row: row.original, index });
+    }
+    /**
+     * Handle row double click
+     */
+    onRowDblClick(row, index) {
+        this.rowDblClick.emit({ row: row.original, index });
+    }
+    onPinChange(columnId, position) {
+        this.pinChange.emit({ columnId, position });
+    }
+    ngAfterViewInit() {
+        if (this.tableContainer?.nativeElement) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.ngZone.run(() => {
+                    this.checkScroll();
+                });
+            });
+            this.resizeObserver.observe(this.tableContainer.nativeElement);
+            this.checkScroll();
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    checkScroll() {
+        if (this.tableContainer?.nativeElement) {
+            const el = this.tableContainer.nativeElement;
+            this.hasHorizontalScroll.set(el.scrollWidth > el.clientWidth);
+            this.cdr.markForCheck();
+        }
+    }
+    canPinLeft(columnId) {
+        const def = this.columns.find(c => (c.id || c.accessorKey) === columnId);
+        if (!def)
+            return true;
+        if (def.pinnable === false)
+            return false;
+        if (def.pinnable === 'right')
+            return false;
+        return true;
+    }
+    canPinRight(columnId) {
+        const def = this.columns.find(c => (c.id || c.accessorKey) === columnId);
+        if (!def)
+            return true;
+        if (def.pinnable === false)
+            return false;
+        if (def.pinnable === 'left')
+            return false;
+        return true;
+    }
+    /**
+     * Get total pages
+     */
+    getTotalPages() {
+        if (!this.table) {
+            return 1;
+        }
+        return this.table.getPageCount();
+    }
+    /**
+     * Get current page (1-indexed)
+     */
+    getCurrentPage() {
+        if (!this.table) {
+            return 1;
+        }
+        return this.table.getState().pagination.pageIndex + 1;
+    }
+    /**
+     * Get total items
+     */
+    getTotalItems() {
+        if (this.paginationMode === 'server') {
+            return this.totalItems;
+        }
+        if (!this.table) {
+            return 0;
+        }
+        return this.table.getFilteredRowModel().rows.length;
+    }
+    /**
+     * Get displayed items range
+     */
+    getDisplayedRange() {
+        const pageIndex = this.table.getState().pagination.pageIndex;
+        const pageSize = this.table.getState().pagination.pageSize;
+        const start = pageIndex * pageSize + 1;
+        const end = Math.min(start + pageSize - 1, this.getTotalItems());
+        return { start, end };
+    }
+    /**
+     * Get pagination page numbers to display
+     */
+    getPaginationPages() {
+        const currentPage = this.getCurrentPage();
+        const totalPages = this.getTotalPages();
+        const pages = [];
+        if (totalPages <= 7) {
+            // Show all pages if 7 or fewer
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // Always show first page
+            pages.push(1);
+            if (currentPage <= 4) {
+                // Near the start
+                for (let i = 2; i <= 5; i++) {
+                    pages.push(i);
+                }
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+            else if (currentPage >= totalPages - 3) {
+                // Near the end
+                pages.push('ellipsis');
+                for (let i = totalPages - 4; i <= totalPages; i++) {
+                    pages.push(i);
+                }
+            }
+            else {
+                // In the middle
+                pages.push('ellipsis');
+                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+                    pages.push(i);
+                }
+                pages.push('ellipsis');
+                pages.push(totalPages);
+            }
+        }
+        return pages;
+    }
+    /**
+     * Go to specific page
+     */
+    goToPage(page) {
+        if (page >= 1 && page <= this.getTotalPages()) {
+            this.onPageChange(page);
+        }
+    }
+    /**
+     * Get placeholder width for skeleton loader (Facebook-style)
+     */
+    getPlaceholderWidth(index) {
+        const widths = [60, 80, 70, 90, 75, 85];
+        return widths[index % widths.length];
+    }
+    _convertColumns() {
+        const columnDefs = this.columns.map((col) => {
+            const colId = col.id || String(col.accessorKey || 'col') || (typeof col.header === 'string' ? col.header : 'col');
+            const headerValue = col.headerTemplate || (this.isTemplateRef(col.header) ? col.header : typeof col.header === 'string' ? col.header : String(col.header));
+            const def = {
+                id: colId,
+                header: headerValue,
+                enableSorting: col.sortable ?? false,
+                enableColumnFilter: col.filterable ?? false,
+                size: col.width ? parseInt(col.width) : undefined,
+                minSize: col.minWidth ? parseInt(col.minWidth) : undefined,
+                maxSize: col.maxWidth ? parseInt(col.maxWidth) : undefined,
+                enableResizing: col.resizable ?? false,
+            };
+            // Set accessor - prefer accessorFn over accessorKey
+            if (col.accessorFn) {
+                def.accessorFn = col.accessorFn;
+            }
+            else if (col.accessorKey) {
+                def.accessorKey = col.accessorKey;
+            }
+            // Custom cell renderer - FlexRender handles TemplateRef, Component, or function
+            if (col.cell) {
+                // Return the TemplateRef/Component/function for FlexRender to handle
+                // FlexRender will automatically render TemplateRefs, Components, or execute functions
+                def.cell = () => col.cell;
+            }
+            // Custom filter function
+            if (col.filterFn) {
+                def.filterFn = col.filterFn;
+            }
+            return def;
+        });
+        this.columnsSignal.set(columnDefs);
+        // Initialize column order from column definitions if not set
+        if (this.columnOrderSignal().length === 0) {
+            this.columnOrderSignal.set(columnDefs.map((def) => String(def.id)));
+        }
+    }
+    _createTable() {
+        this.table = createAngularTable(() => ({
+            data: this.dataSignal(),
+            columns: this.columnsSignal(),
+            enableRowSelection: this.selectionMode !== 'none',
+            enableExpanding: this.expandable,
+            getRowId: (row, index) => this.rowIdFn(row, index),
+            state: {
+                sorting: this.sortingSignal(),
+                rowSelection: this.rowSelectionSignal(),
+                globalFilter: this.globalFilterSignal(),
+                columnSizing: this.columnSizingSignal(),
+                expanded: this.rowExpansionSignal(),
+                columnOrder: this.columnOrderSignal(),
+                pagination: {
+                    pageIndex: this.pageIndex(),
+                    pageSize: this.pageSizeSignal(),
+                },
+            },
+            initialState: {
+                pagination: {
+                    pageIndex: 0,
+                    pageSize: this.pageSizeSignal(),
+                },
+            },
+            onSortingChange: (updater) => {
+                const newSorting = typeof updater === 'function' ? updater(this.sortingSignal()) : updater;
+                this.sortingSignal.set(newSorting);
+                if (newSorting.length > 0) {
+                    const sort = newSorting[0];
+                    this.sortChange.emit({
+                        columnId: sort.id,
+                        direction: sort.desc ? 'desc' : 'asc',
+                    });
+                }
+            },
+            onRowSelectionChange: (updater) => {
+                const newSelection = typeof updater === 'function' ? updater(this.rowSelectionSignal()) : updater;
+                this.rowSelectionSignal.set(newSelection);
+                this._emitSelectionChange();
+            },
+            onGlobalFilterChange: (updater) => {
+                const newFilter = typeof updater === 'function' ? updater(this.globalFilterSignal()) : updater;
+                this.globalFilterSignal.set(newFilter);
+            },
+            onColumnSizingChange: (updater) => {
+                // Run outside Angular zone for smoother performance during resize
+                this.ngZone.runOutsideAngular(() => {
+                    const newSizing = typeof updater === 'function' ? updater(this.columnSizingSignal()) : updater;
+                    // Cancel any pending animation frame
+                    if (this.resizeAnimationFrame !== null) {
+                        cancelAnimationFrame(this.resizeAnimationFrame);
+                    }
+                    // Use requestAnimationFrame to batch updates for smoother resizing
+                    this.resizeAnimationFrame = requestAnimationFrame(() => {
+                        this.ngZone.run(() => {
+                            this.columnSizingSignal.set(newSizing);
+                            this.cdr.markForCheck();
+                        });
+                        this.resizeAnimationFrame = null;
+                    });
+                });
+            },
+            onExpandedChange: (updater) => {
+                const currentState = this.rowExpansionSignal();
+                const newExpansion = typeof updater === 'function' ? updater(currentState) : updater;
+                // TanStack Table's ExpandedState can be boolean or Record<string, boolean>
+                // We only support Record<string, boolean> for row-level expansion
+                if (typeof newExpansion === 'object' && newExpansion !== null && !Array.isArray(newExpansion)) {
+                    this.rowExpansionSignal.set(newExpansion);
+                }
+                else if (typeof newExpansion === 'boolean') {
+                    // If it's a boolean, convert to Record format
+                    const expansionState = {};
+                    if (newExpansion) {
+                        // Expand all rows
+                        this.data.forEach((row, index) => {
+                            expansionState[this.rowIdFn(row, index)] = true;
+                        });
+                    }
+                    this.rowExpansionSignal.set(expansionState);
+                }
+            },
+            onPaginationChange: (updater) => {
+                // Skip if we're in the middle of a page size update (handled manually)
+                if (this.table?._isUpdatingPageSize) {
+                    return;
+                }
+                // Get current state from the table instance (not from signals)
+                const currentState = this.table.getState().pagination;
+                const newPagination = typeof updater === 'function' ? updater(currentState) : updater;
+                // Only update if values actually changed to avoid unnecessary updates
+                if (newPagination.pageIndex !== currentState.pageIndex || newPagination.pageSize !== currentState.pageSize) {
+                    // Validate page index is within bounds based on current page count
+                    const totalPages = this.table.getPageCount();
+                    const validPageIndex = Math.min(Math.max(0, newPagination.pageIndex), Math.max(0, totalPages - 1));
+                    this.pageIndex.set(validPageIndex);
+                    this.pageSizeSignal.set(newPagination.pageSize);
+                    this._emitPaginationChange();
+                }
+            },
+            onColumnOrderChange: (updater) => {
+                const currentOrder = this.columnOrderSignal();
+                const newOrder = typeof updater === 'function' ? updater(currentOrder) : updater;
+                const normalizedOrder = (newOrder || []).map((id) => String(id));
+                this.columnOrderSignal.set(normalizedOrder);
+                this.columnOrderChange.emit(normalizedOrder);
+            },
+            getCoreRowModel: getCoreRowModel(),
+            getExpandedRowModel: this.expandable ? getExpandedRowModel() : undefined,
+            getSortedRowModel: this.sortingMode === 'client' ? getSortedRowModel() : undefined,
+            getFilteredRowModel: this.filteringMode === 'client' ? getFilteredRowModel() : undefined,
+            getPaginationRowModel: this.virtualScroll || this.paginationMode === 'server' ? undefined : getPaginationRowModel(), // Disable internal pagination for virtual scroll or server mode
+            enableSorting: this.sorting,
+            enableFiltering: this.filtering,
+            enableGlobalFilter: this.globalSearch,
+            enableColumnResizing: true,
+            manualSorting: this.sortingMode === 'server', // Disable automatic sorting for server mode
+            manualPagination: this.paginationMode === 'server',
+            manualFiltering: this.filteringMode === 'server',
+            rowCount: this.paginationMode === 'server' ? this.totalItems : undefined,
+        }));
+    }
+    _emitSelectionChange() {
+        const selectedRows = this.getSelectedRows();
+        this.selectionChange.emit(selectedRows);
+    }
+    _emitPaginationChange() {
+        this.paginationChange.emit({
+            pageIndex: this.getCurrentPage(),
+            pageSize: this.pageSizeSignal(),
+            total: this.getTotalItems(),
+        });
+    }
+    _initSortable() {
+        if (this._sortable) {
+            this._sortable.destroy();
+            this._sortable = null;
+        }
+        if (this.reorderable && this.headerRowContainer?.nativeElement) {
+            this._sortable = new Sortable(this.headerRowContainer.nativeElement, {
+                animation: 150,
+                onEnd: (evt) => {
+                    const { oldIndex, newIndex } = evt;
+                    if (oldIndex !== newIndex && this.table) {
+                        const visibleColumns = this.table.getVisibleLeafColumns();
+                        const columnIds = visibleColumns.map((c) => c.id);
+                        const [moved] = columnIds.splice(oldIndex, 1);
+                        columnIds.splice(newIndex, 0, moved);
+                        this.table.setColumnOrder(columnIds);
+                    }
+                }
+            });
+        }
+    }
+    /**
+     * Determine if there are any columns that can be filtered
+     */
+    hasFilterableColumns() {
+        if (!this.table) {
+            return false;
+        }
+        return this.table.getAllColumns().some((col) => col.getCanFilter());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TanGrid, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.7", type: TanGrid, isStandalone: true, selector: "tan-grid", inputs: { data: "data", columns: "columns", loading: "loading", striped: "striped", bordered: "bordered", hoverable: "hoverable", compact: "compact", theme: "theme", selectionMode: "selectionMode", selectedRowIds: "selectedRowIds", rowIdFn: "rowIdFn", pagination: "pagination", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", paginationMode: "paginationMode", totalItems: "totalItems", sorting: "sorting", sortingMode: "sortingMode", filtering: "filtering", filteringMode: "filteringMode", globalSearch: "globalSearch", showGlobalSearchInput: "showGlobalSearchInput", globalFilter: "globalFilter", emptyMessage: "emptyMessage", loadingMessage: "loadingMessage", loadingType: "loadingType", placeholderRows: "placeholderRows", virtualScroll: "virtualScroll", rowHeight: "rowHeight", virtualScrollBufferSize: "virtualScrollBufferSize", virtualScrollViewportHeight: "virtualScrollViewportHeight", pinnedLeft: "pinnedLeft", pinnedRight: "pinnedRight", enablePinning: "enablePinning", reorderable: "reorderable", emptyTemplate: "emptyTemplate", loadingTemplate: "loadingTemplate", expandable: "expandable", expandedRowTemplate: "expandedRowTemplate", expandedRowIds: "expandedRowIds", editable: "editable", exportable: "exportable", exportFormats: "exportFormats" }, outputs: { rowClick: "rowClick", rowDblClick: "rowDblClick", selectionChange: "selectionChange", sortChange: "sortChange", paginationChange: "paginationChange", filterChange: "filterChange", expansionChange: "expansionChange", pinChange: "pinChange", cellEditChange: "cellEditChange", columnOrderChange: "columnOrderChange" }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }, { propertyName: "virtualScrollViewport", first: true, predicate: ["virtualScrollViewport"], descendants: true }, { propertyName: "headerRowContainer", first: true, predicate: ["headerRowContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"tan-grid__wrapper\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\">\n\t<!-- Toolbar: Search and Export -->\n\t@if (globalSearch || exportable) {\n\t\t<div class=\"tan-grid__toolbar\">\n\t\t\t@if (globalSearch && showGlobalSearchInput) {\n\t\t\t\t<div class=\"tan-grid__search\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"tan-grid__search-input\"\n\t\t\t\t\t\t[value]=\"globalFilterSignal()\"\n\t\t\t\t\t\t(input)=\"onGlobalSearch($any($event.target).value)\"\n\t\t\t\t\t\tplaceholder=\"Search...\"\n\t\t\t\t\t\taria-label=\"Search table\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (exportable) {\n\t\t\t\t<div class=\"tan-grid__export\">\n\t\t\t\t\t@if (exportFormats.includes('csv')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'csv', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to CSV\"\n\t\t\t\t\t\t\taria-label=\"Export to CSV\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCE5</span>\n\t\t\t\t\t\t\t<span>CSV</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t@if (exportFormats.includes('excel')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'excel', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to Excel\"\n\t\t\t\t\t\t\taria-label=\"Export to Excel\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCCA</span>\n\t\t\t\t\t\t\t<span>Excel</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t@if (exportFormats.includes('pdf')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'pdf', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to PDF\"\n\t\t\t\t\t\t\taria-label=\"Export to PDF\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCC4</span>\n\t\t\t\t\t\t\t<span>PDF</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Table Container -->\n\t<div #tableContainer class=\"tan-grid__container\" [class.tan-grid__container--virtual]=\"virtualScroll\">\n\t\t<!-- Loading Overlay -->\n\t\t@if (loading && loadingType !== 'placeholder') {\n\t\t\t<div class=\"tan-grid__loading-overlay\">\n\t\t\t\t@if (loadingTemplate) {\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"tan-grid__loading-content\">\n\t\t\t\t\t\t<div class=\"tan-grid__spinner\"></div>\n\t\t\t\t\t\t<p>{{ loadingMessage }}</p>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (virtualScroll) {\n\t\t\t\t<!-- Virtual Scrolling Table (using divs) -->\n\t\t\t\t<div class=\"tan-grid tan-grid--virtual\" [class.tan-grid--striped]=\"striped\" [class.tan-grid--bordered]=\"bordered\" [class.tan-grid--hoverable]=\"hoverable\" [class.tan-grid--compact]=\"compact\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\">\n\t\t\t\t\t<!-- Header -->\n\t\t\t\t\t<div class=\"tan-grid__head tan-grid__head--virtual\">\n\t\t\t\t\t\t@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row tan-grid__row--header\"\n\t\t\t\t\t\t\t\t#headerRowContainer\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header tan-grid__header--expand tan-grid__header--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header tan-grid__header--select tan-grid__header--virtual\">\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode === 'multiple') {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"table.getIsAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t[indeterminate]=\"table.getIsSomeRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"table.toggleAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Select all rows\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (header of headerGroup.headers; track header.id) {\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__header tan-grid__header--virtual\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sortable]=\"header.column.getCanSort()\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sorted]=\"header.column.getIsSorted()\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-left]=\"isPinnedLeft(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-right]=\"isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.width]=\"header.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"header.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"header.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(header.column.id) ? getPinnedLeftOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(header.column.id) ? getPinnedRightOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (!header.isPlaceholder) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t<!-- Pin Button -->\n\t\t\t\t\t\t\t\t\t\t\t\t@if (enablePinning && hasHorizontalScroll() && (canPinLeft(header.column.id) || canPinRight(header.column.id))) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pin-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.active]=\"isPinnedLeft(header.column.id) || isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"togglePin(header.column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Toggle Pin\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"22\"></line><path d=\"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z\"></path></svg>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanSort()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"header.column.toggleSorting()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-sort]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() === 'asc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: header.column.getIsSorted() === 'desc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__sort-icons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'asc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'desc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanResize()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__resize-handle\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Resize column\"\n\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Filter Row -->\n\t\t\t\t\t\t@if (filtering && hasFilterableColumns()) {\n\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--filter tan-grid__row--virtual\">\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (header of table.getHeaderGroups()[0].headers; track header.id) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanFilter()) {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__filter-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"header.column.getFilterValue() || ''\"\n\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"onColumnFilterChange(header.column, $any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[placeholder]=\"getFilterPlaceholder(header.column)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Filter column\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- Virtual Scroll Viewport -->\n\t\t\t\t\t@if (loading && loadingType === 'placeholder') {\n\t\t\t\t\t\t<div class=\"tan-grid__body tan-grid__body--virtual\">\n\t\t\t\t\t\t\t@for (row of [].constructor(placeholderRows); track $index) {\n\t\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--placeholder tan-grid__row--virtual\">\n\t\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--select tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-checkbox\"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@for (col of table.getAllColumns(); track col.id; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-cell\" [style.width.%]=\"getPlaceholderWidth(i)\"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if (table.getRowModel().rows.length === 0) {\n\t\t\t\t\t\t<div class=\"tan-grid__body tan-grid__body--virtual\">\n\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--virtual\" [style.width.%]=\"100\">\n\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty tan-grid__empty--virtual\" [style.width.%]=\"100\">\n\t\t\t\t\t\t\t\t\t@if (emptyTemplate) {\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty-content\">\n\t\t\t\t\t\t\t\t\t\t\t<p>{{ emptyMessage }}</p>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#virtualScrollViewport\n\t\t\t\t\t\t\t[style.height.px]=\"virtualScrollViewportHeight || 400\"\n\t\t\t\t\t\t\tclass=\"tan-grid__virtual-viewport\"\n\t\t\t\t\t\t\tstyle=\"overflow-y: auto; contain: strict;\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t[style.height.px]=\"virtualizer.getTotalSize()\"\n\t\t\t\t\t\t\t\tstyle=\"position: relative; width: 100%;\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@for (virtualRow of virtualizer.getVirtualItems(); track virtualRow.index) {\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"table.getRowModel().rows[virtualRow.index] as row\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__row tan-grid__row--virtual\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__row--selected]=\"isRowSelected(row.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__row--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.height.px]=\"virtualRow.size\"\n\t\t\t\t\t\t\t\t\t\t[style.transform]=\"'translateY(' + virtualRow.start + 'px)'\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"position: absolute; top: 0; left: 0; width: 100%;\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRowClick(row, virtualRow.index)\"\n\t\t\t\t\t\t\t\t\t\t(dblclick)=\"onRowDblClick(row, virtualRow.index)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--expand tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__expand-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__expand-button--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"isRowExpanded(row.id) ? 'Collapse row' : 'Expand row'\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--select tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"row.getIsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"row.toggleSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Select row ' + row.id\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@for (cell of row.getVisibleCells(); track cell.id) {\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell tan-grid__cell--virtual\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-left]=\"isPinnedLeft(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-right]=\"isPinnedRight(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editable]=\"editable && getColumnEditable(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editing]=\"isEditing(row.id, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.width]=\"cell.column.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"cell.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"cell.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(cell.column.id) ? getPinnedLeftOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(cell.column.id) ? getPinnedRightOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t(dblclick)=\"editable && getColumnEditable(cell.column.id) && startEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editable && getColumnEditable(cell.column.id) && isEditing(row.id, cell.column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell-edit\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[type]=\"getColumnEditType(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"getEditingValue()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"updateEditingValue($any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"saveEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.escape)=\"cancelEdit(); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(blur)=\"saveEdit(row, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: cell.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet cellValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ cellValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else {\n\t\t\t\t<!-- Regular Table (using table element) -->\n\t\t\t\t<table\n\t\t\t\t\tclass=\"tan-grid\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\"\n\t\t\t\t\t[class.tan-grid--striped]=\"striped\"\n\t\t\t\t\t[class.tan-grid--bordered]=\"bordered\"\n\t\t\t\t\t[class.tan-grid--hoverable]=\"hoverable\"\n\t\t\t\t\t[class.tan-grid--compact]=\"compact\"\n\t\t\t\t>\n\t\t\t\t<thead class=\"tan-grid__head\">\n\t\t\t\t\t\t\t@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row\"\n\t\t\t\t\t\t\t\t#headerRowContainer\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<th class=\"tan-grid__header tan-grid__header--expand\" scope=\"col\"></th>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<th class=\"tan-grid__header tan-grid__header--select\" scope=\"col\">\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode === 'multiple') {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"table.getIsAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t[indeterminate]=\"table.getIsSomeRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"table.toggleAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Select all rows\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@for (header of headerGroup.headers; track header.id) {\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tclass=\"tan-grid__header\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sortable]=\"header.column.getCanSort()\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sorted]=\"header.column.getIsSorted()\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-left]=\"isPinnedLeft(header.column.id)\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-right]=\"isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t[style.width]=\"header.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.min-width]=\"header.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.max-width]=\"header.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(header.column.id) ? getPinnedLeftOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(header.column.id) ? getPinnedRightOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (!header.isPlaceholder) {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header-content\">\n\t\t\t\t\t\t\t\t\t\t\t<!-- Pin Button -->\n\t\t\t\t\t\t\t\t\t\t\t@if (enablePinning && hasHorizontalScroll() && (canPinLeft(header.column.id) || canPinRight(header.column.id))) {\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pin-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.active]=\"isPinnedLeft(header.column.id) || isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"togglePin(header.column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Toggle Pin\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"22\"></line><path d=\"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z\"></path></svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanSort()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"header.column.toggleSorting()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-sort]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() === 'asc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: header.column.getIsSorted() === 'desc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__sort-icons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'asc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'desc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanResize()) {\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__resize-handle\"\n\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, header)\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Resize column\"\n\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Filter Row -->\n\t\t\t\t\t\t@if (filtering && hasFilterableColumns()) {\n\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--filter\">\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@for (header of table.getHeaderGroups()[0].headers; track header.id) {\n\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\">\n\t\t\t\t\t\t\t\t\t@if (header.column.getCanFilter()) {\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__filter-input\"\n\t\t\t\t\t\t\t\t\t\t\t[value]=\"header.column.getFilterValue() || ''\"\n\t\t\t\t\t\t\t\t\t\t\t(input)=\"onColumnFilterChange(header.column, $any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t[placeholder]=\"getFilterPlaceholder(header.column)\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"Filter column\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t}\n\t\t\t\t</thead>\n\t\t\t\t<tbody class=\"tan-grid__body\">\n\t\t\t\t\t@if (loading && loadingType === 'placeholder') {\n\t\t\t\t\t\t@for (row of [].constructor(placeholderRows); track $index) {\n\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--placeholder\">\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--select\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-checkbox\"></div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (col of table.getAllColumns(); track col.id; let i = $index) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-cell\" [style.width.%]=\"getPlaceholderWidth(i)\"></div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else if (table.getRowModel().rows.length === 0) {\n\t\t\t\t\t\t<tr class=\"tan-grid__row\">\n\t\t\t\t\t\t\t<td [attr.colspan]=\"table.getAllColumns().length + (selectionMode !== 'none' ? 1 : 0) + (expandable ? 1 : 0)\" class=\"tan-grid__empty\">\n\t\t\t\t\t\t\t\t@if (emptyTemplate) {\n\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty-content\">\n\t\t\t\t\t\t\t\t\t\t<p>{{ emptyMessage }}</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (row of table.getRowModel().rows; track row.id) {\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row\"\n\t\t\t\t\t\t\t\t[class.tan-grid__row--selected]=\"isRowSelected(row.id)\"\n\t\t\t\t\t\t\t\t[class.tan-grid__row--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t(click)=\"onRowClick(row, $index)\"\n\t\t\t\t\t\t\t\t(dblclick)=\"onRowDblClick(row, $index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--expand\">\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__expand-button\"\n\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__expand-button--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"isRowExpanded(row.id) ? 'Collapse row' : 'Expand row'\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--select\">\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"row.getIsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"row.toggleSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Select row ' + row.id\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (cell of row.getVisibleCells(); track cell.id) {\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-left]=\"isPinnedLeft(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-right]=\"isPinnedRight(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editable]=\"editable && getColumnEditable(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editing]=\"isEditing(row.id, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.width]=\"cell.column.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"cell.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"cell.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(cell.column.id) ? getPinnedLeftOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(cell.column.id) ? getPinnedRightOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t(dblclick)=\"editable && getColumnEditable(cell.column.id) && startEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (editable && getColumnEditable(cell.column.id) && isEditing(row.id, cell.column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell-edit\">\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\t[type]=\"getColumnEditType(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"getEditingValue()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"updateEditingValue($any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"saveEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.escape)=\"cancelEdit(); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(blur)=\"saveEdit(row, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell;\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: cell.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\tlet cellValue\n\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<!-- FlexRender handles strings, TemplateRefs, and Components automatically -->\n\t\t\t\t\t\t\t\t\t\t\t\t{{ cellValue }}\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t@if (expandable && isRowExpanded(row.id) && expandedRowTemplate) {\n\t\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--expanded-content\">\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\t[attr.colspan]=\"table.getAllColumns().length + (selectionMode !== 'none' ? 1 : 0) + (expandable ? 1 : 0)\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell tan-grid__cell--expanded\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t*ngTemplateOutlet=\"expandedRowTemplate; context: { $implicit: row.original, row: row.original }\"\n\t\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t}\n\t\t</div>\n\n\t\t<!-- Pagination -->\n\t\t@if (pagination && !virtualScroll) {\n\t\t\t<div class=\"tan-grid__pagination\">\n\t\t\t\t<div class=\"tan-grid__pagination-info\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ getDisplayedRange().start }} - {{ getDisplayedRange().end }} of {{ getTotalItems() }} Items\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tan-grid__pagination-controls\">\n\t\t\t\t\t@if (table.getPageCount() > 1) {\n\t\t\t\t\t\t<div class=\"tan-grid__pagination-pages\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn\"\n\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--disabled]=\"!table.getCanPreviousPage()\"\n\t\t\t\t\t\t\t\t[disabled]=\"!table.getCanPreviousPage()\"\n\t\t\t\t\t\t\t\t(click)=\"table.previousPage()\"\n\t\t\t\t\t\t\t\taria-label=\"Previous page\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t<path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@for (page of getPaginationPages(); track $index) {\n\t\t\t\t\t\t\t\t@if (page === 'ellipsis') {\n\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__pagination-ellipsis\">...</span>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn tan-grid__pagination-btn--page\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--active]=\"page === getCurrentPage()\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"goToPage(page)\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Go to page ' + page\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-current]=\"page === getCurrentPage() ? 'page' : null\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{{ page }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn\"\n\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--disabled]=\"!table.getCanNextPage()\"\n\t\t\t\t\t\t\t\t[disabled]=\"!table.getCanNextPage()\"\n\t\t\t\t\t\t\t\t(click)=\"table.nextPage()\"\n\t\t\t\t\t\t\t\taria-label=\"Next page\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"tan-grid__pagination-size\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tclass=\"tan-grid__page-size-select\"\n\t\t\t\t\t\t\t[value]=\"pageSizeSignal()\"\n\t\t\t\t\t\t\t(change)=\"onPageSizeChange(+$any($event.target).value)\"\n\t\t\t\t\t\t\taria-label=\"Items per page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (size of pageSizeOptions; track size) {\n\t\t\t\t\t\t\t\t<option [value]=\"size\">{{ size }} / page</option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\n", styles: [":root,[data-ngs-theme=light]{--ngs-primary: #007bff;--ngs-primary-hover: #0056b3;--ngs-primary-active: #004085;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #004085;--ngs-secondary: #6c757d;--ngs-secondary-hover: #5a6268;--ngs-secondary-active: #484f54;--ngs-secondary-light: #e2e3e5;--ngs-secondary-dark: #383d41;--ngs-success: #28a745;--ngs-success-hover: #218838;--ngs-success-active: #1e7e34;--ngs-success-light: #d4edda;--ngs-success-dark: #155724;--ngs-danger: #dc3545;--ngs-danger-hover: #c82333;--ngs-danger-active: #bd2130;--ngs-danger-light: #f8d7da;--ngs-danger-dark: #721c24;--ngs-warning: #ffc107;--ngs-warning-hover: #e0a800;--ngs-warning-active: #d39e00;--ngs-warning-light: #fff3cd;--ngs-warning-dark: #856404;--ngs-info: #17a2b8;--ngs-info-hover: #138496;--ngs-info-active: #117a8b;--ngs-info-light: #d1ecf1;--ngs-info-dark: #0c5460;--ngs-text-primary: #212529;--ngs-text-secondary: #6c757d;--ngs-text-muted: #868e96;--ngs-text-inverse: #ffffff;--ngs-bg-primary: #ffffff;--ngs-bg-secondary: #f8f9fa;--ngs-bg-tertiary: #e9ecef;--ngs-bg-dark: #212529;--ngs-border-color: #dee2e6;--ngs-border-color-light: #e9ecef;--ngs-border-color-dark: #adb5bd;--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-border-radius-xl: 0;--ngs-border-radius-pill: 50rem;--ngs-border-radius-circle: 50%;--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-xs: .75rem;--ngs-font-size-sm: .8125rem;--ngs-font-size-base: .875rem;--ngs-font-size-lg: 1rem;--ngs-font-size-xl: 1.125rem;--ngs-font-size-2xl: 1.25rem;--ngs-font-size-3xl: 1.5rem;--ngs-font-size-4xl: 2rem;--ngs-font-weight-light: 300;--ngs-font-weight-normal: 400;--ngs-font-weight-medium: 500;--ngs-font-weight-semibold: 600;--ngs-font-weight-bold: 700;--ngs-line-height-tight: 1.25;--ngs-line-height-normal: 1.5;--ngs-line-height-relaxed: 1.75;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-transition-base: all .2s ease-in-out;--ngs-transition-fast: all .15s ease-in-out;--ngs-transition-slow: all .3s ease-in-out;--ngs-z-index-dropdown: 1000;--ngs-z-index-sticky: 1020;--ngs-z-index-fixed: 1030;--ngs-z-index-modal-backdrop: 1040;--ngs-z-index-modal: 1050;--ngs-z-index-popover: 1060;--ngs-z-index-tooltip: 1070}[data-ngs-theme=dark]{--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #031633;--ngs-primary-dark: #0a58ca;--ngs-secondary: #6c757d;--ngs-secondary-hover: #5c636a;--ngs-secondary-active: #565e64;--ngs-secondary-light: #41464b;--ngs-secondary-dark: #adb5bd;--ngs-success: #198754;--ngs-success-hover: #157347;--ngs-success-active: #146c43;--ngs-success-light: #0f5132;--ngs-success-dark: #75b798;--ngs-danger: #dc3545;--ngs-danger-hover: #bb2d3b;--ngs-danger-active: #b02a37;--ngs-danger-light: #842029;--ngs-danger-dark: #ea868f;--ngs-warning: #ffc107;--ngs-warning-hover: #ffca2c;--ngs-warning-active: #ffcd39;--ngs-warning-light: #664d03;--ngs-warning-dark: #ffcd39;--ngs-info: #0dcaf0;--ngs-info-hover: #31d2f2;--ngs-info-active: #3dd5f3;--ngs-info-light: #055160;--ngs-info-dark: #6edff6;--ngs-text-primary: #ffffff;--ngs-text-secondary: #adb5bd;--ngs-text-muted: #868e96;--ngs-text-inverse: #212529;--ngs-bg-primary: #212529;--ngs-bg-secondary: #343a40;--ngs-bg-tertiary: #495057;--ngs-bg-dark: #121416;--ngs-border-color: #495057;--ngs-border-color-light: #343a40;--ngs-border-color-dark: #6c757d}.tan-grid__wrapper{display:flex;flex-direction:column;gap:var(--ngs-spacing-md)}.tan-grid__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-spacing-md);margin-bottom:var(--ngs-spacing-md);flex-wrap:wrap}.tan-grid__search{flex:1;min-width:200px}.tan-grid__search-input{width:100%;max-width:300px;padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);font-size:var(--ngs-font-size-base);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__search-input:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__export{display:flex;align-items:center;gap:var(--ngs-spacing-xs);flex-wrap:wrap}.tan-grid__export-btn{display:flex;align-items:center;gap:var(--ngs-spacing-xs);padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);background-color:var(--ngs-bg-primary);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);color:var(--ngs-text-primary);font-size:var(--ngs-font-size-sm);font-weight:var(--ngs-font-weight-medium);cursor:pointer;transition:var(--ngs-transition-base)}.tan-grid__export-btn:hover{background-color:var(--ngs-primary);border-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__export-btn:active{transform:translateY(1px)}.tan-grid__export-btn span:first-child{font-size:var(--ngs-font-size-base)}.tan-grid__container{overflow-x:auto;overflow-y:visible;border-radius:var(--ngs-border-radius);position:relative;min-height:200px}.tan-grid__container--virtual{overflow-y:hidden}.tan-grid{width:100%;border-collapse:collapse;font-size:var(--ngs-font-size-base);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary)}.tan-grid:has(.tan-grid__header--pinned-left),.tan-grid:has(.tan-grid__header--pinned-right){min-width:max-content;width:max-content}.tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:var(--ngs-bg-secondary)}.tan-grid--bordered,.tan-grid--bordered .tan-grid__cell,.tan-grid--bordered .tan-grid__header{border:1px solid var(--ngs-border-color)}.tan-grid--hoverable .tan-grid__body .tan-grid__row{transition:var(--ngs-transition-base)}.tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:var(--ngs-bg-secondary);cursor:pointer}.tan-grid--compact .tan-grid__cell,.tan-grid--compact .tan-grid__header{padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm)}.tan-grid__head{background-color:var(--ngs-bg-secondary);border:none}.tan-grid__head .tan-grid__row{border:none}.tan-grid__header{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);text-align:left;font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);position:relative;white-space:nowrap;overflow:visible}.tan-grid__header--select,.tan-grid__header--expand{width:40px;text-align:center}.tan-grid__header--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tan-grid__header--sortable:hover,.tan-grid__header--sorted{background-color:var(--ngs-bg-tertiary)}.tan-grid__resize-handle{position:absolute;right:-2px;top:0;height:100%;width:5px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:10;background:transparent;will-change:background-color;transition:background-color .15s ease}.tan-grid__resize-handle:hover{background-color:var(--ngs-primary);opacity:.6}.tan-grid__resize-handle:active{background-color:var(--ngs-primary);opacity:1}.tan-grid__header-content{display:flex;align-items:center;gap:var(--ngs-spacing-xs)}.tan-grid__header-text{flex:1}.tan-grid__sort-button{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--ngs-spacing-xs);background:transparent;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}.tan-grid__sort-icons{display:flex;flex-direction:row;gap:0;font-size:var(--ngs-font-size-xs);line-height:1;margin-left:var(--ngs-spacing-xs)}.tan-grid__sort-icon{opacity:.3;transition:var(--ngs-transition-base);display:inline-block;width:10px;text-align:center;line-height:.8}.tan-grid__sort-icon--up{margin-right:-2px}.tan-grid__sort-icon--down{margin-left:-2px}.tan-grid__sort-icon--active{opacity:1;color:var(--ngs-primary);font-weight:var(--ngs-font-weight-bold)}.tan-grid__body .tan-grid__row--selected{background-color:var(--ngs-primary-light)!important}.tan-grid__row--filter,.tan-grid__row--expanded,.tan-grid__row--expanded-content{background-color:var(--ngs-bg-secondary)}.tan-grid__cell{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md)}.tan-grid__cell--filter{padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm);vertical-align:middle}.tan-grid__cell--expand,.tan-grid__cell--select{width:40px;text-align:center;padding:var(--ngs-spacing-sm)}.tan-grid__cell--expanded{padding:var(--ngs-spacing-lg);background-color:var(--ngs-bg-secondary);border-top:2px solid var(--ngs-primary)}.tan-grid__filter-input{width:100%;padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm);font-size:var(--ngs-font-size-sm);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__filter-input:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__filter-input::placeholder{color:var(--ngs-text-secondary);opacity:.6}.tan-grid__empty{padding:var(--ngs-spacing-2xl);text-align:center;color:var(--ngs-text-secondary)}.tan-grid--virtual{display:flex;flex-direction:column;border-collapse:separate;border-spacing:0;width:100%}.tan-grid--virtual:has(.tan-grid__header--pinned-left),.tan-grid--virtual:has(.tan-grid__header--pinned-right){min-width:100%;width:max-content}.tan-grid__head--virtual{display:flex;flex-direction:column;background-color:var(--ngs-bg-secondary);flex-shrink:0}.tan-grid__row--header,.tan-grid__row--virtual{display:flex;width:100%;box-sizing:border-box;flex-shrink:0;flex-grow:0}.tan-grid--virtual:has(.tan-grid__header--pinned-left) .tan-grid__row--header,.tan-grid--virtual:has(.tan-grid__header--pinned-right) .tan-grid__row--header,.tan-grid--virtual:has(.tan-grid__header--pinned-left) .tan-grid__row--virtual,.tan-grid--virtual:has(.tan-grid__header--pinned-right) .tan-grid__row--virtual{min-width:max-content}.tan-grid__header--virtual,.tan-grid__cell--virtual{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.tan-grid__header--virtual{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);text-align:left;font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);position:relative;white-space:nowrap;overflow:visible;border-right:1px solid var(--ngs-border-color);border-bottom:1px solid var(--ngs-border-color)}.tan-grid__header--virtual:last-child{border-right:none}.tan-grid__cell--virtual{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);border-right:1px solid var(--ngs-border-color);border-bottom:1px solid var(--ngs-border-color);box-sizing:border-box;flex-shrink:0;height:100%}.tan-grid__cell--virtual:last-child{border-right:none}.tan-grid__body--virtual{display:flex;flex-direction:column}.tan-grid__virtual-viewport{width:100%;overflow:auto;display:block;position:relative;contain:layout style paint}.tan-grid__virtual-viewport .cdk-virtual-scroll-content-wrapper{display:block;box-sizing:border-box;width:100%}.tan-grid__virtual-viewport .cdk-virtual-scroll-spacer{box-sizing:border-box;display:block;width:1px;pointer-events:none}.tan-grid--striped .tan-grid__row--virtual:nth-child(2n){background-color:var(--ngs-bg-secondary)}.tan-grid--hoverable .tan-grid__row--virtual{transition:var(--ngs-transition-base)}.tan-grid--hoverable .tan-grid__row--virtual:hover{background-color:var(--ngs-bg-secondary);cursor:pointer}.tan-grid__empty--virtual{display:flex;align-items:center;justify-content:center;padding:var(--ngs-spacing-2xl);text-align:center;color:var(--ngs-text-secondary);width:100%}.tan-grid__empty-content p{margin:0;font-size:var(--ngs-font-size-base)}.tan-grid__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffb3;z-index:50;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.tan-grid__loading{display:flex;align-items:center;justify-content:center;min-height:200px;padding:var(--ngs-spacing-2xl)}.tan-grid__loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--ngs-spacing-md)}.tan-grid__loading-content p{margin:0;color:var(--ngs-text-secondary)}.tan-grid__spinner{width:40px;height:40px;border:3px solid var(--ngs-border-color);border-top-color:var(--ngs-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tan-grid__pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-spacing-lg);padding:var(--ngs-spacing-md);border-top:1px solid var(--ngs-border-color);flex-wrap:wrap}@media (max-width: 768px){.tan-grid__pagination{flex-direction:column;align-items:stretch}}.tan-grid__pagination-info{display:flex;align-items:center;font-size:var(--ngs-font-size-sm);color:var(--ngs-text-secondary)}.tan-grid__pagination-controls{display:flex;align-items:center;gap:var(--ngs-spacing-lg)}.tan-grid__pagination-pages{display:flex;align-items:center;gap:var(--ngs-spacing-xs)}.tan-grid__pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--ngs-spacing-sm);font-size:var(--ngs-font-size-sm);line-height:1;border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);cursor:pointer;transition:var(--ngs-transition-base);-webkit-user-select:none;user-select:none;font-weight:var(--ngs-font-weight-normal)}.tan-grid__pagination-btn:hover:not(:disabled):not(.tan-grid__pagination-btn--active){border-color:var(--ngs-primary);color:var(--ngs-primary);background-color:var(--ngs-bg-secondary)}.tan-grid__pagination-btn:active:not(:disabled){transform:scale(.98)}.tan-grid__pagination-btn:disabled,.tan-grid__pagination-btn--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;background-color:var(--ngs-bg-secondary)}.tan-grid__pagination-btn--page{font-weight:var(--ngs-font-weight-normal)}.tan-grid__pagination-btn--active{border-color:var(--ngs-primary);background-color:var(--ngs-primary);color:var(--ngs-text-inverse);font-weight:var(--ngs-font-weight-medium);cursor:default;box-shadow:0 1px 2px #0000001a}.tan-grid__pagination-btn--active:hover{border-color:var(--ngs-primary);background-color:var(--ngs-primary-hover);color:var(--ngs-text-inverse)}.tan-grid__pagination-btn svg{width:16px;height:16px}.tan-grid__pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--ngs-spacing-xs);color:var(--ngs-text-secondary);font-size:var(--ngs-font-size-sm);-webkit-user-select:none;user-select:none}.tan-grid__pagination-size{display:flex;align-items:center}.tan-grid__page-size-select{padding:var(--ngs-spacing-xs) var(--ngs-spacing-md);padding-right:calc(var(--ngs-spacing-md) + 20px);font-size:var(--ngs-font-size-sm);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);cursor:pointer;transition:var(--ngs-transition-base);appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--ngs-spacing-sm) center;background-size:12px;height:32px}.tan-grid__page-size-select:hover{border-color:var(--ngs-primary)}.tan-grid__page-size-select:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__row--placeholder .tan-grid__cell{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md)}.tan-grid__placeholder-cell,.tan-grid__placeholder-checkbox{height:14px;background:linear-gradient(90deg,#f0f0f0 0% 40%,#e0e0e0 50%,#f0f0f0 60% 100%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:0;position:relative;overflow:hidden}.tan-grid__placeholder-checkbox{width:16px;height:16px;margin:0 auto;border-radius:0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tan-grid__header--pinned-left,.tan-grid__cell--pinned-left{position:sticky;left:0;z-index:10;background-color:var(--ngs-bg-primary)}.tan-grid__header--pinned-left:after,.tan-grid__cell--pinned-left:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background-color:var(--ngs-border-color);box-shadow:2px 0 4px #0000001a}.tan-grid__header--pinned-left{background-color:var(--ngs-bg-secondary);z-index:11}.tan-grid__header--pinned-right,.tan-grid__cell--pinned-right{position:sticky;right:0;z-index:10;background-color:var(--ngs-bg-primary)}.tan-grid__header--pinned-right:before,.tan-grid__cell--pinned-right:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--ngs-border-color);box-shadow:-2px 0 4px #0000001a}.tan-grid__header--pinned-right{background-color:var(--ngs-bg-secondary);z-index:11}.tan-grid--striped .tan-grid__row:nth-child(2n) .tan-grid__cell--pinned-left,.tan-grid--striped .tan-grid__row:nth-child(2n) .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid--striped .tan-grid__row--virtual:nth-child(2n) .tan-grid__cell--pinned-left,.tan-grid--striped .tan-grid__row--virtual:nth-child(2n) .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid--hoverable .tan-grid__row:hover .tan-grid__cell--pinned-left,.tan-grid--hoverable .tan-grid__row:hover .tan-grid__cell--pinned-right,.tan-grid--hoverable .tan-grid__row--virtual:hover .tan-grid__cell--pinned-left,.tan-grid--hoverable .tan-grid__row--virtual:hover .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid__cell--editable{cursor:pointer;position:relative}.tan-grid__cell--editable:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__cell--editing{background-color:var(--ngs-primary-light);padding:0}.tan-grid__cell-edit{width:100%;height:100%;display:flex;align-items:center}.tan-grid__cell-input{width:100%;padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);border:2px solid var(--ngs-primary);border-radius:var(--ngs-border-radius-sm);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);font-size:var(--ngs-font-size-base);font-family:inherit;outline:none;box-sizing:border-box}.tan-grid__cell-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__cell-input::placeholder{color:var(--ngs-text-secondary);opacity:.6}.tan-grid__expand-button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);cursor:pointer;color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__expand-button svg{transition:transform .2s ease}.tan-grid__expand-button:hover{background-color:var(--ngs-bg-secondary);border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__expand-button:focus{outline:none;box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__expand-button--expanded{background-color:var(--ngs-primary);border-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__expand-button--expanded svg{transform:rotate(90deg)}.tan-grid__expand-button--expanded:hover{background-color:var(--ngs-primary-dark);border-color:var(--ngs-primary-dark)}.tan-grid__wrapper.tan-grid--theme-material{--ngs-border-radius: .25rem;--ngs-border-radius-sm: .125rem;--ngs-border-radius-lg: .375rem;--ngs-primary: #6200ee;--ngs-primary-hover: #3700b3;--ngs-primary-active: #000000;--ngs-primary-light: #e0d4f7;--ngs-primary-dark: #3700b3;--ngs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--ngs-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--ngs-shadow-lg: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--ngs-spacing-xs: .25rem;--ngs-spacing-sm: .5rem;--ngs-spacing-md: .75rem;--ngs-spacing-lg: 1rem;--ngs-spacing-xl: 1.5rem;--ngs-spacing-2xl: 2rem;--ngs-spacing-3xl: 3rem;--ngs-font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--ngs-font-size-base: .875rem;--ngs-font-weight-medium: 500;box-shadow:var(--ngs-shadow-sm);border-radius:var(--ngs-border-radius);overflow:hidden;background-color:var(--ngs-bg-primary)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid{border:none;border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered{border:none}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered .tan-grid__header{border:none;border-bottom:1px solid var(--ngs-border-color-light)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#00000005}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__head{background-color:var(--ngs-bg-primary);box-shadow:0 2px 4px #00000014}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000de;letter-spacing:.01785714em}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header--sortable:hover{background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header--sorted{background-color:#6200ee14;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000de}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-material .tan-grid__filter-input{border-radius:var(--ngs-border-radius);border:1px solid var(--ngs-border-color);transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-material .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #6200ee33}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__export-btn{border-radius:var(--ngs-border-radius);text-transform:uppercase;font-weight:var(--ngs-font-weight-medium);letter-spacing:.0892857143em;transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__export-btn:hover{box-shadow:var(--ngs-shadow-sm)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn{border-radius:50%;min-width:40px;height:40px;transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn:hover:not(.tan-grid__pagination-btn--active){background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__checkbox{border-radius:2px}.tan-grid.tan-grid--theme-material{--ngs-border-radius: .25rem;--ngs-border-radius-sm: .125rem;--ngs-border-radius-lg: .375rem;--ngs-primary: #6200ee;--ngs-primary-hover: #3700b3;--ngs-primary-active: #000000;--ngs-primary-light: #e0d4f7;--ngs-primary-dark: #3700b3;--ngs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--ngs-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--ngs-shadow-lg: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--ngs-spacing-xs: .25rem;--ngs-spacing-sm: .5rem;--ngs-spacing-md: .75rem;--ngs-spacing-lg: 1rem;--ngs-spacing-xl: 1.5rem;--ngs-spacing-2xl: 2rem;--ngs-spacing-3xl: 3rem;--ngs-font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--ngs-font-size-base: .875rem;--ngs-font-weight-medium: 500;border:none;border-radius:var(--ngs-border-radius)}.tan-grid.tan-grid--theme-material--bordered{border:none}.tan-grid.tan-grid--theme-material--bordered .tan-grid__cell,.tan-grid.tan-grid--theme-material--bordered .tan-grid__header{border:none;border-bottom:1px solid var(--ngs-border-color-light)}.tan-grid__wrapper.tan-grid--theme-bootstrap{--ngs-border-radius: .375rem;--ngs-border-radius-sm: .25rem;--ngs-border-radius-lg: .5rem;--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #084298;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-base: 1rem}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid{border-collapse:separate;border-spacing:0}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered{border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered .tan-grid__header{border:1px solid var(--ngs-border-color)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#0000000d}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#00000013}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__head{background-color:var(--ngs-bg-secondary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);vertical-align:bottom}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header--sortable:hover{background-color:var(--ngs-bg-tertiary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header--sorted{background-color:var(--ngs-primary-light);color:var(--ngs-primary-dark)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:var(--ngs-text-primary);vertical-align:top}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__filter-input{border-radius:var(--ngs-border-radius);border:1px solid var(--ngs-border-color);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__filter-input:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem #0d6efd40}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn{border-radius:var(--ngs-border-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn:hover{background-color:var(--ngs-primary-hover)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn:active{background-color:var(--ngs-primary-active)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn{border-radius:var(--ngs-border-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__checkbox{border-radius:var(--ngs-border-radius-sm)}.tan-grid.tan-grid--theme-bootstrap{--ngs-border-radius: .375rem;--ngs-border-radius-sm: .25rem;--ngs-border-radius-lg: .5rem;--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #084298;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-base: 1rem;border-collapse:separate;border-spacing:0}.tan-grid.tan-grid--theme-bootstrap--bordered{border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-ant{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid{border:1px solid #f0f0f0;border-radius:0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered .tan-grid__header{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#f5f5f5}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__head{background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000d9;background-color:#fafafa;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header--sortable:hover{background-color:#e6f7ff}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header--sorted{background-color:#e6f7ff;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000d9;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__row:last-child .tan-grid__cell{border-bottom:none}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input:hover,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input:hover{border-color:#40a9ff}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #1890ff33}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn:active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease;min-width:32px;height:32px}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__checkbox{border-radius:0}.tan-grid.tan-grid--theme-ant{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem;border:1px solid #f0f0f0;border-radius:0}.tan-grid.tan-grid--theme-ant--bordered{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid{border:1px solid #f0f0f0;border-radius:0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered .tan-grid__header{border:none;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#f5f5f5}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__head{background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000d9;background-color:#fafafa;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header--sortable:hover{background-color:#e6f7ff}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header--sorted{background-color:#e6f7ff;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000d9;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__row:last-child .tan-grid__cell{border-bottom:none}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input:hover,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input:hover{border-color:#40a9ff}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #1890ff33}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn:active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease;min-width:32px;height:32px}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__checkbox{border-radius:0}.tan-grid.tan-grid--theme-ant-alt{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem;border:1px solid #f0f0f0;border-radius:0}.tan-grid.tan-grid--theme-ant-alt--bordered{border:1px solid #f0f0f0}.tan-grid.tan-grid--theme-ant-alt--bordered .tan-grid__cell,.tan-grid.tan-grid--theme-ant-alt--bordered .tan-grid__header{border:none;border-bottom:1px solid #f0f0f0}.tan-grid__pin-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:.25rem;margin-right:.25rem;border-radius:4px;color:var(--ngs-text-secondary);transition:var(--ngs-transition-base)}.tan-grid__pin-btn:hover{background-color:var(--ngs-bg-secondary);color:var(--ngs-text-primary)}.tan-grid__pin-btn.active{color:var(--ngs-primary);background-color:var(--ngs-primary-light)}.tan-grid__menu{background-color:var(--ngs-bg-primary);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem;display:flex;flex-direction:column;min-width:150px;z-index:1000}.tan-grid__menu-item{display:flex;align-items:center;width:100%;padding:.5rem .75rem;font-size:var(--ngs-font-size-sm);color:var(--ngs-text-primary);background:transparent;border:none;cursor:pointer;text-align:left;border-radius:var(--ngs-border-radius)}.tan-grid__menu-item:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__menu-icon{width:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--ngs-primary);font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TanGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'tan-grid', standalone: true, imports: [CommonModule, FormsModule, FlexRenderDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"tan-grid__wrapper\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\">\n\t<!-- Toolbar: Search and Export -->\n\t@if (globalSearch || exportable) {\n\t\t<div class=\"tan-grid__toolbar\">\n\t\t\t@if (globalSearch && showGlobalSearchInput) {\n\t\t\t\t<div class=\"tan-grid__search\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"tan-grid__search-input\"\n\t\t\t\t\t\t[value]=\"globalFilterSignal()\"\n\t\t\t\t\t\t(input)=\"onGlobalSearch($any($event.target).value)\"\n\t\t\t\t\t\tplaceholder=\"Search...\"\n\t\t\t\t\t\taria-label=\"Search table\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t@if (exportable) {\n\t\t\t\t<div class=\"tan-grid__export\">\n\t\t\t\t\t@if (exportFormats.includes('csv')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'csv', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to CSV\"\n\t\t\t\t\t\t\taria-label=\"Export to CSV\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCE5</span>\n\t\t\t\t\t\t\t<span>CSV</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t@if (exportFormats.includes('excel')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'excel', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to Excel\"\n\t\t\t\t\t\t\taria-label=\"Export to Excel\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCCA</span>\n\t\t\t\t\t\t\t<span>Excel</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t\t@if (exportFormats.includes('pdf')) {\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"tan-grid__export-btn\"\n\t\t\t\t\t\t\t(click)=\"exportData({ format: 'pdf', filename: 'table-export' })\"\n\t\t\t\t\t\t\ttitle=\"Export to PDF\"\n\t\t\t\t\t\t\taria-label=\"Export to PDF\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\uD83D\uDCC4</span>\n\t\t\t\t\t\t\t<span>PDF</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t}\n\n\t<!-- Table Container -->\n\t<div #tableContainer class=\"tan-grid__container\" [class.tan-grid__container--virtual]=\"virtualScroll\">\n\t\t<!-- Loading Overlay -->\n\t\t@if (loading && loadingType !== 'placeholder') {\n\t\t\t<div class=\"tan-grid__loading-overlay\">\n\t\t\t\t@if (loadingTemplate) {\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n\t\t\t\t} @else {\n\t\t\t\t\t<div class=\"tan-grid__loading-content\">\n\t\t\t\t\t\t<div class=\"tan-grid__spinner\"></div>\n\t\t\t\t\t\t<p>{{ loadingMessage }}</p>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\n\t\t@if (virtualScroll) {\n\t\t\t\t<!-- Virtual Scrolling Table (using divs) -->\n\t\t\t\t<div class=\"tan-grid tan-grid--virtual\" [class.tan-grid--striped]=\"striped\" [class.tan-grid--bordered]=\"bordered\" [class.tan-grid--hoverable]=\"hoverable\" [class.tan-grid--compact]=\"compact\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\">\n\t\t\t\t\t<!-- Header -->\n\t\t\t\t\t<div class=\"tan-grid__head tan-grid__head--virtual\">\n\t\t\t\t\t\t@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row tan-grid__row--header\"\n\t\t\t\t\t\t\t\t#headerRowContainer\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header tan-grid__header--expand tan-grid__header--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header tan-grid__header--select tan-grid__header--virtual\">\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode === 'multiple') {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"table.getIsAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t[indeterminate]=\"table.getIsSomeRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"table.toggleAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Select all rows\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (header of headerGroup.headers; track header.id) {\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__header tan-grid__header--virtual\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sortable]=\"header.column.getCanSort()\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sorted]=\"header.column.getIsSorted()\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-left]=\"isPinnedLeft(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-right]=\"isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.width]=\"header.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"header.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"header.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(header.column.id) ? getPinnedLeftOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(header.column.id) ? getPinnedRightOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (!header.isPlaceholder) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header-content\">\n\t\t\t\t\t\t\t\t\t\t\t\t<!-- Pin Button -->\n\t\t\t\t\t\t\t\t\t\t\t\t@if (enablePinning && hasHorizontalScroll() && (canPinLeft(header.column.id) || canPinRight(header.column.id))) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pin-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.active]=\"isPinnedLeft(header.column.id) || isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"togglePin(header.column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Toggle Pin\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"22\"></line><path d=\"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z\"></path></svg>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanSort()) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"header.column.toggleSorting()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-sort]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() === 'asc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: header.column.getIsSorted() === 'desc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__sort-icons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'asc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'desc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanResize()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__resize-handle\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, header)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Resize column\"\n\t\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Filter Row -->\n\t\t\t\t\t\t@if (filtering && hasFilterableColumns()) {\n\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--filter tan-grid__row--virtual\">\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\"></div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (header of table.getHeaderGroups()[0].headers; track header.id) {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--filter tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanFilter()) {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__filter-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"header.column.getFilterValue() || ''\"\n\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"onColumnFilterChange(header.column, $any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[placeholder]=\"getFilterPlaceholder(header.column)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Filter column\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- Virtual Scroll Viewport -->\n\t\t\t\t\t@if (loading && loadingType === 'placeholder') {\n\t\t\t\t\t\t<div class=\"tan-grid__body tan-grid__body--virtual\">\n\t\t\t\t\t\t\t@for (row of [].constructor(placeholderRows); track $index) {\n\t\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--placeholder tan-grid__row--virtual\">\n\t\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--select tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-checkbox\"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t@for (col of table.getAllColumns(); track col.id; let i = $index) {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-cell\" [style.width.%]=\"getPlaceholderWidth(i)\"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else if (table.getRowModel().rows.length === 0) {\n\t\t\t\t\t\t<div class=\"tan-grid__body tan-grid__body--virtual\">\n\t\t\t\t\t\t\t<div class=\"tan-grid__row tan-grid__row--virtual\" [style.width.%]=\"100\">\n\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty tan-grid__empty--virtual\" [style.width.%]=\"100\">\n\t\t\t\t\t\t\t\t\t@if (emptyTemplate) {\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty-content\">\n\t\t\t\t\t\t\t\t\t\t\t<p>{{ emptyMessage }}</p>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t#virtualScrollViewport\n\t\t\t\t\t\t\t[style.height.px]=\"virtualScrollViewportHeight || 400\"\n\t\t\t\t\t\t\tclass=\"tan-grid__virtual-viewport\"\n\t\t\t\t\t\t\tstyle=\"overflow-y: auto; contain: strict;\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t[style.height.px]=\"virtualizer.getTotalSize()\"\n\t\t\t\t\t\t\t\tstyle=\"position: relative; width: 100%;\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@for (virtualRow of virtualizer.getVirtualItems(); track virtualRow.index) {\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t*ngIf=\"table.getRowModel().rows[virtualRow.index] as row\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__row tan-grid__row--virtual\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__row--selected]=\"isRowSelected(row.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__row--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.height.px]=\"virtualRow.size\"\n\t\t\t\t\t\t\t\t\t\t[style.transform]=\"'translateY(' + virtualRow.start + 'px)'\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"position: absolute; top: 0; left: 0; width: 100%;\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"onRowClick(row, virtualRow.index)\"\n\t\t\t\t\t\t\t\t\t\t(dblclick)=\"onRowDblClick(row, virtualRow.index)\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--expand tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__expand-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__expand-button--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"isRowExpanded(row.id) ? 'Collapse row' : 'Expand row'\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell tan-grid__cell--select tan-grid__cell--virtual\">\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"row.getIsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"row.toggleSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Select row ' + row.id\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t@for (cell of row.getVisibleCells(); track cell.id) {\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell tan-grid__cell--virtual\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-left]=\"isPinnedLeft(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-right]=\"isPinnedRight(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editable]=\"editable && getColumnEditable(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editing]=\"isEditing(row.id, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.width]=\"cell.column.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"cell.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"cell.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(cell.column.id) ? getPinnedLeftOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(cell.column.id) ? getPinnedRightOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t\t\t(dblclick)=\"editable && getColumnEditable(cell.column.id) && startEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t@if (editable && getColumnEditable(cell.column.id) && isEditing(row.id, cell.column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell-edit\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[type]=\"getColumnEditType(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"getEditingValue()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"updateEditingValue($any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"saveEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.escape)=\"cancelEdit(); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(blur)=\"saveEdit(row, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: cell.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet cellValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ cellValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t} @else {\n\t\t\t\t<!-- Regular Table (using table element) -->\n\t\t\t\t<table\n\t\t\t\t\tclass=\"tan-grid\" [class.tan-grid--theme-material]=\"theme === 'material'\" [class.tan-grid--theme-bootstrap]=\"theme === 'bootstrap'\" [class.tan-grid--theme-ant]=\"theme === 'ant'\" [class.tan-grid--theme-ant-alt]=\"theme === 'ant-alt'\"\n\t\t\t\t\t[class.tan-grid--striped]=\"striped\"\n\t\t\t\t\t[class.tan-grid--bordered]=\"bordered\"\n\t\t\t\t\t[class.tan-grid--hoverable]=\"hoverable\"\n\t\t\t\t\t[class.tan-grid--compact]=\"compact\"\n\t\t\t\t>\n\t\t\t\t<thead class=\"tan-grid__head\">\n\t\t\t\t\t\t\t@for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row\"\n\t\t\t\t\t\t\t\t#headerRowContainer\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<th class=\"tan-grid__header tan-grid__header--expand\" scope=\"col\"></th>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<th class=\"tan-grid__header tan-grid__header--select\" scope=\"col\">\n\t\t\t\t\t\t\t\t\t\t@if (selectionMode === 'multiple') {\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t[checked]=\"table.getIsAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t[indeterminate]=\"table.getIsSomeRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\t(change)=\"table.toggleAllRowsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-label=\"Select all rows\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@for (header of headerGroup.headers; track header.id) {\n\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\tclass=\"tan-grid__header\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sortable]=\"header.column.getCanSort()\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--sorted]=\"header.column.getIsSorted()\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-left]=\"isPinnedLeft(header.column.id)\"\n\t\t\t\t\t\t\t\t\t[class.tan-grid__header--pinned-right]=\"isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t[style.width]=\"header.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.min-width]=\"header.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.max-width]=\"header.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(header.column.id) ? getPinnedLeftOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(header.column.id) ? getPinnedRightOffset(header.column.id) : null\"\n\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (!header.isPlaceholder) {\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__header-content\">\n\t\t\t\t\t\t\t\t\t\t\t<!-- Pin Button -->\n\t\t\t\t\t\t\t\t\t\t\t@if (enablePinning && hasHorizontalScroll() && (canPinLeft(header.column.id) || canPinRight(header.column.id))) {\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pin-btn\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[class.active]=\"isPinnedLeft(header.column.id) || isPinnedRight(header.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"togglePin(header.column); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Toggle Pin\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"22\"></line><path d=\"M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z\"></path></svg>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanSort()) {\n\t\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"header.column.toggleSorting()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[attr.aria-sort]=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() === 'asc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ascending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: header.column.getIsSorted() === 'desc'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'descending'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'none'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__sort-icons\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--up\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'asc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2191\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__sort-icon tan-grid__sort-icon--down\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__sort-icon--active]=\"header.column.getIsSorted() === 'desc'\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\u2193\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__header-text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops: header.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlet headerValue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ headerValue }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t@if (header.column.getCanResize()) {\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__resize-handle\"\n\t\t\t\t\t\t\t\t\t\t\t\t(mousedown)=\"onResizeStart($event, header)\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Resize column\"\n\t\t\t\t\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t}\n\t\t\t\t\t\t<!-- Filter Row -->\n\t\t\t\t\t\t@if (filtering && hasFilterableColumns()) {\n\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--filter\">\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\"></td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t@for (header of table.getHeaderGroups()[0].headers; track header.id) {\n\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--filter\">\n\t\t\t\t\t\t\t\t\t@if (header.column.getCanFilter()) {\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__filter-input\"\n\t\t\t\t\t\t\t\t\t\t\t[value]=\"header.column.getFilterValue() || ''\"\n\t\t\t\t\t\t\t\t\t\t\t(input)=\"onColumnFilterChange(header.column, $any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t[placeholder]=\"getFilterPlaceholder(header.column)\"\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"Filter column\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t}\n\t\t\t\t</thead>\n\t\t\t\t<tbody class=\"tan-grid__body\">\n\t\t\t\t\t@if (loading && loadingType === 'placeholder') {\n\t\t\t\t\t\t@for (row of [].constructor(placeholderRows); track $index) {\n\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--placeholder\">\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--select\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-checkbox\"></div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (col of table.getAllColumns(); track col.id; let i = $index) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__placeholder-cell\" [style.width.%]=\"getPlaceholderWidth(i)\"></div>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t}\n\t\t\t\t\t} @else if (table.getRowModel().rows.length === 0) {\n\t\t\t\t\t\t<tr class=\"tan-grid__row\">\n\t\t\t\t\t\t\t<td [attr.colspan]=\"table.getAllColumns().length + (selectionMode !== 'none' ? 1 : 0) + (expandable ? 1 : 0)\" class=\"tan-grid__empty\">\n\t\t\t\t\t\t\t\t@if (emptyTemplate) {\n\t\t\t\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__empty-content\">\n\t\t\t\t\t\t\t\t\t\t<p>{{ emptyMessage }}</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t@for (row of table.getRowModel().rows; track row.id) {\n\t\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\t\tclass=\"tan-grid__row\"\n\t\t\t\t\t\t\t\t[class.tan-grid__row--selected]=\"isRowSelected(row.id)\"\n\t\t\t\t\t\t\t\t[class.tan-grid__row--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t(click)=\"onRowClick(row, $index)\"\n\t\t\t\t\t\t\t\t(dblclick)=\"onRowDblClick(row, $index)\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t@if (expandable) {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--expand\">\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__expand-button\"\n\t\t\t\t\t\t\t\t\t\t\t[class.tan-grid__expand-button--expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"toggleRowExpansion(row); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-expanded]=\"isRowExpanded(row.id)\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"isRowExpanded(row.id) ? 'Collapse row' : 'Expand row'\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@if (selectionMode !== 'none') {\n\t\t\t\t\t\t\t\t\t<td class=\"tan-grid__cell tan-grid__cell--select\">\n\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t[checked]=\"row.getIsSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t(change)=\"row.toggleSelected()\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Select row ' + row.id\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t@for (cell of row.getVisibleCells(); track cell.id) {\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-left]=\"isPinnedLeft(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--pinned-right]=\"isPinnedRight(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editable]=\"editable && getColumnEditable(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__cell--editing]=\"isEditing(row.id, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t[style.width]=\"cell.column.getSize() + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.min-width]=\"cell.column.columnDef.minSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.max-width]=\"cell.column.columnDef.maxSize + 'px'\"\n\t\t\t\t\t\t\t\t\t\t[style.left.px]=\"isPinnedLeft(cell.column.id) ? getPinnedLeftOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t[style.right.px]=\"isPinnedRight(cell.column.id) ? getPinnedRightOffset(cell.column.id) : null\"\n\t\t\t\t\t\t\t\t\t\t(dblclick)=\"editable && getColumnEditable(cell.column.id) && startEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t@if (editable && getColumnEditable(cell.column.id) && isEditing(row.id, cell.column.id)) {\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"tan-grid__cell-edit\">\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\t[type]=\"getColumnEditType(cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell-input\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[value]=\"getEditingValue()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(input)=\"updateEditingValue($any($event.target).value)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"saveEdit(row, cell.column.id); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(keydown.escape)=\"cancelEdit(); $event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(blur)=\"saveEdit(row, cell.column.id)\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"$event.stopPropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t\t*flexRender=\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell;\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops: cell.getContext();\n\t\t\t\t\t\t\t\t\t\t\t\t\tlet cellValue\n\t\t\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<!-- FlexRender handles strings, TemplateRefs, and Components automatically -->\n\t\t\t\t\t\t\t\t\t\t\t\t{{ cellValue }}\n\t\t\t\t\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t@if (expandable && isRowExpanded(row.id) && expandedRowTemplate) {\n\t\t\t\t\t\t\t\t<tr class=\"tan-grid__row tan-grid__row--expanded-content\">\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\t[attr.colspan]=\"table.getAllColumns().length + (selectionMode !== 'none' ? 1 : 0) + (expandable ? 1 : 0)\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__cell tan-grid__cell--expanded\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t\t\t\t\t*ngTemplateOutlet=\"expandedRowTemplate; context: { $implicit: row.original, row: row.original }\"\n\t\t\t\t\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t}\n\t\t</div>\n\n\t\t<!-- Pagination -->\n\t\t@if (pagination && !virtualScroll) {\n\t\t\t<div class=\"tan-grid__pagination\">\n\t\t\t\t<div class=\"tan-grid__pagination-info\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ getDisplayedRange().start }} - {{ getDisplayedRange().end }} of {{ getTotalItems() }} Items\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"tan-grid__pagination-controls\">\n\t\t\t\t\t@if (table.getPageCount() > 1) {\n\t\t\t\t\t\t<div class=\"tan-grid__pagination-pages\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn\"\n\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--disabled]=\"!table.getCanPreviousPage()\"\n\t\t\t\t\t\t\t\t[disabled]=\"!table.getCanPreviousPage()\"\n\t\t\t\t\t\t\t\t(click)=\"table.previousPage()\"\n\t\t\t\t\t\t\t\taria-label=\"Previous page\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t<path d=\"M10 12L6 8L10 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t@for (page of getPaginationPages(); track $index) {\n\t\t\t\t\t\t\t\t@if (page === 'ellipsis') {\n\t\t\t\t\t\t\t\t\t<span class=\"tan-grid__pagination-ellipsis\">...</span>\n\t\t\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn tan-grid__pagination-btn--page\"\n\t\t\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--active]=\"page === getCurrentPage()\"\n\t\t\t\t\t\t\t\t\t\t(click)=\"goToPage(page)\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-label]=\"'Go to page ' + page\"\n\t\t\t\t\t\t\t\t\t\t[attr.aria-current]=\"page === getCurrentPage() ? 'page' : null\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{{ page }}\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"tan-grid__pagination-btn\"\n\t\t\t\t\t\t\t\t[class.tan-grid__pagination-btn--disabled]=\"!table.getCanNextPage()\"\n\t\t\t\t\t\t\t\t[disabled]=\"!table.getCanNextPage()\"\n\t\t\t\t\t\t\t\t(click)=\"table.nextPage()\"\n\t\t\t\t\t\t\t\taria-label=\"Next page\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t\t<path d=\"M6 4L10 8L6 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"tan-grid__pagination-size\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tclass=\"tan-grid__page-size-select\"\n\t\t\t\t\t\t\t[value]=\"pageSizeSignal()\"\n\t\t\t\t\t\t\t(change)=\"onPageSizeChange(+$any($event.target).value)\"\n\t\t\t\t\t\t\taria-label=\"Items per page\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t@for (size of pageSizeOptions; track size) {\n\t\t\t\t\t\t\t\t<option [value]=\"size\">{{ size }} / page</option>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t</div>\n\n\n", styles: [":root,[data-ngs-theme=light]{--ngs-primary: #007bff;--ngs-primary-hover: #0056b3;--ngs-primary-active: #004085;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #004085;--ngs-secondary: #6c757d;--ngs-secondary-hover: #5a6268;--ngs-secondary-active: #484f54;--ngs-secondary-light: #e2e3e5;--ngs-secondary-dark: #383d41;--ngs-success: #28a745;--ngs-success-hover: #218838;--ngs-success-active: #1e7e34;--ngs-success-light: #d4edda;--ngs-success-dark: #155724;--ngs-danger: #dc3545;--ngs-danger-hover: #c82333;--ngs-danger-active: #bd2130;--ngs-danger-light: #f8d7da;--ngs-danger-dark: #721c24;--ngs-warning: #ffc107;--ngs-warning-hover: #e0a800;--ngs-warning-active: #d39e00;--ngs-warning-light: #fff3cd;--ngs-warning-dark: #856404;--ngs-info: #17a2b8;--ngs-info-hover: #138496;--ngs-info-active: #117a8b;--ngs-info-light: #d1ecf1;--ngs-info-dark: #0c5460;--ngs-text-primary: #212529;--ngs-text-secondary: #6c757d;--ngs-text-muted: #868e96;--ngs-text-inverse: #ffffff;--ngs-bg-primary: #ffffff;--ngs-bg-secondary: #f8f9fa;--ngs-bg-tertiary: #e9ecef;--ngs-bg-dark: #212529;--ngs-border-color: #dee2e6;--ngs-border-color-light: #e9ecef;--ngs-border-color-dark: #adb5bd;--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-border-radius-xl: 0;--ngs-border-radius-pill: 50rem;--ngs-border-radius-circle: 50%;--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-xs: .75rem;--ngs-font-size-sm: .8125rem;--ngs-font-size-base: .875rem;--ngs-font-size-lg: 1rem;--ngs-font-size-xl: 1.125rem;--ngs-font-size-2xl: 1.25rem;--ngs-font-size-3xl: 1.5rem;--ngs-font-size-4xl: 2rem;--ngs-font-weight-light: 300;--ngs-font-weight-normal: 400;--ngs-font-weight-medium: 500;--ngs-font-weight-semibold: 600;--ngs-font-weight-bold: 700;--ngs-line-height-tight: 1.25;--ngs-line-height-normal: 1.5;--ngs-line-height-relaxed: 1.75;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-transition-base: all .2s ease-in-out;--ngs-transition-fast: all .15s ease-in-out;--ngs-transition-slow: all .3s ease-in-out;--ngs-z-index-dropdown: 1000;--ngs-z-index-sticky: 1020;--ngs-z-index-fixed: 1030;--ngs-z-index-modal-backdrop: 1040;--ngs-z-index-modal: 1050;--ngs-z-index-popover: 1060;--ngs-z-index-tooltip: 1070}[data-ngs-theme=dark]{--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #031633;--ngs-primary-dark: #0a58ca;--ngs-secondary: #6c757d;--ngs-secondary-hover: #5c636a;--ngs-secondary-active: #565e64;--ngs-secondary-light: #41464b;--ngs-secondary-dark: #adb5bd;--ngs-success: #198754;--ngs-success-hover: #157347;--ngs-success-active: #146c43;--ngs-success-light: #0f5132;--ngs-success-dark: #75b798;--ngs-danger: #dc3545;--ngs-danger-hover: #bb2d3b;--ngs-danger-active: #b02a37;--ngs-danger-light: #842029;--ngs-danger-dark: #ea868f;--ngs-warning: #ffc107;--ngs-warning-hover: #ffca2c;--ngs-warning-active: #ffcd39;--ngs-warning-light: #664d03;--ngs-warning-dark: #ffcd39;--ngs-info: #0dcaf0;--ngs-info-hover: #31d2f2;--ngs-info-active: #3dd5f3;--ngs-info-light: #055160;--ngs-info-dark: #6edff6;--ngs-text-primary: #ffffff;--ngs-text-secondary: #adb5bd;--ngs-text-muted: #868e96;--ngs-text-inverse: #212529;--ngs-bg-primary: #212529;--ngs-bg-secondary: #343a40;--ngs-bg-tertiary: #495057;--ngs-bg-dark: #121416;--ngs-border-color: #495057;--ngs-border-color-light: #343a40;--ngs-border-color-dark: #6c757d}.tan-grid__wrapper{display:flex;flex-direction:column;gap:var(--ngs-spacing-md)}.tan-grid__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-spacing-md);margin-bottom:var(--ngs-spacing-md);flex-wrap:wrap}.tan-grid__search{flex:1;min-width:200px}.tan-grid__search-input{width:100%;max-width:300px;padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);font-size:var(--ngs-font-size-base);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__search-input:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__export{display:flex;align-items:center;gap:var(--ngs-spacing-xs);flex-wrap:wrap}.tan-grid__export-btn{display:flex;align-items:center;gap:var(--ngs-spacing-xs);padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);background-color:var(--ngs-bg-primary);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);color:var(--ngs-text-primary);font-size:var(--ngs-font-size-sm);font-weight:var(--ngs-font-weight-medium);cursor:pointer;transition:var(--ngs-transition-base)}.tan-grid__export-btn:hover{background-color:var(--ngs-primary);border-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__export-btn:active{transform:translateY(1px)}.tan-grid__export-btn span:first-child{font-size:var(--ngs-font-size-base)}.tan-grid__container{overflow-x:auto;overflow-y:visible;border-radius:var(--ngs-border-radius);position:relative;min-height:200px}.tan-grid__container--virtual{overflow-y:hidden}.tan-grid{width:100%;border-collapse:collapse;font-size:var(--ngs-font-size-base);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary)}.tan-grid:has(.tan-grid__header--pinned-left),.tan-grid:has(.tan-grid__header--pinned-right){min-width:max-content;width:max-content}.tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:var(--ngs-bg-secondary)}.tan-grid--bordered,.tan-grid--bordered .tan-grid__cell,.tan-grid--bordered .tan-grid__header{border:1px solid var(--ngs-border-color)}.tan-grid--hoverable .tan-grid__body .tan-grid__row{transition:var(--ngs-transition-base)}.tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:var(--ngs-bg-secondary);cursor:pointer}.tan-grid--compact .tan-grid__cell,.tan-grid--compact .tan-grid__header{padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm)}.tan-grid__head{background-color:var(--ngs-bg-secondary);border:none}.tan-grid__head .tan-grid__row{border:none}.tan-grid__header{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);text-align:left;font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);position:relative;white-space:nowrap;overflow:visible}.tan-grid__header--select,.tan-grid__header--expand{width:40px;text-align:center}.tan-grid__header--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.tan-grid__header--sortable:hover,.tan-grid__header--sorted{background-color:var(--ngs-bg-tertiary)}.tan-grid__resize-handle{position:absolute;right:-2px;top:0;height:100%;width:5px;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;z-index:10;background:transparent;will-change:background-color;transition:background-color .15s ease}.tan-grid__resize-handle:hover{background-color:var(--ngs-primary);opacity:.6}.tan-grid__resize-handle:active{background-color:var(--ngs-primary);opacity:1}.tan-grid__header-content{display:flex;align-items:center;gap:var(--ngs-spacing-xs)}.tan-grid__header-text{flex:1}.tan-grid__sort-button{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--ngs-spacing-xs);background:transparent;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}.tan-grid__sort-icons{display:flex;flex-direction:row;gap:0;font-size:var(--ngs-font-size-xs);line-height:1;margin-left:var(--ngs-spacing-xs)}.tan-grid__sort-icon{opacity:.3;transition:var(--ngs-transition-base);display:inline-block;width:10px;text-align:center;line-height:.8}.tan-grid__sort-icon--up{margin-right:-2px}.tan-grid__sort-icon--down{margin-left:-2px}.tan-grid__sort-icon--active{opacity:1;color:var(--ngs-primary);font-weight:var(--ngs-font-weight-bold)}.tan-grid__body .tan-grid__row--selected{background-color:var(--ngs-primary-light)!important}.tan-grid__row--filter,.tan-grid__row--expanded,.tan-grid__row--expanded-content{background-color:var(--ngs-bg-secondary)}.tan-grid__cell{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md)}.tan-grid__cell--filter{padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm);vertical-align:middle}.tan-grid__cell--expand,.tan-grid__cell--select{width:40px;text-align:center;padding:var(--ngs-spacing-sm)}.tan-grid__cell--expanded{padding:var(--ngs-spacing-lg);background-color:var(--ngs-bg-secondary);border-top:2px solid var(--ngs-primary)}.tan-grid__filter-input{width:100%;padding:var(--ngs-spacing-xs) var(--ngs-spacing-sm);font-size:var(--ngs-font-size-sm);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__filter-input:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__filter-input::placeholder{color:var(--ngs-text-secondary);opacity:.6}.tan-grid__empty{padding:var(--ngs-spacing-2xl);text-align:center;color:var(--ngs-text-secondary)}.tan-grid--virtual{display:flex;flex-direction:column;border-collapse:separate;border-spacing:0;width:100%}.tan-grid--virtual:has(.tan-grid__header--pinned-left),.tan-grid--virtual:has(.tan-grid__header--pinned-right){min-width:100%;width:max-content}.tan-grid__head--virtual{display:flex;flex-direction:column;background-color:var(--ngs-bg-secondary);flex-shrink:0}.tan-grid__row--header,.tan-grid__row--virtual{display:flex;width:100%;box-sizing:border-box;flex-shrink:0;flex-grow:0}.tan-grid--virtual:has(.tan-grid__header--pinned-left) .tan-grid__row--header,.tan-grid--virtual:has(.tan-grid__header--pinned-right) .tan-grid__row--header,.tan-grid--virtual:has(.tan-grid__header--pinned-left) .tan-grid__row--virtual,.tan-grid--virtual:has(.tan-grid__header--pinned-right) .tan-grid__row--virtual{min-width:max-content}.tan-grid__header--virtual,.tan-grid__cell--virtual{display:flex;align-items:center;flex-shrink:0;box-sizing:border-box}.tan-grid__header--virtual{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);text-align:left;font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);position:relative;white-space:nowrap;overflow:visible;border-right:1px solid var(--ngs-border-color);border-bottom:1px solid var(--ngs-border-color)}.tan-grid__header--virtual:last-child{border-right:none}.tan-grid__cell--virtual{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);border-right:1px solid var(--ngs-border-color);border-bottom:1px solid var(--ngs-border-color);box-sizing:border-box;flex-shrink:0;height:100%}.tan-grid__cell--virtual:last-child{border-right:none}.tan-grid__body--virtual{display:flex;flex-direction:column}.tan-grid__virtual-viewport{width:100%;overflow:auto;display:block;position:relative;contain:layout style paint}.tan-grid__virtual-viewport .cdk-virtual-scroll-content-wrapper{display:block;box-sizing:border-box;width:100%}.tan-grid__virtual-viewport .cdk-virtual-scroll-spacer{box-sizing:border-box;display:block;width:1px;pointer-events:none}.tan-grid--striped .tan-grid__row--virtual:nth-child(2n){background-color:var(--ngs-bg-secondary)}.tan-grid--hoverable .tan-grid__row--virtual{transition:var(--ngs-transition-base)}.tan-grid--hoverable .tan-grid__row--virtual:hover{background-color:var(--ngs-bg-secondary);cursor:pointer}.tan-grid__empty--virtual{display:flex;align-items:center;justify-content:center;padding:var(--ngs-spacing-2xl);text-align:center;color:var(--ngs-text-secondary);width:100%}.tan-grid__empty-content p{margin:0;font-size:var(--ngs-font-size-base)}.tan-grid__loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffb3;z-index:50;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.tan-grid__loading{display:flex;align-items:center;justify-content:center;min-height:200px;padding:var(--ngs-spacing-2xl)}.tan-grid__loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--ngs-spacing-md)}.tan-grid__loading-content p{margin:0;color:var(--ngs-text-secondary)}.tan-grid__spinner{width:40px;height:40px;border:3px solid var(--ngs-border-color);border-top-color:var(--ngs-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tan-grid__pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--ngs-spacing-lg);padding:var(--ngs-spacing-md);border-top:1px solid var(--ngs-border-color);flex-wrap:wrap}@media (max-width: 768px){.tan-grid__pagination{flex-direction:column;align-items:stretch}}.tan-grid__pagination-info{display:flex;align-items:center;font-size:var(--ngs-font-size-sm);color:var(--ngs-text-secondary)}.tan-grid__pagination-controls{display:flex;align-items:center;gap:var(--ngs-spacing-lg)}.tan-grid__pagination-pages{display:flex;align-items:center;gap:var(--ngs-spacing-xs)}.tan-grid__pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--ngs-spacing-sm);font-size:var(--ngs-font-size-sm);line-height:1;border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);cursor:pointer;transition:var(--ngs-transition-base);-webkit-user-select:none;user-select:none;font-weight:var(--ngs-font-weight-normal)}.tan-grid__pagination-btn:hover:not(:disabled):not(.tan-grid__pagination-btn--active){border-color:var(--ngs-primary);color:var(--ngs-primary);background-color:var(--ngs-bg-secondary)}.tan-grid__pagination-btn:active:not(:disabled){transform:scale(.98)}.tan-grid__pagination-btn:disabled,.tan-grid__pagination-btn--disabled{opacity:.4;cursor:not-allowed;pointer-events:none;background-color:var(--ngs-bg-secondary)}.tan-grid__pagination-btn--page{font-weight:var(--ngs-font-weight-normal)}.tan-grid__pagination-btn--active{border-color:var(--ngs-primary);background-color:var(--ngs-primary);color:var(--ngs-text-inverse);font-weight:var(--ngs-font-weight-medium);cursor:default;box-shadow:0 1px 2px #0000001a}.tan-grid__pagination-btn--active:hover{border-color:var(--ngs-primary);background-color:var(--ngs-primary-hover);color:var(--ngs-text-inverse)}.tan-grid__pagination-btn svg{width:16px;height:16px}.tan-grid__pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--ngs-spacing-xs);color:var(--ngs-text-secondary);font-size:var(--ngs-font-size-sm);-webkit-user-select:none;user-select:none}.tan-grid__pagination-size{display:flex;align-items:center}.tan-grid__page-size-select{padding:var(--ngs-spacing-xs) var(--ngs-spacing-md);padding-right:calc(var(--ngs-spacing-md) + 20px);font-size:var(--ngs-font-size-sm);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);cursor:pointer;transition:var(--ngs-transition-base);appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right var(--ngs-spacing-sm) center;background-size:12px;height:32px}.tan-grid__page-size-select:hover{border-color:var(--ngs-primary)}.tan-grid__page-size-select:focus{outline:none;border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__row--placeholder .tan-grid__cell{padding:var(--ngs-spacing-sm) var(--ngs-spacing-md)}.tan-grid__placeholder-cell,.tan-grid__placeholder-checkbox{height:14px;background:linear-gradient(90deg,#f0f0f0 0% 40%,#e0e0e0 50%,#f0f0f0 60% 100%);background-size:200% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:0;position:relative;overflow:hidden}.tan-grid__placeholder-checkbox{width:16px;height:16px;margin:0 auto;border-radius:0}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tan-grid__header--pinned-left,.tan-grid__cell--pinned-left{position:sticky;left:0;z-index:10;background-color:var(--ngs-bg-primary)}.tan-grid__header--pinned-left:after,.tan-grid__cell--pinned-left:after{content:\"\";position:absolute;right:0;top:0;bottom:0;width:1px;background-color:var(--ngs-border-color);box-shadow:2px 0 4px #0000001a}.tan-grid__header--pinned-left{background-color:var(--ngs-bg-secondary);z-index:11}.tan-grid__header--pinned-right,.tan-grid__cell--pinned-right{position:sticky;right:0;z-index:10;background-color:var(--ngs-bg-primary)}.tan-grid__header--pinned-right:before,.tan-grid__cell--pinned-right:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--ngs-border-color);box-shadow:-2px 0 4px #0000001a}.tan-grid__header--pinned-right{background-color:var(--ngs-bg-secondary);z-index:11}.tan-grid--striped .tan-grid__row:nth-child(2n) .tan-grid__cell--pinned-left,.tan-grid--striped .tan-grid__row:nth-child(2n) .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid--striped .tan-grid__row--virtual:nth-child(2n) .tan-grid__cell--pinned-left,.tan-grid--striped .tan-grid__row--virtual:nth-child(2n) .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid--hoverable .tan-grid__row:hover .tan-grid__cell--pinned-left,.tan-grid--hoverable .tan-grid__row:hover .tan-grid__cell--pinned-right,.tan-grid--hoverable .tan-grid__row--virtual:hover .tan-grid__cell--pinned-left,.tan-grid--hoverable .tan-grid__row--virtual:hover .tan-grid__cell--pinned-right{background-color:var(--ngs-bg-secondary)}.tan-grid__cell--editable{cursor:pointer;position:relative}.tan-grid__cell--editable:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__cell--editing{background-color:var(--ngs-primary-light);padding:0}.tan-grid__cell-edit{width:100%;height:100%;display:flex;align-items:center}.tan-grid__cell-input{width:100%;padding:var(--ngs-spacing-sm) var(--ngs-spacing-md);border:2px solid var(--ngs-primary);border-radius:var(--ngs-border-radius-sm);background-color:var(--ngs-bg-primary);color:var(--ngs-text-primary);font-size:var(--ngs-font-size-base);font-family:inherit;outline:none;box-sizing:border-box}.tan-grid__cell-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__cell-input::placeholder{color:var(--ngs-text-secondary);opacity:.6}.tan-grid__expand-button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);cursor:pointer;color:var(--ngs-text-primary);transition:var(--ngs-transition-base)}.tan-grid__expand-button svg{transition:transform .2s ease}.tan-grid__expand-button:hover{background-color:var(--ngs-bg-secondary);border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__expand-button:focus{outline:none;box-shadow:0 0 0 2px var(--ngs-primary-light)}.tan-grid__expand-button--expanded{background-color:var(--ngs-primary);border-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__expand-button--expanded svg{transform:rotate(90deg)}.tan-grid__expand-button--expanded:hover{background-color:var(--ngs-primary-dark);border-color:var(--ngs-primary-dark)}.tan-grid__wrapper.tan-grid--theme-material{--ngs-border-radius: .25rem;--ngs-border-radius-sm: .125rem;--ngs-border-radius-lg: .375rem;--ngs-primary: #6200ee;--ngs-primary-hover: #3700b3;--ngs-primary-active: #000000;--ngs-primary-light: #e0d4f7;--ngs-primary-dark: #3700b3;--ngs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--ngs-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--ngs-shadow-lg: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--ngs-spacing-xs: .25rem;--ngs-spacing-sm: .5rem;--ngs-spacing-md: .75rem;--ngs-spacing-lg: 1rem;--ngs-spacing-xl: 1.5rem;--ngs-spacing-2xl: 2rem;--ngs-spacing-3xl: 3rem;--ngs-font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--ngs-font-size-base: .875rem;--ngs-font-weight-medium: 500;box-shadow:var(--ngs-shadow-sm);border-radius:var(--ngs-border-radius);overflow:hidden;background-color:var(--ngs-bg-primary)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid{border:none;border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered{border:none}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-material .tan-grid--bordered .tan-grid__header{border:none;border-bottom:1px solid var(--ngs-border-color-light)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#00000005}.tan-grid__wrapper.tan-grid--theme-material .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__head{background-color:var(--ngs-bg-primary);box-shadow:0 2px 4px #00000014}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000de;letter-spacing:.01785714em}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header--sortable:hover{background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__header--sorted{background-color:#6200ee14;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000de}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-material .tan-grid__filter-input{border-radius:var(--ngs-border-radius);border:1px solid var(--ngs-border-color);transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-material .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #6200ee33}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__export-btn{border-radius:var(--ngs-border-radius);text-transform:uppercase;font-weight:var(--ngs-font-weight-medium);letter-spacing:.0892857143em;transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__export-btn:hover{box-shadow:var(--ngs-shadow-sm)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn{border-radius:50%;min-width:40px;height:40px;transition:all .2s ease-in-out}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn:hover:not(.tan-grid__pagination-btn--active){background-color:#0000000a}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-material .tan-grid__checkbox{border-radius:2px}.tan-grid.tan-grid--theme-material{--ngs-border-radius: .25rem;--ngs-border-radius-sm: .125rem;--ngs-border-radius-lg: .375rem;--ngs-primary: #6200ee;--ngs-primary-hover: #3700b3;--ngs-primary-active: #000000;--ngs-primary-light: #e0d4f7;--ngs-primary-dark: #3700b3;--ngs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--ngs-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--ngs-shadow-lg: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--ngs-spacing-xs: .25rem;--ngs-spacing-sm: .5rem;--ngs-spacing-md: .75rem;--ngs-spacing-lg: 1rem;--ngs-spacing-xl: 1.5rem;--ngs-spacing-2xl: 2rem;--ngs-spacing-3xl: 3rem;--ngs-font-family: \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--ngs-font-size-base: .875rem;--ngs-font-weight-medium: 500;border:none;border-radius:var(--ngs-border-radius)}.tan-grid.tan-grid--theme-material--bordered{border:none}.tan-grid.tan-grid--theme-material--bordered .tan-grid__cell,.tan-grid.tan-grid--theme-material--bordered .tan-grid__header{border:none;border-bottom:1px solid var(--ngs-border-color-light)}.tan-grid__wrapper.tan-grid--theme-bootstrap{--ngs-border-radius: .375rem;--ngs-border-radius-sm: .25rem;--ngs-border-radius-lg: .5rem;--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #084298;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-base: 1rem}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid{border-collapse:separate;border-spacing:0}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered{border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--bordered .tan-grid__header{border:1px solid var(--ngs-border-color)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#0000000d}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#00000013}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__head{background-color:var(--ngs-bg-secondary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-semibold);color:var(--ngs-text-primary);vertical-align:bottom}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header--sortable:hover{background-color:var(--ngs-bg-tertiary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__header--sorted{background-color:var(--ngs-primary-light);color:var(--ngs-primary-dark)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:var(--ngs-text-primary);vertical-align:top}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__filter-input{border-radius:var(--ngs-border-radius);border:1px solid var(--ngs-border-color);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__filter-input:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem #0d6efd40}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn{border-radius:var(--ngs-border-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn:hover{background-color:var(--ngs-primary-hover)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__export-btn:active{background-color:var(--ngs-primary-active)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn{border-radius:var(--ngs-border-radius);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-bootstrap .tan-grid__checkbox{border-radius:var(--ngs-border-radius-sm)}.tan-grid.tan-grid--theme-bootstrap{--ngs-border-radius: .375rem;--ngs-border-radius-sm: .25rem;--ngs-border-radius-lg: .5rem;--ngs-primary: #0d6efd;--ngs-primary-hover: #0b5ed7;--ngs-primary-active: #0a58ca;--ngs-primary-light: #cfe2ff;--ngs-primary-dark: #084298;--ngs-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);--ngs-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--ngs-font-size-base: 1rem;border-collapse:separate;border-spacing:0}.tan-grid.tan-grid--theme-bootstrap--bordered{border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius)}.tan-grid__wrapper.tan-grid--theme-ant{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid{border:1px solid #f0f0f0;border-radius:0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--bordered .tan-grid__header{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#f5f5f5}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__head{background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000d9;background-color:#fafafa;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header--sortable:hover{background-color:#e6f7ff}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__header--sorted{background-color:#e6f7ff;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000d9;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__row:last-child .tan-grid__cell{border-bottom:none}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input:hover,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input:hover{border-color:#40a9ff}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #1890ff33}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__export-btn:active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease;min-width:32px;height:32px}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant .tan-grid__checkbox{border-radius:0}.tan-grid.tan-grid--theme-ant{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem;border:1px solid #f0f0f0;border-radius:0}.tan-grid.tan-grid--theme-ant--bordered{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid{border:1px solid #f0f0f0;border-radius:0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered{border:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered .tan-grid__cell,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--bordered .tan-grid__header{border:none;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--striped .tan-grid__body .tan-grid__row:nth-child(2n){background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid--hoverable .tan-grid__body .tan-grid__row:hover{background-color:#f5f5f5}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__head{background-color:#fafafa}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);font-weight:var(--ngs-font-weight-medium);color:#000000d9;background-color:#fafafa;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header--sortable:hover{background-color:#e6f7ff}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__header--sorted{background-color:#e6f7ff;color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__cell{padding:var(--ngs-spacing-md) var(--ngs-spacing-lg);color:#000000d9;border-bottom:1px solid #f0f0f0}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__row:last-child .tan-grid__cell{border-bottom:none}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input:hover,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input:hover{border-color:#40a9ff}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__search-input:focus,.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__filter-input:focus{border-color:var(--ngs-primary);box-shadow:0 0 0 2px #1890ff33}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__export-btn:active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn{border-radius:0;border:1px solid #d9d9d9;transition:all .3s ease;min-width:32px;height:32px}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn:hover{border-color:var(--ngs-primary);color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__pagination-btn--active{background-color:var(--ngs-primary);color:var(--ngs-text-inverse);border-color:var(--ngs-primary)}.tan-grid__wrapper.tan-grid--theme-ant-alt .tan-grid__checkbox{border-radius:0}.tan-grid.tan-grid--theme-ant-alt{--ngs-border-radius: 0;--ngs-border-radius-sm: 0;--ngs-border-radius-lg: 0;--ngs-primary: #1890ff;--ngs-primary-hover: #40a9ff;--ngs-primary-active: #096dd9;--ngs-primary-light: #e6f7ff;--ngs-primary-dark: #0050b3;--ngs-shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow: 0 2px 8px rgba(0, 0, 0, .15);--ngs-shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);--ngs-spacing-xs: .125rem;--ngs-spacing-sm: .25rem;--ngs-spacing-md: .5rem;--ngs-spacing-lg: .75rem;--ngs-spacing-xl: 1rem;--ngs-spacing-2xl: 1.5rem;--ngs-spacing-3xl: 2rem;--ngs-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;--ngs-font-size-base: .875rem;border:1px solid #f0f0f0;border-radius:0}.tan-grid.tan-grid--theme-ant-alt--bordered{border:1px solid #f0f0f0}.tan-grid.tan-grid--theme-ant-alt--bordered .tan-grid__cell,.tan-grid.tan-grid--theme-ant-alt--bordered .tan-grid__header{border:none;border-bottom:1px solid #f0f0f0}.tan-grid__pin-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:.25rem;margin-right:.25rem;border-radius:4px;color:var(--ngs-text-secondary);transition:var(--ngs-transition-base)}.tan-grid__pin-btn:hover{background-color:var(--ngs-bg-secondary);color:var(--ngs-text-primary)}.tan-grid__pin-btn.active{color:var(--ngs-primary);background-color:var(--ngs-primary-light)}.tan-grid__menu{background-color:var(--ngs-bg-primary);border:1px solid var(--ngs-border-color);border-radius:var(--ngs-border-radius);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:.25rem;display:flex;flex-direction:column;min-width:150px;z-index:1000}.tan-grid__menu-item{display:flex;align-items:center;width:100%;padding:.5rem .75rem;font-size:var(--ngs-font-size-sm);color:var(--ngs-text-primary);background:transparent;border:none;cursor:pointer;text-align:left;border-radius:var(--ngs-border-radius)}.tan-grid__menu-item:hover{background-color:var(--ngs-bg-secondary)}.tan-grid__menu-icon{width:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--ngs-primary);font-weight:700}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], hoverable: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], selectedRowIds: [{
+                type: Input
+            }], rowIdFn: [{
+                type: Input
+            }], pagination: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], paginationMode: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], sorting: [{
+                type: Input
+            }], sortingMode: [{
+                type: Input
+            }], filtering: [{
+                type: Input
+            }], filteringMode: [{
+                type: Input
+            }], globalSearch: [{
+                type: Input
+            }], showGlobalSearchInput: [{
+                type: Input
+            }], globalFilter: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], loadingMessage: [{
+                type: Input
+            }], loadingType: [{
+                type: Input
+            }], placeholderRows: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], virtualScrollBufferSize: [{
+                type: Input
+            }], virtualScrollViewportHeight: [{
+                type: Input
+            }], pinnedLeft: [{
+                type: Input
+            }], pinnedRight: [{
+                type: Input
+            }], enablePinning: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], emptyTemplate: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], expandedRowTemplate: [{
+                type: Input
+            }], expandedRowIds: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], exportable: [{
+                type: Input
+            }], exportFormats: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], rowDblClick: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], paginationChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], expansionChange: [{
+                type: Output
+            }], pinChange: [{
+                type: Output
+            }], cellEditChange: [{
+                type: Output
+            }], columnOrderChange: [{
+                type: Output
+            }], tableContainer: [{
+                type: ViewChild,
+                args: ['tableContainer']
+            }], virtualScrollViewport: [{
+                type: ViewChild,
+                args: ['virtualScrollViewport']
+            }], headerRowContainer: [{
+                type: ViewChild,
+                args: ['headerRowContainer']
+            }] } });
+
+/**
+ * Table module
+ */
+class TanGridModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TanGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.7", ngImport: i0, type: TanGridModule, imports: [TanGrid], exports: [TanGrid] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TanGridModule, imports: [TanGrid] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.7", ngImport: i0, type: TanGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TanGrid],
+                    exports: [TanGrid],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TanGrid, TanGridModule };
+//# sourceMappingURL=tangrid-table.mjs.map