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

package/dist/lib/browser/index.mjs

@@ -0,0 +1,1297 @@
+// packages/ui/lit-grid/src/dx-grid.ts
+import { LitElement as LitElement2, html as html2, nothing } from "lit";
+import { customElement as customElement2, state, property as property2 } from "lit/decorators.js";
+import { ref as ref2, createRef } from "lit/directives/ref.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+
+// packages/ui/lit-grid/src/util.ts
+var separator = ",";
+var toCellIndex = (cellCoords) => `${cellCoords.col}${separator}${cellCoords.row}`;
+var colToA1Notation = (col) => {
+  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
+};
+var rowToA1Notation = (row) => {
+  return `${row + 1}`;
+};
+
+// packages/ui/lit-grid/src/types.ts
+var DxAxisResize = class extends Event {
+  constructor(props) {
+    super("dx-axis-resize");
+    this.axis = props.axis;
+    this.plane = props.plane;
+    this.index = props.index;
+    this.size = props.size;
+  }
+};
+var DxAxisResizeInternal = class extends Event {
+  constructor(props) {
+    super("dx-axis-resize-internal", {
+      composed: true,
+      bubbles: true
+    });
+    this.axis = props.axis;
+    this.plane = props.plane;
+    this.index = props.index;
+    this.size = props.size;
+    this.delta = props.delta;
+    this.state = props.state;
+  }
+};
+var DxEditRequest = class extends Event {
+  constructor(props) {
+    super("dx-edit-request");
+    this.cellIndex = props.cellIndex;
+    this.cellBox = props.cellBox;
+    this.initialContent = props.initialContent;
+  }
+};
+var DxGridCellsSelect = class extends Event {
+  constructor({ start, end }) {
+    super("dx-grid-cells-select");
+    this.start = toCellIndex(start);
+    this.end = toCellIndex(end);
+    this.minCol = Math.min(start.col, end.col);
+    this.maxCol = Math.max(start.col, end.col);
+    this.minRow = Math.min(start.row, end.row);
+    this.maxRow = Math.max(start.row, end.row);
+  }
+};
+
+// packages/ui/lit-grid/src/dx-grid-axis-resize-handle.ts
+function _ts_decorate(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;
+}
+var DxGridAxisResizeHandle = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.axis = "row";
+    this.plane = "grid";
+    this.index = "-1";
+    this.size = 128;
+    this.dragStartSize = 128;
+    this.cleanup = null;
+  }
+  render() {
+    return html`<button class="dx-grid__resize-handle" data-dx-grid-axis=${this.axis} ${ref(this.mount)}>
+      <span class="sr-only">Resize</span>
+    </button>`;
+  }
+  dispatchResize(location, state2) {
+    const client = this.axis === "row" ? "clientY" : "clientX";
+    const event = new DxAxisResizeInternal({
+      axis: this.axis,
+      plane: this.plane,
+      size: this.dragStartSize,
+      index: this.index,
+      delta: location.current.input[client] - location.initial.input[client],
+      state: state2
+    });
+    this.dispatchEvent(event);
+  }
+  mount(element) {
+    this.cleanup?.();
+    const host = this;
+    if (element) {
+      this.cleanup = draggable({
+        element,
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          disableNativeDragPreview({
+            nativeSetDragImage
+          });
+          preventUnhandled.start();
+        },
+        onDragStart() {
+          host.dragStartSize = host.size;
+        },
+        onDrag({ location }) {
+          host.dispatchResize(location, "dragging");
+        },
+        onDrop({ location }) {
+          host.dispatchResize(location, "dropped");
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.cleanup?.();
+  }
+  createRenderRoot() {
+    return this;
+  }
+};
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGridAxisResizeHandle.prototype, "axis", void 0);
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGridAxisResizeHandle.prototype, "plane", void 0);
+_ts_decorate([
+  property({
+    type: String
+  })
+], DxGridAxisResizeHandle.prototype, "index", void 0);
+_ts_decorate([
+  property({
+    type: Number
+  })
+], DxGridAxisResizeHandle.prototype, "size", void 0);
+DxGridAxisResizeHandle = _ts_decorate([
+  customElement("dx-grid-axis-resize-handle")
+], DxGridAxisResizeHandle);
+
+// packages/ui/lit-grid/src/dx-grid.ts
+function _ts_decorate2(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;
+}
+var gap = 1;
+var resizeTolerance = 1;
+var selectTolerance = 4;
+var overscanCol = 1;
+var overscanRow = 1;
+var sizeColMin = 32;
+var sizeColMax = 1024;
+var sizeRowMin = 16;
+var sizeRowMax = 1024;
+var shouldSelect = (pointer, { pageX, pageY }) => {
+  if (pointer?.state === "maybeSelecting") {
+    return Math.hypot(Math.abs(pointer.pageX - pageX), Math.abs(pointer.pageY - pageY)) >= selectTolerance;
+  } else {
+    return false;
+  }
+};
+var 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
+  };
+};
+var cellSelected = (col, row, plane, selection) => {
+  return plane === selection.plane && col >= selection.colMin && col <= selection.colMax && row >= selection.rowMin && row <= selection.rowMax;
+};
+var closestAction = (target) => {
+  const actionEl = target?.closest("[data-dx-grid-action]") ?? null;
+  return {
+    actionEl,
+    action: actionEl?.getAttribute("data-dx-grid-action") ?? null
+  };
+};
+var closestCell = (target, actionEl) => {
+  let cellElement = actionEl;
+  if (!cellElement) {
+    const { action, actionEl: actionEl2 } = closestAction(target);
+    if (action === "cell") {
+      cellElement = actionEl2;
+    }
+  }
+  if (cellElement) {
+    const col = parseInt(cellElement.getAttribute("aria-colindex") ?? "never");
+    const row = parseInt(cellElement.getAttribute("aria-rowindex") ?? "never");
+    const plane = cellElement.closest("[data-dx-grid-plane]")?.getAttribute("data-dx-grid-plane") ?? "grid";
+    return {
+      plane,
+      col,
+      row
+    };
+  } else {
+    return null;
+  }
+};
+var resolveRowPlane = (plane) => {
+  switch (plane) {
+    case "fixedStartStart":
+    case "fixedStartEnd":
+    case "frozenRowsStart":
+      return "frozenRowsStart";
+    case "fixedEndStart":
+    case "fixedEndEnd":
+    case "frozenRowsEnd":
+      return "frozenRowsEnd";
+    default:
+      return "grid";
+  }
+};
+var resolveColPlane = (plane) => {
+  switch (plane) {
+    case "fixedStartStart":
+    case "fixedEndStart":
+    case "frozenColsStart":
+      return "frozenColsStart";
+    case "fixedStartEnd":
+    case "fixedEndEnd":
+    case "frozenColsEnd":
+      return "frozenColsEnd";
+    default:
+      return "grid";
+  }
+};
+var 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;
+  }
+};
+var 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;
+var defaultRowSize = 32;
+var defaultColSize = 180;
+var DxGrid = class extends LitElement2 {
+  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) => {
+      if (shouldSelect(this.pointer, event)) {
+        this.pointer = {
+          state: "selecting"
+        };
+      } else if (this.pointer?.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) => {
+      const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
+        inlineSize: 0,
+        blockSize: 0
+      };
+      if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance || Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
+        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();
+    queueMicrotask(() => this.dispatchEvent(new DxEditRequest({
+      cellIndex: toCellIndex(this.focusedCell),
+      cellBox: this.focusedCellBox(),
+      initialContent
+    })));
+  }
+  handleKeydown(event) {
+    if (this.focusActive && this.mode === "browse") {
+      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;
+      }
+      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;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "ArrowRight":
+        case "ArrowLeft":
+          event.preventDefault();
+          this.snapPosToFocusedCell();
+          break;
+      }
+    }
+  }
+  //
+  // Accessors
+  //
+  colSize(c, plane) {
+    const resolvedPlane = resolveColPlane(plane);
+    return this.colSizes?.[resolvedPlane]?.[c] ?? this.columnDefault[resolvedPlane]?.size ?? defaultColSize;
+  }
+  rowSize(r, plane) {
+    const resolvedPlane = resolveRowPlane(plane);
+    return this.rowSizes?.[resolvedPlane]?.[r] ?? this.rowDefault[resolvedPlane]?.size ?? defaultRowSize;
+  }
+  cell(c, r, plane) {
+    const index = `${c}${separator}${r}`;
+    return this.cells?.[plane]?.[index] ?? this.initialCells?.[plane]?.[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;
+    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 ?? this.posInline));
+    this.maybeUpdateVisInline();
+  }
+  updatePosBlock(block) {
+    this.posBlock = Math.max(0, Math.min(this.intrinsicBlockSize - this.sizeBlock, block ?? this.posBlock));
+    this.maybeUpdateVisBlock();
+  }
+  updatePos(inline, block) {
+    this.updatePosInline(inline);
+    this.updatePosBlock(block);
+  }
+  updateVisInline() {
+    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(this.frozen.frozenColsStart ?? 0)
+    ].map((_, c0) => `${this.colSize(c0, "frozenColsStart")}px`).join(" ");
+    this.templatefrozenColsEnd = [
+      ...Array(this.frozen.frozenColsEnd ?? 0)
+    ].map((_, c0) => `${this.colSize(c0, "frozenColsEnd")}px`).join(" ");
+  }
+  updateVisBlock() {
+    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(this.frozen.frozenRowsStart ?? 0)
+    ].map((_, r0) => `${this.rowSize(r0, "frozenRowsStart")}px`).join(" ");
+    this.templatefrozenRowsEnd = [
+      ...Array(this.frozen.frozenRowsEnd ?? 0)
+    ].map((_, r0) => `${this.rowSize(r0, "frozenRowsEnd")}px`).join(" ");
+  }
+  updateVis() {
+    this.updateVisInline();
+    this.updateVisBlock();
+  }
+  updateCells(includeFixed) {
+    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 ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
+        this.cells.fixedStartStart = this.getCells({
+          start: {
+            col: 0,
+            row: 0
+          },
+          end: {
+            col: this.frozen.frozenColsStart,
+            row: this.frozen.frozenRowsStart
+          }
+        }, "fixedStartStart");
+      }
+      if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsStart ?? 0) > 0) {
+        this.cells.fixedStartEnd = this.getCells({
+          start: {
+            col: 0,
+            row: 0
+          },
+          end: {
+            col: this.frozen.frozenColsEnd,
+            row: this.frozen.frozenRowsStart
+          }
+        }, "fixedStartEnd");
+      }
+      if ((this.frozen.frozenColsStart ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
+        this.cells.fixedEndStart = this.getCells({
+          start: {
+            col: 0,
+            row: 0
+          },
+          end: {
+            col: this.frozen.frozenColsStart,
+            row: this.frozen.frozenRowsEnd
+          }
+        }, "fixedEndStart");
+      }
+      if ((this.frozen.frozenColsEnd ?? 0) > 0 && (this.frozen.frozenRowsEnd ?? 0) > 0) {
+        this.cells.fixedEndEnd = this.getCells({
+          start: {
+            col: 0,
+            row: 0
+          },
+          end: {
+            col: this.frozen.frozenColsEnd,
+            row: this.frozen.frozenRowsEnd
+          }
+        }, "fixedEndEnd");
+      }
+    }
+  }
+  // Focus handlers
+  handleFocus(event) {
+    const cellCoords = closestCell(event.target);
+    if (cellCoords) {
+      this.focusedCell = cellCoords;
+      this.focusActive = true;
+    }
+  }
+  handleBlur(event) {
+    if (!event.relatedTarget || !event.relatedTarget.closest(`[data-grid="${this.gridId}"]`)) {
+      this.focusActive = false;
+    }
+  }
+  focusedCellElement() {
+    return this.viewportRef.value?.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(() => {
+      const outOfVis = this.focusedCellOutOfVis(overscanCol, overscanRow);
+      (outOfVis.col !== 0 || outOfVis.row !== 0 ? this.viewportRef.value : this.focusedCellElement())?.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) {
+    return axis === "col" ? !!(this.columns[plane]?.[index]?.resizeable ?? this.columnDefault[plane]?.resizeable) : !!(this.rows[plane]?.[index]?.resizeable ?? this.rowDefault[plane]?.resizeable);
+  }
+  handleAxisResizeInternal(event) {
+    event.stopPropagation();
+    const { plane, axis, delta, size, index, state: state2 } = 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 (state2 === "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 ?? 0) > 0 && (rows ?? 0) > 0 ? html2`<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((_2, 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 ?? 0) > 0 ? html2`<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((_2, 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 ?? 0) > 0 ? html2`<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((_2, 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?.resizeHandle ? cell.resizeHandle === "col" ? col : row : void 0;
+    const resizePlane = cell?.resizeHandle ? resolveResizePlane(cell.resizeHandle, plane) : void 0;
+    return html2`<div
+      role="gridcell"
+      tabindex="0"
+      ?inert=${col < 0 || row < 0}
+      ?aria-selected=${selected}
+      class=${cell || active ? (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?.value}${cell?.resizeHandle && this.axisResizeable(resizePlane, cell.resizeHandle, resizeIndex) ? html2`<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 html2`<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" ${ref2(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((_2, 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?.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?.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) {
+    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;
+  }
+};
+_ts_decorate2([
+  property2({
+    type: String
+  })
+], DxGrid.prototype, "gridId", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "rowDefault", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "columnDefault", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "rows", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "columns", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "initialCells", void 0);
+_ts_decorate2([
+  property2({
+    type: String
+  })
+], DxGrid.prototype, "mode", void 0);
+_ts_decorate2([
+  property2({
+    type: Number
+  })
+], DxGrid.prototype, "limitColumns", void 0);
+_ts_decorate2([
+  property2({
+    type: Number
+  })
+], DxGrid.prototype, "limitRows", void 0);
+_ts_decorate2([
+  property2({
+    type: Object
+  })
+], DxGrid.prototype, "frozen", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "cells", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "posInline", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "posBlock", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "sizeInline", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "sizeBlock", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "overscanInline", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "overscanBlock", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "binInlineMin", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "binInlineMax", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "binBlockMin", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "binBlockMax", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "visColMin", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "visColMax", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "visRowMin", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "visRowMax", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templateGridColumns", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templatefrozenColsStart", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templatefrozenColsEnd", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templateGridRows", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templatefrozenRowsStart", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "templatefrozenRowsEnd", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "pointer", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "colSizes", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "rowSizes", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "focusActive", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "focusedCell", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "selectionStart", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "selectionEnd", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "intrinsicInlineSize", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "intrinsicBlockSize", void 0);
+_ts_decorate2([
+  state()
+], DxGrid.prototype, "observer", void 0);
+DxGrid = _ts_decorate2([
+  customElement2("dx-grid")
+], DxGrid);
+export {
+  DxAxisResize,
+  DxAxisResizeInternal,
+  DxEditRequest,
+  DxGrid,
+  DxGridCellsSelect,
+  colToA1Notation,
+  rowToA1Notation
+};
+//# sourceMappingURL=index.mjs.map