@dxos/lit-grid 0.6.11 → 0.6.12-main.2d19bf1

package/dist/src/dx-grid.js

@@ -0,0 +1,1054 @@
+//
+// 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';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import './dx-grid-axis-resize-handle';
+import { DxAxisResize, DxEditRequest, DxGridCellsSelect, } from './types';
+import { separator, toCellIndex } from './util';
+/**
+ * The size in pixels of the gap between cells
+ */
+const gap = 1;
+/**
+ * ResizeObserver notices even subpixel changes, only respond to changes of at least 1px.
+ */
+const resizeTolerance = 1;
+/**
+ * The amount of pixels the primary pointer has to move after PointerDown to engage in selection.
+ */
+const selectTolerance = 4;
+//
+// `overscan` is the number of columns or rows to render outside of the viewport
+//
+const overscanCol = 1;
+const overscanRow = 1;
+//
+// `size`, when suffixed with ‘row’ or ‘col’, are limits on size applied when resizing
+//
+const sizeColMin = 32;
+const sizeColMax = 1024;
+const sizeRowMin = 16;
+const sizeRowMax = 1024;
+const shouldSelect = (pointer, { pageX, pageY }) => {
+    if ((pointer === null || pointer === void 0 ? void 0 : pointer.state) === 'maybeSelecting') {
+        return Math.hypot(Math.abs(pointer.pageX - pageX), Math.abs(pointer.pageY - pageY)) >= selectTolerance;
+    }
+    else {
+        return false;
+    }
+};
+const selectionProps = (selectionStart, selectionEnd) => {
+    const colMin = Math.min(selectionStart.col, selectionEnd.col);
+    const colMax = Math.max(selectionStart.col, selectionEnd.col);
+    const rowMin = Math.min(selectionStart.row, selectionEnd.row);
+    const rowMax = Math.max(selectionStart.row, selectionEnd.row);
+    const plane = selectionStart.plane;
+    const visible = colMin !== colMax || rowMin !== rowMax;
+    return { colMin, colMax, rowMin, rowMax, plane, visible };
+};
+const cellSelected = (col, row, plane, selection) => {
+    return (plane === selection.plane &&
+        col >= selection.colMin &&
+        col <= selection.colMax &&
+        row >= selection.rowMin &&
+        row <= selection.rowMax);
+};
+const closestAction = (target) => {
+    var _a, _b;
+    const actionEl = (_a = target === null || target === void 0 ? void 0 : target.closest('[data-dx-grid-action]')) !== null && _a !== void 0 ? _a : null;
+    return { actionEl, action: (_b = actionEl === null || actionEl === void 0 ? void 0 : actionEl.getAttribute('data-dx-grid-action')) !== null && _b !== void 0 ? _b : null };
+};
+export const closestCell = (target, actionEl) => {
+    var _a, _b, _c, _d;
+    let cellElement = actionEl;
+    if (!cellElement) {
+        const { action, actionEl } = closestAction(target);
+        if (action === 'cell') {
+            cellElement = actionEl;
+        }
+    }
+    if (cellElement) {
+        const col = parseInt((_a = cellElement.getAttribute('aria-colindex')) !== null && _a !== void 0 ? _a : 'never');
+        const row = parseInt((_b = cellElement.getAttribute('aria-rowindex')) !== null && _b !== void 0 ? _b : 'never');
+        const plane = ((_d = (_c = cellElement.closest('[data-dx-grid-plane]')) === null || _c === void 0 ? void 0 : _c.getAttribute('data-dx-grid-plane')) !== null && _d !== void 0 ? _d : 'grid');
+        return { plane, col, row };
+    }
+    else {
+        return null;
+    }
+};
+const resolveRowPlane = (plane) => {
+    switch (plane) {
+        case 'fixedStartStart':
+        case 'fixedStartEnd':
+        case 'frozenRowsStart':
+            return 'frozenRowsStart';
+        case 'fixedEndStart':
+        case 'fixedEndEnd':
+        case 'frozenRowsEnd':
+            return 'frozenRowsEnd';
+        default:
+            return 'grid';
+    }
+};
+const resolveColPlane = (plane) => {
+    switch (plane) {
+        case 'fixedStartStart':
+        case 'fixedEndStart':
+        case 'frozenColsStart':
+            return 'frozenColsStart';
+        case 'fixedStartEnd':
+        case 'fixedEndEnd':
+        case 'frozenColsEnd':
+            return 'frozenColsEnd';
+        default:
+            return 'grid';
+    }
+};
+const resolveResizePlane = (resizeAxis, cellPlane) => {
+    switch (cellPlane) {
+        case 'fixedStartStart':
+            return resizeAxis === 'col' ? 'frozenColsStart' : 'frozenRowsStart';
+        case 'fixedStartEnd':
+            return resizeAxis === 'col' ? 'frozenColsEnd' : 'frozenRowsStart';
+        case 'fixedEndStart':
+            return resizeAxis === 'col' ? 'frozenColsStart' : 'frozenRowsEnd';
+        case 'fixedEndEnd':
+            return resizeAxis === 'col' ? 'frozenColsEnd' : 'frozenRowsEnd';
+        case 'frozenColsStart':
+        case 'frozenColsEnd':
+            return resizeAxis === 'col' ? cellPlane : 'grid';
+        case 'frozenRowsStart':
+        case 'frozenRowsEnd':
+            return resizeAxis === 'row' ? cellPlane : 'grid';
+        default:
+            return cellPlane;
+    }
+};
+const isSameCell = (a, b) => a &&
+    b &&
+    a.plane === b.plane &&
+    Number.isFinite(a.col) &&
+    Number.isFinite(a.row) &&
+    a.col === b.col &&
+    a.row === b.row;
+const defaultRowSize = 32;
+const defaultColSize = 180;
+let DxGrid = class DxGrid extends LitElement {
+    constructor() {
+        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 = {};
+        /**
+         * 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.overscanInline = 0;
+        this.overscanBlock = 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.handlePointerDown = (event) => {
+            if (event.isPrimary) {
+                const { action, actionEl } = closestAction(event.target);
+                if (action) {
+                    if (action === 'cell') {
+                        const cellCoords = closestCell(event.target, actionEl);
+                        if (cellCoords) {
+                            this.pointer = { state: 'maybeSelecting', pageX: event.pageX, pageY: event.pageY };
+                            this.selectionStart = cellCoords;
+                            this.selectionEnd = cellCoords;
+                        }
+                        if (this.mode === 'edit') {
+                            event.preventDefault();
+                        }
+                        else {
+                            if (this.focusActive && isSameCell(this.focusedCell, cellCoords)) {
+                                this.dispatchEditRequest();
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        this.handlePointerUp = (event) => {
+            const cell = closestCell(event.target);
+            if (cell) {
+                this.selectionEnd = cell;
+                this.dispatchEvent(new DxGridCellsSelect({
+                    start: this.selectionStart,
+                    end: this.selectionEnd,
+                }));
+            }
+            this.pointer = null;
+        };
+        this.handlePointerMove = (event) => {
+            var _a;
+            if (shouldSelect(this.pointer, event)) {
+                this.pointer = { state: 'selecting' };
+            }
+            else if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.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.selectionEnd = 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.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.handleWheel = ({ deltaX, deltaY }) => {
+            if (this.mode === 'browse') {
+                this.updatePos(this.posInline + deltaX, this.posBlock + deltaY);
+            }
+        };
+        this.addEventListener('dx-axis-resize-internal', this.handleAxisResizeInternal);
+        this.addEventListener('wheel', this.handleWheel, { passive: true });
+        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();
+        // Without deferring, the event dispatches before `focusedCellBox` can get updated bounds of the cell, hence:
+        queueMicrotask(() => this.dispatchEvent(new DxEditRequest({
+            cellIndex: toCellIndex(this.focusedCell),
+            cellBox: this.focusedCellBox(),
+            initialContent,
+        })));
+    }
+    handleKeydown(event) {
+        if (this.focusActive && this.mode === 'browse') {
+            // Adjust state
+            switch (event.key) {
+                case 'ArrowDown':
+                    this.focusedCell = { ...this.focusedCell, row: Math.min(this.limitRows - 1, this.focusedCell.row + 1) };
+                    break;
+                case 'ArrowUp':
+                    this.focusedCell = { ...this.focusedCell, row: Math.max(0, this.focusedCell.row - 1) };
+                    break;
+                case 'ArrowRight':
+                    this.focusedCell = { ...this.focusedCell, col: Math.min(this.limitColumns - 1, this.focusedCell.col + 1) };
+                    break;
+                case 'ArrowLeft':
+                    this.focusedCell = { ...this.focusedCell, col: Math.max(0, this.focusedCell.col - 1) };
+                    break;
+            }
+            // Emit edit request if relevant
+            switch (event.key) {
+                case 'Enter':
+                    this.dispatchEditRequest();
+                    break;
+                default:
+                    if (event.key.length === 1 && event.key.match(/\P{Cc}/u)) {
+                        this.dispatchEditRequest(event.key);
+                    }
+                    break;
+            }
+            // Handle virtualization & focus consequences
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'ArrowRight':
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    this.snapPosToFocusedCell();
+                    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.focusActive && this.focusedCell.plane === plane && this.focusedCell.col === c && this.focusedCell.row === r);
+    }
+    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,
+        };
+    }
+    updatePosInline(inline) {
+        this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, inline !== null && inline !== void 0 ? inline : this.posInline));
+        this.maybeUpdateVisInline();
+    }
+    updatePosBlock(block) {
+        this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, block !== null && block !== void 0 ? block : this.posBlock));
+        this.maybeUpdateVisBlock();
+    }
+    updatePos(inline, block) {
+        this.updatePosInline(inline);
+        this.updatePosBlock(block);
+    }
+    updateVisInline() {
+        var _a, _b;
+        // todo: avoid starting from zero
+        let colIndex = 0;
+        let pxInline = this.colSize(colIndex, 'grid');
+        while (pxInline < this.posInline) {
+            colIndex += 1;
+            pxInline += this.colSize(colIndex, 'grid') + gap;
+        }
+        this.visColMin = colIndex - overscanCol;
+        this.binInlineMin = pxInline - this.colSize(colIndex, 'grid') - gap;
+        this.binInlineMax = pxInline + gap;
+        this.overscanInline =
+            [...Array(overscanCol)].reduce((acc, _, c0) => {
+                acc += this.colSize(this.visColMin + c0, 'grid');
+                return acc;
+            }, 0) +
+                gap * (overscanCol - 1);
+        while (pxInline < this.binInlineMax + this.sizeInline - gap * 2) {
+            colIndex += 1;
+            pxInline += this.colSize(colIndex, 'grid') + gap;
+        }
+        this.visColMax = Math.min(this.limitColumns, colIndex + overscanCol);
+        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 rowIndex = 0;
+        let pxBlock = this.rowSize(rowIndex, 'grid');
+        while (pxBlock < this.posBlock) {
+            rowIndex += 1;
+            pxBlock += this.rowSize(rowIndex, 'grid') + gap;
+        }
+        this.visRowMin = rowIndex - overscanRow;
+        this.binBlockMin = pxBlock - this.rowSize(rowIndex, 'grid') - gap;
+        this.binBlockMax = pxBlock + gap;
+        this.overscanBlock =
+            [...Array(overscanRow)].reduce((acc, _, r0) => {
+                acc += this.rowSize(this.visRowMin + r0, 'grid');
+                return acc;
+            }, 0) +
+                gap * (overscanRow - 1);
+        while (pxBlock < this.binBlockMax + this.sizeBlock - gap * 2) {
+            rowIndex += 1;
+            pxBlock += this.rowSize(rowIndex, 'grid') + gap;
+        }
+        this.visRowMax = Math.min(this.limitRows, rowIndex + overscanRow);
+        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.focusedCell = coords;
+        this.focusActive = true;
+        if (snap) {
+            this.snapPosToFocusedCell();
+        }
+    }
+    handleFocus(event) {
+        const cellCoords = closestCell(event.target);
+        if (cellCoords) {
+            this.focusedCell = cellCoords;
+            this.focusActive = true;
+        }
+    }
+    handleBlur(event) {
+        // Only unset `focusActive` if focus is not moving to an element within the grid.
+        if (!event.relatedTarget || !event.relatedTarget.closest(`[data-grid="${this.gridId}"]`)) {
+            this.focusActive = false;
+        }
+    }
+    focusedCellElement() {
+        var _a;
+        return (_a = this.viewportRef.value) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-dx-grid-plane=${this.focusedCell.plane}] > [aria-colindex="${this.focusedCell.col}"][aria-rowindex="${this.focusedCell.row}"]`);
+    }
+    //
+    // `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(minDelta = 0, maxDelta = minDelta) {
+        return this.focusedCell.row <= this.visRowMin + minDelta
+            ? this.focusedCell.row - (this.visRowMin + minDelta)
+            : this.focusedCell.row >= this.visRowMax - maxDelta
+                ? -(this.focusedCell.row - this.visRowMax - maxDelta)
+                : 0;
+    }
+    focusedCellColOutOfVis(minDelta = 0, maxDelta = minDelta) {
+        return this.focusedCell.col <= this.visColMin + minDelta
+            ? this.focusedCell.col - (this.visColMin + minDelta)
+            : this.focusedCell.col >= this.visColMax - maxDelta
+                ? -(this.focusedCell.col - this.visColMax - maxDelta)
+                : 0;
+    }
+    focusedCellOutOfVis(colDelta = 0, rowDelta = colDelta) {
+        switch (this.focusedCell.plane) {
+            case 'grid':
+                return { row: this.focusedCellRowOutOfVis(rowDelta), col: this.focusedCellColOutOfVis(colDelta) };
+            case 'frozenRowsStart':
+            case 'frozenRowsEnd':
+                return { col: this.focusedCellColOutOfVis(colDelta), row: 0 };
+            case 'frozenColsStart':
+            case 'frozenColsEnd':
+                return { col: 0, row: this.focusedCellRowOutOfVis(rowDelta) };
+            default:
+                return { col: 0, row: 0 };
+        }
+    }
+    /**
+     * Moves focus to the cell with actual focus, otherwise moves focus to the viewport.
+     */
+    refocus(increment, delta = 1) {
+        switch (increment) {
+            case 'row':
+                this.focusedCell = { ...this.focusedCell, row: this.focusedCell.row + delta };
+                break;
+            case 'col':
+                this.focusedCell = { ...this.focusedCell, col: this.focusedCell.col + delta };
+        }
+        if (increment) {
+            this.snapPosToFocusedCell();
+        }
+        queueMicrotask(() => {
+            var _a;
+            const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
+            (_a = (outOfVis.col !== 0 || outOfVis.row !== 0 ? this.viewportRef.value : this.focusedCellElement())) === null || _a === void 0 ? void 0 : _a.focus({
+                preventScroll: true,
+            });
+        });
+    }
+    findPosInlineFromVisColMin(deltaCols) {
+        return [...Array(deltaCols)].reduce((acc, _, c0) => acc - this.colSize(this.visColMin - c0, 'grid') - gap, this.binInlineMin + gap);
+    }
+    findPosBlockFromVisRowMin(deltaRows) {
+        return [...Array(deltaRows)].reduce((acc, _, r0) => acc - this.rowSize(this.visRowMin - r0, 'grid') - gap, this.binBlockMin + gap);
+    }
+    /**
+     * Updates `pos` so that a cell in focus is fully within the viewport
+     */
+    snapPosToFocusedCell() {
+        const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
+        if (outOfVis.col < 0) {
+            this.posInline = this.findPosInlineFromVisColMin(-outOfVis.col);
+            this.updateVisInline();
+        }
+        else if (outOfVis.col > 0) {
+            const sizeSumCol = [...Array(this.focusedCell.col - this.visColMin)].reduce((acc, _, c0) => {
+                acc += this.colSize(this.visColMin + overscanCol + c0, 'grid') + gap;
+                return acc;
+            }, 0);
+            this.posInline = Math.max(0, Math.min(this.intrinsicInlineSize - this.sizeInline, this.binInlineMin + sizeSumCol - this.sizeInline));
+            this.updateVisInline();
+        }
+        if (outOfVis.row < 0) {
+            this.posBlock = this.findPosBlockFromVisRowMin(-outOfVis.row);
+            this.updateVisBlock();
+        }
+        else if (outOfVis.row > 0) {
+            const sizeSumRow = [...Array(this.focusedCell.row - this.visRowMin)].reduce((acc, _, r0) => {
+                acc += this.rowSize(this.visRowMin + overscanRow + r0, 'grid') + gap;
+                return acc;
+            }, 0);
+            this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, this.binBlockMin + sizeSumRow - this.sizeBlock));
+            this.updateVisBlock();
+        }
+    }
+    //
+    // 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
+    //
+    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"
+          data-dx-grid-plane=${plane}
+          class="dx-grid__plane--fixed"
+          style=${styleMap({
+                'grid-template-columns': this[`template${colPlane}`],
+                'grid-template-rows': this[`template${rowPlane}`],
+            })}
+        >
+          ${[...Array(cols)].map((_, c) => {
+                return [...Array(rows)].map((_, r) => {
+                    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">
+          <div
+            role="none"
+            data-dx-grid-plane=${plane}
+            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(visibleCols)].map((_, c0) => {
+                return [...Array(rows)].map((_, r) => {
+                    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">
+          <div
+            role="none"
+            data-dx-grid-plane=${plane}
+            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(cols)].map((_, c) => {
+                return [...Array(visibleRows)].map((_, r0) => {
+                    const r = this.visRowMin + r0;
+                    return this.renderCell(c, r, plane, cellSelected(c, r, plane, selection), c, r0);
+                });
+            })}
+          </div>
+        </div>`
+            : null;
+    }
+    renderCell(col, row, plane, selected, visCol = col, visRow = row) {
+        const cell = this.cell(col, row, plane);
+        const active = this.cellActive(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) ? resolveResizePlane(cell.resizeHandle, plane) : undefined;
+        return html `<div
+      role="gridcell"
+      tabindex="0"
+      ?inert=${col < 0 || row < 0}
+      ?aria-selected=${selected}
+      class=${cell || active
+            ? ((cell === null || cell === void 0 ? void 0 : cell.className) ? cell.className + ' ' : '') + (active ? 'dx-grid__cell--active' : '')
+            : nothing}
+      aria-colindex=${col}
+      aria-rowindex=${row}
+      data-dx-grid-action="cell"
+      style="grid-column:${visCol + 1};grid-row:${visRow + 1}"
+    >
+      ${cell === null || cell === void 0 ? void 0 : cell.value}${(cell === null || cell === void 0 ? void 0 : cell.resizeHandle) && 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.binInlineMin - this.posInline - this.overscanInline;
+        const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+        const selection = selectionProps(this.selectionStart, this.selectionEnd);
+        return html `<div
+      role="none"
+      class="dx-grid"
+      style=${styleMap({
+            'grid-template-columns': `${this.templatefrozenColsStart ? 'min-content ' : ''}minmax(0, ${Number.isFinite(this.limitColumns) ? `${this.intrinsicInlineSize}px` : '1fr'})${this.templatefrozenColsEnd ? ' min-content' : ''}`,
+            'grid-template-rows': `${this.templatefrozenRowsStart ? 'min-content ' : ''}minmax(0, ${Number.isFinite(this.limitRows) ? `${this.intrinsicBlockSize}px` : '1fr'})${this.templatefrozenRowsEnd ? ' min-content' : ''}`,
+        })}
+      data-grid=${this.gridId}
+      data-grid-mode=${this.mode}
+      ?data-grid-select=${selection.visible}
+    >
+      ${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" ${ref(this.viewportRef)}>
+        <div
+          role="none"
+          class="dx-grid__plane--grid__content"
+          data-dx-grid-plane="grid"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this
+            .templateGridColumns};grid-template-rows:${this.templateGridRows};"
+        >
+          ${[...Array(visibleCols)].map((_, c0) => {
+            return [...Array(visibleRows)].map((_, r0) => {
+                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;
+    }
+    updateIntrinsicBlockSize() {
+        this.intrinsicBlockSize = Number.isFinite(this.limitRows)
+            ? [...Array(this.limitRows)].reduce((acc, _, r0) => acc + this.rowSize(r0, 'grid'), 0) +
+                gap * (this.limitRows - 1)
+            : Infinity;
+    }
+    updateIntrinsicSizes() {
+        this.updateIntrinsicInlineSize();
+        this.updateIntrinsicBlockSize();
+    }
+    firstUpdated() {
+        if (this.getCells) {
+            this.updateCells(true);
+        }
+        this.observer.observe(this.viewportRef.value);
+        this.colSizes = Object.entries(this.columns).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: {} });
+        this.rowSizes = Object.entries(this.rows).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: {} });
+        this.updateIntrinsicSizes();
+    }
+    willUpdate(changedProperties) {
+        if (this.getCells &&
+            (changedProperties.has('initialCells') ||
+                changedProperties.has('visColMin') ||
+                changedProperties.has('visColMax') ||
+                changedProperties.has('visRowMin') ||
+                changedProperties.has('visRowMax'))) {
+            this.updateCells();
+        }
+        if (changedProperties.has('rowDefault') || changedProperties.has('rows') || changedProperties.has('limitRows')) {
+            this.updateIntrinsicBlockSize();
+            this.updatePosBlock();
+            this.updateVisBlock();
+        }
+        if (changedProperties.has('colDefault') ||
+            changedProperties.has('columns') ||
+            changedProperties.has('limitColumns')) {
+            this.updateIntrinsicInlineSize();
+            this.updatePosInline();
+            this.updateVisInline();
+        }
+    }
+    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('visRowMin') || changedProperties.has('visColMin') || 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() {
+        super.disconnectedCallback();
+        if (this.viewportRef.value) {
+            this.observer.unobserve(this.viewportRef.value);
+        }
+    }
+    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([
+    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, "overscanInline", void 0);
+__decorate([
+    state()
+], DxGrid.prototype, "overscanBlock", 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, "observer", void 0);
+DxGrid = __decorate([
+    customElement('dx-grid')
+], DxGrid);
+export { DxGrid };
+export { rowToA1Notation, colToA1Notation } from './util';
+//# sourceMappingURL=dx-grid.js.map