@dxos/lit-grid 0.8.3 → 0.8.4-main.f9ba587

package/dist/types/src/dx-grid.js

@@ -1,1347 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, nothing } from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { ref, createRef } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
-import { defaultColSize, defaultRowSize } from './defs';
-// eslint-disable-next-line unused-imports/no-unused-imports
-import './dx-grid-axis-resize-handle';
-import { DxAxisResize, DxEditRequest, DxGridCellsSelect, separator, } from './types';
-import { toCellIndex, gap, resizeTolerance, sizeColMin, sizeColMax, sizeRowMin, sizeRowMax, shouldSelect, selectionProps, cellSelected, closestAction, closestCell, targetIsPlane, resolveRowPlane, resolveColPlane, resolveFrozenPlane, isSameCell, isReadonly, } from './util';
-let DxGrid = class DxGrid extends LitElement {
-    constructor() {
-        var _a;
-        super();
-        this.gridId = 'default-grid-id';
-        this.rowDefault = {
-            grid: { size: defaultRowSize },
-        };
-        this.columnDefault = {
-            grid: { size: defaultColSize },
-        };
-        this.rows = { grid: {} };
-        this.columns = { grid: {} };
-        this.initialCells = { grid: {} };
-        this.mode = 'browse';
-        this.limitColumns = Infinity;
-        this.limitRows = Infinity;
-        this.frozen = {};
-        this.overscroll = undefined;
-        this.activeRefs = '';
-        /**
-         * When this function is defined, it is used first to try to get a value for a cell,
-         * and otherwise will fall back to `cells`.
-         */
-        this.getCells = null;
-        this.cells = { grid: {} };
-        //
-        // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
-        //
-        this.posInline = 0;
-        this.posBlock = 0;
-        //
-        // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
-        //
-        this.sizeInline = 0;
-        this.sizeBlock = 0;
-        //
-        // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
-        //
-        this.visColMinStart = 0;
-        this.visRowMinStart = 0;
-        //
-        // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
-        //
-        this.binInlineMin = 0;
-        this.binInlineMax = defaultColSize;
-        this.binBlockMin = 0;
-        this.binBlockMax = defaultRowSize;
-        //
-        // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
-        // the viewport. These start with naïve values that are updated before first contentful render.
-        //
-        this.visColMin = 0;
-        this.visColMax = 1;
-        this.visRowMin = 0;
-        this.visRowMax = 1;
-        //
-        // `template` is the rendered value of `grid-{axis}-template`.
-        //
-        this.templateGridColumns = '0';
-        this.templatefrozenColsStart = '';
-        this.templatefrozenColsEnd = '';
-        this.templateGridRows = '0';
-        this.templatefrozenRowsStart = '';
-        this.templatefrozenRowsEnd = '';
-        //
-        // Focus, selection, and resize states
-        //
-        this.pointer = null;
-        this.colSizes = { grid: {} };
-        this.rowSizes = { grid: {} };
-        this.focusActive = false;
-        this.focusedCell = { plane: 'grid', col: 0, row: 0 };
-        this.selectionStart = { plane: 'grid', col: 0, row: 0 };
-        this.selectionEnd = { plane: 'grid', col: 0, row: 0 };
-        //
-        // Limits
-        //
-        this.intrinsicInlineSize = Infinity;
-        this.intrinsicBlockSize = Infinity;
-        this.totalIntrinsicInlineSize = Infinity;
-        this.totalIntrinsicBlockSize = Infinity;
-        this.handlePointerDown = (event) => {
-            if (this.mode === 'browse' && event.pointerType === 'touch') {
-                this.pointer = { state: 'panning', pageX: event.pageX, pageY: event.pageY };
-            }
-            else if (event.isPrimary) {
-                const { action, actionEl } = closestAction(event.target);
-                if (action && action === 'cell') {
-                    if (event.shiftKey && this.mode === 'browse') {
-                        // Prevent focus moving so the pointerup handler can move selectionEnd.
-                        event.preventDefault();
-                        this.pointer = { state: 'selecting' };
-                    }
-                    else {
-                        const cellCoords = closestCell(event.target, actionEl);
-                        if (cellCoords &&
-                            this.mode !== 'edit' &&
-                            !this.cellReadonly(cellCoords.col, cellCoords.row, cellCoords.plane)) {
-                            this.pointer = { state: 'maybeSelecting', pageX: event.pageX, pageY: event.pageY };
-                            this.selectionStart = cellCoords;
-                            this.selectionEnd = cellCoords;
-                            this.dispatchSelectionChange();
-                        }
-                        if (this.mode === 'edit-select') {
-                            // Prevent focus moving when editing while selection is possible
-                            event.preventDefault();
-                        }
-                        else if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
-                            this.dispatchEditRequest();
-                        }
-                    }
-                }
-            }
-        };
-        this.handlePointerUp = (event) => {
-            var _a;
-            if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'selecting') {
-                const cell = closestCell(event.target);
-                if (cell) {
-                    this.setSelectionEnd(cell);
-                }
-            }
-            // TODO(thure): If this was panning via touch, continue panning based on final velocity.
-            this.pointer = null;
-        };
-        this.handlePointerMove = (event) => {
-            var _a, _b;
-            if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.state) === 'panning') {
-                const panEvent = event;
-                panEvent.deltaX = this.pointer.pageX - event.pageX;
-                panEvent.deltaY = this.pointer.pageY - event.pageY;
-                this.pointer.pageX = event.pageX;
-                this.pointer.pageY = event.pageY;
-                this.handleWheel(panEvent);
-            }
-            else if (shouldSelect(this.pointer, event)) {
-                this.pointer = { state: 'selecting' };
-            }
-            else if (((_b = this.pointer) === null || _b === void 0 ? void 0 : _b.state) === 'selecting') {
-                const cell = closestCell(event.target);
-                if (cell &&
-                    cell.plane === this.selectionStart.plane &&
-                    (cell.col !== this.selectionEnd.col || cell.row !== this.selectionEnd.row)) {
-                    this.setSelectionEnd(cell);
-                }
-            }
-        };
-        //
-        // Resize & reposition handlers, observer, ref
-        //
-        this.observer = new ResizeObserver((entries) => {
-            var _a, _b, _c;
-            const { inlineSize, blockSize } = (_c = (_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentBoxSize) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : {
-                inlineSize: 0,
-                blockSize: 0,
-            };
-            if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||
-                Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
-                // console.info('[updating bounds]', 'resize', [inlineSize - this.sizeInline, blockSize - this.sizeBlock]);
-                this.sizeInline = inlineSize;
-                this.sizeBlock = blockSize;
-                this.updateVis();
-                queueMicrotask(() => this.updatePos());
-            }
-        });
-        this.gridRef = createRef();
-        this.viewportRef = createRef();
-        this.maybeUpdateVisInline = () => {
-            if (this.posInline < this.binInlineMin || this.posInline >= this.binInlineMax) {
-                this.updateVisInline();
-            }
-        };
-        this.maybeUpdateVisBlock = () => {
-            if (this.posBlock < this.binBlockMin || this.posBlock >= this.binBlockMax) {
-                this.updateVisBlock();
-            }
-        };
-        this.handleTopLevelWheel = (event) => {
-            var _a;
-            if (event.gridId === ((_a = this.gridId) !== null && _a !== void 0 ? _a : 'never')) {
-                if (this.overscroll === 'trap' ||
-                    (this.overscroll === 'inline' && event.overscrollInline === 0) ||
-                    (this.overscroll === 'block' && event.overscrollBlock === 0)) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            }
-        };
-        this.handleWheel = (event) => {
-            if (this.mode === 'browse') {
-                const nextPosInline = this.posInline + event.deltaX;
-                const nextPosBlock = this.posBlock + event.deltaY;
-                const maxPosInline = this.maxPosInline();
-                const maxPosBlock = this.maxPosBlock();
-                this.updatePos(nextPosInline, nextPosBlock, maxPosInline, maxPosBlock);
-                event.overscrollInline =
-                    nextPosInline <= 0 ? nextPosInline : nextPosInline > maxPosInline ? nextPosInline - maxPosInline : 0;
-                event.overscrollBlock =
-                    nextPosBlock <= 0 ? nextPosBlock : nextPosBlock > maxPosBlock ? nextPosBlock - maxPosBlock : 0;
-                event.gridId = this.gridId;
-            }
-        };
-        // Wheel, top-level and element-level
-        (_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleTopLevelWheel, { passive: false });
-        this.addEventListener('wheel', this.handleWheel);
-        // Custom event(s)
-        this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal);
-        // Standard events
-        this.addEventListener('pointerdown', this.handlePointerDown);
-        this.addEventListener('pointermove', this.handlePointerMove);
-        this.addEventListener('pointerup', this.handlePointerUp);
-        this.addEventListener('pointerleave', this.handlePointerUp);
-        this.addEventListener('focus', this.handleFocus, { capture: true });
-        this.addEventListener('blur', this.handleBlur, { capture: true });
-        this.addEventListener('keydown', this.handleKeydown);
-    }
-    //
-    // Primary pointer and keyboard handlers
-    //
-    dispatchEditRequest(initialContent) {
-        this.snapPosToFocusedCell();
-        if (!this.cellReadonly(this.focusedCell.col, this.focusedCell.row, this.focusedCell.plane)) {
-            // Without deferring, the event dispatches before `focusedCellBox` can get updated bounds of the cell, hence:
-            queueMicrotask(() => {
-                const cellIndex = toCellIndex(this.focusedCell);
-                return this.dispatchEvent(new DxEditRequest({
-                    cellIndex,
-                    cellBox: this.focusedCellBox(),
-                    cellElement: this.focusedCellElement(),
-                    initialContent,
-                }));
-            });
-        }
-    }
-    dispatchSelectionChange() {
-        return this.dispatchEvent(new DxGridCellsSelect({
-            start: this.selectionStart,
-            end: this.selectionEnd,
-        }));
-    }
-    /**
-     * Increments focus among all theoretically possible cells in a plane, cycling as tab would but accounting for the
-     * theoretical bounds of the grid plane (handling infinite planes heuristically).
-     */
-    incrementFocusWithinPlane(event) {
-        const reverse = event.shiftKey;
-        const colPlane = resolveColPlane(this.focusedCell.plane);
-        const rowPlane = resolveRowPlane(this.focusedCell.plane);
-        const colMax = (colPlane === 'grid' ? this.limitColumns : this.frozen[colPlane]) - 1;
-        const rowMax = (rowPlane === 'grid' ? this.limitRows : this.frozen[rowPlane]) - 1;
-        if (reverse ? this.focusedCell.col - 1 < 0 : this.focusedCell.col + 1 > colMax) {
-            if (reverse ? this.focusedCell.row - 1 < 0 : this.focusedCell.row + 1 > rowMax) {
-                this.setFocusedCell({
-                    plane: this.focusedCell.plane,
-                    row: reverse && Number.isFinite(rowMax) ? rowMax : 0,
-                    col: reverse && Number.isFinite(colMax) ? colMax : 0,
-                });
-            }
-            else {
-                this.setFocusedCell({
-                    plane: this.focusedCell.plane,
-                    row: this.focusedCell.row + (reverse ? -1 : 1),
-                    col: reverse && Number.isFinite(colMax) ? colMax : 0,
-                });
-            }
-        }
-        else {
-            this.setFocusedCell({ ...this.focusedCell, col: this.focusedCell.col + (reverse ? -1 : 1) });
-        }
-    }
-    /**
-     * Increments focus in a specific direction without cycling.
-     */
-    moveFocusOrSelectionEndWithinPlane(event) {
-        const current = event.shiftKey ? this.selectionEnd : this.focusedCell;
-        const deltaCol = event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
-        const deltaRow = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0;
-        const nextCol = this.clampCol(current, deltaCol);
-        const nextRow = this.clampRow(current, deltaRow);
-        if (event.shiftKey) {
-            this.setSelectionEnd({ ...this.selectionEnd, col: nextCol, row: nextRow });
-        }
-        else {
-            this.setFocusedCell({ ...this.focusedCell, row: nextRow, col: nextCol });
-        }
-    }
-    moveFocusBetweenPlanes(event, plane) {
-        var _a, _b, _c, _d;
-        const planeElement = (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-dx-grid-plane="${plane}"]`);
-        if (planeElement) {
-            const axis = event.key === 'ArrowUp' || event.key === 'ArrowDown' ? 'col' : 'row';
-            const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
-            const planeAxis = planeElement === null || planeElement === void 0 ? void 0 : planeElement.getAttribute(`data-dx-grid-plane-${axis}`);
-            const adjacentPlanes = Array.from((_c = (_b = this.gridRef.value) === null || _b === void 0 ? void 0 : _b.querySelectorAll(`[data-dx-grid-plane-${axis}="${planeAxis}"]`)) !== null && _c !== void 0 ? _c : [planeElement]).filter((el) => !!el);
-            (_d = adjacentPlanes[(adjacentPlanes.length + adjacentPlanes.indexOf(planeElement) + delta) % adjacentPlanes.length]) === null || _d === void 0 ? void 0 : _d.focus({ preventScroll: true });
-        }
-    }
-    moveFocusIntoPlane(plane) {
-        var _a;
-        if (this.focusedCell.plane !== plane) {
-            const colPlane = resolveColPlane(plane);
-            const rowPlane = resolveRowPlane(plane);
-            this.focusedCell = {
-                plane,
-                col: colPlane === 'grid' ? this.visColMin : 0,
-                row: rowPlane === 'grid' ? this.visRowMin : 0,
-            };
-        }
-        (_a = this.focusedCellElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-    }
-    moveFocusToPlane() {
-        var _a;
-        (_a = this.focusedPlaneElement()) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-    }
-    handleKeydown(event) {
-        if (this.focusActive && this.mode === 'browse') {
-            const plane = targetIsPlane(event.target);
-            if (plane) {
-                switch (event.key) {
-                    case 'ArrowDown':
-                    case 'ArrowUp':
-                    case 'ArrowRight':
-                    case 'ArrowLeft':
-                        event.preventDefault();
-                        this.moveFocusBetweenPlanes(event, plane);
-                        break;
-                    case 'Enter':
-                        event.preventDefault();
-                        this.moveFocusIntoPlane(plane);
-                        break;
-                }
-            }
-            else {
-                // Adjust cell-scope state
-                switch (event.key) {
-                    case 'ArrowDown':
-                    case 'ArrowUp':
-                    case 'ArrowRight':
-                    case 'ArrowLeft':
-                        event.preventDefault();
-                        this.moveFocusOrSelectionEndWithinPlane(event);
-                        break;
-                    case 'Tab':
-                        event.preventDefault();
-                        this.incrementFocusWithinPlane(event);
-                        break;
-                    case 'Escape':
-                        // Handle escape if selection is a superset of the focused cell.
-                        event.preventDefault();
-                        if (this.selectionStart.col !== this.selectionEnd.col ||
-                            this.selectionStart.row !== this.selectionEnd.row) {
-                            this.selectionStart = this.focusedCell;
-                            this.selectionEnd = this.focusedCell;
-                            this.dispatchSelectionChange();
-                        }
-                        else {
-                            this.moveFocusToPlane();
-                        }
-                        break;
-                    case 'Enter':
-                        event.preventDefault();
-                        this.dispatchEditRequest();
-                        break;
-                    default:
-                        if (event.key.length === 1 && event.key.match(/\P{Cc}/u) && !(event.metaKey || event.ctrlKey)) {
-                            this.dispatchEditRequest(event.key);
-                        }
-                        break;
-                }
-            }
-        }
-    }
-    //
-    // Accessors
-    //
-    colSize(c, plane) {
-        var _a, _b, _c, _d, _e;
-        const resolvedPlane = resolveColPlane(plane);
-        return (_e = (_c = (_b = (_a = this.colSizes) === null || _a === void 0 ? void 0 : _a[resolvedPlane]) === null || _b === void 0 ? void 0 : _b[c]) !== null && _c !== void 0 ? _c : (_d = this.columnDefault[resolvedPlane]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultColSize;
-    }
-    rowSize(r, plane) {
-        var _a, _b, _c, _d, _e;
-        const resolvedPlane = resolveRowPlane(plane);
-        return (_e = (_c = (_b = (_a = this.rowSizes) === null || _a === void 0 ? void 0 : _a[resolvedPlane]) === null || _b === void 0 ? void 0 : _b[r]) !== null && _c !== void 0 ? _c : (_d = this.rowDefault[resolvedPlane]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultRowSize;
-    }
-    cell(c, r, plane) {
-        var _a, _b, _c, _d, _e;
-        const index = `${c}${separator}${r}`;
-        return (_c = (_b = (_a = this.cells) === null || _a === void 0 ? void 0 : _a[plane]) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : (_e = (_d = this.initialCells) === null || _d === void 0 ? void 0 : _d[plane]) === null || _e === void 0 ? void 0 : _e[index];
-    }
-    cellActive(c, r, plane) {
-        return this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r;
-    }
-    setFocusedCell(nextCoords) {
-        if (this.focusedCell.plane !== nextCoords.plane ||
-            this.focusedCell.col !== nextCoords.col ||
-            this.focusedCell.row !== nextCoords.row) {
-            this.focusedCell = nextCoords;
-            this.selectionStart = nextCoords;
-            this.selectionEnd = nextCoords;
-            this.snapPosToFocusedCell();
-            this.dispatchSelectionChange();
-        }
-    }
-    // Internal utility for setting selection end.
-    setSelectionEnd(nextCoords) {
-        if (this.selectionEnd.plane !== nextCoords.plane ||
-            this.selectionEnd.col !== nextCoords.col ||
-            this.selectionEnd.row !== nextCoords.row) {
-            this.selectionEnd = nextCoords;
-            this.dispatchSelectionChange();
-        }
-    }
-    // Selection setter for consumers
-    setSelection(range) {
-        if (this.mode !== 'edit') {
-            this.selectionStart = range.start;
-            this.selectionEnd = range.end;
-            this.dispatchSelectionChange();
-        }
-    }
-    focusedCellBox() {
-        const cellElement = this.focusedCellElement();
-        const cellSize = {
-            inlineSize: this.colSize(this.focusedCell.col, this.focusedCell.plane),
-            blockSize: this.rowSize(this.focusedCell.row, this.focusedCell.plane),
-        };
-        if (!cellElement) {
-            return { insetInlineStart: NaN, insetBlockStart: NaN, ...cellSize };
-        }
-        const contentElement = cellElement.offsetParent;
-        // Note that storing `offset` in state causes performance issues, so instead the transform is parsed here.
-        const [_translate3d, inlineStr, blockStr] = contentElement.style.transform.split(/[()]|px,?\s?/);
-        const contentOffsetInline = parseFloat(inlineStr);
-        const contentOffsetBlock = parseFloat(blockStr);
-        const offsetParent = contentElement.offsetParent;
-        return {
-            insetInlineStart: cellElement.offsetLeft + contentOffsetInline + offsetParent.offsetLeft,
-            insetBlockStart: cellElement.offsetTop + contentOffsetBlock + offsetParent.offsetTop,
-            ...cellSize,
-        };
-    }
-    maxPosInline() {
-        return this.intrinsicInlineSize - this.sizeInline;
-    }
-    maxPosBlock() {
-        return this.intrinsicBlockSize - this.sizeBlock;
-    }
-    updatePosInline(inline, maxInline = this.maxPosInline()) {
-        this.posInline = Math.max(0, Math.min(maxInline, inline !== null && inline !== void 0 ? inline : this.posInline));
-        this.maybeUpdateVisInline();
-    }
-    updatePosBlock(block, maxBlock = this.maxPosBlock()) {
-        this.posBlock = Math.max(0, Math.min(maxBlock, block !== null && block !== void 0 ? block : this.posBlock));
-        this.maybeUpdateVisBlock();
-    }
-    updatePos(inline, block, maxInline, maxBlock) {
-        this.updatePosInline(inline, maxInline);
-        this.updatePosBlock(block, maxBlock);
-    }
-    updateVisInline() {
-        var _a, _b;
-        // todo: avoid starting from zero
-        let axisCursor = 0;
-        let pxCursor = this.colSize(axisCursor, 'grid');
-        while (pxCursor < this.posInline) {
-            axisCursor += 1;
-            pxCursor += this.colSize(axisCursor, 'grid') + gap;
-        }
-        this.visColMin = axisCursor;
-        this.visColMinStart = pxCursor - this.colSize(axisCursor, 'grid') - gap;
-        const visColMinEnd = pxCursor;
-        while (pxCursor < this.posInline + this.sizeInline) {
-            axisCursor += 1;
-            pxCursor += this.colSize(axisCursor, 'grid') + gap;
-        }
-        this.visColMax = Math.min(this.limitColumns, axisCursor + 1);
-        const visColMaxStart = pxCursor - this.colSize(axisCursor, 'grid') - gap;
-        const visColMaxEnd = pxCursor;
-        const bifurcateStart = visColMaxStart - this.sizeInline;
-        const bifurcateEnd = visColMaxEnd - this.sizeInline;
-        const bounds = [this.visColMinStart, visColMinEnd, bifurcateStart, bifurcateEnd].sort((a, b) => a - b);
-        let boundsCursor = 1;
-        while (bounds[boundsCursor] < this.posInline && boundsCursor < 3) {
-            boundsCursor += 1;
-        }
-        this.binInlineMin = bounds[boundsCursor - 1];
-        this.binInlineMax = bounds[boundsCursor];
-        this.templateGridColumns = [...Array(this.visColMax - this.visColMin)]
-            .map((_, c0) => `${this.colSize(this.visColMin + c0, 'grid')}px`)
-            .join(' ');
-        this.templatefrozenColsStart = [...Array((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0)]
-            .map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`)
-            .join(' ');
-        this.templatefrozenColsEnd = [...Array((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0)]
-            .map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`)
-            .join(' ');
-    }
-    updateVisBlock() {
-        var _a, _b;
-        // todo: avoid starting from zero
-        let axisCursor = 0;
-        let pxCursor = this.rowSize(axisCursor, 'grid');
-        while (pxCursor < this.posBlock) {
-            axisCursor += 1;
-            pxCursor += this.rowSize(axisCursor, 'grid') + gap;
-        }
-        this.visRowMin = axisCursor;
-        this.visRowMinStart = pxCursor - this.rowSize(axisCursor, 'grid') - gap;
-        const visRowMinEnd = pxCursor;
-        while (pxCursor < this.posBlock + this.sizeBlock) {
-            axisCursor += 1;
-            pxCursor += this.rowSize(axisCursor, 'grid') + gap;
-        }
-        this.visRowMax = Math.min(this.limitRows, axisCursor + 1);
-        const visRowMaxStart = pxCursor - this.rowSize(axisCursor, 'grid') - gap;
-        const visRowMaxEnd = pxCursor;
-        const bifurcateStart = visRowMaxStart - this.sizeBlock;
-        const bifurcateEnd = visRowMaxEnd - this.sizeBlock;
-        const bounds = [this.visRowMinStart, visRowMinEnd, bifurcateStart, bifurcateEnd].sort((a, b) => a - b);
-        let boundsCursor = 1;
-        while (bounds[boundsCursor] < this.posBlock && boundsCursor < 3) {
-            boundsCursor += 1;
-        }
-        this.binBlockMin = bounds[boundsCursor - 1];
-        this.binBlockMax = bounds[boundsCursor];
-        this.templateGridRows = [...Array(this.visRowMax - this.visRowMin)]
-            .map((_, r0) => `${this.rowSize(this.visRowMin + r0, 'grid')}px`)
-            .join(' ');
-        this.templatefrozenRowsStart = [...Array((_a = this.frozen.frozenRowsStart) !== null && _a !== void 0 ? _a : 0)]
-            .map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`)
-            .join(' ');
-        this.templatefrozenRowsEnd = [...Array((_b = this.frozen.frozenRowsEnd) !== null && _b !== void 0 ? _b : 0)]
-            .map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`)
-            .join(' ');
-    }
-    updateVis() {
-        this.updateVisInline();
-        this.updateVisBlock();
-    }
-    updateCells(includeFixed) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        this.cells.grid = this.getCells({
-            start: { col: this.visColMin, row: this.visRowMin },
-            end: { col: this.visColMax, row: this.visRowMax },
-        }, 'grid');
-        Object.entries(this.frozen)
-            .filter(([_, limit]) => limit && limit > 0)
-            .forEach(([plane, limit]) => {
-            this.cells[plane] = this.getCells(plane.startsWith('frozenRows')
-                ? {
-                    start: { col: this.visColMin, row: 0 },
-                    end: { col: this.visColMax, row: limit },
-                }
-                : {
-                    start: { col: 0, row: this.visRowMin },
-                    end: { col: limit, row: this.visRowMax },
-                }, plane);
-        });
-        if (includeFixed) {
-            if (((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0) > 0 && ((_b = this.frozen.frozenRowsStart) !== null && _b !== void 0 ? _b : 0) > 0) {
-                this.cells.fixedStartStart = this.getCells({
-                    start: { col: 0, row: 0 },
-                    end: { col: this.frozen.frozenColsStart, row: this.frozen.frozenRowsStart },
-                }, 'fixedStartStart');
-            }
-            if (((_c = this.frozen.frozenColsEnd) !== null && _c !== void 0 ? _c : 0) > 0 && ((_d = this.frozen.frozenRowsStart) !== null && _d !== void 0 ? _d : 0) > 0) {
-                this.cells.fixedStartEnd = this.getCells({
-                    start: { col: 0, row: 0 },
-                    end: { col: this.frozen.frozenColsEnd, row: this.frozen.frozenRowsStart },
-                }, 'fixedStartEnd');
-            }
-            if (((_e = this.frozen.frozenColsStart) !== null && _e !== void 0 ? _e : 0) > 0 && ((_f = this.frozen.frozenRowsEnd) !== null && _f !== void 0 ? _f : 0) > 0) {
-                this.cells.fixedEndStart = this.getCells({
-                    start: { col: 0, row: 0 },
-                    end: { col: this.frozen.frozenColsStart, row: this.frozen.frozenRowsEnd },
-                }, 'fixedEndStart');
-            }
-            if (((_g = this.frozen.frozenColsEnd) !== null && _g !== void 0 ? _g : 0) > 0 && ((_h = this.frozen.frozenRowsEnd) !== null && _h !== void 0 ? _h : 0) > 0) {
-                this.cells.fixedEndEnd = this.getCells({
-                    start: { col: 0, row: 0 },
-                    end: { col: this.frozen.frozenColsEnd, row: this.frozen.frozenRowsEnd },
-                }, 'fixedEndEnd');
-            }
-        }
-    }
-    // Focus handlers
-    setFocus(coords, snap = true) {
-        this.setFocusedCell(coords);
-        this.focusActive = true;
-        if (snap) {
-            this.snapPosToFocusedCell();
-        }
-    }
-    handleFocus(event) {
-        const cellCoords = closestCell(event.target);
-        if (cellCoords || targetIsPlane(event.target)) {
-            this.focusActive = true;
-            if (cellCoords) {
-                this.setFocusedCell(cellCoords);
-            }
-        }
-    }
-    handleBlur(event) {
-        // Only unset `focusActive` if focus is moving to an element outside the grid.
-        if (event.relatedTarget && !event.relatedTarget.closest(`[data-grid="${this.gridId}"]`)) {
-            this.focusActive = false;
-        }
-    }
-    focusedCellQuery() {
-        return `[data-dx-grid-plane=${this.focusedCell.plane}] [aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`;
-    }
-    focusedPlaneQuery() {
-        return `[data-dx-grid-plane=${this.focusedCell.plane}]`;
-    }
-    focusedCellElement() {
-        var _a;
-        return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedCellQuery());
-    }
-    focusedPlaneElement() {
-        var _a;
-        return (_a = this.gridRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(this.focusedPlaneQuery());
-    }
-    //
-    // `outOfVis` returns by how many rows/cols the focused cell is outside of the `vis` range for an axis, inset by a
-    // `delta`, otherwise zero if it is within that range.
-    //
-    focusedCellRowOutOfVis() {
-        return this.focusedCell.row <= this.visRowMin
-            ? this.focusedCell.row - this.visRowMin - 1
-            : this.focusedCell.row >= this.visRowMax - 1
-                ? this.focusedCell.row + 2 - this.visRowMax
-                : 0;
-    }
-    focusedCellColOutOfVis() {
-        return this.focusedCell.col <= this.visColMin
-            ? this.focusedCell.col - this.visColMin - 1
-            : this.focusedCell.col >= this.visColMax - 1
-                ? this.focusedCell.col + 2 - this.visColMax
-                : 0;
-    }
-    focusedCellOutOfVis() {
-        switch (this.focusedCell.plane) {
-            case 'grid':
-                return { row: this.focusedCellRowOutOfVis(), col: this.focusedCellColOutOfVis() };
-            case 'frozenRowsStart':
-            case 'frozenRowsEnd':
-                return { col: this.focusedCellColOutOfVis(), row: 0 };
-            case 'frozenColsStart':
-            case 'frozenColsEnd':
-                return { col: 0, row: this.focusedCellRowOutOfVis() };
-            default:
-                return { col: 0, row: 0 };
-        }
-    }
-    clampCol(coords, deltaCol = 0) {
-        const colPlane = resolveColPlane(coords.plane);
-        const colMax = (colPlane === 'grid' ? this.limitColumns : this.frozen[colPlane]) - 1;
-        return Math.max(0, Math.min(colMax, coords.col + deltaCol));
-    }
-    clampRow(coords, deltaRow = 0) {
-        const rowPlane = resolveRowPlane(coords.plane);
-        const rowMax = (rowPlane === 'grid' ? this.limitRows : this.frozen[rowPlane]) - 1;
-        return Math.max(0, Math.min(rowMax, coords.row + deltaRow));
-    }
-    /**
-     * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
-     */
-    refocus(increment = undefined, delta = 1) {
-        if (increment) {
-            switch (increment) {
-                case 'col': {
-                    this.focusedCell.col = this.clampCol(this.focusedCell, delta);
-                    break;
-                }
-                case 'row': {
-                    this.focusedCell.row = this.clampRow(this.focusedCell, delta);
-                    break;
-                }
-            }
-            this.snapPosToFocusedCell();
-        }
-        queueMicrotask(() => {
-            const cellElement = this.focusedCellElement();
-            if (cellElement) {
-                if (cellElement !== document.activeElement) {
-                    cellElement.focus({ preventScroll: true });
-                }
-            }
-            else {
-                this.moveFocusToPlane();
-            }
-        });
-    }
-    clampPosInline(nextPos) {
-        return Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, nextPos));
-    }
-    clampPosBlock(nextPos) {
-        return Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, nextPos));
-    }
-    /**
-     * Calculate the pixel offset for a given column in a plane.
-     * Sums all column sizes plus gaps up to the target column.
-     */
-    inlineOffset(col, plane) {
-        return [...Array(col)].reduce((acc, _, c0) => {
-            return acc + this.colSize(c0, plane) + gap;
-        }, 0);
-    }
-    /**
-     * Calculate the pixel offset for a given row in a plane.
-     * Sums all row sizes plus gaps up to the target row.
-     */
-    blockOffset(row, plane) {
-        return [...Array(row)].reduce((acc, _, r0) => {
-            return acc + this.rowSize(r0, plane) + gap;
-        }, 0);
-    }
-    /**
-     * Updates `pos` so that a cell in focus is fully within the viewport
-     */
-    snapPosToFocusedCell() {
-        const outOfVis = this.focusedCellOutOfVis();
-        if (outOfVis.col < 0) {
-            // align viewport start edge with focused cell start edge
-            this.posInline = this.clampPosInline(this.inlineOffset(this.focusedCell.col, 'grid'));
-            this.updateVisInline();
-        }
-        else if (outOfVis.col > 0) {
-            // align viewport end edge with focused cell end edge
-            this.posInline = this.clampPosInline(this.inlineOffset(this.focusedCell.col + 1, 'grid') - this.sizeInline - gap);
-            this.updateVisInline();
-        }
-        if (outOfVis.row < 0) {
-            // align viewport start edge with focused cell start edge
-            this.posBlock = this.clampPosBlock(this.blockOffset(this.focusedCell.row, 'grid'));
-            this.updateVisBlock();
-        }
-        else if (outOfVis.row > 0) {
-            // align viewport end edge with focused cell end edge
-            this.posBlock = this.clampPosBlock(this.blockOffset(this.focusedCell.row + 1, 'grid') - this.sizeBlock - gap);
-            this.updateVisBlock();
-        }
-    }
-    scrollToCoord({ coords }) {
-        const plane = coords.plane;
-        const { row, col } = coords;
-        this.updatePosBlock(this.blockOffset(row, plane));
-        this.updatePosInline(this.inlineOffset(col, plane));
-    }
-    scrollToColumn(col) {
-        this.updatePosInline(this.inlineOffset(col, 'grid'));
-    }
-    scrollToRow(row) {
-        this.updatePosBlock(this.blockOffset(row, 'grid'));
-    }
-    scrollToEndRow() {
-        this.updatePosBlock(Infinity);
-    }
-    //
-    // Map scroll DOM methods to virtualized value.
-    //
-    get scrollLeft() {
-        return this.posInline;
-    }
-    set scrollLeft(nextValue) {
-        this.posInline = nextValue;
-        this.maybeUpdateVisInline();
-    }
-    get scrollTop() {
-        return this.posBlock;
-    }
-    set scrollTop(nextValue) {
-        this.posBlock = nextValue;
-        this.maybeUpdateVisBlock();
-    }
-    //
-    // Resize handlers
-    //
-    axisResizeable(plane, axis, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return axis === 'col'
-            ? !!((_c = (_b = (_a = this.columns[plane]) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.resizeable) !== null && _c !== void 0 ? _c : (_d = this.columnDefault[plane]) === null || _d === void 0 ? void 0 : _d.resizeable)
-            : !!((_g = (_f = (_e = this.rows[plane]) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.resizeable) !== null && _g !== void 0 ? _g : (_h = this.rowDefault[plane]) === null || _h === void 0 ? void 0 : _h.resizeable);
-    }
-    handleAxisResizeInternal(event) {
-        event.stopPropagation();
-        const { plane, axis, delta, size, index, state } = event;
-        if (axis === 'col') {
-            const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, size + delta));
-            this.colSizes = { ...this.colSizes, [plane]: { ...this.colSizes[plane], [index]: nextSize } };
-            this.updateVisInline();
-            this.updateIntrinsicInlineSize();
-        }
-        else {
-            const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, size + delta));
-            this.rowSizes = { ...this.colSizes, [plane]: { ...this.rowSizes[plane], [index]: nextSize } };
-            this.updateVisBlock();
-            this.updateIntrinsicBlockSize();
-        }
-        if (state === 'dropped') {
-            this.dispatchEvent(new DxAxisResize({
-                plane,
-                axis,
-                index,
-                size: this[`${axis}Size`](index, plane),
-            }));
-        }
-    }
-    //
-    // Render and other lifecycle methods
-    //
-    // TODO(thure): This is for rendering presentational objects superimposed onto the canonical grid (e.g. DnD drop line for #8108).
-    renderPresentationLayer(offsetInline, offsetBlock) {
-        var _a, _b, _c, _d, _e, _f;
-        const visibleCols = this.visColMax - this.visColMin;
-        const visibleRows = this.visRowMax - this.visRowMin;
-        return html `<div
-      role="none"
-      class="dx-grid-layer--presentation"
-      style=${styleMap({
-            gridTemplateColumns: [
-                ...[...Array((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsStart')}px`),
-                ...[...Array(visibleCols)].map((_, c0) => c0 === visibleCols - 1
-                    ? '1fr'
-                    : `${this.colSize(this.visColMin + c0, 'grid') + (c0 === 0 ? offsetInline : 0)}px`),
-                ...[...Array((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0)].map((_, c0) => `${this.colSize(c0, 'frozenColsEnd')}px`),
-            ].join(' '),
-            gridTemplateRows: [
-                ...[...Array((_c = this.frozen.frozenRowsStart) !== null && _c !== void 0 ? _c : 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsStart')}px`),
-                ...[...Array(visibleRows)].map((_, r0) => r0 === visibleRows - 1
-                    ? '1fr'
-                    : `${this.rowSize(this.visRowMin + r0, 'grid') + (r0 === 0 ? offsetBlock : 0)}px`),
-                ...[...Array((_d = this.frozen.frozenRowsEnd) !== null && _d !== void 0 ? _d : 0)].map((_, r0) => `${this.rowSize(r0, 'frozenRowsEnd')}px`),
-            ].join(' '),
-        })}
-    >
-      ${
-        /* TODO(thure): These are debug cells, remove when rendering actual overlay content. */ [
-            ...Array(((_e = this.frozen.frozenRowsStart) !== null && _e !== void 0 ? _e : 0) + visibleRows + ((_f = this.frozen.frozenRowsEnd) !== null && _f !== void 0 ? _f : 0)),
-        ].map((_, r0) => {
-            var _a, _b;
-            return [...Array(((_a = this.frozen.frozenColsStart) !== null && _a !== void 0 ? _a : 0) + visibleCols + ((_b = this.frozen.frozenColsEnd) !== null && _b !== void 0 ? _b : 0))].map((_, c0) => html `<div
-                role="none"
-                class="dx-grid-layer--presentation__cell"
-                style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
-              ></div>`);
-        })}
-    </div>`;
-    }
-    renderFixed(plane, selection) {
-        const colPlane = resolveColPlane(plane);
-        const rowPlane = resolveRowPlane(plane);
-        const cols = this.frozen[colPlane];
-        const rows = this.frozen[rowPlane];
-        return (cols !== null && cols !== void 0 ? cols : 0) > 0 && (rows !== null && rows !== void 0 ? rows : 0) > 0
-            ? html `<div
-          role="none"
-          tabindex="0"
-          data-dx-grid-plane=${plane}
-          data-dx-grid-plane-row=${plane === 'fixedStartStart' || plane === 'fixedStartEnd' ? 0 : 2}
-          data-dx-grid-plane-col=${plane === 'fixedStartStart' || plane === 'fixedEndStart' ? 0 : 2}
-          class="dx-grid__plane--fixed"
-          style=${styleMap({
-                'grid-template-columns': this[`template${colPlane}`],
-                'grid-template-rows': this[`template${rowPlane}`],
-            })}
-        >
-          ${[...Array(rows)].map((_, r) => {
-                return [...Array(cols)].map((_, c) => {
-                    return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection));
-                });
-            })}
-        </div>`
-            : null;
-    }
-    renderFrozenRows(plane, visibleCols, offsetInline, selection) {
-        const rowPlane = resolveRowPlane(plane);
-        const rows = this.frozen[rowPlane];
-        return (rows !== null && rows !== void 0 ? rows : 0) > 0
-            ? html `<div
-          role="none"
-          class="dx-grid__plane--frozen-row"
-          tabindex="0"
-          data-dx-grid-plane=${plane}
-          data-dx-grid-plane-row=${plane === 'frozenRowsStart' ? 0 : 2}
-          data-dx-grid-plane-col="1"
-        >
-          <div
-            role="none"
-            class="dx-grid__plane--frozen-row__content"
-            style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this
-                .templateGridColumns};grid-template-rows:${this[`template${rowPlane}`]}"
-          >
-            ${[...Array(rows)].map((_, r) => {
-                return [...Array(visibleCols)].map((_, c0) => {
-                    const c = this.visColMin + c0;
-                    return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c0, r);
-                });
-            })}
-          </div>
-        </div>`
-            : null;
-    }
-    renderFrozenColumns(plane, visibleRows, offsetBlock, selection) {
-        const colPlane = resolveColPlane(plane);
-        const cols = this.frozen[colPlane];
-        return (cols !== null && cols !== void 0 ? cols : 0) > 0
-            ? html `<div
-          role="none"
-          class="dx-grid__plane--frozen-col"
-          tabindex="0"
-          data-dx-grid-plane=${plane}
-          data-dx-grid-plane-col=${plane === 'frozenColsStart' ? 0 : 2}
-          data-dx-grid-plane-row="1"
-        >
-          <div
-            role="none"
-            class="dx-grid__plane--frozen-col__content"
-            style="transform:translate3d(0,${offsetBlock}px,0);grid-template-rows:${this
-                .templateGridRows};grid-template-columns:${this[`template${colPlane}`]}"
-          >
-            ${[...Array(visibleRows)].map((_, r0) => {
-                return [...Array(cols)].map((_, c) => {
-                    const r = this.visRowMin + r0;
-                    return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c, r0);
-                });
-            })}
-          </div>
-        </div>`
-            : null;
-    }
-    cellReadonly(col, row, plane) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const colPlane = resolveColPlane(plane);
-        const rowPlane = resolveRowPlane(plane);
-        // Check cell-specific setting first.
-        const cellReadonly = (_a = this.cell(col, row, plane)) === null || _a === void 0 ? void 0 : _a.readonly;
-        if (cellReadonly !== undefined) {
-            return isReadonly(cellReadonly);
-        }
-        // Check column/row defaults.
-        const colReadOnly = (_e = (_d = (_c = (_b = this.columns) === null || _b === void 0 ? void 0 : _b[colPlane]) === null || _c === void 0 ? void 0 : _c[col]) === null || _d === void 0 ? void 0 : _d.readonly) !== null && _e !== void 0 ? _e : (_g = (_f = this.columnDefault) === null || _f === void 0 ? void 0 : _f[colPlane]) === null || _g === void 0 ? void 0 : _g.readonly;
-        const rowReadOnly = (_l = (_k = (_j = (_h = this.rows) === null || _h === void 0 ? void 0 : _h[rowPlane]) === null || _j === void 0 ? void 0 : _j[row]) === null || _k === void 0 ? void 0 : _k.readonly) !== null && _l !== void 0 ? _l : (_o = (_m = this.rowDefault) === null || _m === void 0 ? void 0 : _m[rowPlane]) === null || _o === void 0 ? void 0 : _o.readonly;
-        return isReadonly(colReadOnly) || isReadonly(rowReadOnly);
-    }
-    /**
-     * Determines if the cell's text content should be selectable based on its readonly value.
-     * @returns true if the cells text content is selectable, false otherwise.
-     */
-    cellTextSelectable(col, row, plane) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const colPlane = resolveColPlane(plane);
-        const rowPlane = resolveRowPlane(plane);
-        // Check cell-specific setting first.
-        const cellReadonly = (_a = this.cell(col, row, plane)) === null || _a === void 0 ? void 0 : _a.readonly;
-        if (cellReadonly !== undefined) {
-            return cellReadonly === 'text-select';
-        }
-        // Check column/row defaults.
-        const colReadonly = (_e = (_d = (_c = (_b = this.columns) === null || _b === void 0 ? void 0 : _b[colPlane]) === null || _c === void 0 ? void 0 : _c[col]) === null || _d === void 0 ? void 0 : _d.readonly) !== null && _e !== void 0 ? _e : (_g = (_f = this.columnDefault) === null || _f === void 0 ? void 0 : _f[colPlane]) === null || _g === void 0 ? void 0 : _g.readonly;
-        const rowReadonly = (_l = (_k = (_j = (_h = this.rows) === null || _h === void 0 ? void 0 : _h[rowPlane]) === null || _j === void 0 ? void 0 : _j[row]) === null || _k === void 0 ? void 0 : _k.readonly) !== null && _l !== void 0 ? _l : (_o = (_m = this.rowDefault) === null || _m === void 0 ? void 0 : _m[rowPlane]) === null || _o === void 0 ? void 0 : _o.readonly;
-        return colReadonly === 'text-select' || rowReadonly === 'text-select';
-    }
-    renderCell(col, row, plane, selected, visCol = col, visRow = row) {
-        var _a, _b;
-        const cell = this.cell(col, row, plane);
-        const active = this.cellActive(col, row, plane);
-        const readonly = this.cellReadonly(col, row, plane);
-        const textSelectable = this.cellTextSelectable(col, row, plane);
-        const resizeIndex = (cell === null || cell === void 0 ? void 0 : cell.resizeHandle) ? (cell.resizeHandle === 'col' ? col : row) : undefined;
-        const resizePlane = (cell === null || cell === void 0 ? void 0 : cell.resizeHandle) ? resolveFrozenPlane(cell.resizeHandle, plane) : undefined;
-        const accessory = (cell === null || cell === void 0 ? void 0 : cell.accessoryHtml) ? staticHtml `${unsafeStatic(cell.accessoryHtml)}` : null;
-        return html `<div
-      role="gridcell"
-      tabindex="0"
-      aria-selected=${selected ? 'true' : nothing}
-      aria-readonly=${readonly ? 'true' : nothing}
-      class=${(_a = cell === null || cell === void 0 ? void 0 : cell.className) !== null && _a !== void 0 ? _a : nothing}
-      data-refs=${(_b = cell === null || cell === void 0 ? void 0 : cell.dataRefs) !== null && _b !== void 0 ? _b : nothing}
-      ?data-dx-active=${active}
-      data-text-selectable=${textSelectable ? 'true' : 'false'}
-      data-dx-grid-action="cell"
-      aria-colindex=${col}
-      aria-rowindex=${row}
-      style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
-    >
-      ${this.mode !== 'browse' && active ? null : cell === null || cell === void 0 ? void 0 : cell.value}${this.mode !== 'browse' && active
-            ? null
-            : accessory}${(cell === null || cell === void 0 ? void 0 : cell.resizeHandle) &&
-            this.mode === 'browse' &&
-            this.axisResizeable(resizePlane, cell.resizeHandle, resizeIndex)
-            ? html `<dx-grid-axis-resize-handle
-            axis=${cell.resizeHandle}
-            plane=${resizePlane}
-            index=${resizeIndex}
-            size=${this[`${cell.resizeHandle}Size`](resizeIndex, plane)}
-          ></dx-grid-axis-resize-handle>`
-            : null}
-    </div>`;
-    }
-    render() {
-        const visibleCols = this.visColMax - this.visColMin;
-        const visibleRows = this.visRowMax - this.visRowMin;
-        const offsetInline = this.visColMinStart - this.posInline + gap;
-        const offsetBlock = this.visRowMinStart - this.posBlock + gap;
-        const selection = selectionProps(this.selectionStart, this.selectionEnd);
-        return html `<style>
-        ${this.activeRefs
-            .split(' ')
-            .filter((value) => value)
-            .map(
-        // TODO(burdon): Consistent camelCase?
-        (activeRef) => `[data-refs~="${activeRef}"] { background: var(--dx-grid-commented-active, var(--dx-gridCommentedActive)) !important; }`)
-            .join('\n')}
-      </style>
-      <div
-        role="none"
-        class="dx-grid"
-        style=${styleMap({
-            'grid-template-columns': `${this.templatefrozenColsStart ? 'min-content ' : ''}minmax(0, ${Number.isFinite(this.limitColumns) ? `${Math.max(0, this.intrinsicInlineSize)}px` : '1fr'})${this.templatefrozenColsEnd ? ' min-content' : ''}`,
-            'grid-template-rows': `${this.templatefrozenRowsStart ? 'min-content ' : ''}minmax(0, ${Number.isFinite(this.limitRows) ? `${Math.max(0, this.intrinsicBlockSize)}px` : '1fr'})${this.templatefrozenRowsEnd ? ' min-content' : ''}`,
-            '--dx-grid-content-inline-size': Number.isFinite(this.limitColumns)
-                ? `${Math.max(0, this.totalIntrinsicInlineSize)}px`
-                : 'max-content',
-            '--dx-grid-content-block-size': Number.isFinite(this.limitRows)
-                ? `${Math.max(0, this.totalIntrinsicBlockSize)}px`
-                : 'max-content',
-        })}
-        data-grid=${this.gridId}
-        data-grid-mode=${this.mode}
-        ?data-grid-select=${selection.visible}
-        ${ref(this.gridRef)}
-      >
-        ${this.renderFixed('fixedStartStart', selection)}${this.renderFrozenRows('frozenRowsStart', visibleCols, offsetInline, selection)}${this.renderFixed('fixedStartEnd', selection)}${this.renderFrozenColumns('frozenColsStart', visibleRows, offsetBlock, selection)}
-        <div
-          role="grid"
-          class="dx-grid__plane--grid"
-          tabindex="0"
-          data-dx-grid-plane="grid"
-          data-dx-grid-plane-row="1"
-          data-dx-grid-plane-col="1"
-          ${ref(this.viewportRef)}
-        >
-          <div
-            role="none"
-            class="dx-grid__plane--grid__content"
-            style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this
-            .templateGridColumns};grid-template-rows:${this.templateGridRows};"
-          >
-            ${[...Array(visibleRows)].map((_, r0) => {
-            return [...Array(visibleCols)].map((_, c0) => {
-                const c = c0 + this.visColMin;
-                const r = r0 + this.visRowMin;
-                return this.renderCell(c, r, 'grid', cellSelected(c, r, 'grid', selection), c0, r0);
-            });
-        })}
-          </div>
-        </div>
-        ${this.renderFrozenColumns('frozenColsEnd', visibleRows, offsetBlock, selection)}${this.renderFixed('fixedEndStart', selection)}${this.renderFrozenRows('frozenRowsEnd', visibleCols, offsetInline, selection)}${this.renderFixed('fixedEndEnd', selection)}
-      </div>`;
-    }
-    updateIntrinsicInlineSize() {
-        this.intrinsicInlineSize = Number.isFinite(this.limitColumns)
-            ? [...Array(this.limitColumns)].reduce((acc, _, c0) => acc + this.colSize(c0, 'grid'), 0) +
-                gap * (this.limitColumns - 1)
-            : Infinity;
-        this.totalIntrinsicInlineSize =
-            this.intrinsicInlineSize +
-                (Number.isFinite(this.frozen.frozenColsStart)
-                    ? [...Array(this.frozen.frozenColsStart)].reduce((acc, _, c0) => acc + gap + this.colSize(c0, 'frozenColsStart'), 0)
-                    : 0) +
-                (Number.isFinite(this.frozen.frozenColsEnd)
-                    ? [...Array(this.frozen.frozenColsEnd)].reduce((acc, _, c0) => acc + gap + this.colSize(c0, 'frozenColsEnd'), 0)
-                    : 0);
-    }
-    updateIntrinsicBlockSize() {
-        this.intrinsicBlockSize = Number.isFinite(this.limitRows)
-            ? [...Array(this.limitRows)].reduce((acc, _, r0) => acc + this.rowSize(r0, 'grid'), 0) +
-                gap * (this.limitRows - 1)
-            : Infinity;
-        this.totalIntrinsicBlockSize =
-            this.intrinsicBlockSize +
-                (Number.isFinite(this.frozen.frozenRowsStart)
-                    ? [...Array(this.frozen.frozenRowsStart)].reduce((acc, _, r0) => acc + gap + this.rowSize(r0, 'frozenRowsStart'), 0)
-                    : 0) +
-                (Number.isFinite(this.frozen.frozenRowsEnd)
-                    ? [...Array(this.frozen.frozenRowsEnd)].reduce((acc, _, r0) => acc + gap + this.rowSize(r0, 'frozenRowsEnd'), 0)
-                    : 0);
-    }
-    updateIntrinsicSizes() {
-        this.updateIntrinsicInlineSize();
-        this.updateIntrinsicBlockSize();
-    }
-    computeColSizes() {
-        var _a;
-        this.colSizes = Object.entries((_a = this.columns) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeColMeta]) => {
-            acc[plane] = Object.entries(planeColMeta).reduce((planeAcc, [col, colMeta]) => {
-                if (colMeta === null || colMeta === void 0 ? void 0 : colMeta.size) {
-                    planeAcc[col] = colMeta.size;
-                }
-                return planeAcc;
-            }, {});
-            return acc;
-        }, { grid: {} });
-    }
-    computeRowSizes() {
-        var _a;
-        this.rowSizes = Object.entries((_a = this.rows) !== null && _a !== void 0 ? _a : {}).reduce((acc, [plane, planeRowMeta]) => {
-            acc[plane] = Object.entries(planeRowMeta).reduce((planeAcc, [row, rowMeta]) => {
-                if (rowMeta === null || rowMeta === void 0 ? void 0 : rowMeta.size) {
-                    planeAcc[row] = rowMeta.size;
-                }
-                return planeAcc;
-            }, {});
-            return acc;
-        }, { grid: {} });
-    }
-    firstUpdated() {
-        if (this.getCells) {
-            this.updateCells(true);
-        }
-        this.observer.observe(this.viewportRef.value);
-        this.computeColSizes();
-        this.computeRowSizes();
-        this.updateIntrinsicSizes();
-    }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('rowDefault') || changedProperties.has('rows') || changedProperties.has('limitRows')) {
-            this.computeRowSizes();
-            this.updateIntrinsicBlockSize();
-            this.updatePosBlock();
-            this.updateVisBlock();
-        }
-        if (changedProperties.has('columnDefault') ||
-            changedProperties.has('columns') ||
-            changedProperties.has('limitColumns')) {
-            this.computeColSizes();
-            this.updateIntrinsicInlineSize();
-            this.updatePosInline();
-            this.updateVisInline();
-        }
-        if (this.getCells &&
-            (changedProperties.has('initialCells') ||
-                changedProperties.has('visColMin') ||
-                changedProperties.has('visColMax') ||
-                changedProperties.has('visRowMin') ||
-                changedProperties.has('visRowMax') ||
-                changedProperties.has('columns') ||
-                changedProperties.has('rows') ||
-                changedProperties.has('limitColumns') ||
-                changedProperties.has('limitRows'))) {
-            this.updateCells(true);
-        }
-    }
-    updated(changedProperties) {
-        // Update the focused element if there is a change in bounds (otherwise Lit keeps focus on the relative element).
-        if (this.focusActive &&
-            (changedProperties.has('visColMin') ||
-                changedProperties.has('visColMax') ||
-                changedProperties.has('visRowMin') ||
-                changedProperties.has('visRowMax') ||
-                changedProperties.has('focusedCell'))) {
-            this.refocus();
-        }
-    }
-    updateIfWithinBounds({ col, row }) {
-        if (col >= this.visColMin && col <= this.visColMax && row >= this.visRowMin && row <= this.visRowMax) {
-            this.requestUpdate();
-            return true;
-        }
-        return false;
-    }
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        if (this.viewportRef.value) {
-            this.observer.unobserve(this.viewportRef.value);
-        }
-        (_a = document.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', this.handleTopLevelWheel);
-    }
-    createRenderRoot() {
-        return this;
-    }
-};
-__decorate([
-    property({ type: String })
-], DxGrid.prototype, "gridId", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "rowDefault", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "columnDefault", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "rows", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "columns", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "initialCells", void 0);
-__decorate([
-    property({ type: String })
-], DxGrid.prototype, "mode", void 0);
-__decorate([
-    property({ type: Number })
-], DxGrid.prototype, "limitColumns", void 0);
-__decorate([
-    property({ type: Number })
-], DxGrid.prototype, "limitRows", void 0);
-__decorate([
-    property({ type: Object })
-], DxGrid.prototype, "frozen", void 0);
-__decorate([
-    property({ type: String })
-], DxGrid.prototype, "overscroll", void 0);
-__decorate([
-    property({ type: String })
-], DxGrid.prototype, "activeRefs", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "cells", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "posInline", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "posBlock", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "sizeInline", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "sizeBlock", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visColMinStart", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visRowMinStart", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "binInlineMin", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "binInlineMax", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "binBlockMin", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "binBlockMax", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visColMin", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visColMax", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visRowMin", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "visRowMax", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templateGridColumns", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templatefrozenColsStart", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templatefrozenColsEnd", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templateGridRows", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templatefrozenRowsStart", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "templatefrozenRowsEnd", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "pointer", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "colSizes", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "rowSizes", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "focusActive", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "focusedCell", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "selectionStart", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "selectionEnd", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "intrinsicInlineSize", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "intrinsicBlockSize", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "totalIntrinsicInlineSize", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "totalIntrinsicBlockSize", void 0);
-__decorate([
-    state()
-], DxGrid.prototype, "observer", void 0);
-DxGrid = __decorate([
-    customElement('dx-grid')
-], DxGrid);
-export { DxGrid };
-export { rowToA1Notation, colToA1Notation, closestAction, closestCell, parseCellIndex, toPlaneCellIndex, cellQuery, } from './util';
-export const commentedClassName = 'dx-grid__cell--commented';
-//# sourceMappingURL=dx-grid.js.map