@devjuliovilla/jv-ui 1.13.0 → 1.14.0

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, inject, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, Directive, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, HostListener, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef } from '@angular/core';
+import { input, computed, Component, inject, signal, Injectable, InjectionToken, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, Directive, contentChild, output, effect, forwardRef, viewChild, untracked, contentChildren, HostListener, viewChildren, numberAttribute, afterNextRender, Renderer2, ElementRef, DestroyRef } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -18159,6 +18159,8 @@ const ES = {
     'grid.filterPlaceholder': 'Filtrar...',
     'grid.filterForColumn': 'Filtrar por ${column}',
     'grid.actionsLabel': 'Acciones',
+    'grid.booleanYes': 'SI',
+    'grid.booleanNo': 'NO',
     'pagination.pageLabel': 'Página {page}',
     'pagination.itemsShowing': '{start}-{end} de {total}',
     'pagination.of': 'de',
@@ -18238,6 +18240,8 @@ const EN = {
     'grid.filterPlaceholder': 'Filter...',
     'grid.filterForColumn': 'Filter by ${column}',
     'grid.actionsLabel': 'Actions',
+    'grid.booleanYes': 'YES',
+    'grid.booleanNo': 'NO',
     'pagination.pageLabel': 'Page {page}',
     'pagination.itemsShowing': '{start}-{end} of {total}',
     'pagination.of': 'of',
@@ -18366,18 +18370,19 @@ function provideJvUi(config = {}) {
 class JvUiConfigService {
     defaults = inject(JV_UI_CONFIG_DEFAULTS);
     configLayers = (inject(JV_UI_CONFIG, { optional: true }) ?? []);
+    resolvedConfig = this.configLayers.reduce((merged, layer) => ({
+        ...merged,
+        ...layer,
+        formats: {
+            ...merged.formats,
+            ...(layer.formats ?? {}),
+        },
+    }), {
+        ...this.defaults,
+        formats: { ...this.defaults.formats },
+    });
     get snapshot() {
-        return this.configLayers.reduce((merged, layer) => ({
-            ...merged,
-            ...layer,
-            formats: {
-                ...merged.formats,
-                ...(layer.formats ?? {}),
-            },
-        }), {
-            ...this.defaults,
-            formats: { ...this.defaults.formats },
-        });
+        return this.resolvedConfig;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvUiConfigService, providedIn: 'root' });
@@ -24313,6 +24318,7 @@ const JV_GRID_DEFAULT_OPTIONS = {
     exportFileName: '',
     columnFilters: false,
     rowDoubleClick: false,
+    keyboardNavigation: false,
 };
 
 const MAIN_NS = 'http://schemas.openxmlformats.org/spreadsheetml/2006/main';
@@ -24594,6 +24600,8 @@ let gridIdSequence = 0;
 class JvGridComponent {
     gridId = `jv-grid-${++gridIdSequence}`;
     gridSearchInputId = `${this.gridId}-search`;
+    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
     formatService = inject(JvFormatService);
     translationService = inject(JvTranslationService);
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -24601,7 +24609,7 @@ class JvGridComponent {
     actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
     options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     trackBy = input(null, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
-    selectedIds = input([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    selectedIds = input(null, ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
     rowClick = output();
     rowDoubleClick = output();
     actionClick = output();
@@ -24625,8 +24633,9 @@ class JvGridComponent {
     columnOrder = signal([], ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
     colFilters = signal({}, ...(ngDevMode ? [{ debugName: "colFilters" }] : /* istanbul ignore next */ []));
     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.columns().filter(col => !col.hidden);
+        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);
@@ -24638,15 +24647,29 @@ class JvGridComponent {
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     sortState = signal({ columnKey: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
     pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
-    pageSize = computed(() => this.effectiveOptions().pageSize ?? 20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    internalPageSize = signal(null, ...(ngDevMode ? [{ debugName: "internalPageSize" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    pageSizeInputSync = effect(() => {
+        this.options().pageSize;
+        this.internalPageSize.set(null);
+    }, ...(ngDevMode ? [{ debugName: "pageSizeInputSync" }] : /* istanbul ignore next */ []));
     searchPageResetter = effect(() => {
         this.searchTerm();
         this.pageIndex.set(0);
     }, ...(ngDevMode ? [{ debugName: "searchPageResetter" }] : /* istanbul ignore next */ []));
+    pageBoundsGuard = effect(() => {
+        const lastPage = this.effectiveTotalPages() - 1;
+        if (this.pageIndex() > lastPage)
+            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.length > 0 ? fromInput : fromInternal;
+        const ids = fromInput !== null ? fromInput : fromInternal;
         return new Set(ids);
     }, ...(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 */ []));
@@ -24718,9 +24741,8 @@ class JvGridComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveTotalItems" }] : /* istanbul ignore next */ []));
     effectiveTotalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "effectiveTotalPages" }] : /* istanbul ignore next */ []));
     displayData = computed(() => {
-        if (this.effectiveOptions().virtualScroll) {
-            return this.sortedData();
-        }
+        if (this.virtualScrollEnabled())
+            return this.virtualDisplayData();
         if (!this.effectiveOptions().pageable)
             return this.sortedData();
         const items = this.sortedData();
@@ -24728,12 +24750,17 @@ class JvGridComponent {
         const page = Math.min(this.pageIndex(), this.effectiveTotalPages() - 1);
         return items.slice(page * ps, page * ps + ps);
     }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
-    virtualScroll = computed(() => this.effectiveOptions().virtualScroll && this.effectiveOptions().virtualScrollRowHeight, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* 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 */ []));
-    virtualEndIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualEndIndex" }] : /* istanbul ignore next */ []));
+    virtualEndIndex = signal(20, ...(ngDevMode ? [{ debugName: "virtualEndIndex" }] : /* istanbul ignore next */ []));
+    virtualRangeResetter = effect(() => {
+        const length = this.sortedData().length;
+        this.virtualStartIndex.set(0);
+        this.virtualEndIndex.set(Math.min(20, length));
+    }, ...(ngDevMode ? [{ debugName: "virtualRangeResetter" }] : /* istanbul ignore next */ []));
     virtualDisplayData = computed(() => {
-        if (!this.effectiveOptions().virtualScroll)
-            return this.displayData();
+        if (!this.virtualScrollEnabled())
+            return this.sortedData();
         const items = this.sortedData();
         const start = this.virtualStartIndex();
         const end = this.virtualEndIndex();
@@ -24779,6 +24806,95 @@ class JvGridComponent {
         return count;
     }, ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
     densityClass = computed(() => `jv-grid-density--${this.resolvedOptions().density ?? 'normal'}`, ...(ngDevMode ? [{ debugName: "densityClass" }] : /* istanbul ignore next */ []));
+    cellTabIndex(rowIndex, columnIndex, col) {
+        if (!this.resolvedOptions().keyboardNavigation) {
+            return this.isCellEditable(col) ? -1 : null;
+        }
+        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 });
+        }
+    }
+    onCellKeydown(event, rowIndex, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        const target = event.target;
+        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) {
+            event.preventDefault();
+            this.activeCell.set({ row: 0, column: columnIndex });
+            const table = event.currentTarget.closest('table');
+            table?.querySelector(`[data-column-index="${columnIndex}"][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 });
+        const table = event.currentTarget.closest('table');
+        const nextCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="${nextRow}"][data-column-index="${nextColumn}"]`);
+        nextCell?.focus();
+    }
+    onCellF2(event, rowIndex, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        const col = this.visibleColumns()[columnIndex];
+        const row = this.displayData()[rowIndex];
+        if (!col || !row || !this.isCellEditable(col))
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.startEdit(row, col, event);
+    }
+    onHeaderFocus(columnIndex) {
+        if (this.resolvedOptions().keyboardNavigation) {
+            this.activeCell.set({ row: 0, column: columnIndex });
+        }
+    }
+    onHeaderKeydown(event, columnIndex) {
+        if (!this.resolvedOptions().keyboardNavigation)
+            return;
+        if (event.key === 'ArrowDown') {
+            const table = event.currentTarget.closest('table');
+            const firstCell = table?.querySelector(`.jv-grid-keyboard-cell[data-row-index="0"][data-column-index="${columnIndex}"]`);
+            if (firstCell) {
+                event.preventDefault();
+                this.activeCell.set({ row: 0, column: columnIndex });
+                firstCell.focus();
+            }
+            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 });
+        const table = event.currentTarget.closest('table');
+        table?.querySelector(`[data-column-index="${nextColumn}"][role="columnheader"]`)?.focus();
+    }
     editState = signal(null, ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     t = (key, params) => this.translationService.translate(key, params);
     getRowId(row, index) {
@@ -24788,6 +24904,11 @@ class JvGridComponent {
         const tb = this.trackBy();
         if (typeof tb === 'function')
             return tb(row, index ?? 0);
+        if (row && typeof row === 'object' && ('id' in row)) {
+            const id = row.id;
+            if (typeof id === 'string' || typeof id === 'number')
+                return id;
+        }
         if (index !== undefined)
             return index;
         return this.data().indexOf(row);
@@ -24803,8 +24924,106 @@ class JvGridComponent {
     }
     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);
     }
+    getBooleanEditValue(row, col) {
+        const value = this.getCellValue(row, col);
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+    isBooleanTrue(value) {
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+    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';
+        }
+    }
+    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';
+        }
+    }
+    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')}`;
+    }
     formatValue(value, col, _row) {
         if (value == null)
             return '';
@@ -24890,7 +25109,7 @@ class JvGridComponent {
         return (this.resolvedOptions().editable || col.editable === true) && col.editable !== false;
     }
     groupColspan(group) {
-        return group.children?.length ?? 1;
+        return this.flattenColumns(group.children ?? []).filter(col => !col.hidden).length || 1;
     }
     isEditingCell(row, col) {
         const es = this.editState();
@@ -24907,30 +25126,28 @@ class JvGridComponent {
         }));
     }
     findColumn(key) {
-        return this.columns().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 (!event || !(event instanceof KeyboardEvent && event.key === ' ')) {
-            if (col.sortable === false || !this.resolvedOptions().sortable)
-                return;
-            if (event instanceof KeyboardEvent)
-                event.preventDefault();
-            const key = this.colKey(col);
-            const current = this.sortState();
-            let direction;
-            if (current.columnKey !== key) {
-                direction = 'asc';
-            }
-            else if (current.direction === 'asc') {
-                direction = 'desc';
-            }
-            else {
-                direction = null;
-            }
-            this.sortState.set({ columnKey: direction ? key : '', direction });
-            this.pageIndex.set(0);
-            this.sortChange.emit({ columnKey: direction ? key : '', direction });
+        if (col.sortable === false || !this.resolvedOptions().sortable)
+            return;
+        if (event instanceof KeyboardEvent)
+            event.preventDefault();
+        const key = this.colKey(col);
+        const current = this.sortState();
+        let direction;
+        if (current.columnKey !== key) {
+            direction = 'asc';
+        }
+        else if (current.direction === 'asc') {
+            direction = 'desc';
+        }
+        else {
+            direction = null;
         }
+        this.sortState.set({ columnKey: direction ? key : '', direction });
+        this.pageIndex.set(0);
+        this.sortChange.emit({ columnKey: direction ? key : '', direction });
     }
     actionVariant = (v) => v === 'primary' ? 'primary' : v === 'danger' ? 'danger' : 'ghost';
     onSearchInput(value) {
@@ -24948,29 +25165,37 @@ class JvGridComponent {
     }
     toggleRow(row) {
         const id = this.getRowId(row);
-        this.internalSelectedIds.update(ids => {
-            const set = new Set(ids);
-            if (set.has(id))
-                set.delete(id);
-            else
-                set.add(id);
-            return Array.from(set);
-        });
-        this.selectionChange.emit(this.internalSelectedIds());
+        const set = new Set(this.selectedIdSet());
+        if (set.has(id))
+            set.delete(id);
+        else
+            set.add(id);
+        const nextIds = Array.from(set);
+        if (this.selectedIds() === null)
+            this.internalSelectedIds.set(nextIds);
+        this.selectionChange.emit(nextIds);
+    }
+    onPageSizeChange(value) {
+        const pageSize = Number(value);
+        if (!Number.isInteger(pageSize) || pageSize <= 0)
+            return;
+        this.internalPageSize.set(pageSize);
+        this.pageIndex.set(0);
+        this.pageChange.emit({ pageIndex: 0, pageSize });
     }
     toggleSelectAll(checked) {
-        this.internalSelectedIds.update(ids => {
-            const set = new Set(ids);
-            const rows = this.displayData();
-            rows.forEach(r => {
-                if (checked)
-                    set.add(this.getRowId(r));
-                else
-                    set.delete(this.getRowId(r));
-            });
-            return Array.from(set);
+        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));
         });
-        this.selectionChange.emit(this.internalSelectedIds());
+        const nextIds = Array.from(set);
+        if (this.selectedIds() === null)
+            this.internalSelectedIds.set(nextIds);
+        this.selectionChange.emit(nextIds);
     }
     onRowClick(event, row) {
         if (event instanceof Event) {
@@ -25009,33 +25234,52 @@ class JvGridComponent {
     startEdit(row, col, event) {
         if (!this.isCellEditable(col))
             return;
-        if (col.type === 'boolean')
-            return;
+        const cell = event.currentTarget;
         event.preventDefault();
         this.editState.set({ rowId: this.getRowId(row), colKey: this.colKey(col) });
+        setTimeout(() => {
+            const editor = cell?.querySelector('input:not(.jv-grid-checkbox), .jv-grid-checkbox, select');
+            editor?.focus();
+            if (editor instanceof HTMLInputElement && editor.type !== 'checkbox')
+                editor.select();
+        });
     }
     commitEdit(row, col, value) {
         const colKey = this.colKey(col);
-        if (this.editState()?.colKey === colKey) {
+        if (this.editState()?.rowId === this.getRowId(row) && this.editState()?.colKey === colKey) {
             this.rowEdit.emit({ row, column: col, value });
             this.editState.set(null);
         }
     }
+    commitEditFromKeyboard(event, row, col, value) {
+        event.stopPropagation();
+        const cell = event.currentTarget.closest('.jv-grid-keyboard-cell');
+        this.commitEdit(row, col, value);
+        setTimeout(() => cell?.focus());
+    }
     cancelEdit() {
         this.editState.set(null);
     }
     onEditValueChange(row, col, value) {
-        this.commitEdit(row, col, value);
+        const option = col.editOptions?.find(item => String(item.value) === value);
+        this.commitEdit(row, col, option?.value ?? value);
     }
     // Column resizing
     resizeData = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('mousemove', this.onResizeMove);
+            this.document.removeEventListener('mouseup', this.onResizeEnd);
+            this.resizeData = null;
+        });
+    }
     onResizeStart(event, col, _colIdx) {
         event.preventDefault();
         const th = event.target.closest('th');
         const startWidth = th.offsetWidth;
         this.resizeData = { col, startX: event.clientX, startWidth };
-        document.addEventListener('mousemove', this.onResizeMove);
-        document.addEventListener('mouseup', this.onResizeEnd);
+        this.document.addEventListener('mousemove', this.onResizeMove);
+        this.document.addEventListener('mouseup', this.onResizeEnd);
     }
     onResizeMove = (event) => {
         if (!this.resizeData)
@@ -25054,8 +25298,8 @@ class JvGridComponent {
             this.columnResize.emit({ columnKey: key, width: w });
         }
         this.resizeData = null;
-        document.removeEventListener('mousemove', this.onResizeMove);
-        document.removeEventListener('mouseup', this.onResizeEnd);
+        this.document.removeEventListener('mousemove', this.onResizeMove);
+        this.document.removeEventListener('mouseup', this.onResizeEnd);
     };
     // Column reordering
     dragIndex = null;
@@ -25089,7 +25333,7 @@ class JvGridComponent {
     }
     // Virtual scrolling
     onVirtualScroll(target) {
-        if (!this.effectiveOptions().virtualScroll)
+        if (!this.virtualScrollEnabled())
             return;
         const rowHeight = this.effectiveOptions().virtualScrollRowHeight ?? 48;
         const buffer = 5;
@@ -25161,11 +25405,11 @@ class JvGridComponent {
       } @else {
         <div
           class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          [class.jv-grid-virtual]="virtualScrollEnabled()"
           #tableWrap
           (scroll)="onVirtualScroll($any($event.target))"
         >
-          @if (resolvedOptions().virtualScroll) {
+          @if (virtualScrollEnabled()) {
             <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
           }
           <table
@@ -25173,9 +25417,9 @@ class JvGridComponent {
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
             [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="visibleColumns().length"
+            [attr.aria-colcount]="colspan()"
             [class]="densityClass()"
-            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.position]="virtualScrollEnabled() ? 'relative' : null"
             [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
@@ -25243,12 +25487,16 @@ class JvGridComponent {
                     [style.width]="getColumnWidth(col)"
                     [style.min-width]="col.minWidth || undefined"
                     [style.max-width]="col.maxWidth || undefined"
-                    scope="col"
-                    [attr.aria-sort]="getAriaSort(col)"
-                    [attr.aria-label]="getSortLabel(col)"
-                    [tabindex]="col.sortable !== false && resolvedOptions().sortable ? 0 : -1"
-                    (click)="toggleSort(col)"
-                    (keydown.enter)="toggleSort(col)"
+                     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)"
@@ -25349,9 +25597,10 @@ class JvGridComponent {
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track colKey(col)) {
+                    @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)"
@@ -25359,30 +25608,38 @@ class JvGridComponent {
                         [style.text-align]="col.align ?? 'start'"
                         (dblclick)="startEdit(row, col, $event)"
                         (keydown.enter)="startEdit(row, col, $event)"
-                        [tabindex]="isCellEditable(col) ? -1 : null"
+                        [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 (col.editType === 'select' && col.editOptions) {
+                          @if (editType(col) === 'select' && col.editOptions) {
                             <jv-select
                               [options]="getEditOptions(col)"
                               [modelValue]="getEditValue(row, col)"
                               (selectionChange)="onEditValueChange(row, col, $event)"
                             />
-                          } @else if (col.editType === 'boolean') {
+                          } @else if (editType(col) === 'boolean') {
                             <input
                               type="checkbox"
                               class="jv-grid-checkbox"
-                              [checked]="getCellValue(row, col) === true"
-                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [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]="col.editType === 'number' ? 'number' : 'text'"
+                              [type]="inputType(col)"
                               [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, $any($event.target).value)"
-                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (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()"
                               autofocus
                             />
@@ -25390,10 +25647,10 @@ class JvGridComponent {
                         } @else {
                           @let value = getCellValue(row, col);
                           @if (col.type === 'boolean') {
-                            @if (value) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            @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" aria-label="false">✗</span>
+                              <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) }}
@@ -25430,13 +25687,21 @@ class JvGridComponent {
         </div>
       }
 
-      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+      @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">
-            <jv-button
+            <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"
@@ -25476,7 +25741,7 @@ class JvGridComponent {
         </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-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"] }] });
+  `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
@@ -25512,11 +25777,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       } @else {
         <div
           class="jv-grid-table-wrap"
-          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          [class.jv-grid-virtual]="virtualScrollEnabled()"
           #tableWrap
           (scroll)="onVirtualScroll($any($event.target))"
         >
-          @if (resolvedOptions().virtualScroll) {
+          @if (virtualScrollEnabled()) {
             <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
           }
           <table
@@ -25524,9 +25789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
             [attr.aria-rowcount]="effectiveTotalItems()"
-            [attr.aria-colcount]="visibleColumns().length"
+            [attr.aria-colcount]="colspan()"
             [class]="densityClass()"
-            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.position]="virtualScrollEnabled() ? 'relative' : null"
             [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
@@ -25594,12 +25859,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     [style.width]="getColumnWidth(col)"
                     [style.min-width]="col.minWidth || undefined"
                     [style.max-width]="col.maxWidth || undefined"
-                    scope="col"
-                    [attr.aria-sort]="getAriaSort(col)"
-                    [attr.aria-label]="getSortLabel(col)"
-                    [tabindex]="col.sortable !== false && resolvedOptions().sortable ? 0 : -1"
-                    (click)="toggleSort(col)"
-                    (keydown.enter)="toggleSort(col)"
+                     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)"
@@ -25700,9 +25969,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         />
                       </td>
                     }
-                    @for (col of visibleColumns(); track colKey(col)) {
+                    @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)"
@@ -25710,30 +25980,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         [style.text-align]="col.align ?? 'start'"
                         (dblclick)="startEdit(row, col, $event)"
                         (keydown.enter)="startEdit(row, col, $event)"
-                        [tabindex]="isCellEditable(col) ? -1 : null"
+                        [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 (col.editType === 'select' && col.editOptions) {
+                          @if (editType(col) === 'select' && col.editOptions) {
                             <jv-select
                               [options]="getEditOptions(col)"
                               [modelValue]="getEditValue(row, col)"
                               (selectionChange)="onEditValueChange(row, col, $event)"
                             />
-                          } @else if (col.editType === 'boolean') {
+                          } @else if (editType(col) === 'boolean') {
                             <input
                               type="checkbox"
                               class="jv-grid-checkbox"
-                              [checked]="getCellValue(row, col) === true"
-                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [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]="col.editType === 'number' ? 'number' : 'text'"
+                              [type]="inputType(col)"
                               [value]="getEditValue(row, col)"
-                              (blur)="commitEdit(row, col, $any($event.target).value)"
-                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (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()"
                               autofocus
                             />
@@ -25741,10 +26019,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         } @else {
                           @let value = getCellValue(row, col);
                           @if (col.type === 'boolean') {
-                            @if (value) {
-                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            @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" aria-label="false">✗</span>
+                              <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) }}
@@ -25781,13 +26059,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
 
-      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+      @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">
-            <jv-button
+            <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"
@@ -25827,8 +26113,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </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-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"] }]
-        }], 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"] }] } });
+  `, 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 {
     translationService = inject(JvTranslationService);