@devjuliovilla/jv-ui 1.15.0 → 1.16.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -24583,6 +24583,266 @@ function exportGridToExcel(header, rows, filename = 'export.xlsx') {
     downloadBlob(blob, filename);
 }
 
+function flattenGridColumns(columns) {
+    return columns.flatMap((column) => column.children?.length ? flattenGridColumns(column.children) : [column]);
+}
+function getVisibleGridColumns(columns, columnOrder) {
+    const visibleColumns = flattenGridColumns(columns).filter((column) => !column.hidden);
+    if (columnOrder.length === 0)
+        return visibleColumns;
+    return columnOrder
+        .map((key) => visibleColumns.find((column) => String(column.key) === key))
+        .filter((column) => Boolean(column));
+}
+function getGroupedGridColumns(columns) {
+    return columns.filter((column) => column.children && column.children.length > 0);
+}
+
+function getCellKeyboardTarget(key, rowIndex, columnIndex, rowCount, columnCount) {
+    if (key === 'ArrowUp' && rowIndex === 0) {
+        return { kind: 'header', row: 0, column: columnIndex };
+    }
+    const movement = {
+        ArrowDown: [1, 0],
+        ArrowLeft: [0, -1],
+        ArrowRight: [0, 1],
+        ArrowUp: [-1, 0],
+    };
+    const delta = movement[key];
+    if (!delta)
+        return null;
+    const target = { row: rowIndex + delta[0], column: columnIndex + delta[1] };
+    if (target.row < 0 ||
+        target.row >= rowCount ||
+        target.column < 0 ||
+        target.column >= columnCount) {
+        return null;
+    }
+    return { kind: 'cell', ...target };
+}
+function getHeaderKeyboardTarget(key, columnIndex, columnCount) {
+    if (key === 'ArrowDown')
+        return { kind: 'cell', row: 0, column: columnIndex };
+    const delta = key === 'ArrowLeft' ? -1 : key === 'ArrowRight' ? 1 : 0;
+    if (!delta)
+        return null;
+    const targetColumn = columnIndex + delta;
+    if (targetColumn < 0 || targetColumn >= columnCount)
+        return null;
+    return { kind: 'header', row: 0, column: targetColumn };
+}
+
+function getGridEditType(column) {
+    if (column.editType)
+        return column.editType;
+    switch (column.type) {
+        case 'integer':
+        case 'number':
+        case 'currency':
+        case 'percent':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'time':
+            return 'time';
+        case 'datetime':
+            return 'datetime';
+        case 'boolean':
+            return 'boolean';
+        default:
+            return 'text';
+    }
+}
+function getGridInputType(column) {
+    switch (getGridEditType(column)) {
+        case 'number':
+            return 'number';
+        case 'date':
+            return 'date';
+        case 'time':
+            return 'time';
+        case 'datetime':
+            return 'datetime-local';
+        default:
+            return 'text';
+    }
+}
+function isGridBooleanTrue(value) {
+    return value === true || value === 'true' || value === 1 || value === '1';
+}
+function getGridEditValue(value, column, toDate) {
+    const editType = getGridEditType(column);
+    if (editType === 'date')
+        return toGridDateInputValue(value, toDate);
+    if (editType === 'datetime')
+        return toGridDateTimeInputValue(value, toDate);
+    if (editType === 'time')
+        return toGridTimeInputValue(value, toDate);
+    return value == null ? '' : String(value);
+}
+function normalizeGridEditValue(column, value, toDate) {
+    switch (getGridEditType(column)) {
+        case 'number': {
+            if (value === '' || value == null)
+                return null;
+            const number = Number(value);
+            return Number.isFinite(number) ? number : null;
+        }
+        case 'date':
+            return toGridDateInputValue(value, toDate) || null;
+        case 'datetime': {
+            if (value === '' || value == null)
+                return null;
+            const date = new Date(String(value));
+            return Number.isNaN(date.getTime()) ? null : date.toISOString();
+        }
+        case 'time': {
+            if (value === '' || value == null)
+                return null;
+            const time = String(value);
+            return /^\d{2}:\d{2}$/.test(time) ? `${time}:00` : time;
+        }
+        case 'boolean':
+            return Boolean(value);
+        default:
+            return value;
+    }
+}
+function toGridDateInputValue(value, toDate) {
+    if (typeof value === 'string') {
+        const match = value.match(/^\d{4}-\d{2}-\d{2}/);
+        if (match)
+            return match[0];
+    }
+    const date = toDate(value);
+    if (!date)
+        return '';
+    return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
+}
+function toGridDateTimeInputValue(value, toDate) {
+    const date = toDate(value);
+    if (!date)
+        return '';
+    const pad = (part) => String(part).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function toGridTimeInputValue(value, toDate) {
+    if (typeof value === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(value))
+        return value.slice(0, 5);
+    const date = toDate(value);
+    if (!date)
+        return '';
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+}
+
+function filterGridData(data, columns, searchTerm, filters, getColumnKey, getRawCellValue, getSearchValue) {
+    let items = data;
+    const term = searchTerm.trim().toLowerCase();
+    if (term) {
+        items = items.filter((row) => columns.some((column) => {
+            if (column.searchable === false)
+                return false;
+            const value = getRawCellValue(row, column);
+            if (value == null)
+                return false;
+            return getSearchValue(value, column).includes(term);
+        }));
+    }
+    const hasFilters = Object.values(filters).some((filter) => filter.value.trim().length > 0);
+    if (!hasFilters)
+        return items;
+    return items.filter((row) => Object.entries(filters).every(([key, filter]) => {
+        if (!filter.value.trim())
+            return true;
+        const column = columns.find((candidate) => getColumnKey(candidate) === key);
+        if (!column || column.filterable === false)
+            return true;
+        const value = getSearchValue(getRawCellValue(row, column), column);
+        const filterValue = filter.value.toLowerCase();
+        switch (filter.operator) {
+            case 'contains':
+                return value.includes(filterValue);
+            case 'equals':
+                return value === filterValue;
+            case 'startsWith':
+                return value.startsWith(filterValue);
+            case 'endsWith':
+                return value.endsWith(filterValue);
+            default:
+                return value.includes(filterValue);
+        }
+    }));
+}
+function sortGridData(data, sortState, findColumn, getRawCellValue, getComparableValue) {
+    const { columnKey, direction } = sortState;
+    if (!columnKey || !direction)
+        return data;
+    const column = findColumn(columnKey);
+    return [...data].sort((a, b) => {
+        const valueA = getComparableValue(getRawCellValue(a, column), column);
+        const valueB = getComparableValue(getRawCellValue(b, column), column);
+        if (valueA == null)
+            return 1;
+        if (valueB == null)
+            return -1;
+        const comparison = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+        return direction === 'asc' ? comparison : -comparison;
+    });
+}
+function paginateGridData(data, pageIndex, pageSize, totalPages) {
+    const page = Math.min(pageIndex, totalPages - 1);
+    return data.slice(page * pageSize, page * pageSize + pageSize);
+}
+
+function resolveGridSelection(controlledIds, internalIds) {
+    return new Set(controlledIds ?? internalIds);
+}
+function areAllGridRowsSelected(rows, selectedIds, getRowId) {
+    return rows.length > 0 && rows.every((row) => selectedIds.has(getRowId(row)));
+}
+function areSomeGridRowsSelected(rows, selectedIds, getRowId) {
+    return (rows.some((row) => selectedIds.has(getRowId(row))) &&
+        !areAllGridRowsSelected(rows, selectedIds, getRowId));
+}
+function toggleGridRowSelection(selectedIds, rowId) {
+    const next = new Set(selectedIds);
+    if (next.has(rowId))
+        next.delete(rowId);
+    else
+        next.add(rowId);
+    return Array.from(next);
+}
+function toggleGridRowsSelection(selectedIds, rows, checked, getRowId) {
+    const next = new Set(selectedIds);
+    rows.forEach((row) => {
+        const id = getRowId(row);
+        if (checked)
+            next.add(id);
+        else
+            next.delete(id);
+    });
+    return Array.from(next);
+}
+
+function getGridVirtualRange(scrollTop, clientHeight, rowHeight, itemCount, buffer = 5) {
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
+    const end = Math.min(itemCount, Math.ceil((scrollTop + clientHeight) / rowHeight) + buffer);
+    return { start, end };
+}
+function getGridVirtualSlice(items, start, end, enabled) {
+    if (!enabled)
+        return items;
+    if (start >= items.length)
+        return [];
+    return items.slice(start, Math.min(end, items.length));
+}
+function getGridVirtualTotalHeight(itemCount, rowHeight) {
+    return itemCount * rowHeight;
+}
+function getGridVirtualOffset(start, rowHeight) {
+    return start * rowHeight;
+}
+
 let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
@@ -24608,7 +24868,10 @@ class JvGridComponent {
     columnResize = output();
     columnReorder = output();
     rowEdit = output();
-    effectiveOptions = computed(() => ({ ...JV_GRID_DEFAULT_OPTIONS, ...this.options() }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    effectiveOptions = computed(() => ({
+        ...JV_GRID_DEFAULT_OPTIONS,
+        ...this.options(),
+    }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     idKey = computed(() => {
         const tb = this.trackBy();
         if (typeof tb === 'string')
@@ -24622,14 +24885,9 @@ class JvGridComponent {
     columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
     activeCell = signal({ row: 0, column: 0 }, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
     visibleColumns = computed(() => {
-        const cols = this.flattenColumns(this.columns()).filter(col => !col.hidden);
-        const order = this.columnOrder();
-        if (order.length > 0) {
-            return order.map(key => cols.find(c => this.colKey(c) === key)).filter(Boolean);
-        }
-        return cols;
+        return getVisibleGridColumns(this.columns(), this.columnOrder());
     }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
-    groupedHeaders = computed(() => this.columns().filter(col => col.children && col.children.length > 0), ...(ngDevMode ? [{ debugName: "groupedHeaders" }] : /* istanbul ignore next */ []));
+    groupedHeaders = computed(() => getGroupedGridColumns(this.columns()), ...(ngDevMode ? [{ debugName: "groupedHeaders" }] : /* istanbul ignore next */ []));
     internalSelectedIds = signal([], ...(ngDevMode ? [{ debugName: "internalSelectedIds" }] : /* istanbul ignore next */ []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     sortState = signal({ columnKey: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
@@ -24638,8 +24896,8 @@ class JvGridComponent {
     pageSize = computed(() => this.internalPageSize() ?? this.effectiveOptions().pageSize ?? 20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     pageSizeStr = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
     pageSizeOptions = computed(() => (this.effectiveOptions().pageSizeOptions ?? [])
-        .filter(size => Number.isInteger(size) && size > 0)
-        .map(size => ({ label: String(size), value: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+        .filter((size) => Number.isInteger(size) && size > 0)
+        .map((size) => ({ label: String(size), value: String(size) })), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
     pageSizeInputSync = effect(() => {
         void this.options().pageSize;
         this.internalPageSize.set(null);
@@ -24654,71 +24912,18 @@ class JvGridComponent {
             this.pageIndex.set(Math.max(0, lastPage));
     }, ...(ngDevMode ? [{ debugName: "pageBoundsGuard" }] : /* istanbul ignore next */ []));
     selectedIdSet = computed(() => {
-        const fromInput = this.selectedIds();
-        const fromInternal = this.internalSelectedIds();
-        const ids = fromInput !== null ? fromInput : fromInternal;
-        return new Set(ids);
+        return resolveGridSelection(this.selectedIds(), this.internalSelectedIds());
     }, ...(ngDevMode ? [{ debugName: "selectedIdSet" }] : /* istanbul ignore next */ []));
-    hasActiveFilters = computed(() => Object.values(this.colFilters()).some(f => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => Object.values(this.colFilters()).some((f) => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
     filteredData = computed(() => {
         if (this.effectiveOptions().serverSide)
             return this.data();
-        let items = this.data();
-        const term = this.searchTerm().trim().toLowerCase();
-        if (term) {
-            items = items.filter(row => {
-                return this.visibleColumns().some(col => {
-                    if (col.searchable === false)
-                        return false;
-                    const value = this.getRawCellValue(row, col);
-                    if (value == null)
-                        return false;
-                    return this.getSearchValue(value, col).includes(term);
-                });
-            });
-        }
-        const filters = this.colFilters();
-        const hasFilters = Object.values(filters).some(f => f.value.trim().length > 0);
-        if (hasFilters) {
-            items = items.filter(row => {
-                return Object.entries(filters).every(([key, filter]) => {
-                    if (!filter.value.trim())
-                        return true;
-                    const col = this.columns().find(c => this.colKey(c) === key);
-                    if (!col || col.filterable === false)
-                        return true;
-                    const value = this.getSearchValue(this.getRawCellValue(row, col), col);
-                    const fv = filter.value.toLowerCase();
-                    switch (filter.operator) {
-                        case 'contains': return value.includes(fv);
-                        case 'equals': return value === fv;
-                        case 'startsWith': return value.startsWith(fv);
-                        case 'endsWith': return value.endsWith(fv);
-                        default: return value.includes(fv);
-                    }
-                });
-            });
-        }
-        return items;
+        return filterGridData(this.data(), this.visibleColumns(), this.searchTerm(), this.colFilters(), (column) => this.colKey(column), (row, column) => this.getRawCellValue(row, column), (value, column) => this.getSearchValue(value, column));
     }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
     sortedData = computed(() => {
         if (this.effectiveOptions().serverSide)
             return this.filteredData();
-        const items = this.filteredData();
-        const { columnKey, direction } = this.sortState();
-        if (!columnKey || !direction)
-            return items;
-        return [...items].sort((a, b) => {
-            const col = this.findColumn(columnKey);
-            const va = this.getComparableValue(this.getRawCellValue(a, col), col);
-            const vb = this.getComparableValue(this.getRawCellValue(b, col), col);
-            if (va == null)
-                return 1;
-            if (vb == null)
-                return -1;
-            const cmp = va < vb ? -1 : va > vb ? 1 : 0;
-            return direction === 'asc' ? cmp : -cmp;
-        });
+        return sortGridData(this.filteredData(), this.sortState(), (key) => this.findColumn(key), (row, column) => this.getRawCellValue(row, column), (value, column) => this.getComparableValue(value, column));
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
     effectiveTotalItems = computed(() => {
         if (this.effectiveOptions().serverSide) {
@@ -24732,10 +24937,7 @@ class JvGridComponent {
             return this.virtualDisplayData();
         if (!this.effectiveOptions().pageable)
             return this.sortedData();
-        const items = this.sortedData();
-        const ps = this.pageSize();
-        const page = Math.min(this.pageIndex(), this.effectiveTotalPages() - 1);
-        return items.slice(page * ps, page * ps + ps);
+        return paginateGridData(this.sortedData(), this.pageIndex(), this.pageSize(), this.effectiveTotalPages());
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
     virtualScrollEnabled = computed(() => this.effectiveOptions().virtualScroll && !this.effectiveOptions().serverSide, ...(ngDevMode ? [{ debugName: "virtualScrollEnabled" }] : /* istanbul ignore next */ []));
     virtualStartIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualStartIndex" }] : /* istanbul ignore next */ []));
@@ -24746,23 +24948,16 @@ class JvGridComponent {
         this.virtualEndIndex.set(Math.min(20, length));
     }, ...(ngDevMode ? [{ debugName: "virtualRangeResetter" }] : /* istanbul ignore next */ []));
     virtualDisplayData = computed(() => {
-        if (!this.virtualScrollEnabled())
-            return this.sortedData();
-        const items = this.sortedData();
-        const start = this.virtualStartIndex();
-        const end = this.virtualEndIndex();
-        if (start >= items.length)
-            return [];
-        return items.slice(start, Math.min(end, items.length));
+        return getGridVirtualSlice(this.sortedData(), this.virtualStartIndex(), this.virtualEndIndex(), !!this.virtualScrollEnabled());
     }, ...(ngDevMode ? [{ debugName: "virtualDisplayData" }] : /* istanbul ignore next */ []));
     virtualTotalHeight = computed(() => {
         const count = this.effectiveOptions().serverSide
             ? this.effectiveTotalItems()
             : this.sortedData().length;
-        return count * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+        return getGridVirtualTotalHeight(count, this.effectiveOptions().virtualScrollRowHeight ?? 48);
     }, ...(ngDevMode ? [{ debugName: "virtualTotalHeight" }] : /* istanbul ignore next */ []));
     virtualOffsetY = computed(() => {
-        return this.virtualStartIndex() * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+        return getGridVirtualOffset(this.virtualStartIndex(), this.effectiveOptions().virtualScrollRowHeight ?? 48);
     }, ...(ngDevMode ? [{ debugName: "virtualOffsetY" }] : /* istanbul ignore next */ []));
     pageStart = computed(() => this.effectiveTotalItems() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "pageStart" }] : /* istanbul ignore next */ []));
     pageEnd = computed(() => Math.min((this.pageIndex() + 1) * this.pageSize(), this.effectiveTotalItems()), ...(ngDevMode ? [{ debugName: "pageEnd" }] : /* istanbul ignore next */ []));
@@ -24778,11 +24973,11 @@ class JvGridComponent {
     }, ...(ngDevMode ? [{ debugName: "pageRange" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => {
         const rows = this.displayData();
-        return rows.length > 0 && rows.every(r => this.selectedIdSet().has(this.getRowId(r)));
+        return areAllGridRowsSelected(rows, this.selectedIdSet(), (row) => this.getRowId(row));
     }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     someSelected = computed(() => {
         const rows = this.displayData();
-        return rows.some(r => this.selectedIdSet().has(this.getRowId(r))) && !this.allSelected();
+        return areSomeGridRowsSelected(rows, this.selectedIdSet(), (row) => this.getRowId(row));
     }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
     colspan = computed(() => {
         let count = this.visibleColumns().length;
@@ -24800,9 +24995,6 @@ class JvGridComponent {
         const active = this.activeCell();
         return active.row === rowIndex && active.column === columnIndex ? 0 : -1;
     }
-    flattenColumns(columns) {
-        return columns.flatMap(col => col.children?.length ? this.flattenColumns(col.children) : [col]);
-    }
     onCellFocus(rowIndex, columnIndex) {
         if (this.resolvedOptions().keyboardNavigation) {
             this.activeCell.set({ row: rowIndex, column: columnIndex });
@@ -24812,34 +25004,26 @@ class JvGridComponent {
         if (!this.resolvedOptions().keyboardNavigation)
             return;
         const target = event.target;
-        if (target !== event.currentTarget && target.closest('button, input, select, textarea, [contenteditable="true"]')) {
+        if (target !== event.currentTarget &&
+            target.closest('button, input, select, textarea, [contenteditable="true"]')) {
             return;
         }
-        const movement = {
-            ArrowDown: [1, 0],
-            ArrowLeft: [0, -1],
-            ArrowRight: [0, 1],
-        };
-        if (event.key === 'ArrowUp' && rowIndex === 0) {
+        const targetPosition = getCellKeyboardTarget(event.key, rowIndex, columnIndex, this.displayData().length, this.visibleColumns().length);
+        if (!targetPosition)
+            return;
+        if (targetPosition.kind === 'header') {
             event.preventDefault();
-            this.activeCell.set({ row: 0, column: columnIndex });
+            this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
             const table = event.currentTarget.closest('table');
-            table?.querySelector(`[data-column-index="${columnIndex}"][role="columnheader"]`)?.focus();
+            table
+                ?.querySelector(`[data-column-index="${targetPosition.column}"][role="columnheader"]`)
+                ?.focus();
             return;
         }
-        const delta = event.key === 'ArrowUp' ? [-1, 0] : movement[event.key];
-        if (!delta)
-            return;
-        const nextRow = rowIndex + delta[0];
-        const nextColumn = columnIndex + delta[1];
-        const rows = this.displayData();
-        const columns = this.visibleColumns();
-        if (nextRow < 0 || nextRow >= rows.length || nextColumn < 0 || nextColumn >= columns.length)
-            return;
         event.preventDefault();
-        this.activeCell.set({ row: nextRow, column: nextColumn });
+        this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
         const table = event.currentTarget.closest('table');
-        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${nextRow}"][data-column-index="${nextColumn}"]`);
+        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${targetPosition.row}"][data-column-index="${targetPosition.column}"]`);
         nextCell?.focus();
     }
     onCellF2(event, rowIndex, columnIndex) {
@@ -24861,7 +25045,10 @@ class JvGridComponent {
     onHeaderKeydown(event, columnIndex) {
         if (!this.resolvedOptions().keyboardNavigation)
             return;
-        if (event.key === 'ArrowDown') {
+        const targetPosition = getHeaderKeyboardTarget(event.key, columnIndex, this.visibleColumns().length);
+        if (!targetPosition)
+            return;
+        if (targetPosition.kind === 'cell') {
             const table = event.currentTarget.closest('table');
             const firstCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="0"][data-column-index="${columnIndex}"]`);
             if (firstCell) {
@@ -24871,16 +25058,12 @@ class JvGridComponent {
             }
             return;
         }
-        const delta = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
-        if (!delta)
-            return;
-        const nextColumn = columnIndex + delta;
-        if (nextColumn < 0 || nextColumn >= this.visibleColumns().length)
-            return;
         event.preventDefault();
-        this.activeCell.set({ row: 0, column: nextColumn });
+        this.activeCell.set({ row: targetPosition.row, column: targetPosition.column });
         const table = event.currentTarget.closest('table');
-        table?.querySelector(`[data-column-index="${nextColumn}"][role="columnheader"]`)?.focus();
+        table
+            ?.querySelector(`[data-column-index="${targetPosition.column}"][role="columnheader"]`)
+            ?.focus();
     }
     editState = signal(null, ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     t = (key, params) => this.translationService.translate(key, params);
@@ -24892,7 +25075,7 @@ class JvGridComponent {
         const tb = this.trackBy();
         if (typeof tb === 'function')
             return tb(row, index ?? 0);
-        if (row && typeof row === 'object' && ('id' in row)) {
+        if (row && typeof row === 'object' && 'id' in row) {
             const id = record['id'];
             if (typeof id === 'string' || typeof id === 'number')
                 return id;
@@ -24912,106 +25095,22 @@ class JvGridComponent {
         return this.getRawCellValue(row, col);
     }
     getEditValue(row, col) {
-        const val = this.getCellValue(row, col);
-        const editType = this.editType(col);
-        if (editType === 'date')
-            return this.toDateInputValue(val);
-        if (editType === 'datetime')
-            return this.toDateTimeInputValue(val);
-        if (editType === 'time')
-            return this.toTimeInputValue(val);
-        return val == null ? '' : String(val);
+        return getGridEditValue(this.getCellValue(row, col), col, (value) => this.formatService.toDate(value));
     }
     getBooleanEditValue(row, col) {
-        const value = this.getCellValue(row, col);
-        return value === true || value === 'true' || value === 1 || value === '1';
+        return isGridBooleanTrue(this.getCellValue(row, col));
     }
     isBooleanTrue(value) {
-        return value === true || value === 'true' || value === 1 || value === '1';
+        return isGridBooleanTrue(value);
     }
     editType(col) {
-        if (col.editType)
-            return col.editType;
-        switch (col.type) {
-            case 'integer':
-            case 'number':
-            case 'currency':
-            case 'percent':
-                return 'number';
-            case 'date':
-                return 'date';
-            case 'time':
-                return 'time';
-            case 'datetime':
-                return 'datetime';
-            case 'boolean':
-                return 'boolean';
-            default:
-                return 'text';
-        }
+        return getGridEditType(col);
     }
     inputType(col) {
-        switch (this.editType(col)) {
-            case 'number': return 'number';
-            case 'date': return 'date';
-            case 'time': return 'time';
-            case 'datetime': return 'datetime-local';
-            default: return 'text';
-        }
+        return getGridInputType(col);
     }
     normalizeEditValue(col, value) {
-        switch (this.editType(col)) {
-            case 'number': {
-                if (value === '' || value == null)
-                    return null;
-                const number = Number(value);
-                return Number.isFinite(number) ? number : null;
-            }
-            case 'date':
-                return this.toDateInputValue(value) || null;
-            case 'datetime': {
-                if (value === '' || value == null)
-                    return null;
-                const date = new Date(String(value));
-                return Number.isNaN(date.getTime()) ? null : date.toISOString();
-            }
-            case 'time': {
-                if (value === '' || value == null)
-                    return null;
-                const time = String(value);
-                return /^\d{2}:\d{2}$/.test(time) ? `${time}:00` : time;
-            }
-            case 'boolean':
-                return Boolean(value);
-            default:
-                return value;
-        }
-    }
-    toDateInputValue(value) {
-        if (typeof value === 'string') {
-            const match = value.match(/^\d{4}-\d{2}-\d{2}/);
-            if (match)
-                return match[0];
-        }
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
-    }
-    toDateTimeInputValue(value) {
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        const pad = (part) => String(part).padStart(2, '0');
-        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-    }
-    toTimeInputValue(value) {
-        if (typeof value === 'string' && /^\d{2}:\d{2}(:\d{2})?$/.test(value))
-            return value.slice(0, 5);
-        const date = this.formatService.toDate(value);
-        if (!date)
-            return '';
-        return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+        return normalizeGridEditValue(col, value, (input) => this.formatService.toDate(input));
     }
     formatValue(value, col, _row) {
         if (value == null)
@@ -25098,7 +25197,7 @@ class JvGridComponent {
         return (this.resolvedOptions().editable || col.editable === true) && col.editable !== false;
     }
     groupColspan(group) {
-        return this.flattenColumns(group.children ?? []).filter(col => !col.hidden).length || 1;
+        return flattenGridColumns(group.children ?? []).filter((col) => !col.hidden).length || 1;
     }
     isEditingCell(row, col) {
         const es = this.editState();
@@ -25109,13 +25208,13 @@ class JvGridComponent {
         return es !== null && es.rowId === this.getRowId(row);
     }
     getEditOptions(col) {
-        return (col.editOptions || []).map(opt => ({
+        return (col.editOptions || []).map((opt) => ({
             label: opt.label,
             value: String(opt.value),
         }));
     }
     findColumn(key) {
-        return this.visibleColumns().find(c => this.colKey(c) === key) ?? { key, header: key };
+        return this.visibleColumns().find((c) => this.colKey(c) === key) ?? { key, header: key };
     }
     toggleSort(col, event) {
         if (col.sortable === false || !this.resolvedOptions().sortable)
@@ -25153,13 +25252,7 @@ class JvGridComponent {
         return this.selectedIdSet().has(this.getRowId(row));
     }
     toggleRow(row) {
-        const id = this.getRowId(row);
-        const set = new Set(this.selectedIdSet());
-        if (set.has(id))
-            set.delete(id);
-        else
-            set.add(id);
-        const nextIds = Array.from(set);
+        const nextIds = toggleGridRowSelection(this.selectedIdSet(), this.getRowId(row));
         if (this.selectedIds() === null)
             this.internalSelectedIds.set(nextIds);
         this.selectionChange.emit(nextIds);
@@ -25173,15 +25266,7 @@ class JvGridComponent {
         this.pageChange.emit({ pageIndex: 0, pageSize });
     }
     toggleSelectAll(checked) {
-        const set = new Set(this.selectedIdSet());
-        const rows = this.displayData();
-        rows.forEach(r => {
-            if (checked)
-                set.add(this.getRowId(r));
-            else
-                set.delete(this.getRowId(r));
-        });
-        const nextIds = Array.from(set);
+        const nextIds = toggleGridRowsSelection(this.selectedIdSet(), this.displayData(), checked, (row) => this.getRowId(row));
         if (this.selectedIds() === null)
             this.internalSelectedIds.set(nextIds);
         this.selectionChange.emit(nextIds);
@@ -25205,7 +25290,7 @@ class JvGridComponent {
     }
     onColumnFilterChange(col, value) {
         const key = this.colKey(col);
-        this.colFilters.update(f => ({
+        this.colFilters.update((f) => ({
             ...f,
             [key]: { key, value, operator: 'contains' },
         }));
@@ -25215,8 +25300,8 @@ class JvGridComponent {
     getRowLabel(row, _index) {
         const label = this.visibleColumns()
             .slice(0, 2)
-            .map(col => this.getCellValue(row, col))
-            .filter(v => v != null)
+            .map((col) => this.getCellValue(row, col))
+            .filter((v) => v != null)
             .join(' - ');
         return `${label}${this.isSelected(row) ? ` (${this.t('grid.selected')})` : ''}`;
     }
@@ -25250,7 +25335,7 @@ class JvGridComponent {
         this.editState.set(null);
     }
     onEditValueChange(row, col, value) {
-        const option = col.editOptions?.find(item => String(item.value) === value);
+        const option = col.editOptions?.find((item) => String(item.value) === value);
         this.commitEdit(row, col, option?.value ?? value);
     }
     // Column resizing
@@ -25275,7 +25360,7 @@ class JvGridComponent {
             return;
         const diff = event.clientX - this.resizeData.startX;
         const newWidth = Math.max(30, this.resizeData.startWidth + diff);
-        this.columnWidths.update(w => ({
+        this.columnWidths.update((w) => ({
             ...w,
             [this.colKey(this.resizeData.col)]: `${newWidth}px`,
         }));
@@ -25310,7 +25395,7 @@ class JvGridComponent {
             return;
         if (this.dragIndex === targetIdx)
             return;
-        const cols = this.visibleColumns().map(c => this.colKey(c));
+        const cols = this.visibleColumns().map((c) => this.colKey(c));
         const [moved] = cols.splice(this.dragIndex, 1);
         cols.splice(targetIdx, 0, moved);
         this.columnOrder.set(cols);
@@ -25325,13 +25410,9 @@ class JvGridComponent {
         if (!this.virtualScrollEnabled())
             return;
         const rowHeight = this.effectiveOptions().virtualScrollRowHeight ?? 48;
-        const buffer = 5;
-        const scrollTop = target.scrollTop;
-        const clientHeight = target.clientHeight;
-        const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
-        const end = Math.min(this.sortedData().length, Math.ceil((scrollTop + clientHeight) / rowHeight) + buffer);
-        this.virtualStartIndex.set(start);
-        this.virtualEndIndex.set(end);
+        const range = getGridVirtualRange(target.scrollTop, target.clientHeight, rowHeight, this.sortedData().length);
+        this.virtualStartIndex.set(range.start);
+        this.virtualEndIndex.set(range.end);
     }
     // Export
     exportCsv() {
@@ -25354,753 +25435,23 @@ class JvGridComponent {
         return configuredName.replace(/\.(csv|xlsx)$/i, '') + `.${extension}`;
     }
     buildExportMatrix() {
-        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header, column: c }));
+        const cols = this.visibleColumns().map((c) => ({
+            key: this.colKey(c),
+            header: c.header,
+            column: c,
+        }));
         const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
         return {
-            header: cols.map(c => c.header),
-            rows: allData.map(row => cols.map(col => this.getExportValue(row[col.key], col.column))),
+            header: cols.map((c) => c.header),
+            rows: allData.map((row) => cols.map((col) => this.getExportValue(row[col.key], col.column))),
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: `
-    <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
-        <div class="jv-grid-toolbar">
-          @if (resolvedOptions().searchable) {
-            <div class="jv-grid-search">
-              <jv-icon name="search" [size]="16" />
-              <jv-input
-                [inputId]="gridSearchInputId"
-                [placeholder]="t('grid.searchPlaceholder')"
-                [ngModel]="searchTerm()"
-                (ngModelChange)="onSearchInput($event)"
-              />
-            </div>
-          }
-          @if (resolvedOptions().exportable) {
-            <div class="jv-grid-export-actions">
-              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
-              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
-            </div>
-          }
-        </div>
-      }
-
-      @if (resolvedOptions().loading) {
-        <div class="jv-grid-loading" role="status" aria-live="polite">
-          <span class="jv-grid-spinner" aria-hidden="true"></span>
-          <span>{{ t('grid.loading') }}</span>
-        </div>
-      } @else {
-        <div
-          class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="virtualScrollEnabled()"
-          #tableWrap
-          (scroll)="onVirtualScroll($any($event.target))"
-        >
-          @if (virtualScrollEnabled()) {
-            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
-          }
-          <table
-            class="jv-grid-table"
-            role="grid"
-            [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
-            [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="colspan()"
-            [class]="densityClass()"
-            [style.position]="virtualScrollEnabled() ? 'relative' : null"
-            [style.top.px]="virtualOffsetY()"
-          >
-            <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
-
-            @let hasGroupedHeaders = groupedHeaders().length > 0;
-
-            <thead class="jv-grid-thead">
-              @if (hasGroupedHeaders) {
-                <tr>
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
-                      <input
-                        type="checkbox"
-                        class="jv-grid-checkbox"
-                        [checked]="allSelected()"
-                        (change)="toggleSelectAll($any($event.target).checked)"
-                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                        [indeterminate]="someSelected()"
-                      />
-                    </th>
-                  }
-                  @for (group of groupedHeaders(); track colKey(group)) {
-                    <th
-                      class="jv-grid-th"
-                      [class]="group.headerClass || ''"
-                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
-                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
-                      [attr.colspan]="groupColspan(group)"
-                      scope="colgroup"
-                      [style.text-align]="group.align ?? 'start'"
-                    >
-                      <div class="jv-grid-th-content">{{ group.header }}</div>
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
-                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                    </th>
-                  }
-                </tr>
-              }
-
-              <tr>
-                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
-                  <th class="jv-grid-th jv-grid-th-select" scope="col">
-                    <input
-                      type="checkbox"
-                      class="jv-grid-checkbox"
-                      [checked]="allSelected()"
-                      (change)="toggleSelectAll($any($event.target).checked)"
-                      [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                      [indeterminate]="someSelected()"
-                    />
-                  </th>
-                }
-                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                  <th
-                    class="jv-grid-th"
-                    [class]="col.headerClass || ''"
-                    [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
-                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
-                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
-                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
-                    [style.text-align]="col.align ?? 'start'"
-                    [style.width]="getColumnWidth(col)"
-                    [style.min-width]="col.minWidth || undefined"
-                    [style.max-width]="col.maxWidth || undefined"
-                     scope="col"
-                     role="columnheader"
-                     [attr.data-column-index]="colIdx"
-                     [attr.aria-sort]="getAriaSort(col)"
-                     [attr.aria-label]="getSortLabel(col)"
-                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
-                     (click)="toggleSort(col)"
-                     (focus)="onHeaderFocus(colIdx)"
-                     (keydown)="onHeaderKeydown($event, colIdx)"
-                     (keydown.enter)="toggleSort(col)"
-                    (keydown.space)="toggleSort(col, $event)"
-                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
-                    (dragstart)="onDragStart($event, colIdx)"
-                    (dragover)="onDragOver($event, colIdx)"
-                    (drop)="onDrop($event, colIdx)"
-                    (dragend)="onDragEnd($event)"
-                  >
-                    <div class="jv-grid-th-content">
-                      <span>{{ col.header }}</span>
-                      @if (col.sortable !== false && resolvedOptions().sortable) {
-                        <span class="jv-grid-sort-icon" aria-hidden="true">
-                          @if (sortState().columnKey === colKey(col)) {
-                            @if (sortState().direction === 'asc') { ▲ }
-                            @if (sortState().direction === 'desc') { ▼ }
-                          }
-                        </span>
-                      }
-                    </div>
-                    @if (isColumnResizable(col)) {
-                      <div
-                        class="jv-grid-resize-handle"
-                        (mousedown)="onResizeStart($event, col, colIdx)"
-                      ></div>
-                    }
-                  </th>
-                }
-                @if (!hasGroupedHeaders && actions().length > 0) {
-                  <th class="jv-grid-th jv-grid-th-actions" scope="col">
-                    <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                  </th>
-                }
-              </tr>
-
-              @if (resolvedOptions().columnFilters) {
-                <tr class="jv-grid-filter-row">
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select"></th>
-                  }
-                  @for (col of visibleColumns(); track colKey(col)) {
-                    <th class="jv-grid-th jv-grid-th-filter">
-                      @if (col.filterable !== false) {
-                        <input
-                          class="jv-grid-filter-input"
-                          [placeholder]="t('grid.filterPlaceholder')"
-                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
-                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
-                          (ngModelChange)="onColumnFilterChange(col, $event)"
-                        />
-                      }
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions"></th>
-                  }
-                </tr>
-              }
-            </thead>
-
-            <tbody class="jv-grid-tbody">
-              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
-                  </td>
-                </tr>
-              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
-                  </td>
-                </tr>
-              } @else {
-                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
-                  <tr
-                    class="jv-grid-tr"
-                    role="row"
-                    [class.jv-grid-tr-editing]="isRowEditing(row)"
-                    [class.jv-grid-tr-selected]="isSelected(row)"
-                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
-                    (click)="onRowClick(row)"
-                    (dblclick)="onRowDblClick(row)"
-                    (keydown.enter)="onRowClick(row)"
-                    (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="-1"
-                  >
-                    @if (resolvedOptions().selectable) {
-                      <td
-                        class="jv-grid-td jv-grid-td-select"
-                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
-                      >
-                        <input
-                          type="checkbox"
-                          class="jv-grid-checkbox"
-                          [checked]="isSelected(row)"
-                          (change)="toggleRow(row); $event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                          [attr.aria-label]="getRowLabel(row, $index)"
-                        />
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                      <td
-                        class="jv-grid-td"
-                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
-                        [class]="col.cellClass || ''"
-                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
-                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
-                        [class.jv-grid-td-editable]="isCellEditable(col)"
-                        [style.text-align]="col.align ?? 'start'"
-                        (dblclick)="startEdit(row, col, $event)"
-                        (keydown.enter)="startEdit(row, col, $event)"
-                        [attr.data-row-index]="rowIdx"
-                        [attr.data-column-index]="colIdx"
-                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
-                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
-                        (focus)="onCellFocus(rowIdx, colIdx)"
-                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
-                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
-                      >
-                        @if (isEditingCell(row, col)) {
-                          @if (editType(col) === 'select' && col.editOptions) {
-                            <jv-select
-                              [options]="getEditOptions(col)"
-                              [modelValue]="getEditValue(row, col)"
-                              (selectionChange)="onEditValueChange(row, col, $event)"
-                            />
-                          } @else if (editType(col) === 'boolean') {
-                            <input
-                              type="checkbox"
-                              class="jv-grid-checkbox"
-                              [checked]="getBooleanEditValue(row, col)"
-                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.escape)="cancelEdit()"
-                              [attr.aria-label]="col.header"
-                            />
-                          } @else {
-                            <input
-                              class="jv-grid-edit-input"
-                              [type]="inputType(col)"
-                              [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.escape)="cancelEdit()"
-                            />
-                          }
-                        } @else {
-                          @let value = getCellValue(row, col);
-                          @if (col.type === 'boolean') {
-                            @if (isBooleanTrue(value)) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
-                            } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
-                            }
-                          } @else if (col.format) {
-                            {{ col.format(value, row) }}
-                          } @else {
-                            {{ formatValue(value, col, row) }}
-                          }
-                        }
-                      </td>
-                    }
-                    @if (actions().length > 0) {
-                      <td
-                        class="jv-grid-td jv-grid-td-actions"
-                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
-                      >
-                        <div class="jv-grid-actions-group">
-                          @for (action of actions(); track action.id) {
-                            <jv-button
-                              [variant]="actionVariant(action.variant)"
-                              [icon]="action.icon ?? null"
-                              [disabled]="action.disabled?.(row) ?? false"
-                              [attr.aria-label]="action.label"
-                              [title]="action.label"
-                              (click)="onActionClick(action, row); $event.stopPropagation()"
-                            ></jv-button>
-                          }
-                        </div>
-                      </td>
-                    }
-                  </tr>
-                }
-              }
-            </tbody>
-          </table>
-        </div>
-      }
-
-      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
-          </div>
-            <div class="jv-grid-pagination-controls">
-              @if (pageSizeOptions().length > 0) {
-                <jv-select
-                  [options]="pageSizeOptions()"
-                  [modelValue]="pageSizeStr()"
-                  [ariaLabel]="t('grid.itemsPerPage')"
-                  (selectionChange)="onPageSizeChange($event)"
-                />
-              }
-              <jv-button
-              variant="outline"
-              icon="chevrons-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(0)"
-              [attr.aria-label]="t('grid.pageFirst')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevron-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(pageIndex() - 1)"
-              [attr.aria-label]="t('grid.pagePrev')"
-            ></jv-button>
-            @for (p of pageRange(); track p) {
-              <jv-button
-                [variant]="p === pageIndex() ? 'primary' : 'outline'"
-                [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
-                (click)="goToPage(p)"
-              >{{ p + 1 }}</jv-button>
-            }
-            <jv-button
-              variant="outline"
-              icon="chevron-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(pageIndex() + 1)"
-              [attr.aria-label]="t('grid.pageNext')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevrons-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(effectiveTotalPages() - 1)"
-              [attr.aria-label]="t('grid.pageLast')"
-            ></jv-button>
-          </div>
-        </nav>
-      }
-    </div>
-  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "ariaLabel", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent, JvSelectComponent], template: `
-    <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
-        <div class="jv-grid-toolbar">
-          @if (resolvedOptions().searchable) {
-            <div class="jv-grid-search">
-              <jv-icon name="search" [size]="16" />
-              <jv-input
-                [inputId]="gridSearchInputId"
-                [placeholder]="t('grid.searchPlaceholder')"
-                [ngModel]="searchTerm()"
-                (ngModelChange)="onSearchInput($event)"
-              />
-            </div>
-          }
-          @if (resolvedOptions().exportable) {
-            <div class="jv-grid-export-actions">
-              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
-              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
-            </div>
-          }
-        </div>
-      }
-
-      @if (resolvedOptions().loading) {
-        <div class="jv-grid-loading" role="status" aria-live="polite">
-          <span class="jv-grid-spinner" aria-hidden="true"></span>
-          <span>{{ t('grid.loading') }}</span>
-        </div>
-      } @else {
-        <div
-          class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="virtualScrollEnabled()"
-          #tableWrap
-          (scroll)="onVirtualScroll($any($event.target))"
-        >
-          @if (virtualScrollEnabled()) {
-            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
-          }
-          <table
-            class="jv-grid-table"
-            role="grid"
-            [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
-            [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="colspan()"
-            [class]="densityClass()"
-            [style.position]="virtualScrollEnabled() ? 'relative' : null"
-            [style.top.px]="virtualOffsetY()"
-          >
-            <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
-
-            @let hasGroupedHeaders = groupedHeaders().length > 0;
-
-            <thead class="jv-grid-thead">
-              @if (hasGroupedHeaders) {
-                <tr>
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
-                      <input
-                        type="checkbox"
-                        class="jv-grid-checkbox"
-                        [checked]="allSelected()"
-                        (change)="toggleSelectAll($any($event.target).checked)"
-                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                        [indeterminate]="someSelected()"
-                      />
-                    </th>
-                  }
-                  @for (group of groupedHeaders(); track colKey(group)) {
-                    <th
-                      class="jv-grid-th"
-                      [class]="group.headerClass || ''"
-                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
-                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
-                      [attr.colspan]="groupColspan(group)"
-                      scope="colgroup"
-                      [style.text-align]="group.align ?? 'start'"
-                    >
-                      <div class="jv-grid-th-content">{{ group.header }}</div>
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
-                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                    </th>
-                  }
-                </tr>
-              }
-
-              <tr>
-                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
-                  <th class="jv-grid-th jv-grid-th-select" scope="col">
-                    <input
-                      type="checkbox"
-                      class="jv-grid-checkbox"
-                      [checked]="allSelected()"
-                      (change)="toggleSelectAll($any($event.target).checked)"
-                      [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
-                      [indeterminate]="someSelected()"
-                    />
-                  </th>
-                }
-                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                  <th
-                    class="jv-grid-th"
-                    [class]="col.headerClass || ''"
-                    [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
-                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
-                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
-                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
-                    [style.text-align]="col.align ?? 'start'"
-                    [style.width]="getColumnWidth(col)"
-                    [style.min-width]="col.minWidth || undefined"
-                    [style.max-width]="col.maxWidth || undefined"
-                     scope="col"
-                     role="columnheader"
-                     [attr.data-column-index]="colIdx"
-                     [attr.aria-sort]="getAriaSort(col)"
-                     [attr.aria-label]="getSortLabel(col)"
-                     [tabindex]="resolvedOptions().keyboardNavigation ? (activeCell().column === colIdx ? 0 : -1) : (col.sortable !== false && resolvedOptions().sortable ? 0 : -1)"
-                     (click)="toggleSort(col)"
-                     (focus)="onHeaderFocus(colIdx)"
-                     (keydown)="onHeaderKeydown($event, colIdx)"
-                     (keydown.enter)="toggleSort(col)"
-                    (keydown.space)="toggleSort(col, $event)"
-                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
-                    (dragstart)="onDragStart($event, colIdx)"
-                    (dragover)="onDragOver($event, colIdx)"
-                    (drop)="onDrop($event, colIdx)"
-                    (dragend)="onDragEnd($event)"
-                  >
-                    <div class="jv-grid-th-content">
-                      <span>{{ col.header }}</span>
-                      @if (col.sortable !== false && resolvedOptions().sortable) {
-                        <span class="jv-grid-sort-icon" aria-hidden="true">
-                          @if (sortState().columnKey === colKey(col)) {
-                            @if (sortState().direction === 'asc') { ▲ }
-                            @if (sortState().direction === 'desc') { ▼ }
-                          }
-                        </span>
-                      }
-                    </div>
-                    @if (isColumnResizable(col)) {
-                      <div
-                        class="jv-grid-resize-handle"
-                        (mousedown)="onResizeStart($event, col, colIdx)"
-                      ></div>
-                    }
-                  </th>
-                }
-                @if (!hasGroupedHeaders && actions().length > 0) {
-                  <th class="jv-grid-th jv-grid-th-actions" scope="col">
-                    <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
-                  </th>
-                }
-              </tr>
-
-              @if (resolvedOptions().columnFilters) {
-                <tr class="jv-grid-filter-row">
-                  @if (resolvedOptions().selectable) {
-                    <th class="jv-grid-th jv-grid-th-select"></th>
-                  }
-                  @for (col of visibleColumns(); track colKey(col)) {
-                    <th class="jv-grid-th jv-grid-th-filter">
-                      @if (col.filterable !== false) {
-                        <input
-                          class="jv-grid-filter-input"
-                          [placeholder]="t('grid.filterPlaceholder')"
-                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
-                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
-                          (ngModelChange)="onColumnFilterChange(col, $event)"
-                        />
-                      }
-                    </th>
-                  }
-                  @if (actions().length > 0) {
-                    <th class="jv-grid-th jv-grid-th-actions"></th>
-                  }
-                </tr>
-              }
-            </thead>
-
-            <tbody class="jv-grid-tbody">
-              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
-                  </td>
-                </tr>
-              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
-                <tr>
-                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
-                    {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
-                  </td>
-                </tr>
-              } @else {
-                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
-                  <tr
-                    class="jv-grid-tr"
-                    role="row"
-                    [class.jv-grid-tr-editing]="isRowEditing(row)"
-                    [class.jv-grid-tr-selected]="isSelected(row)"
-                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
-                    (click)="onRowClick(row)"
-                    (dblclick)="onRowDblClick(row)"
-                    (keydown.enter)="onRowClick(row)"
-                    (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="-1"
-                  >
-                    @if (resolvedOptions().selectable) {
-                      <td
-                        class="jv-grid-td jv-grid-td-select"
-                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
-                      >
-                        <input
-                          type="checkbox"
-                          class="jv-grid-checkbox"
-                          [checked]="isSelected(row)"
-                          (change)="toggleRow(row); $event.stopPropagation()"
-                          (keydown.space)="$event.stopPropagation()"
-                          [attr.aria-label]="getRowLabel(row, $index)"
-                        />
-                      </td>
-                    }
-                    @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
-                      <td
-                        class="jv-grid-td"
-                        [attr.role]="resolvedOptions().keyboardNavigation ? 'gridcell' : null"
-                        [class]="col.cellClass || ''"
-                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
-                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
-                        [class.jv-grid-td-editable]="isCellEditable(col)"
-                        [style.text-align]="col.align ?? 'start'"
-                        (dblclick)="startEdit(row, col, $event)"
-                        (keydown.enter)="startEdit(row, col, $event)"
-                        [attr.data-row-index]="rowIdx"
-                        [attr.data-column-index]="colIdx"
-                        [class.jv-grid-keyboard-cell]="resolvedOptions().keyboardNavigation"
-                        [attr.tabindex]="cellTabIndex(rowIdx, colIdx, col)"
-                        (focus)="onCellFocus(rowIdx, colIdx)"
-                        (keydown.f2)="onCellF2($event, rowIdx, colIdx)"
-                        (keydown)="onCellKeydown($event, rowIdx, colIdx)"
-                      >
-                        @if (isEditingCell(row, col)) {
-                          @if (editType(col) === 'select' && col.editOptions) {
-                            <jv-select
-                              [options]="getEditOptions(col)"
-                              [modelValue]="getEditValue(row, col)"
-                              (selectionChange)="onEditValueChange(row, col, $event)"
-                            />
-                          } @else if (editType(col) === 'boolean') {
-                            <input
-                              type="checkbox"
-                              class="jv-grid-checkbox"
-                              [checked]="getBooleanEditValue(row, col)"
-                              (change)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).checked))"
-                              (keydown.escape)="cancelEdit()"
-                              [attr.aria-label]="col.header"
-                            />
-                          } @else {
-                            <input
-                              class="jv-grid-edit-input"
-                              [type]="inputType(col)"
-                              [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.enter)="commitEditFromKeyboard($event, row, col, normalizeEditValue(col, $any($event.target).value))"
-                              (keydown.escape)="cancelEdit()"
-                            />
-                          }
-                        } @else {
-                          @let value = getCellValue(row, col);
-                          @if (col.type === 'boolean') {
-                            @if (isBooleanTrue(value)) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" [attr.aria-label]="t('grid.booleanYes')">{{ t('grid.booleanYes') }}</span>
-                            } @else {
-                              <span class="jv-grid-boolean jv-grid-boolean-false" [attr.aria-label]="t('grid.booleanNo')">{{ t('grid.booleanNo') }}</span>
-                            }
-                          } @else if (col.format) {
-                            {{ col.format(value, row) }}
-                          } @else {
-                            {{ formatValue(value, col, row) }}
-                          }
-                        }
-                      </td>
-                    }
-                    @if (actions().length > 0) {
-                      <td
-                        class="jv-grid-td jv-grid-td-actions"
-                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
-                      >
-                        <div class="jv-grid-actions-group">
-                          @for (action of actions(); track action.id) {
-                            <jv-button
-                              [variant]="actionVariant(action.variant)"
-                              [icon]="action.icon ?? null"
-                              [disabled]="action.disabled?.(row) ?? false"
-                              [attr.aria-label]="action.label"
-                              [title]="action.label"
-                              (click)="onActionClick(action, row); $event.stopPropagation()"
-                            ></jv-button>
-                          }
-                        </div>
-                      </td>
-                    }
-                  </tr>
-                }
-              }
-            </tbody>
-          </table>
-        </div>
-      }
-
-      @if (resolvedOptions().pageable && !virtualScrollEnabled() && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
-          </div>
-            <div class="jv-grid-pagination-controls">
-              @if (pageSizeOptions().length > 0) {
-                <jv-select
-                  [options]="pageSizeOptions()"
-                  [modelValue]="pageSizeStr()"
-                  [ariaLabel]="t('grid.itemsPerPage')"
-                  (selectionChange)="onPageSizeChange($event)"
-                />
-              }
-              <jv-button
-              variant="outline"
-              icon="chevrons-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(0)"
-              [attr.aria-label]="t('grid.pageFirst')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevron-left"
-              [disabled]="pageIndex() === 0"
-              (click)="goToPage(pageIndex() - 1)"
-              [attr.aria-label]="t('grid.pagePrev')"
-            ></jv-button>
-            @for (p of pageRange(); track p) {
-              <jv-button
-                [variant]="p === pageIndex() ? 'primary' : 'outline'"
-                [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
-                (click)="goToPage(p)"
-              >{{ p + 1 }}</jv-button>
-            }
-            <jv-button
-              variant="outline"
-              icon="chevron-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(pageIndex() + 1)"
-              [attr.aria-label]="t('grid.pageNext')"
-            ></jv-button>
-            <jv-button
-              variant="outline"
-              icon="chevrons-right"
-              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
-              (click)="goToPage(effectiveTotalPages() - 1)"
-              [attr.aria-label]="t('grid.pageLast')"
-            ></jv-button>
-          </div>
-        </nav>
-      }
-    </div>
-  `, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"] }]
+            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent, JvSelectComponent], template: "<div class=\"jv-grid\" role=\"region\" [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\">\n  @if (resolvedOptions().searchable || resolvedOptions().exportable) {\n    <div class=\"jv-grid-toolbar\">\n      @if (resolvedOptions().searchable) {\n        <div class=\"jv-grid-search\">\n          <jv-icon name=\"search\" [size]=\"16\" />\n          <jv-input\n            [inputId]=\"gridSearchInputId\"\n            [placeholder]=\"t('grid.searchPlaceholder')\"\n            [ngModel]=\"searchTerm()\"\n            (ngModelChange)=\"onSearchInput($event)\"\n          />\n        </div>\n      }\n      @if (resolvedOptions().exportable) {\n        <div class=\"jv-grid-export-actions\">\n          <jv-button variant=\"outline\" icon=\"download\" (click)=\"exportCsv()\">{{\n            t('grid.exportCsv')\n          }}</jv-button>\n          <jv-button variant=\"outline\" icon=\"file-spreadsheet\" (click)=\"exportExcel()\">{{\n            t('grid.exportExcel')\n          }}</jv-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (resolvedOptions().loading) {\n    <div class=\"jv-grid-loading\" role=\"status\" aria-live=\"polite\">\n      <span class=\"jv-grid-spinner\" aria-hidden=\"true\"></span>\n      <span>{{ t('grid.loading') }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"jv-grid-table-wrap\"\n      [class.jv-grid-virtual]=\"virtualScrollEnabled()\"\n      #tableWrap\n      (scroll)=\"onVirtualScroll($any($event.target))\"\n    >\n      @if (virtualScrollEnabled()) {\n        <div class=\"jv-grid-virtual-spacer\" [style.height.px]=\"virtualTotalHeight()\"></div>\n      }\n      <table\n        class=\"jv-grid-table\"\n        role=\"grid\"\n        [attr.aria-label]=\"resolvedOptions().ariaLabel || gridLabel()\"\n        [attr.aria-rowcount]=\"effectiveTotalItems()\"\n        [attr.aria-colcount]=\"colspan()\"\n        [class]=\"densityClass()\"\n        [style.position]=\"virtualScrollEnabled() ? 'relative' : null\"\n        [style.top.px]=\"virtualOffsetY()\"\n      >\n        <caption class=\"sr-only\">\n          {{\n            resolvedOptions().ariaLabel || gridLabel()\n          }}\n        </caption>\n\n        @let hasGroupedHeaders = groupedHeaders().length > 0;\n\n        <thead class=\"jv-grid-thead\">\n          @if (hasGroupedHeaders) {\n            <tr>\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"jv-grid-checkbox\"\n                    [checked]=\"allSelected()\"\n                    (change)=\"toggleSelectAll($any($event.target).checked)\"\n                    [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                    [indeterminate]=\"someSelected()\"\n                  />\n                </th>\n              }\n              @for (group of groupedHeaders(); track colKey(group)) {\n                <th\n                  class=\"jv-grid-th\"\n                  [class]=\"group.headerClass || ''\"\n                  [class.jv-grid-th-sticky-left]=\"isStickyLeft(group)\"\n                  [class.jv-grid-th-sticky-right]=\"isStickyRight(group)\"\n                  [attr.colspan]=\"groupColspan(group)\"\n                  scope=\"colgroup\"\n                  [style.text-align]=\"group.align ?? 'start'\"\n                >\n                  <div class=\"jv-grid-th-content\">{{ group.header }}</div>\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\" [attr.rowspan]=\"2\">\n                  <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n                </th>\n              }\n            </tr>\n          }\n\n          <tr>\n            @if (!hasGroupedHeaders && resolvedOptions().selectable) {\n              <th class=\"jv-grid-th jv-grid-th-select\" scope=\"col\">\n                <input\n                  type=\"checkbox\"\n                  class=\"jv-grid-checkbox\"\n                  [checked]=\"allSelected()\"\n                  (change)=\"toggleSelectAll($any($event.target).checked)\"\n                  [attr.aria-label]=\"allSelected() ? t('grid.deselectAll') : t('grid.selectAll')\"\n                  [indeterminate]=\"someSelected()\"\n                />\n              </th>\n            }\n            @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n              <th\n                class=\"jv-grid-th\"\n                [class]=\"col.headerClass || ''\"\n                [class.jv-grid-th-sortable]=\"col.sortable !== false && resolvedOptions().sortable\"\n                [class.jv-grid-th-sticky-left]=\"isStickyLeft(col)\"\n                [class.jv-grid-th-sticky-right]=\"isStickyRight(col)\"\n                [class.jv-grid-th-reorderable]=\"resolvedOptions().reorderableColumns\"\n                [style.text-align]=\"col.align ?? 'start'\"\n                [style.width]=\"getColumnWidth(col)\"\n                [style.min-width]=\"col.minWidth || undefined\"\n                [style.max-width]=\"col.maxWidth || undefined\"\n                scope=\"col\"\n                role=\"columnheader\"\n                [attr.data-column-index]=\"colIdx\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.aria-label]=\"getSortLabel(col)\"\n                [tabindex]=\"\n                  resolvedOptions().keyboardNavigation\n                    ? activeCell().column === colIdx\n                      ? 0\n                      : -1\n                    : col.sortable !== false && resolvedOptions().sortable\n                      ? 0\n                      : -1\n                \"\n                (click)=\"toggleSort(col)\"\n                (focus)=\"onHeaderFocus(colIdx)\"\n                (keydown)=\"onHeaderKeydown($event, colIdx)\"\n                (keydown.enter)=\"toggleSort(col)\"\n                (keydown.space)=\"toggleSort(col, $event)\"\n                draggable=\"{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}\"\n                (dragstart)=\"onDragStart($event, colIdx)\"\n                (dragover)=\"onDragOver($event, colIdx)\"\n                (drop)=\"onDrop($event, colIdx)\"\n                (dragend)=\"onDragEnd($event)\"\n              >\n                <div class=\"jv-grid-th-content\">\n                  <span>{{ col.header }}</span>\n                  @if (col.sortable !== false && resolvedOptions().sortable) {\n                    <span class=\"jv-grid-sort-icon\" aria-hidden=\"true\">\n                      @if (sortState().columnKey === colKey(col)) {\n                        @if (sortState().direction === 'asc') {\n                          \u25B2\n                        }\n                        @if (sortState().direction === 'desc') {\n                          \u25BC\n                        }\n                      }\n                    </span>\n                  }\n                </div>\n                @if (isColumnResizable(col)) {\n                  <div\n                    class=\"jv-grid-resize-handle\"\n                    (mousedown)=\"onResizeStart($event, col, colIdx)\"\n                  ></div>\n                }\n              </th>\n            }\n            @if (!hasGroupedHeaders && actions().length > 0) {\n              <th class=\"jv-grid-th jv-grid-th-actions\" scope=\"col\">\n                <span class=\"sr-only\">{{ t('grid.actionsLabel', { label: '' }) }}</span>\n              </th>\n            }\n          </tr>\n\n          @if (resolvedOptions().columnFilters) {\n            <tr class=\"jv-grid-filter-row\">\n              @if (resolvedOptions().selectable) {\n                <th class=\"jv-grid-th jv-grid-th-select\"></th>\n              }\n              @for (col of visibleColumns(); track colKey(col)) {\n                <th class=\"jv-grid-th jv-grid-th-filter\">\n                  @if (col.filterable !== false) {\n                    <input\n                      class=\"jv-grid-filter-input\"\n                      [placeholder]=\"t('grid.filterPlaceholder')\"\n                      [attr.aria-label]=\"t('grid.filterForColumn', { column: col.header })\"\n                      [ngModel]=\"colFilters()[colKey(col)]?.value ?? ''\"\n                      (ngModelChange)=\"onColumnFilterChange(col, $event)\"\n                    />\n                  }\n                </th>\n              }\n              @if (actions().length > 0) {\n                <th class=\"jv-grid-th jv-grid-th-actions\"></th>\n              }\n            </tr>\n          }\n        </thead>\n\n        <tbody class=\"jv-grid-tbody\">\n          @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}\n              </td>\n            </tr>\n          } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {\n            <tr>\n              <td class=\"jv-grid-empty\" [attr.colspan]=\"colspan()\">\n                {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}\n              </td>\n            </tr>\n          } @else {\n            @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {\n              <tr\n                class=\"jv-grid-tr\"\n                role=\"row\"\n                [class.jv-grid-tr-editing]=\"isRowEditing(row)\"\n                [class.jv-grid-tr-selected]=\"isSelected(row)\"\n                [attr.aria-selected]=\"resolvedOptions().selectable ? isSelected(row) : null\"\n                (click)=\"onRowClick(row)\"\n                (dblclick)=\"onRowDblClick(row)\"\n                (keydown.enter)=\"onRowClick(row)\"\n                (keydown.space)=\"onRowClick($event, row)\"\n                [tabindex]=\"-1\"\n              >\n                @if (resolvedOptions().selectable) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-select\"\n                    [class.jv-grid-td-sticky-left]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      class=\"jv-grid-checkbox\"\n                      [checked]=\"isSelected(row)\"\n                      (change)=\"toggleRow(row); $event.stopPropagation()\"\n                      (keydown.space)=\"$event.stopPropagation()\"\n                      [attr.aria-label]=\"getRowLabel(row, $index)\"\n                    />\n                  </td>\n                }\n                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {\n                  <td\n                    class=\"jv-grid-td\"\n                    [attr.role]=\"resolvedOptions().keyboardNavigation ? 'gridcell' : null\"\n                    [class]=\"col.cellClass || ''\"\n                    [class.jv-grid-td-sticky-left]=\"isStickyLeft(col)\"\n                    [class.jv-grid-td-sticky-right]=\"isStickyRight(col)\"\n                    [class.jv-grid-td-editable]=\"isCellEditable(col)\"\n                    [style.text-align]=\"col.align ?? 'start'\"\n                    (dblclick)=\"startEdit(row, col, $event)\"\n                    (keydown.enter)=\"startEdit(row, col, $event)\"\n                    [attr.data-row-index]=\"rowIdx\"\n                    [attr.data-column-index]=\"colIdx\"\n                    [class.jv-grid-keyboard-cell]=\"resolvedOptions().keyboardNavigation\"\n                    [attr.tabindex]=\"cellTabIndex(rowIdx, colIdx, col)\"\n                    (focus)=\"onCellFocus(rowIdx, colIdx)\"\n                    (keydown.f2)=\"onCellF2($event, rowIdx, colIdx)\"\n                    (keydown)=\"onCellKeydown($event, rowIdx, colIdx)\"\n                  >\n                    @if (isEditingCell(row, col)) {\n                      @if (editType(col) === 'select' && col.editOptions) {\n                        <jv-select\n                          [options]=\"getEditOptions(col)\"\n                          [modelValue]=\"getEditValue(row, col)\"\n                          (selectionChange)=\"onEditValueChange(row, col, $event)\"\n                        />\n                      } @else if (editType(col) === 'boolean') {\n                        <input\n                          type=\"checkbox\"\n                          class=\"jv-grid-checkbox\"\n                          [checked]=\"getBooleanEditValue(row, col)\"\n                          (change)=\"\n                            commitEdit(\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).checked)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                          [attr.aria-label]=\"col.header\"\n                        />\n                      } @else {\n                        <input\n                          class=\"jv-grid-edit-input\"\n                          [type]=\"inputType(col)\"\n                          [value]=\"getEditValue(row, col)\"\n                          (blur)=\"\n                            commitEdit(row, col, normalizeEditValue(col, $any($event.target).value))\n                          \"\n                          (keydown.enter)=\"\n                            commitEditFromKeyboard(\n                              $event,\n                              row,\n                              col,\n                              normalizeEditValue(col, $any($event.target).value)\n                            )\n                          \"\n                          (keydown.escape)=\"cancelEdit()\"\n                        />\n                      }\n                    } @else {\n                      @let value = getCellValue(row, col);\n                      @if (col.type === 'boolean') {\n                        @if (isBooleanTrue(value)) {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-true\"\n                            [attr.aria-label]=\"t('grid.booleanYes')\"\n                            >{{ t('grid.booleanYes') }}</span\n                          >\n                        } @else {\n                          <span\n                            class=\"jv-grid-boolean jv-grid-boolean-false\"\n                            [attr.aria-label]=\"t('grid.booleanNo')\"\n                            >{{ t('grid.booleanNo') }}</span\n                          >\n                        }\n                      } @else if (col.format) {\n                        {{ col.format(value, row) }}\n                      } @else {\n                        {{ formatValue(value, col, row) }}\n                      }\n                    }\n                  </td>\n                }\n                @if (actions().length > 0) {\n                  <td\n                    class=\"jv-grid-td jv-grid-td-actions\"\n                    [class.jv-grid-td-sticky-right]=\"resolvedOptions().stickyColumns\"\n                  >\n                    <div class=\"jv-grid-actions-group\">\n                      @for (action of actions(); track action.id) {\n                        <jv-button\n                          [variant]=\"actionVariant(action.variant)\"\n                          [icon]=\"action.icon ?? null\"\n                          [disabled]=\"action.disabled?.(row) ?? false\"\n                          [attr.aria-label]=\"action.label\"\n                          [title]=\"action.label\"\n                          (click)=\"onActionClick(action, row); $event.stopPropagation()\"\n                        ></jv-button>\n                      }\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  @if (\n    resolvedOptions().pageable &&\n    !virtualScrollEnabled() &&\n    effectiveTotalPages() > 1 &&\n    !resolvedOptions().loading\n  ) {\n    <nav\n      class=\"jv-grid-pagination\"\n      role=\"navigation\"\n      [attr.aria-label]=\"t('grid.paginationLabel', { label: '' })\"\n    >\n      <div class=\"jv-grid-pagination-info\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{\n          t('grid.itemsShowing', {\n            start: pageStart(),\n            end: pageEnd(),\n            total: effectiveTotalItems(),\n          })\n        }}\n      </div>\n      <div class=\"jv-grid-pagination-controls\">\n        @if (pageSizeOptions().length > 0) {\n          <jv-select\n            [options]=\"pageSizeOptions()\"\n            [modelValue]=\"pageSizeStr()\"\n            [ariaLabel]=\"t('grid.itemsPerPage')\"\n            (selectionChange)=\"onPageSizeChange($event)\"\n          />\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(0)\"\n          [attr.aria-label]=\"t('grid.pageFirst')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-left\"\n          [disabled]=\"pageIndex() === 0\"\n          (click)=\"goToPage(pageIndex() - 1)\"\n          [attr.aria-label]=\"t('grid.pagePrev')\"\n        ></jv-button>\n        @for (p of pageRange(); track p) {\n          <jv-button\n            [variant]=\"p === pageIndex() ? 'primary' : 'outline'\"\n            [attr.aria-current]=\"p === pageIndex() ? 'page' : null\"\n            [attr.aria-label]=\"t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })\"\n            (click)=\"goToPage(p)\"\n            >{{ p + 1 }}</jv-button\n          >\n        }\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevron-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(pageIndex() + 1)\"\n          [attr.aria-label]=\"t('grid.pageNext')\"\n        ></jv-button>\n        <jv-button\n          variant=\"outline\"\n          icon=\"chevrons-right\"\n          [disabled]=\"pageIndex() >= effectiveTotalPages() - 1\"\n          (click)=\"goToPage(effectiveTotalPages() - 1)\"\n          [attr.aria-label]=\"t('grid.pageLast')\"\n        ></jv-button>\n      </div>\n    </nav>\n  }\n</div>\n", styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-keyboard-cell:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnFilter: [{ type: i0.Output, args: ["columnFilter"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }] } });
 
 class JvPaginationComponent {