@alaarab/ogrid-js 2.1.3 → 2.1.4

package/dist/esm/components/InlineCellEditor.js

@@ -1,434 +0,0 @@
-import { getCellValue } from '@alaarab/ogrid-core';
-const EDITOR_STYLE = {
-    position: 'absolute',
-    zIndex: '1000',
-    boxSizing: 'border-box',
-    border: '2px solid var(--ogrid-selection, #217346)',
-    background: 'var(--ogrid-bg, #fff)',
-    color: 'var(--ogrid-fg, #242424)',
-    outline: 'none',
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-};
-export class InlineCellEditor {
-    constructor(container) {
-        this.editor = null;
-        this.editingCell = null;
-        this.editingCellElement = null;
-        this.onCommit = null;
-        this.onCancel = null;
-        this.onAfterCommit = null;
-        this.container = container;
-    }
-    startEdit(rowId, columnId, item, column, cell, onCommit, onCancel, onAfterCommit) {
-        this.closeEditor();
-        this.editingCell = { rowId, columnId };
-        this.editingCellElement = cell;
-        this.onCommit = onCommit;
-        this.onCancel = onCancel;
-        this.onAfterCommit = onAfterCommit ?? null;
-        const value = getCellValue(item, column);
-        const rect = cell.getBoundingClientRect();
-        const containerRect = this.container.getBoundingClientRect();
-        const editor = this.createEditor(column, item, value, cell);
-        editor.style.position = 'absolute';
-        editor.style.left = `${rect.left - containerRect.left + this.container.scrollLeft}px`;
-        editor.style.top = `${rect.top - containerRect.top + this.container.scrollTop}px`;
-        editor.style.width = `${rect.width}px`;
-        editor.style.height = `${rect.height}px`;
-        this.editor = editor;
-        this.container.appendChild(editor);
-        editor.focus();
-        // Position dropdown with fixed positioning to escape container overflow
-        const dropdownEl = editor.querySelector('[role="listbox"]');
-        if (dropdownEl) {
-            const maxH = 200;
-            const spaceBelow = window.innerHeight - rect.bottom;
-            const flipUp = spaceBelow < maxH && rect.top > spaceBelow;
-            dropdownEl.style.position = 'fixed';
-            dropdownEl.style.left = `${rect.left}px`;
-            dropdownEl.style.width = `${rect.width}px`;
-            dropdownEl.style.maxHeight = `${maxH}px`;
-            dropdownEl.style.zIndex = '9999';
-            dropdownEl.style.right = 'auto';
-            if (flipUp) {
-                dropdownEl.style.top = 'auto';
-                dropdownEl.style.bottom = `${window.innerHeight - rect.top}px`;
-            }
-            else {
-                dropdownEl.style.top = `${rect.bottom}px`;
-            }
-        }
-    }
-    /** Returns the cell currently being edited, or null if no editor is open. */
-    getEditingCell() {
-        return this.editingCell;
-    }
-    closeEditor() {
-        // Reset visibility on the cell that was being edited (Bug 1 & 2 fix:
-        // the renderer sets visibility:hidden on the editing cell, and it may
-        // not re-render before the next click lands, so we clear it explicitly).
-        // Look up the cell by data attributes since the original element reference
-        // may have been replaced by a re-render.
-        if (this.editingCell && this.container.isConnected) {
-            const { rowId, columnId } = this.editingCell;
-            const row = this.container.querySelector(`tr[data-row-id="${rowId}"]`);
-            if (row) {
-                const td = row.querySelector(`td[data-column-id="${columnId}"]`);
-                if (td) {
-                    td.style.visibility = '';
-                }
-            }
-        }
-        if (this.editingCellElement) {
-            // Also reset the original element if it's still connected in the DOM
-            if (this.editingCellElement.isConnected) {
-                this.editingCellElement.style.visibility = '';
-            }
-            this.editingCellElement = null;
-        }
-        if (this.editor) {
-            this.editor.remove();
-            this.editor = null;
-        }
-        this.editingCell = null;
-        this.onCommit = null;
-        this.onCancel = null;
-        this.onAfterCommit = null;
-    }
-    createEditor(column, item, value, cell) {
-        const editorType = column.cellEditor;
-        if (typeof editorType === 'function') {
-            const context = {
-                value,
-                onValueChange: (newValue) => {
-                    if (this.editingCell) {
-                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, newValue);
-                    }
-                },
-                onCommit: () => this.closeEditor(),
-                onCancel: () => {
-                    this.onCancel?.();
-                    this.closeEditor();
-                },
-                item,
-                column,
-                cell,
-                cellEditorParams: column.cellEditorParams,
-            };
-            return editorType(context);
-        }
-        // Built-in editor types
-        if (editorType === 'checkbox' || column.type === 'boolean') {
-            return this.createCheckboxEditor(value);
-        }
-        if (editorType === 'select') {
-            return this.createSelectEditor(value, column);
-        }
-        if (editorType === 'richSelect') {
-            return this.createRichSelectEditor(value, column);
-        }
-        if (editorType === 'date' || column.type === 'date') {
-            return this.createDateEditor(value);
-        }
-        // Default: text editor
-        return this.createTextEditor(value);
-    }
-    /**
-     * Shared factory for text/date input editors — both types have identical event handling,
-     * differing only in input.type and initial value formatting.
-     */
-    createInputEditor(type, initialValue) {
-        const input = document.createElement('input');
-        input.type = type;
-        input.value = initialValue;
-        Object.assign(input.style, EDITOR_STYLE);
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
-                if (this.editingCell) {
-                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-                }
-                const afterCommit = this.onAfterCommit;
-                this.closeEditor();
-                afterCommit?.(); // Move active cell down after closing
-            }
-            else if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.onCancel?.();
-                this.closeEditor();
-            }
-        });
-        input.addEventListener('blur', () => {
-            if (this.editingCell) {
-                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-            }
-            this.closeEditor();
-        });
-        setTimeout(() => input.select(), 0);
-        return input;
-    }
-    createTextEditor(value) {
-        return this.createInputEditor('text', value != null ? String(value) : '');
-    }
-    createCheckboxEditor(value) {
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.checked = Boolean(value);
-        Object.assign(input.style, EDITOR_STYLE);
-        input.style.width = '20px';
-        input.style.height = '20px';
-        input.addEventListener('change', () => {
-            if (this.editingCell) {
-                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.checked);
-            }
-            this.closeEditor();
-        });
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.onCancel?.();
-                this.closeEditor();
-            }
-        });
-        return input;
-    }
-    createDateEditor(value) {
-        let initialValue = '';
-        if (value != null) {
-            const dateStr = String(value);
-            if (dateStr.match(/^\d{4}-\d{2}-\d{2}/)) {
-                initialValue = dateStr.substring(0, 10);
-            }
-        }
-        return this.createInputEditor('date', initialValue);
-    }
-    createSelectEditor(value, column) {
-        const values = column.cellEditorParams?.values ?? [];
-        const formatValue = column.cellEditorParams?.formatValue;
-        const getDisplayText = (v) => formatValue ? formatValue(v) : (v != null ? String(v) : '');
-        const wrapper = document.createElement('div');
-        Object.assign(wrapper.style, EDITOR_STYLE);
-        wrapper.style.padding = '6px 10px';
-        wrapper.style.display = 'flex';
-        wrapper.style.alignItems = 'center';
-        wrapper.tabIndex = 0;
-        // Display current value + chevron
-        const display = document.createElement('div');
-        display.style.display = 'flex';
-        display.style.alignItems = 'center';
-        display.style.justifyContent = 'space-between';
-        display.style.width = '100%';
-        display.style.cursor = 'pointer';
-        display.style.fontSize = '13px';
-        const valueSpan = document.createElement('span');
-        valueSpan.textContent = getDisplayText(value);
-        display.appendChild(valueSpan);
-        const chevron = document.createElement('span');
-        chevron.textContent = '\u25BE';
-        chevron.style.marginLeft = '4px';
-        chevron.style.fontSize = '10px';
-        chevron.style.opacity = '0.5';
-        display.appendChild(chevron);
-        wrapper.appendChild(display);
-        // Dropdown list
-        const dropdown = document.createElement('div');
-        dropdown.setAttribute('role', 'listbox');
-        dropdown.style.position = 'absolute';
-        dropdown.style.top = '100%';
-        dropdown.style.left = '0';
-        dropdown.style.right = '0';
-        dropdown.style.maxHeight = '200px';
-        dropdown.style.overflowY = 'auto';
-        dropdown.style.backgroundColor = 'var(--ogrid-bg, #fff)';
-        dropdown.style.border = '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))';
-        dropdown.style.zIndex = '1001';
-        dropdown.style.boxShadow = '0 4px 16px rgba(0,0,0,0.2)';
-        wrapper.appendChild(dropdown);
-        let highlightedIndex = Math.max(values.findIndex((v) => String(v) === String(value)), 0);
-        // Build all option elements once
-        const buildOptions = () => {
-            dropdown.innerHTML = '';
-            for (let i = 0; i < values.length; i++) {
-                const val = values[i];
-                const option = document.createElement('div');
-                option.setAttribute('role', 'option');
-                option.setAttribute('aria-selected', String(i === highlightedIndex));
-                option.textContent = getDisplayText(val);
-                option.style.padding = '6px 8px';
-                option.style.cursor = 'pointer';
-                option.style.color = 'var(--ogrid-fg, #242424)';
-                if (i === highlightedIndex) {
-                    option.style.background = 'var(--ogrid-bg-hover, #e8f0fe)';
-                }
-                option.addEventListener('mousedown', (e) => {
-                    e.preventDefault();
-                    if (this.editingCell) {
-                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, val);
-                    }
-                    this.closeEditor();
-                });
-                dropdown.appendChild(option);
-            }
-        };
-        // Only update CSS class on old/new highlighted item — avoids rebuilding the DOM
-        const updateHighlight = (prevIndex, nextIndex) => {
-            const prev = dropdown.children[prevIndex];
-            const next = dropdown.children[nextIndex];
-            if (prev) {
-                prev.style.background = '';
-                prev.setAttribute('aria-selected', 'false');
-            }
-            if (next) {
-                next.style.background = 'var(--ogrid-bg-hover, #e8f0fe)';
-                next.setAttribute('aria-selected', 'true');
-            }
-        };
-        const scrollHighlightedIntoView = () => {
-            const highlighted = dropdown.children[highlightedIndex];
-            highlighted?.scrollIntoView({ block: 'nearest' });
-        };
-        buildOptions();
-        wrapper.addEventListener('keydown', (e) => {
-            switch (e.key) {
-                case 'ArrowDown': {
-                    e.preventDefault();
-                    const prevDown = highlightedIndex;
-                    highlightedIndex = Math.min(highlightedIndex + 1, values.length - 1);
-                    updateHighlight(prevDown, highlightedIndex);
-                    scrollHighlightedIntoView();
-                    break;
-                }
-                case 'ArrowUp': {
-                    e.preventDefault();
-                    const prevUp = highlightedIndex;
-                    highlightedIndex = Math.max(highlightedIndex - 1, 0);
-                    updateHighlight(prevUp, highlightedIndex);
-                    scrollHighlightedIntoView();
-                    break;
-                }
-                case 'Enter':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (values.length > 0 && highlightedIndex < values.length) {
-                        if (this.editingCell) {
-                            this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, values[highlightedIndex]);
-                        }
-                        const afterCommit = this.onAfterCommit;
-                        this.closeEditor();
-                        afterCommit?.();
-                    }
-                    break;
-                case 'Tab':
-                    e.preventDefault();
-                    if (values.length > 0 && highlightedIndex < values.length) {
-                        if (this.editingCell) {
-                            this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, values[highlightedIndex]);
-                        }
-                        this.closeEditor();
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.onCancel?.();
-                    this.closeEditor();
-                    break;
-            }
-        });
-        return wrapper;
-    }
-    createRichSelectEditor(value, column) {
-        const wrapper = document.createElement('div');
-        Object.assign(wrapper.style, EDITOR_STYLE);
-        wrapper.style.padding = '0';
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.value = value != null ? String(value) : '';
-        input.style.width = '100%';
-        input.style.border = 'none';
-        input.style.outline = 'none';
-        input.style.padding = '4px';
-        input.style.boxSizing = 'border-box';
-        input.style.background = 'var(--ogrid-bg, #fff)';
-        input.style.color = 'var(--ogrid-fg, rgba(0, 0, 0, 0.87))';
-        wrapper.appendChild(input);
-        const dropdown = document.createElement('div');
-        dropdown.style.position = 'absolute';
-        dropdown.style.top = '100%';
-        dropdown.style.left = '0';
-        dropdown.style.width = '100%';
-        dropdown.style.maxHeight = '200px';
-        dropdown.style.overflowY = 'auto';
-        dropdown.style.backgroundColor = 'var(--ogrid-bg, #fff)';
-        dropdown.style.border = '1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))';
-        dropdown.style.zIndex = '1001';
-        wrapper.appendChild(dropdown);
-        const values = column.cellEditorParams?.values ?? [];
-        const formatValue = column.cellEditorParams?.formatValue ?? ((v) => String(v));
-        const renderOptions = (filter) => {
-            dropdown.innerHTML = '';
-            const filtered = values.filter((v) => String(formatValue(v)).toLowerCase().includes(filter.toLowerCase()));
-            for (const val of filtered) {
-                const option = document.createElement('div');
-                option.textContent = String(formatValue(val));
-                option.style.padding = '4px 8px';
-                option.style.cursor = 'pointer';
-                option.addEventListener('mousedown', (e) => {
-                    e.preventDefault();
-                    if (this.editingCell) {
-                        this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, val);
-                    }
-                    this.closeEditor();
-                });
-                option.addEventListener('mouseenter', () => {
-                    option.style.backgroundColor = 'var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04))';
-                }, { passive: true });
-                option.addEventListener('mouseleave', () => {
-                    option.style.backgroundColor = 'var(--ogrid-bg, #fff)';
-                }, { passive: true });
-                dropdown.appendChild(option);
-            }
-        };
-        input.addEventListener('input', () => {
-            renderOptions(input.value);
-        });
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                e.stopPropagation(); // Prevent grid wrapper from re-opening the editor
-                if (this.editingCell) {
-                    this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-                }
-                const afterCommit = this.onAfterCommit;
-                this.closeEditor();
-                afterCommit?.(); // Move active cell down after closing
-            }
-            else if (e.key === 'Escape') {
-                e.preventDefault();
-                e.stopPropagation();
-                this.onCancel?.();
-                this.closeEditor();
-            }
-        });
-        input.addEventListener('blur', (e) => {
-            const related = e.relatedTarget;
-            if (related && this.editor?.contains(related)) {
-                return; // Focus moved within the editor (e.g., to dropdown), don't close
-            }
-            if (this.editingCell) {
-                this.onCommit?.(this.editingCell.rowId, this.editingCell.columnId, input.value);
-            }
-            this.closeEditor();
-        });
-        renderOptions('');
-        setTimeout(() => input.select(), 0);
-        return wrapper;
-    }
-    destroy() {
-        this.closeEditor();
-    }
-}

package/dist/esm/components/MarchingAntsOverlay.js

@@ -1,156 +0,0 @@
-import { injectGlobalStyles, measureRange as measureRangeCore, rangesEqual } from '@alaarab/ogrid-core';
-/**
- * Measure the bounding rect of a range within a container, with scroll offsets.
- * This variant adds scroll offsets for the JS implementation's scrollable container.
- */
-function measureRange(container, range, colOffset) {
-    const rect = measureRangeCore(container, range, colOffset);
-    if (!rect)
-        return null;
-    // Add scroll offsets for JS implementation's scrollable container
-    return {
-        top: rect.top + container.scrollTop,
-        left: rect.left + container.scrollLeft,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-/**
- * MarchingAntsOverlay — renders SVG overlays on top of the grid:
- * 1. Selection range: solid green border
- * 2. Copy/Cut range: animated dashed border (marching ants)
- *
- * Vanilla JS equivalent of React's MarchingAntsOverlay component.
- */
-export class MarchingAntsOverlay {
-    constructor(container, colOffset = 0) {
-        this.selSvg = null;
-        this.clipSvg = null;
-        this.selectionRange = null;
-        this.copyRange = null;
-        this.cutRange = null;
-        this.rafHandle = 0;
-        this.layoutVersion = 0; // Tracks layout changes to force re-measurement
-        this.container = container;
-        this.colOffset = colOffset;
-        injectGlobalStyles('ogrid-marching-ants-keyframes', '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}');
-        // The container must be positioned for absolute SVGs
-        const pos = getComputedStyle(container).position;
-        if (pos === 'static' || pos === '') {
-            container.style.position = 'relative';
-        }
-    }
-    update(selectionRange, copyRange, cutRange, layoutVersion) {
-        // Track layout changes separately from range changes
-        const layoutChanged = layoutVersion !== undefined && layoutVersion !== this.layoutVersion;
-        if (layoutChanged && layoutVersion !== undefined) {
-            this.layoutVersion = layoutVersion;
-        }
-        // Skip if nothing changed (ranges or layout)
-        if (!layoutChanged &&
-            rangesEqual(this.selectionRange, selectionRange) &&
-            rangesEqual(this.copyRange, copyRange) &&
-            rangesEqual(this.cutRange, cutRange)) {
-            return;
-        }
-        this.selectionRange = selectionRange;
-        this.copyRange = copyRange;
-        this.cutRange = cutRange;
-        // Delay one frame so cells are rendered
-        if (this.rafHandle)
-            cancelAnimationFrame(this.rafHandle);
-        this.rafHandle = requestAnimationFrame(() => {
-            this.rafHandle = 0;
-            this.render();
-        });
-    }
-    render() {
-        const clipRange = this.copyRange ?? this.cutRange;
-        // Selection range SVG
-        const selRect = this.selectionRange
-            ? measureRange(this.container, this.selectionRange, this.colOffset)
-            : null;
-        // When clipboard range matches selection, hide selection border so marching ants show
-        const clipRangeMatchesSel = this.selectionRange != null &&
-            clipRange != null &&
-            rangesEqual(this.selectionRange, clipRange);
-        if (selRect && !clipRangeMatchesSel) {
-            if (!this.selSvg) {
-                this.selSvg = this.createSvg(4);
-                this.container.appendChild(this.selSvg);
-            }
-            this.positionSvg(this.selSvg, selRect);
-            const rect = this.selSvg.querySelector('rect');
-            if (rect) {
-                rect.setAttribute('width', String(Math.max(0, selRect.width - 2)));
-                rect.setAttribute('height', String(Math.max(0, selRect.height - 2)));
-                rect.setAttribute('stroke', 'var(--ogrid-selection, #217346)');
-                rect.setAttribute('stroke-width', '2');
-                rect.removeAttribute('stroke-dasharray');
-                rect.style.animation = '';
-            }
-        }
-        else {
-            this.removeSvg('sel');
-        }
-        // Copy/Cut range SVG (marching ants)
-        const clipRect = clipRange
-            ? measureRange(this.container, clipRange, this.colOffset)
-            : null;
-        if (clipRect) {
-            if (!this.clipSvg) {
-                this.clipSvg = this.createSvg(5);
-                this.container.appendChild(this.clipSvg);
-            }
-            this.positionSvg(this.clipSvg, clipRect);
-            const rect = this.clipSvg.querySelector('rect');
-            if (rect) {
-                rect.setAttribute('width', String(Math.max(0, clipRect.width - 2)));
-                rect.setAttribute('height', String(Math.max(0, clipRect.height - 2)));
-                rect.setAttribute('stroke', 'var(--ogrid-selection, #217346)');
-                rect.setAttribute('stroke-width', '2');
-                rect.setAttribute('stroke-dasharray', '4 4');
-                rect.style.animation = 'ogrid-marching-ants 0.5s linear infinite';
-            }
-        }
-        else {
-            this.removeSvg('clip');
-        }
-    }
-    createSvg(zIndex) {
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('aria-hidden', 'true');
-        svg.style.position = 'absolute';
-        svg.style.pointerEvents = 'none';
-        svg.style.zIndex = String(zIndex);
-        svg.style.overflow = 'visible';
-        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        rect.setAttribute('x', '1');
-        rect.setAttribute('y', '1');
-        rect.setAttribute('fill', 'none');
-        svg.appendChild(rect);
-        return svg;
-    }
-    positionSvg(svg, rect) {
-        svg.style.top = `${rect.top}px`;
-        svg.style.left = `${rect.left}px`;
-        svg.style.width = `${rect.width}px`;
-        svg.style.height = `${rect.height}px`;
-    }
-    removeSvg(which) {
-        if (which === 'sel' && this.selSvg) {
-            this.selSvg.remove();
-            this.selSvg = null;
-        }
-        else if (which === 'clip' && this.clipSvg) {
-            this.clipSvg.remove();
-            this.clipSvg = null;
-        }
-    }
-    destroy() {
-        if (this.rafHandle)
-            cancelAnimationFrame(this.rafHandle);
-        this.removeSvg('sel');
-        this.removeSvg('clip');
-    }
-}

package/dist/esm/components/PaginationControls.js

@@ -1,85 +0,0 @@
-import { getPaginationViewModel } from '@alaarab/ogrid-core';
-export class PaginationControls {
-    constructor(container, state) {
-        this.el = null;
-        this.container = container;
-        this.state = state;
-    }
-    render(totalCount, pageSizeOptions) {
-        if (this.el)
-            this.el.remove();
-        const vm = getPaginationViewModel(this.state.page, this.state.pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined);
-        if (!vm)
-            return; // No pagination if totalCount is 0
-        this.el = document.createElement('div');
-        this.el.className = 'ogrid-pagination';
-        // Page size selector
-        const pageSizeDiv = document.createElement('div');
-        pageSizeDiv.className = 'ogrid-pagination-size';
-        const label = document.createElement('span');
-        label.textContent = 'Rows per page: ';
-        pageSizeDiv.appendChild(label);
-        const select = document.createElement('select');
-        select.className = 'ogrid-page-size-select';
-        for (const size of vm.pageSizeOptions) {
-            const option = document.createElement('option');
-            option.value = String(size);
-            option.textContent = String(size);
-            option.selected = size === this.state.pageSize;
-            select.appendChild(option);
-        }
-        select.addEventListener('change', () => {
-            this.state.setPageSize(Number(select.value));
-        });
-        pageSizeDiv.appendChild(select);
-        this.el.appendChild(pageSizeDiv);
-        // Page info
-        const info = document.createElement('span');
-        info.className = 'ogrid-pagination-info';
-        info.textContent = `${vm.startItem}-${vm.endItem} of ${totalCount}`;
-        this.el.appendChild(info);
-        // Navigation buttons
-        const nav = document.createElement('div');
-        nav.className = 'ogrid-pagination-nav';
-        const prevBtn = document.createElement('button');
-        prevBtn.textContent = '\u25C0';
-        prevBtn.className = 'ogrid-pagination-btn';
-        prevBtn.disabled = this.state.page === 1;
-        prevBtn.addEventListener('click', () => this.state.setPage(this.state.page - 1));
-        nav.appendChild(prevBtn);
-        // Start ellipsis
-        if (vm.showStartEllipsis) {
-            const ellipsis = document.createElement('span');
-            ellipsis.textContent = '...';
-            ellipsis.className = 'ogrid-pagination-ellipsis';
-            nav.appendChild(ellipsis);
-        }
-        // Page number buttons
-        for (const pageNum of vm.pageNumbers) {
-            const btn = document.createElement('button');
-            btn.textContent = String(pageNum);
-            btn.className = 'ogrid-pagination-btn' + (pageNum === this.state.page ? ' ogrid-pagination-active' : '');
-            btn.addEventListener('click', () => this.state.setPage(pageNum));
-            nav.appendChild(btn);
-        }
-        // End ellipsis
-        if (vm.showEndEllipsis) {
-            const ellipsis = document.createElement('span');
-            ellipsis.textContent = '...';
-            ellipsis.className = 'ogrid-pagination-ellipsis';
-            nav.appendChild(ellipsis);
-        }
-        const nextBtn = document.createElement('button');
-        nextBtn.textContent = '\u25B6';
-        nextBtn.className = 'ogrid-pagination-btn';
-        nextBtn.disabled = this.state.page === vm.totalPages;
-        nextBtn.addEventListener('click', () => this.state.setPage(this.state.page + 1));
-        nav.appendChild(nextBtn);
-        this.el.appendChild(nav);
-        this.container.appendChild(this.el);
-    }
-    destroy() {
-        this.el?.remove();
-        this.el = null;
-    }
-}