@genexus/genexus-ide-ui 0.0.9

package/dist/components/ch-grid2.js

@@ -0,0 +1,2396 @@
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
+import { C as ChGridRowsetLegend } from './ch-grid-rowset-legend2.js';
+import { m as mouseEventModifierKey } from './helpers.js';
+import { d as defineCustomElement$4 } from './ch-grid-settings2.js';
+import { d as defineCustomElement$3 } from './ch-grid-settings-columns2.js';
+import { d as defineCustomElement$2 } from './ch-window2.js';
+import { d as defineCustomElement$1 } from './ch-window-close2.js';
+
+/**
+ * The `ch-grid-row` component represents a grid row.
+ */
+class HTMLChGridRowElement extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.addEventListener("cellCaretClicked", this.cellCaretClickedHandler);
+  }
+  /**
+   * Returns the parent ch-grid element of the grid row.
+   */
+  get grid() {
+    var _a;
+    return (_a = this.parentGrid) !== null && _a !== void 0 ? _a : this.loadParentGrid();
+  }
+  /**
+   * A unique identifier for the row.
+   */
+  get rowId() {
+    var _a;
+    return (_a = this.getAttribute("rowid")) !== null && _a !== void 0 ? _a : "";
+  }
+  /**
+   * A boolean value indicating whether the row is highlighted.
+   */
+  get highlighted() {
+    return this.hasAttribute("highlighted");
+  }
+  set highlighted(value) {
+    var _a;
+    const highlightedClasses = (_a = this.grid.rowHighlightedClass) === null || _a === void 0 ? void 0 : _a.split(" ");
+    if (value === true) {
+      this.setAttribute("highlighted", "");
+      if (this.grid.rowHighlightedClass) {
+        this.classList.add(...highlightedClasses);
+      }
+    }
+    else {
+      this.removeAttribute("highlighted");
+      if (this.grid.rowHighlightedClass) {
+        this.classList.remove(...highlightedClasses);
+      }
+    }
+  }
+  /**
+   * A boolean value indicating whether the row is selected.
+   */
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(value) {
+    var _a;
+    const selectedClasses = (_a = this.grid.rowSelectedClass) === null || _a === void 0 ? void 0 : _a.split(" ");
+    if (value === true) {
+      this.setAttribute("selected", "");
+      if (this.grid.rowSelectedClass) {
+        this.classList.add(...selectedClasses);
+      }
+    }
+    else {
+      this.removeAttribute("selected");
+      if (this.grid.rowSelectedClass) {
+        this.classList.remove(...selectedClasses);
+      }
+    }
+  }
+  /**
+   * A boolean value indicating whether the row is marked.
+   */
+  get marked() {
+    return this.hasAttribute("marked");
+  }
+  set marked(value) {
+    var _a;
+    const markedClasses = (_a = this.grid.rowMarkedClass) === null || _a === void 0 ? void 0 : _a.split(" ");
+    if (value === true) {
+      this.setAttribute("marked", "");
+      if (this.grid.rowMarkedClass) {
+        this.classList.add(...markedClasses);
+      }
+    }
+    else {
+      this.removeAttribute("marked");
+      if (this.grid.rowMarkedClass) {
+        this.classList.remove(...markedClasses);
+      }
+    }
+  }
+  /**
+   * A boolean value indicating whether the row is focused.
+   */
+  get focused() {
+    return this.hasAttribute("focused");
+  }
+  set focused(value) {
+    var _a;
+    const focusedClasses = (_a = this.grid.rowFocusedClass) === null || _a === void 0 ? void 0 : _a.split(" ");
+    if (value === true) {
+      this.setAttribute("focused", "");
+      if (this.grid.rowFocusedClass) {
+        this.classList.add(...focusedClasses);
+      }
+    }
+    else {
+      this.removeAttribute("focused");
+      if (this.grid.rowFocusedClass) {
+        this.classList.remove(...focusedClasses);
+      }
+    }
+  }
+  /**
+   * A boolean value indicating whether the grid row has child rows.
+   */
+  get hasChildRows() {
+    return !!this.querySelector("ch-grid-rowset");
+  }
+  /**
+   * A boolean value indicates whether the grid row is collapsed.
+   */
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(value) {
+    const dispatchEvent = this.collapsed !== value;
+    if (value) {
+      this.setAttribute("collapsed", "");
+    }
+    else {
+      this.removeAttribute("collapsed");
+    }
+    if (dispatchEvent) {
+      this.dispatchEvent(new CustomEvent("rowCollapsedChanged", {
+        bubbles: true,
+        composed: true,
+        detail: { rowId: this.rowId, collapsed: value }
+      }));
+    }
+  }
+  /**
+   * A boolean value indicates whether the grid row is a leaf node.
+   */
+  get leaf() {
+    return this.hasAttribute("leaf");
+  }
+  set leaf(value) {
+    if (value === true) {
+      this.setAttribute("leaf", "");
+    }
+    else {
+      this.removeAttribute("leaf");
+    }
+  }
+  getCell(column) {
+    return this.querySelector(`:scope > ch-grid-cell:nth-of-type(${column.physicalOrder})`);
+  }
+  /**
+   * A boolean value indicates whether the grid row is visible.
+   */
+  isVisible() {
+    return Array.from(this.querySelectorAll(":scope > ch-grid-cell")).some((cell) => cell.isVisible());
+  }
+  /**
+   * Ensures that the row is visible within the control, scrolling the contents of the control if necessary.
+   */
+  ensureVisible() {
+    this.dispatchEvent(new CustomEvent("rowEnsureVisible", { bubbles: true, composed: true }));
+  }
+  /**
+   * returns a `DOMRect` object representing the size of the grid row element.
+   */
+  getBoundingClientRect() {
+    let rect;
+    if (!this.firstElementChild) {
+      rect = new DOMRect();
+    }
+    else if (this.firstElementChild === this.lastElementChild) {
+      rect = this.firstElementChild.getBoundingClientRect();
+    }
+    else {
+      const firstCellRect = this.firstElementChild.getBoundingClientRect();
+      const lastCellRect = this.lastElementChild.getBoundingClientRect();
+      rect = new DOMRect(firstCellRect.x, firstCellRect.y, lastCellRect.x - firstCellRect.x + lastCellRect.width, lastCellRect.y - firstCellRect.y + lastCellRect.height);
+    }
+    return rect;
+  }
+  cellCaretClickedHandler(eventInfo) {
+    const targetRow = eventInfo.currentTarget;
+    if (targetRow.hasChildRows) {
+      this.collapsed = !this.collapsed;
+    }
+    eventInfo.stopPropagation();
+  }
+  loadParentGrid() {
+    this.parentGrid = this.closest("ch-grid");
+    return this.parentGrid;
+  }
+}
+HTMLChGridRowElement.TAG_NAME = "CH-GRID-ROW";
+if (!customElements.get("ch-grid-row")) {
+  customElements.define("ch-grid-row", HTMLChGridRowElement);
+}
+
+/**
+ * The `ch-grid-rowset` component represents a group of rows.
+ */
+class HTMLChGridRowsetElement extends HTMLElement {
+  constructor() {
+    super();
+    this.computedLevel = 0;
+  }
+  connectedCallback() {
+    this.addEventListener("rowsetLegendClicked", this.rowsetLegendClickedHandler);
+    this.defineLevel();
+  }
+  /**
+   * A boolean value indicates whether the grid rowset is collapsed.
+   */
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(value) {
+    if (value) {
+      this.setAttribute("collapsed", "");
+    }
+    else {
+      this.removeAttribute("collapsed");
+    }
+  }
+  /**
+   * Gets the zero-based depth of the rowset in the tree.
+   */
+  get level() {
+    if (!this.computedLevel) {
+      this.computeLevel();
+    }
+    return this.computedLevel;
+  }
+  /**
+   * returns a `DOMRect` object representing the size of the grid rowset element.
+   */
+  getBoundingClientRect() {
+    let rect;
+    const paddingTop = parseInt(this.style.getPropertyValue("padding-top"));
+    const paddingbottom = parseInt(this.style.getPropertyValue("padding-bottom"));
+    if (!this.firstElementChild) {
+      const mainRect = this.grid.shadowRoot
+        .querySelector(".main")
+        .getBoundingClientRect();
+      rect = new DOMRect(mainRect.x, mainRect.y, mainRect.width, 0);
+    }
+    else if (this.firstElementChild === this.lastElementChild) {
+      const firstRowRect = this.firstElementChild.getBoundingClientRect();
+      rect = new DOMRect(firstRowRect.x, firstRowRect.y - paddingTop, firstRowRect.x + firstRowRect.width, firstRowRect.y + firstRowRect.height + paddingTop + paddingbottom);
+    }
+    else {
+      const firstRowRect = this.firstElementChild.getBoundingClientRect();
+      const lastRowRect = this.lastElementChild.getBoundingClientRect();
+      rect = new DOMRect(firstRowRect.x, firstRowRect.y - paddingTop, lastRowRect.x - firstRowRect.x + lastRowRect.width, lastRowRect.y -
+        firstRowRect.y +
+        lastRowRect.height +
+        paddingTop +
+        paddingbottom);
+    }
+    return rect;
+  }
+  rowsetLegendClickedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.collapsed = !this.collapsed;
+  }
+  defineLevel() {
+    this.style.setProperty("--level", this.level.toString());
+  }
+  computeLevel() {
+    var _a, _b;
+    this.computedLevel = (_b = (_a = this.getParentRowset()) === null || _a === void 0 ? void 0 : _a.level) !== null && _b !== void 0 ? _b : 0;
+    if (this.hasLegend() || this.isNestedRow()) {
+      this.computedLevel++;
+    }
+  }
+  hasLegend() {
+    var _a;
+    return ((_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === ChGridRowsetLegend.TAG_NAME;
+  }
+  isNestedRow() {
+    return this.parentElement.tagName === HTMLChGridRowElement.TAG_NAME;
+  }
+  getParentRowset() {
+    const node = this.parentElement.closest("ch-grid-rowset, ch-grid");
+    if (node.tagName === HTMLChGridRowsetElement.TAG_NAME) {
+      return node;
+    }
+  }
+}
+HTMLChGridRowsetElement.TAG_NAME = "CH-GRID-ROWSET";
+if (!customElements.get("ch-grid-rowset")) {
+  customElements.define("ch-grid-rowset", HTMLChGridRowsetElement);
+}
+
+/**
+ * ChGridCellType indicates the type of cell.
+ * "Plain" is a simple cell that shows the contents of it.
+ * "Rich" is a rich cell that, in addition to displaying its content, enables
+ * the user to execute different actions on the row.
+ * The actions are:
+ * - allow dragging the row to reorder it.
+ * - allow to select the row by means of a checkbox.
+ * - allow displaying actions to be executed in the row.
+ * "TreeNode" is a cell that represents a node of the Tree.
+ */
+var ChGridCellType;
+(function (ChGridCellType) {
+  ChGridCellType["Plain"] = "plain";
+  ChGridCellType["Rich"] = "rich";
+  ChGridCellType["TreeNode"] = "node";
+  ChGridCellType["RowAction"] = "action";
+})(ChGridCellType || (ChGridCellType = {}));
+/**
+ * The `ch-grid-cell` component represents a grid cell.
+ */
+class HTMLChGridCellElement extends HTMLElement {
+  constructor() {
+    super();
+    this.cellType = ChGridCellType.Plain;
+  }
+  /**
+   * One of "plain", "rich", or "node", indicating the type of cell.
+   */
+  get type() {
+    return this.cellType;
+  }
+  set type(value) {
+    switch (value) {
+      case ChGridCellType.Plain:
+        this.definePlain();
+        break;
+      case ChGridCellType.Rich:
+        this.defineRich();
+        break;
+      case ChGridCellType.TreeNode:
+        this.defineTreeNode();
+        break;
+    }
+  }
+  /**
+   * Returns the parent ch-grid element of the cell.
+   */
+  get grid() {
+    return this.closest("ch-grid");
+  }
+  /**
+   * Returns the ch-grid-column element of the cell.
+   */
+  get column() {
+    const cellIndex = Array.prototype.indexOf.call(this.row.querySelectorAll(`:scope > ch-grid-cell`), this);
+    return this.grid.querySelector(`ch-grid-column:nth-of-type(${cellIndex + 1})`);
+  }
+  /**
+   * Returns the parent ch-grid-row element of the cell.
+   */
+  get row() {
+    return this.parentElement;
+  }
+  /**
+   * A unique identifier for the cell.
+   */
+  get cellId() {
+    var _a;
+    return (_a = this.getAttribute("cellid")) !== null && _a !== void 0 ? _a : "";
+  }
+  /**
+   * A boolean value indicating whether the cell is selected.
+   */
+  get selected() {
+    return this.hasAttribute("selected");
+  }
+  set selected(value) {
+    if (value === true) {
+      this.setAttribute("selected", "");
+    }
+    else {
+      this.removeAttribute("selected");
+    }
+  }
+  /**
+   * A boolean value indicates whether the grid cell is visible.
+   */
+  isVisible() {
+    return this.offsetParent !== null;
+  }
+  /**
+   * Ensures that the cell is visible within the control, scrolling the contents of the control if necessary.
+   */
+  ensureVisible() {
+    this.dispatchEvent(new CustomEvent("cellEnsureVisible", { bubbles: true, composed: true }));
+  }
+  /**
+   * A boolean value indicates whether the selector of cell is checked or not.
+   */
+  setSelectorChecked(value) {
+    this.selector.checked = value;
+    if (this.selector.checked) {
+      this.selector.setAttribute("part", "selector checked");
+    }
+    else {
+      this.selector.setAttribute("part", "selector");
+    }
+  }
+  caretMouseDownHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.dispatchEvent(new CustomEvent("cellCaretClicked", { bubbles: true, composed: true }));
+  }
+  selectorClickHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    this.dispatchEvent(new CustomEvent("cellSelectorClicked", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        checked: this.selector.checked,
+        range: eventInfo.shiftKey
+      }
+    }));
+  }
+  selectorLabelClickHandler(eventInfo) {
+    if (!eventInfo.shiftKey) {
+      eventInfo.stopPropagation();
+    }
+  }
+  dragMouseDownHandler(eventInfo) {
+    eventInfo.preventDefault();
+    eventInfo.stopPropagation();
+    this.dispatchEvent(new CustomEvent("rowDragStarted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        row: this.row
+      }
+    }));
+  }
+  actionClickHandler() {
+    // TODO
+  }
+  definePlain() {
+    this.cellType = ChGridCellType.Plain;
+  }
+  defineRich() {
+    let html = "";
+    this.cellType = ChGridCellType.Rich;
+    if (!this.shadowRoot || this.shadowRoot.innerHTML === "") {
+      this.attachShadow({ mode: "open" });
+      if (this.rowDrag) {
+        html += `
+          <div part="drag-icon"></div>
+        `;
+      }
+      if (this.rowSelector) {
+        html += `
+          <style>label {display:flex}</style>
+          <label part="selector-label">
+            <input type="checkbox" part="selector">
+          </label>
+        `;
+      }
+      if (this.rowActions) {
+        html += `
+          <button part="actions-icon"></button>
+        `;
+      }
+      this.shadowRoot.innerHTML = `
+        ${html}
+        <slot></slot>
+      `;
+      if (this.rowDrag) {
+        this.drag = this.shadowRoot.querySelector("[part='drag-icon']");
+        this.drag.addEventListener("mousedown", this.dragMouseDownHandler.bind(this));
+      }
+      if (this.rowActions) {
+        this.action = this.shadowRoot.querySelector("[part='actions-icon']");
+        this.action.addEventListener("click", this.actionClickHandler.bind(this));
+      }
+      if (this.rowSelector) {
+        this.addEventListener("mousedown", (eventInfo) => eventInfo.stopPropagation());
+        this.selector = this.shadowRoot.querySelector("[part='selector']");
+        this.selector.addEventListener("click", this.selectorClickHandler.bind(this));
+        this.selectorLabel = this.shadowRoot.querySelector("[part='selector-label']");
+        this.selectorLabel.addEventListener("click", this.selectorLabelClickHandler.bind(this));
+      }
+    }
+  }
+  defineTreeNode() {
+    this.cellType = ChGridCellType.TreeNode;
+    if (!this.shadowRoot || this.shadowRoot.innerHTML === "") {
+      this.attachShadow({ mode: "open" });
+      this.shadowRoot.innerHTML = `
+        <style>:host::before {content: none !important}</style>
+        <div part="indent"></div>
+        <div part="caret"></div>
+        <input type="checkbox" part="node-selector" hidden>
+        <div part="node-icon"></div>
+        <slot></slot>
+      `;
+      this.caret = this.shadowRoot.querySelector("[part='caret']");
+      this.caret.addEventListener("mousedown", this.caretMouseDownHandler.bind(this));
+    }
+  }
+}
+HTMLChGridCellElement.TAG_NAME = "CH-GRID-CELL";
+if (!customElements.get("ch-grid-cell")) {
+  customElements.define("ch-grid-cell", HTMLChGridCellElement);
+}
+
+class ChGridManagerColumnDrag {
+  constructor(columnId, columns) {
+    this.lastTargetOrder = 0;
+    this.columns = columns.map(column => ({
+      column,
+      rect: column.getBoundingClientRect(),
+      translateX: 0,
+      order: column.order
+    }));
+    this.column = this.columns.find(item => item.column.columnId === columnId);
+    this.columns.forEach(this.setColumnHiddenRect.bind(this));
+  }
+  dragging(position) {
+    /**
+     * Indica el orden inicial de la columna que se está arrastrando
+     */
+    const sourceOrder = this.column.column.order;
+    /**
+     * Indica a qué grupo de fijación pertenece la columna que se está arrastrando
+     */
+    const sourceFreeze = this.column.column.freeze;
+    let targetOrder = 0;
+    let targetOrderChanged = false;
+    this.column.translateX = 0;
+    this.columns
+      .filter(item => item.column.freeze === sourceFreeze)
+      .forEach(item => {
+      /**
+       * Indica el orden de la columna actual
+       */
+      const columnOrder = item.column.order;
+      /**
+       * Indica si la columna que se está arrastrando estaba a la derecha o
+       * a la izquierda de la actual cuando se inició el arrastre para
+       * trasladarla en la dirección correspondiente.
+       */
+      const dragDirection = sourceOrder > columnOrder ? -1 : 1;
+      /**
+       * Indica si la columna actual hay que desplazarla a la derecha o
+       * a la izquierda cuando se cruce con la columna arrastrada.
+       */
+      const shiftDirection = sourceOrder > columnOrder ? 1 : -1;
+      if (item.rect.left < position &&
+        position < item.rect.right &&
+        columnOrder !== sourceOrder) {
+        /*
+          La posicion actual del mouse está dentro de la columna actual y
+          no es la columna que se está arrastrando
+        */
+        this.swapColumnPosition(item, dragDirection, shiftDirection);
+        targetOrder = columnOrder;
+      }
+      else if (position < item.rect.left && columnOrder < sourceOrder) {
+        /*
+          La posicion actual del mouse está a la izquierda de la columna actual
+          haciendo que la columna arrastrada cruce la actual.
+        */
+        this.swapColumnPosition(item, dragDirection, shiftDirection);
+        if (!targetOrder || columnOrder < targetOrder) {
+          targetOrder = columnOrder;
+        }
+      }
+      else if (position > item.rect.right && columnOrder > sourceOrder) {
+        /*
+          La posicion actual del mouse está a la derecha de la columna actual
+          haciendo que la columna arrastrada cruce la actual.
+        */
+        this.swapColumnPosition(item, dragDirection, shiftDirection);
+        if (!targetOrder || columnOrder > targetOrder) {
+          targetOrder = columnOrder;
+        }
+      }
+      else if (columnOrder !== sourceOrder) {
+        /*
+          La posicion actual del mouse NO está dentro de la columna actual ni
+          la cruza.
+        */
+        this.resetColumnPosition(item);
+      }
+    });
+    this.column.order = targetOrder ? targetOrder : this.column.column.order;
+    targetOrderChanged = targetOrder !== this.lastTargetOrder;
+    this.lastTargetOrder = targetOrder;
+    return targetOrderChanged;
+  }
+  dragEnd() {
+    this.columns.forEach(item => {
+      item.column.order = item.order;
+      item.translateX = 0;
+    });
+  }
+  getColumnStyle(column) {
+    return {
+      [`--ch-grid-column-${column.physicalOrder}-transform`]: `translateX(${this.columns[column.physicalOrder - 1].translateX}px)`
+    };
+  }
+  getColumnsFirstLast() {
+    let itemFirst;
+    let itemLast;
+    this.columns.forEach(item => {
+      if (!item.column.hidden && (!itemFirst || item.order < itemFirst.order)) {
+        itemFirst = item;
+      }
+      if (!item.column.hidden && (!itemLast || item.order > itemLast.order)) {
+        itemLast = item;
+      }
+    });
+    return {
+      columnFirst: itemFirst.column,
+      columnLast: itemLast.column
+    };
+  }
+  swapColumnPosition(column, dragDirection, shiftDirection) {
+    // desplazo la columna actual para ocupar el espacio que dejó
+    // la columna arrastrada
+    column.translateX = this.column.rect.width * shiftDirection;
+    // actualizo el orden de la columna actual
+    column.order = column.column.order + shiftDirection;
+    // desplazo la columna que se está arrastrando para que ocupe el
+    // espacio que dejó la columna actual
+    this.column.translateX += column.rect.width * dragDirection;
+  }
+  resetColumnPosition(column) {
+    // no desplazo la columna actual
+    column.translateX = 0;
+    // asigno su posición original
+    column.order = column.column.order;
+  }
+  setColumnHiddenRect(item) {
+    if (item.column.hidden) {
+      const columnSibling = this.getPreviousSiblingVisible(item) ||
+        this.getNextSiblingVisible(item);
+      item.rect = new DOMRect(item.column.order < columnSibling.column.order
+        ? columnSibling.rect.left
+        : columnSibling.rect.right, columnSibling.rect.y, 0, columnSibling.rect.height);
+    }
+  }
+  getPreviousSiblingVisible(hidden) {
+    let previous;
+    this.columns.forEach(item => {
+      if (!item.column.hidden &&
+        item.column.order < hidden.column.order &&
+        (!previous || item.column.order > previous.column.order)) {
+        previous = item;
+      }
+    });
+    return previous;
+  }
+  getNextSiblingVisible(hidden) {
+    let next;
+    this.columns.forEach(item => {
+      if (!item.column.hidden &&
+        item.column.order > hidden.column.order &&
+        (!next || item.column.order < next.column.order)) {
+        next = item;
+      }
+    });
+    return next;
+  }
+}
+
+class ChGridManagerColumns {
+  constructor(grid) {
+    this.columnsetObserver = new MutationObserver(this.reloadColumns.bind(this));
+    this.columnResizeObserver = new ResizeObserver(this.resizeColumnHandler.bind(this));
+    this.columnsDisplay = [];
+    this.grid = grid;
+    this.columns = Array.from(this.grid.el.querySelectorAll("ch-grid-column"));
+    this.observeColumnset();
+    this.defineColumns(this.columns);
+    this.defineColumnsVariables();
+    this.adjustFreezeOrder();
+    this.adjustBaseLayer();
+  }
+  getColumn(columnId) {
+    return this.columns.find(column => column.columnId === columnId);
+  }
+  getColumns(sorted = false) {
+    if (sorted) {
+      return this.columns.sort(this.fnSortByOrder);
+    }
+    else {
+      return this.columns;
+    }
+  }
+  getColumnsFirstLast() {
+    let columnFirst;
+    let columnLast;
+    this.columns.forEach(column => {
+      if (!column.hidden &&
+        (!columnFirst || column.order < columnFirst.order)) {
+        columnFirst = column;
+      }
+      if (!column.hidden && (!columnLast || column.order > columnLast.order)) {
+        columnLast = column;
+      }
+    });
+    return {
+      columnFirst,
+      columnLast
+    };
+  }
+  getColumnSelector() {
+    return this.columns.find(column => column.columnType === "rich" && column.richRowSelector);
+  }
+  adjustFreezeOrder() {
+    const freezeStart = this.columns
+      .filter(column => column.freeze === "start")
+      .sort(this.fnSortByOrder);
+    const noFreeze = this.columns
+      .filter(column => column.freeze !== "start" && column.freeze !== "end")
+      .sort(this.fnSortByOrder);
+    const freezeEnd = this.columns
+      .filter(column => column.freeze === "end")
+      .sort(this.fnSortByOrder);
+    let order = 1;
+    freezeStart.forEach(column => (column.order = order++));
+    noFreeze.forEach(column => (column.order = order++));
+    freezeEnd.forEach(column => (column.order = order++));
+  }
+  defineColumns(columns) {
+    columns.forEach(column => {
+      this.defineColumnId(column);
+      this.defineColumnIndex(column);
+      this.defineColumnOrder(column);
+      this.defineColumnSize(column);
+      this.defineColumnDisplayObserver(column);
+      this.defineColumnResizeObserver(column);
+      this.defineColumnType(column);
+    });
+  }
+  defineColumnId(column) {
+    if (!column.columnId) {
+      column.columnId = this.getColumnUniqueId();
+    }
+  }
+  defineColumnIndex(column) {
+    column.physicalOrder = this.columns.indexOf(column) + 1;
+  }
+  defineColumnOrder(column) {
+    if (!column.order) {
+      column.order = column.physicalOrder;
+    }
+  }
+  defineColumnSize(column) {
+    if (!column.size) {
+      column.size = "auto";
+    }
+  }
+  defineColumnDisplayObserver(column) {
+    if (column.displayObserverClass && !column.hidden) {
+      const i = this.columnsDisplay.push(document.createElement("ch-grid-column-display")) - 1;
+      this.columnsDisplay[i].setAttribute("slot", "column-display");
+      this.columnsDisplay[i].setAttribute("class", column.displayObserverClass);
+      this.columnsDisplay[i].column = column;
+      this.grid.el.appendChild(this.columnsDisplay[i]);
+    }
+  }
+  defineColumnResizeObserver(column) {
+    this.columnResizeObserver.observe(column, { box: "border-box" });
+  }
+  defineColumnType(column) {
+    switch (column.columnType) {
+      case "tree":
+        this.grid.el
+          .querySelectorAll(`ch-grid-cell:nth-child(${column.physicalOrder})`)
+          .forEach((cell) => {
+          cell.type = ChGridCellType.TreeNode;
+        });
+        break;
+      case "rich":
+        this.grid.el
+          .querySelectorAll(`ch-grid-cell:nth-child(${column.physicalOrder})`)
+          .forEach((cell) => {
+          cell.rowDrag = column.richRowDrag;
+          cell.rowSelector = column.richRowSelector;
+          cell.rowActions = column.richRowActions;
+          cell.type = ChGridCellType.Rich;
+        });
+        break;
+    }
+  }
+  defineColumnsVariables() {
+    const style = document.head.querySelector("#ch-grid-columns-variables");
+    if (!style ||
+      parseInt(style.getAttribute("data-columns")) < this.columns.length) {
+      let selectors = "";
+      for (let i = 1; i <= this.columns.length; i++) {
+        selectors += `ch-grid-column:nth-child(${i}), ch-grid-cell:nth-child(${i}) {
+                        display: var(--ch-grid-column-${i}-display, flex);
+                        grid-column: var(--ch-grid-column-${i}-position, ${i});
+                        margin-inline-start: var(--ch-grid-column-${i}-margin-start);
+                        border-inline-start: var(--ch-grid-column-${i}-border-start);
+                        padding-inline-start: var(--ch-grid-column-${i}-padding-start);
+                        margin-inline-end: var(--ch-grid-column-${i}-margin-end);
+                        border-inline-end: var(--ch-grid-column-${i}-border-end);
+                        padding-inline-end: var(--ch-grid-column-${i}-padding-end);
+                        transform: var(--ch-grid-column-${i}-transform);
+                        left: var(--ch-grid-column-${i}-left-freeze);
+                        right: var(--ch-grid-column-${i}-right-freeze);
+                    }
+                    ch-grid-column:nth-child(${i}) {
+                      z-index: calc(var(--ch-grid-column-${i}-z-index-freeze, 0) + var(--ch-grid-column-z-index-head, 0)  + var(--ch-grid-column-z-index-active, 0));
+                    }
+                    ch-grid-cell:nth-child(${i}) {
+                      z-index: calc(var(--ch-grid-column-${i}-z-index-freeze, 0) + var(--ch-grid-cell-z-index-active, 0));
+                    }
+                    ch-grid-cell:nth-child(${i})::before {
+                      content: var(--ch-grid-column-${i}-content);
+                    }
+                `;
+      }
+      const styleInnerHTML = `@layer ch-grid {
+        ${selectors}
+      }`;
+      if (style) {
+        style.setAttribute("data-columns", this.columns.length.toString());
+        style.innerHTML = styleInnerHTML;
+      }
+      else {
+        document.head.insertAdjacentHTML("beforeend", `<style id="ch-grid-columns-variables" data-columns="${this.columns.length}">${styleInnerHTML}</style>`);
+      }
+    }
+  }
+  undefineColumns(columns) {
+    columns.forEach(column => {
+      this.columnResizeObserver.unobserve(column);
+      this.columnsDisplay
+        .filter(columnDisplay => columnDisplay.column === column)
+        .forEach(item => {
+        item.remove();
+      });
+    });
+  }
+  observeColumnset() {
+    this.columnsetObserver.observe(this.grid.el.querySelector("ch-grid-columnset"), { childList: true });
+  }
+  reloadColumns() {
+    const columns = Array.from(this.grid.el.querySelectorAll("ch-grid-column"));
+    const columnsAdded = columns.filter(column => !this.columns.includes(column));
+    const columnsRemoved = this.columns.filter(column => !columns.includes(column));
+    if (columnsAdded.length || columnsRemoved.length) {
+      this.columns = columns;
+      this.undefineColumns(columnsRemoved);
+      this.defineColumns(columnsAdded);
+      this.defineColumnsVariables();
+      this.adjustOrders();
+      this.adjustBaseLayer();
+    }
+  }
+  resizeColumnHandler(entries) {
+    for (const entry of entries) {
+      const column = entry.target;
+      this.grid.gridMainEl.style.setProperty(`--ch-grid-column-${column.physicalOrder}-width`, `${entry.contentRect.width}px`);
+    }
+  }
+  getColumnUniqueId() {
+    const uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2);
+    return `ch-grid-column-auto-${uniqueId}`;
+  }
+  adjustOrders() {
+    // adjust physicalOrder
+    this.columns.forEach((column, i) => (column.physicalOrder = i + 1));
+    // adjust order, preserving physicalOrder array
+    [...this.columns].sort(this.fnSortByOrder).forEach((column, i) => {
+      column.order = i + 1;
+    });
+  }
+  adjustBaseLayer() {
+    this.grid.baseLayer = this.columns.length;
+  }
+  fnSortByOrder(columnA, columnB) {
+    if (columnA.order < columnB.order) {
+      return -1;
+    }
+    if (columnA.order > columnB.order) {
+      return 1;
+    }
+    return 0;
+  }
+}
+
+class ChGridManagerSelection {
+  constructor(grid) {
+    this.selectionStateNone = {
+      rowFocused: null,
+      rowsSelected: [],
+      cellSelected: null
+    };
+    this.grid = grid;
+  }
+  select(state, row, cell, append, range) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+      range = false;
+    }
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    rowFocused = row;
+    if (range) {
+      const rangeRows = this.grid.manager.getRowsRange((_a = this.rangeStart) !== null && _a !== void 0 ? _a : row, row);
+      if (this.rangeValue) {
+        if (append) {
+          rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
+        }
+        else {
+          rowsSelected =
+            rowsSelected.length === rangeRows.length ? rowsSelected : rangeRows;
+        }
+        cellSelected =
+          cell ||
+            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+      }
+      else {
+        rowsSelected = rowsSelected.filter(rowSelected => !rangeRows.includes(rowSelected));
+        cellSelected = null;
+      }
+    }
+    else if (append) {
+      this.rangeStart = row;
+      this.rangeValue = !row.selected;
+      if (rowsSelected.includes(row)) {
+        rowsSelected = rowsSelected.filter(rowSelected => rowSelected !== row);
+        cellSelected = null;
+      }
+      else {
+        rowsSelected = [...rowsSelected, row];
+        cellSelected =
+          cell ||
+            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+      }
+    }
+    else {
+      this.rangeStart = row;
+      this.rangeValue = true;
+      rowsSelected =
+        rowsSelected.length === 1 && rowsSelected[0] === row
+          ? rowsSelected
+          : [row];
+      cellSelected =
+        cell ||
+          row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectAll(state, value = true) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    const rows = this.grid.manager.getRows();
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (value) {
+      rowFocused = rowFocused !== null && rowFocused !== void 0 ? rowFocused : this.grid.manager.getFirstRow();
+      rowsSelected = rows;
+      cellSelected = rowFocused.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+    }
+    else {
+      rowFocused = rowFocused !== null && rowFocused !== void 0 ? rowFocused : this.grid.manager.getFirstRow();
+      rowsSelected = [];
+      cellSelected = null;
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectSet(state, row, cell, value = true) {
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    rowFocused = row;
+    if (value) {
+      rowsSelected = rowsSelected.includes(row)
+        ? rowsSelected
+        : [...rowsSelected, row];
+      cellSelected = cell;
+    }
+    else {
+      rowsSelected = !rowsSelected.includes(row)
+        ? rowsSelected
+        : rowsSelected.filter(rowSelected => rowSelected !== row);
+      cellSelected = null;
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectFirstRow(state, append) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const firstRow = this.grid.manager.getFirstRow();
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (firstRow) {
+      if (append) {
+        const rangeRows = this.grid.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : firstRow, firstRow);
+        rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
+      }
+      else {
+        rowsSelected = [firstRow];
+      }
+      rowFocused = firstRow;
+      cellSelected = firstRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectPreviousRow(state, append) {
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const previousRow = this.grid.manager.getPreviousRow(state.rowFocused);
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (previousRow) {
+      if (append) {
+        const sortedRowsSelected = this.sortRowsSelected(rowsSelected);
+        const isContiguousSelection = this.isContiguousSelection(sortedRowsSelected);
+        if (isContiguousSelection && rowFocused === sortedRowsSelected[0]) {
+          rowsSelected = [...rowsSelected, previousRow];
+        }
+        else if (isContiguousSelection &&
+          rowFocused === sortedRowsSelected[sortedRowsSelected.length - 1]) {
+          rowsSelected = rowsSelected.slice(0, -1);
+        }
+        else {
+          rowsSelected = [rowFocused, previousRow];
+        }
+      }
+      else {
+        rowsSelected = [previousRow];
+      }
+      rowFocused = previousRow;
+      cellSelected = previousRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectNextRow(state, append) {
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const nextRow = this.grid.manager.getNextRow(state.rowFocused);
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (nextRow) {
+      if (append) {
+        const sortedRowsSelected = this.sortRowsSelected(rowsSelected);
+        const isContiguousSelection = this.isContiguousSelection(sortedRowsSelected);
+        if (isContiguousSelection &&
+          rowFocused === sortedRowsSelected[sortedRowsSelected.length - 1]) {
+          rowsSelected = [...rowsSelected, nextRow];
+        }
+        else if (isContiguousSelection &&
+          rowFocused === sortedRowsSelected[0]) {
+          rowsSelected = rowsSelected.slice(1);
+        }
+        else {
+          rowsSelected = [rowFocused, nextRow];
+        }
+      }
+      else {
+        rowsSelected = [nextRow];
+      }
+      rowFocused = nextRow;
+      cellSelected = nextRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectLastRow(state, append) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const firstRow = this.grid.manager.getLastRow();
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (firstRow) {
+      if (append) {
+        const rangeRows = this.grid.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : firstRow, firstRow);
+        rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
+      }
+      else {
+        rowsSelected = [firstRow];
+      }
+      rowFocused = firstRow;
+      cellSelected = firstRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectPreviousPageRow(state, append) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const rows = this.grid.manager.getRows();
+    const rowsPerPage = this.grid.manager.getRowsPerPage();
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    const previousPageRow = rows[Math.max(rows.indexOf(rowFocused) - rowsPerPage, 0)];
+    if (previousPageRow) {
+      if (append) {
+        const rangeRows = this.grid.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : previousPageRow, previousPageRow);
+        rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
+      }
+      else {
+        rowsSelected =
+          rowsSelected.length === 1 && rowsSelected[0] === previousPageRow
+            ? rowsSelected
+            : [previousPageRow];
+      }
+      rowFocused = previousPageRow;
+      cellSelected = previousPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectNextPageRow(state, append) {
+    var _a;
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    else if (this.grid.rowSelectionMode !== "multiple") {
+      append = false;
+    }
+    const rows = this.grid.manager.getRows();
+    const rowsPerPage = this.grid.manager.getRowsPerPage();
+    let rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    const nextPageRow = rows[Math.min(rows.indexOf(rowFocused) + rowsPerPage, rows.length - 1)];
+    if (nextPageRow) {
+      if (append) {
+        const rangeRows = this.grid.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : nextPageRow, nextPageRow);
+        rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
+      }
+      else {
+        rowsSelected =
+          rowsSelected.length === 1 && rowsSelected[0] === nextPageRow
+            ? rowsSelected
+            : [nextPageRow];
+      }
+      rowFocused = nextPageRow;
+      cellSelected = nextPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectPreviousCell(state) {
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    const rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (cellSelected) {
+      const nextCell = this.grid.manager.getPreviousCell(cellSelected);
+      if (nextCell) {
+        cellSelected = nextCell;
+      }
+    }
+    else {
+      if (!rowsSelected.includes(rowFocused)) {
+        rowsSelected = [...rowsSelected, rowFocused];
+      }
+      if (!cellSelected) {
+        cellSelected = rowFocused.getCell(this.grid.manager.getFirstColumn());
+      }
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  selectNextCell(state) {
+    if (this.grid.rowSelectionMode === "none") {
+      return this.selectionStateNone;
+    }
+    const rowFocused = state.rowFocused;
+    let rowsSelected = state.rowsSelected;
+    let cellSelected = state.cellSelected;
+    if (cellSelected) {
+      const nextCell = this.grid.manager.getNextCell(cellSelected);
+      if (nextCell) {
+        cellSelected = nextCell;
+      }
+    }
+    else {
+      if (!rowsSelected.includes(rowFocused)) {
+        rowsSelected = [...rowsSelected, rowFocused];
+      }
+      if (!cellSelected) {
+        cellSelected = rowFocused.getCell(this.grid.manager.getFirstColumn());
+      }
+    }
+    return { rowFocused, rowsSelected, cellSelected };
+  }
+  markRow(row, checked, range, currentRowsMarked) {
+    var _a;
+    if (row) {
+      if (range) {
+        const value = !row.marked;
+        const rows = this.grid.manager.getRowsRange((_a = this.lastRowMarked) !== null && _a !== void 0 ? _a : row, row);
+        this.lastRowMarked = row;
+        if (value) {
+          return currentRowsMarked.concat(rows.filter(row => !currentRowsMarked.includes(row)));
+        }
+        else {
+          return currentRowsMarked.filter(row => !rows.includes(row));
+        }
+      }
+      else {
+        this.lastRowMarked = row;
+        if (checked && !currentRowsMarked.includes(row)) {
+          return currentRowsMarked.concat([row]);
+        }
+        else if (!checked && currentRowsMarked.includes(row)) {
+          return currentRowsMarked.filter(r => r !== row);
+        }
+      }
+    }
+    return currentRowsMarked;
+  }
+  markAllRows(value = true) {
+    if (value) {
+      return this.grid.manager.getRows();
+    }
+    else {
+      return [];
+    }
+  }
+  syncRowSelector(rows, previous = [], selectorMode) {
+    const columnSelector = this.grid.manager.columns.getColumnSelector();
+    if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === selectorMode) {
+      const indexColumnSelector = columnSelector.physicalOrder - 1;
+      previous === null || previous === void 0 ? void 0 : previous.filter(x => !rows.includes(x)).forEach(row => {
+        row.marked = false;
+        const cell = row.children[indexColumnSelector];
+        cell.setSelectorChecked(false);
+      });
+      rows === null || rows === void 0 ? void 0 : rows.forEach(row => {
+        row.marked = columnSelector.richRowSelectorMode === "mark";
+        const cell = row.children[indexColumnSelector];
+        cell.setSelectorChecked(true);
+      });
+      if (rows.length === 0) {
+        columnSelector.richRowSelectorState = "";
+      }
+      else if (rows.length === this.grid.manager.getRows().length) {
+        columnSelector.richRowSelectorState = "checked";
+      }
+      else {
+        columnSelector.richRowSelectorState = "indeterminate";
+      }
+    }
+  }
+  sortRowsSelected(rowsSelected) {
+    const rows = Array.from(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}`));
+    return rowsSelected.sort((rowA, rowB) => {
+      const rowAIndex = rows.indexOf(rowA);
+      const rowBIndex = rows.indexOf(rowB);
+      if (rowAIndex < rowBIndex) {
+        return -1;
+      }
+      if (rowAIndex > rowBIndex) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  isContiguousSelection(sortedRowsSelected) {
+    const rows = Array.from(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}`)).filter(row => row.isVisible());
+    if (sortedRowsSelected.length === 0) {
+      return false;
+    }
+    else if (sortedRowsSelected.length === 1) {
+      return true;
+    }
+    else {
+      const startIndex = rows.indexOf(sortedRowsSelected[0]);
+      const endIndex = rows.indexOf(sortedRowsSelected[sortedRowsSelected.length - 1]);
+      return endIndex - startIndex + 1 === sortedRowsSelected.length;
+    }
+  }
+}
+
+class ChGridManagerRowDrag {
+  constructor(grid) {
+    this.dragMouseMoveFn = this.dragMouseMoveHandler.bind(this);
+    this.grid = grid;
+  }
+  dragStart(row) {
+    this.row = row;
+    this.rowIndex = this.grid.manager.getGridRowIndex(row);
+    this.defineListeners();
+    this.createRowShadow();
+    this.floatRow();
+    this.updateRowPosition();
+  }
+  dragMouseMoveHandler(eventInfo) {
+    const target = eventInfo.target;
+    const rowHover = target.closest(HTMLChGridRowElement.TAG_NAME);
+    if (rowHover &&
+      rowHover.parentElement === this.row.parentElement &&
+      rowHover.grid === this.grid.el) {
+      const rowHoverIndex = this.grid.manager.getGridRowIndex(rowHover);
+      const rowHoverGridPosition = rowHoverIndex + 2; // +1 RowHeaderColumn, +1 array start at 1
+      const offsetPosition = this.rowIndex < rowHoverIndex ? -1 : 1;
+      if (this.rowShadow.style.getPropertyValue("--row-shadow-row-start") !==
+        `${rowHoverGridPosition}`) {
+        this.rowShadow.style.setProperty("--row-shadow-row-start", `${rowHoverGridPosition}`);
+      }
+      else {
+        this.rowShadow.style.setProperty("--row-shadow-row-start", `${rowHoverGridPosition + offsetPosition}`);
+      }
+      this.updateRowPosition();
+    }
+  }
+  dragMouseUpHandler() {
+    document.removeEventListener("mousemove", this.dragMouseMoveFn);
+    const dropPosition = parseInt(this.rowShadow.style.getPropertyValue("--row-shadow-row-start"));
+    const rowDrop = this.grid.el
+      .querySelectorAll("ch-grid-row")
+      .item(dropPosition - 2);
+    if (dropPosition < this.rowIndex + 2) {
+      rowDrop.before(this.row);
+    }
+    if (dropPosition > this.rowIndex + 2) {
+      rowDrop.after(this.row);
+    }
+    this.unfloatRow();
+    this.rowShadow.remove();
+    this.row = null;
+    this.rowShadow = null;
+  }
+  defineListeners() {
+    document.addEventListener("mousemove", this.dragMouseMoveFn, {
+      passive: true
+    });
+    document.addEventListener("mouseup", this.dragMouseUpHandler.bind(this), {
+      once: true
+    });
+  }
+  createRowShadow() {
+    const rowHeight = this.grid.manager.getRowHeight(this.row);
+    this.rowShadow = document.createElement("div");
+    this.rowShadow.style.display = "contents";
+    this.grid.manager.getColumnsWidth().forEach(width => {
+      const column = document.createElement("div");
+      column.style.opacity = "0";
+      column.style.minWidth = width;
+      column.style.height = `${rowHeight}px`;
+      column.style.gridRowStart = "var(--row-shadow-row-start)";
+      this.rowShadow.append(column);
+    });
+  }
+  floatRow() {
+    const columnsWidth = this.grid.manager.getColumnsWidth();
+    const rowWidth = this.grid.gridMainEl.clientWidth;
+    this.row.before(this.rowShadow);
+    this.row.setAttribute("dragging", "");
+    this.row.style.width = `${rowWidth}px`;
+    this.row
+      .querySelectorAll(":scope > ch-grid-cell")
+      .forEach((cell, i) => {
+      const columnPosition = parseInt(this.grid.gridMainEl.style.getPropertyValue(`--ch-grid-column-${i + 1}-position`));
+      if (!cell.hidden) {
+        cell.style.width = columnsWidth[columnPosition - 1];
+        cell.style.order = `${columnPosition}`;
+      }
+    });
+  }
+  unfloatRow() {
+    this.row.removeAttribute("dragging");
+    this.row.style.width = "";
+    this.row
+      .querySelectorAll(":scope > ch-grid-cell")
+      .forEach((cell) => {
+      cell.style.width = "";
+      cell.style.order = "";
+    });
+  }
+  updateRowPosition() {
+    const rect = this.rowShadow.children[0].getBoundingClientRect();
+    this.row.style.top = `${rect.top}px`;
+    this.row.style.left = `${rect.left}px`;
+  }
+}
+
+class ChGridManager {
+  constructor(grid) {
+    this.grid = grid;
+    this.columnsManager = new ChGridManagerColumns(this.grid);
+    this.selectionManager = new ChGridManagerSelection(this.grid);
+  }
+  get selection() {
+    return this.selectionManager;
+  }
+  get columns() {
+    return this.columnsManager;
+  }
+  gridDidLoad() {
+    if (this.isRowActionsEnabled()) {
+      this.observeMainScroll();
+    }
+  }
+  getColumns() {
+    return this.columnsManager.getColumns();
+  }
+  getColumnsWidth() {
+    return getComputedStyle(this.grid.gridMainEl).gridTemplateColumns.split(" ");
+  }
+  getColumnsetHeight() {
+    const gridColumnsHeight = getComputedStyle(this.grid.gridMainEl).gridTemplateRows.split(" ");
+    return parseInt(gridColumnsHeight[0]) || 0;
+  }
+  getFirstColumn() {
+    return this.columnsManager.getColumnsFirstLast().columnFirst;
+  }
+  getFirstRow() {
+    return this.grid.el.querySelector(`${HTMLChGridRowElement.TAG_NAME.toLowerCase()}`);
+  }
+  getScrollOffsetTop() {
+    return this.grid.gridMainEl.offsetTop + this.getColumnsetHeight();
+  }
+  getScrollOffsetLeft() {
+    return this.grid.manager.columns
+      .getColumns(true)
+      .reduce((offsetRight, column) => {
+      return column.freeze === "start" && !column.hidden
+        ? offsetRight + column.offsetWidth
+        : offsetRight;
+    }, 0);
+  }
+  getScrollOffsetRight() {
+    return this.grid.manager.columns
+      .getColumns(true)
+      .reduce((offsetRight, column) => {
+      return column.freeze === "end" && !column.hidden
+        ? offsetRight + column.offsetWidth
+        : offsetRight;
+    }, 0);
+  }
+  getPreviousRow(current) {
+    const rows = this.getRows();
+    const i = rows.indexOf(current);
+    return rows
+      .slice(0, i)
+      .reverse()
+      .find(row => row.isVisible());
+  }
+  getNextRow(current) {
+    const rows = this.getRows();
+    const i = rows.indexOf(current);
+    return rows.slice(i + 1).find(row => row.isVisible());
+  }
+  getLastRow() {
+    const rows = this.getRows();
+    return rows.reverse().find(row => row.isVisible());
+  }
+  getPreviousCell(current) {
+    const columnOrder = current.column.order;
+    const previousColumn = this.grid.manager.columns
+      .getColumns()
+      .reduce((previous, column) => {
+      return column.order < columnOrder &&
+        !column.hidden &&
+        (!previous || column.order > previous.order)
+        ? column
+        : previous;
+    }, null);
+    if (previousColumn) {
+      return current.row.querySelector(`:scope > ch-grid-cell:nth-of-type(${previousColumn.physicalOrder})`);
+    }
+  }
+  getNextCell(current) {
+    const columnOrder = current.column.order;
+    const nextColumn = this.grid.manager.columns
+      .getColumns()
+      .reduce((previous, column) => {
+      return column.order > columnOrder &&
+        !column.hidden &&
+        (!previous || column.order < previous.order)
+        ? column
+        : previous;
+    }, null);
+    if (nextColumn) {
+      return current.row.querySelector(`:scope > ch-grid-cell:nth-of-type(${nextColumn.physicalOrder})`);
+    }
+  }
+  getGridRowIndex(row) {
+    return Array.prototype.indexOf.call(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}, ${ChGridRowsetLegend.TAG_NAME}`), row);
+  }
+  getRowsetRowIndex(row) {
+    return Array.prototype.indexOf.call(row.parentElement.children, row);
+  }
+  getRowHeight(row) {
+    const gridRowsHeight = getComputedStyle(this.grid.gridMainEl).gridTemplateRows.split(" ");
+    const rowIndex = this.getGridRowIndex(row) + 1;
+    return parseInt(gridRowsHeight[rowIndex]) || 0;
+  }
+  getRowsPerPage() {
+    const gridHeight = this.grid.gridMainEl.clientHeight;
+    const columnsHeight = this.getColumnsetHeight();
+    const rowHeight = this.getRowHeight(this.getFirstRow());
+    return Math.floor((gridHeight - columnsHeight) / rowHeight);
+  }
+  getRow(rowId) {
+    return this.grid.el.querySelector(`ch-grid-row[rowid="${rowId}"]`);
+  }
+  getRows(state = "all") {
+    const rows = Array.from(this.grid.el.querySelectorAll(`ch-grid-row`));
+    if (state === "visible") {
+      return rows.filter(row => row.isVisible());
+    }
+    else {
+      return rows;
+    }
+  }
+  getRowsSelected() {
+    return Array.from(this.grid.el.querySelectorAll(`ch-grid-row[selected]`));
+  }
+  getRowsRange(start, end) {
+    const rows = this.getRows();
+    const indexStart = rows.indexOf(start);
+    const indexEnd = rows.indexOf(end);
+    return rows
+      .slice(Math.min(indexStart, indexEnd), Math.max(indexStart, indexEnd) + 1)
+      .filter(row => row.isVisible());
+  }
+  getRowEventTarget(eventInfo) {
+    return eventInfo
+      .composedPath()
+      .find((target) => target.tagName === "CH-GRID-ROW");
+  }
+  isRowActionsEventTarget(eventInfo) {
+    return (eventInfo
+      .composedPath()
+      .find((target) => { var _a; return (_a = target.classList) === null || _a === void 0 ? void 0 : _a.contains("row-actions"); }) != null);
+  }
+  getCell(cellId, rowId, columnId) {
+    if (cellId) {
+      return this.grid.el.querySelector(`ch-grid-cell[cellid="${cellId}"]`);
+    }
+    else if (rowId && columnId) {
+      const row = this.getRow(rowId);
+      const column = this.columns.getColumn(columnId);
+      if (row && column) {
+        return row.getCell(column);
+      }
+    }
+  }
+  getCellEventTarget(eventInfo) {
+    return eventInfo
+      .composedPath()
+      .find((target) => target.tagName === "CH-GRID-CELL");
+  }
+  columnDragStart(columnId) {
+    this.columnDragManager = new ChGridManagerColumnDrag(columnId, this.columnsManager.getColumns());
+  }
+  columnDragging(position) {
+    return this.columnDragManager.dragging(position);
+  }
+  columnDragEnd() {
+    this.columnDragManager.dragEnd();
+    this.columnDragManager = null;
+  }
+  rowDragStart(row) {
+    this.rowDragManager = new ChGridManagerRowDrag(this.grid);
+    this.rowDragManager.dragStart(row);
+  }
+  getGridStyle() {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ display: "grid" }, this.getGridTemplateColumns()), this.getRowBoxSimulationStyle()), this.getDragTransitionStyle()), this.getColumnsStyle());
+  }
+  isRowActionsEnabled() {
+    const slot = this.grid.gridRowActionsEl
+      .firstElementChild;
+    return slot.assignedElements().length > 0;
+  }
+  setRowActionsPosition(row) {
+    if (row) {
+      this.grid.gridRowActionsEl.setAttribute("show", "");
+      this.grid.gridRowActionsEl.style.setProperty("--ch-grid-row-highlighted-top", `${this.getRowTop(row)}px`);
+    }
+    else {
+      this.grid.gridRowActionsEl.removeAttribute("show");
+      this.grid.gridRowActionsEl.style.removeProperty("--ch-grid-row-highlighted-top");
+    }
+  }
+  ensureRowVisible(row) {
+    let node = row.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+    const { columnFirst } = this.columnsManager.getColumnsFirstLast();
+    while (node) {
+      node.collapsed = false;
+      node = node.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+    }
+    if (row.children[columnFirst.physicalOrder]) {
+      this.ensureVisible(row.children[columnFirst.physicalOrder]);
+    }
+  }
+  ensureCellVisible(cell) {
+    let node = cell.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+    while (!cell.isVisible() && node) {
+      node.collapsed = false;
+      node = node.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+    }
+    if (!cell.isVisible()) {
+      cell.column.hidden = false;
+    }
+    this.ensureVisible(cell);
+  }
+  ensureVisible(cell) {
+    const isColumnFreeze = ["start", "end"].includes(cell.column.freeze);
+    const scroll = this.grid.gridMainEl;
+    const scrollOffsetTop = this.getScrollOffsetTop();
+    const scrollOffsetLeft = this.getScrollOffsetLeft();
+    const scrollOffsetRight = this.getScrollOffsetRight();
+    if (scroll.scrollTop + scrollOffsetTop > cell.offsetTop) {
+      scroll.scrollBy({
+        top: (scroll.scrollTop - cell.offsetTop + scrollOffsetTop) * -1
+      });
+    }
+    else if (scroll.scrollTop + scroll.offsetHeight <
+      cell.offsetTop + cell.offsetHeight) {
+      scroll.scrollBy({
+        top: cell.offsetTop +
+          cell.offsetHeight -
+          (scroll.scrollTop + scroll.offsetHeight)
+      });
+    }
+    else if (scroll.scrollLeft + scrollOffsetLeft > cell.offsetLeft &&
+      !isColumnFreeze) {
+      scroll.scrollBy({
+        left: (scroll.scrollLeft - cell.offsetLeft + scrollOffsetLeft) * -1
+      });
+    }
+    else if (scroll.scrollLeft + scroll.clientWidth - scrollOffsetRight <
+      cell.offsetLeft + cell.offsetWidth &&
+      !isColumnFreeze) {
+      scroll.scrollBy({
+        left: cell.offsetLeft +
+          cell.offsetWidth -
+          (scroll.scrollLeft + scroll.clientWidth - scrollOffsetRight)
+      });
+    }
+  }
+  getGridTemplateColumns() {
+    return {
+      "grid-template-columns": this.columnsManager
+        .getColumns()
+        .map(column => `var(--ch-grid-column-${column.physicalOrder}-size)`)
+        .join(" ")
+    };
+  }
+  getRowBoxSimulationStyle() {
+    const { columnFirst, columnLast } = this.columnDragManager
+      ? this.columnDragManager.getColumnsFirstLast()
+      : this.columnsManager.getColumnsFirstLast();
+    if (!columnFirst || !columnLast) {
+      return null;
+    }
+    return {
+      [`--ch-grid-column-${columnFirst.physicalOrder}-margin-start`]: "var(--ch-grid-fallback, inherit)",
+      [`--ch-grid-column-${columnFirst.physicalOrder}-border-start`]: "var(--ch-grid-fallback, inherit)",
+      [`--ch-grid-column-${columnFirst.physicalOrder}-padding-start`]: "var(--ch-grid-fallback, inherit)",
+      [`--ch-grid-column-${columnLast.physicalOrder}-margin-end`]: "var(--ch-grid-fallback, inherit)",
+      [`--ch-grid-column-${columnLast.physicalOrder}-border-end`]: "var(--ch-grid-fallback, inherit)",
+      [`--ch-grid-column-${columnLast.physicalOrder}-padding-end`]: "var(--ch-grid-fallback, inherit)"
+    };
+  }
+  getRowTop(row) {
+    const cell = row.firstElementChild;
+    return cell.offsetTop;
+  }
+  getDragTransitionStyle() {
+    return {
+      "--column-drag-transition-duration": this.columnDragManager ? ".2s" : "0s"
+    };
+  }
+  getColumnsStyle() {
+    return this.columnsManager.getColumns().reduce((style, column) => {
+      return Object.assign(Object.assign({}, style), this.getColumnStyle(column));
+    }, {});
+  }
+  getColumnStyle(column) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getColumnSizeStyle(column)), this.getColumnOrderStyle(column)), this.getColumnDisplayStyle(column)), this.getColumnFreezeStyle(column)), this.getColumnDraggingStyle(column)), this.getColumnIndentStyle(column));
+  }
+  getColumnSizeStyle(column) {
+    return {
+      [`--ch-grid-column-${column.order}-size`]: column.hidden
+        ? "0px"
+        : column.size
+    };
+  }
+  getColumnOrderStyle(column) {
+    return {
+      [`--ch-grid-column-${column.physicalOrder}-position`]: column.order.toString()
+    };
+  }
+  getColumnFreezeStyle(column) {
+    switch (column.freeze) {
+      case "start":
+        return this.getColumnFreezeStartStyle(column);
+      case "end":
+        return this.getColumnFreezeEndStyle(column);
+    }
+  }
+  getColumnFreezeStartStyle(column) {
+    const calcItems = ["0px"];
+    for (let i = 1; i < column.order; i++) {
+      calcItems.push(`var(--ch-grid-column-${i}-width)`);
+    }
+    return {
+      [`--ch-grid-column-${column.physicalOrder}-left-freeze`]: `calc(${calcItems.join(" + ")})`,
+      [`--ch-grid-column-${column.physicalOrder}-z-index-freeze`]: "var(--ch-grid-column-freeze-layer)"
+    };
+  }
+  getColumnFreezeEndStyle(column) {
+    const calcItems = ["0px"];
+    for (let i = this.columnsManager.getColumns().length; i > column.order; i--) {
+      calcItems.push(`var(--ch-grid-column-${i}-width)`);
+    }
+    return {
+      [`--ch-grid-column-${column.physicalOrder}-right-freeze`]: `calc(${calcItems.join(" + ")})`,
+      [`--ch-grid-column-${column.physicalOrder}-z-index-freeze`]: "var(--ch-grid-column-freeze-layer)"
+    };
+  }
+  getColumnDisplayStyle(column) {
+    return column.hidden
+      ? {
+        [`--ch-grid-column-${column.physicalOrder}-display`]: "none"
+      }
+      : null;
+  }
+  getColumnDraggingStyle(column) {
+    return this.columnDragManager
+      ? this.columnDragManager.getColumnStyle(column)
+      : null;
+  }
+  getColumnIndentStyle(column) {
+    return {
+      [`--ch-grid-column-${column.physicalOrder}-content`]: column.order === 1 ? "''" : "none"
+    };
+  }
+  observeMainScroll() {
+    this.grid.gridMainEl.addEventListener("scroll", () => this.grid.gridRowActionsEl.style.setProperty("--ch-grid-scroll-v", `${this.grid.gridMainEl.scrollTop}px`), { passive: true });
+  }
+}
+
+const chGridCss = ":host{display:flex;position:relative;flex-direction:column;--ch-grid-cell-active-layer:calc(var(--ch-grid-base-layer) * 1);--ch-grid-column-header-layer:calc(var(--ch-grid-base-layer) * 2);--ch-grid-column-freeze-layer:calc(var(--ch-grid-base-layer) * 4);--ch-grid-column-active-layer:calc(var(--ch-grid-base-layer) * 8);--ch-grid-settings-layer:calc(var(--ch-grid-base-layer) * 16)}.main{display:none;grid-auto-flow:dense;overflow-x:auto;user-select:none}.row-actions{position:absolute;top:calc( var(--ch-grid-row-highlighted-top, 0px) - var(--ch-grid-scroll-v, 0px) )}.row-actions:not([show]){display:none}";
+
+const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    this.rowMarkingChanged = createEvent(this, "rowMarkingChanged", 7);
+    this.cellSelectionChanged = createEvent(this, "cellSelectionChanged", 7);
+    this.rowClicked = createEvent(this, "rowClicked", 7);
+    this.rowDoubleClicked = createEvent(this, "rowDoubleClicked", 7);
+    this.rowEnterPressed = createEvent(this, "rowEnterPressed", 7);
+    this.rowsMarked = [];
+    this.rowsSelected = [];
+    /**
+     * One of "none", "single" or "multiple", indicating how rows can be selected.
+     * It can be set to "none" if no rows should be selectable,
+     * "single" if only one row can be selected at a time, or
+     * "multiple" if multiple rows can be selected at once.
+     */
+    this.rowSelectionMode = "single";
+    /**
+     * One of "false", "true" or "auto", indicating whether or not rows can be highlighted.
+     * "auto", row highlighting will be enabled if the row selection mode is set to "single" or "multiple".
+     */
+    this.rowHighlightEnabled = "auto";
+    /**
+     * A boolean indicating whether the user can drag column headers to reorder columns.
+     */
+    this.allowColumnReorder = true;
+    this.styleSheet = new CSSStyleSheet();
+  }
+  baseLayerHandler(value) {
+    this.styleSheet.replace(`:host { --ch-grid-base-layer: ${value} ;}`);
+  }
+  componentWillLoad() {
+    this.manager = new ChGridManager(this);
+    this.gridStyle = this.manager.getGridStyle();
+    this.rowsSelected = this.manager.getRowsSelected();
+    this.el.shadowRoot.adoptedStyleSheets.push(this.styleSheet);
+  }
+  componentDidLoad() {
+    this.manager.gridDidLoad();
+    this.gridRowActionsEnabled = this.manager.isRowActionsEnabled();
+  }
+  componentShouldUpdate(_newValue, _oldValue, name) {
+    if (name === "rowFocused" ||
+      name === "rowHighlighted" ||
+      name === "rowSelected" ||
+      name === "rowsMarked" ||
+      name === "cellSelected") {
+      return false;
+    }
+  }
+  rowHighlightedHandler(row, previous) {
+    if (row) {
+      row.highlighted = true;
+    }
+    if (previous) {
+      previous.highlighted = false;
+    }
+    if (this.gridRowActionsEnabled) {
+      this.manager.setRowActionsPosition(row);
+    }
+  }
+  rowFocusedHandler(row, previous) {
+    if (row) {
+      row.focused = true;
+    }
+    if (previous) {
+      previous.focused = false;
+    }
+  }
+  rowsSelectedHandler(rows, previous) {
+    if (previous) {
+      previous
+        .filter(row => !rows.includes(row))
+        .forEach(row => (row.selected = false));
+    }
+    if (rows) {
+      rows.forEach(row => (row.selected = true));
+    }
+    this.manager.selection.syncRowSelector(rows, previous, "select");
+    this.selectionChanged.emit({ rowsId: rows.map(row => row.rowId) });
+  }
+  rowsMarkedHandler(rows, previous) {
+    this.manager.selection.syncRowSelector(rows, previous, "mark");
+    this.rowMarkingChanged.emit({ rowsId: rows.map(row => row.rowId) });
+  }
+  cellSelectedHandler(cell, previous) {
+    if (cell) {
+      cell.selected = true;
+    }
+    if (previous) {
+      previous.selected = false;
+    }
+    this.cellSelectionChanged.emit({
+      cellId: this.cellSelected ? this.cellSelected.cellId : null,
+      rowId: this.cellSelected ? this.cellSelected.row.rowId : null,
+      columnId: this.cellSelected ? this.cellSelected.column.columnId : null
+    });
+  }
+  focusHandler() {
+    if (this.rowSelectionMode !== "none") {
+      this.rowFocused = this.rowsSelected[0] || this.manager.getFirstRow();
+    }
+  }
+  blurHandler() {
+    this.rowFocused = null;
+  }
+  windowKeyDownHandler(eventInfo) {
+    if (document.activeElement === this.el &&
+      [
+        " ",
+        "+",
+        "-",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight"
+      ].includes(eventInfo.key)) {
+      eventInfo.preventDefault();
+    }
+  }
+  keyDownHandler(eventInfo) {
+    if (document.activeElement === this.el) {
+      switch (eventInfo.key) {
+        case " ":
+          this.toggleRowsMarked();
+          break;
+        case "+":
+          this.setRowCollapsed(this.rowFocused, false);
+          break;
+        case "-":
+          this.setRowCollapsed(this.rowFocused, true);
+          break;
+        case "Home":
+          this.selectByKeyboardEvent(this.manager.selection.selectFirstRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "End":
+          this.selectByKeyboardEvent(this.manager.selection.selectLastRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "PageUp":
+          this.selectByKeyboardEvent(this.manager.selection.selectPreviousPageRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "PageDown":
+          this.selectByKeyboardEvent(this.manager.selection.selectNextPageRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "ArrowUp":
+          this.selectByKeyboardEvent(this.manager.selection.selectPreviousRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "ArrowDown":
+          this.selectByKeyboardEvent(this.manager.selection.selectNextRow.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "ArrowLeft":
+          this.selectByKeyboardEvent(this.manager.selection.selectPreviousCell.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "ArrowRight":
+          this.selectByKeyboardEvent(this.manager.selection.selectNextCell.bind(this.manager.selection), eventInfo.shiftKey);
+          break;
+        case "Enter":
+          this.enterPressedHandler();
+          break;
+      }
+    }
+  }
+  mouseMoveHandler(eventInfo) {
+    if ((this.rowHighlightEnabled === "auto" &&
+      this.rowSelectionMode !== "none") ||
+      this.rowHighlightEnabled === true) {
+      this.rowHighlighted =
+        this.manager.getRowEventTarget(eventInfo) ||
+          (this.manager.isRowActionsEventTarget(eventInfo)
+            ? this.rowHighlighted
+            : null);
+    }
+    if (this.manager.selection.selecting) {
+      const row = this.manager.getRowEventTarget(eventInfo);
+      const cell = this.manager.getCellEventTarget(eventInfo);
+      if (row &&
+        (this.manager.selection.selectingRow !== row ||
+          this.manager.selection.selectingCell !== cell)) {
+        this.selectByPointerEvent(row, cell, mouseEventModifierKey(eventInfo), true);
+        this.manager.selection.selectingRow = row;
+        this.manager.selection.selectingCell = cell;
+      }
+    }
+  }
+  mouseLeaveHandler() {
+    if (this.rowHighlighted) {
+      this.rowHighlighted = null;
+    }
+  }
+  clickHandler(eventInfo) {
+    const row = this.manager.getRowEventTarget(eventInfo);
+    const cell = this.manager.getCellEventTarget(eventInfo);
+    if (row) {
+      this.rowClicked.emit({
+        rowId: row.rowId,
+        cellId: cell === null || cell === void 0 ? void 0 : cell.cellId,
+        columnId: cell === null || cell === void 0 ? void 0 : cell.column.columnId
+      });
+      this.manager.selection.selecting = true;
+      this.selectByPointerEvent(row, cell, mouseEventModifierKey(eventInfo), eventInfo.shiftKey);
+    }
+  }
+  mouseUpHandler() {
+    this.manager.selection.selecting = false;
+    this.manager.selection.selectingRow = null;
+    this.manager.selection.selectingCell = null;
+  }
+  dblclickHandler(eventInfo) {
+    const row = this.manager.getRowEventTarget(eventInfo);
+    const cell = this.manager.getCellEventTarget(eventInfo);
+    if (row) {
+      this.rowDoubleClicked.emit({
+        rowId: row.rowId,
+        cellId: cell === null || cell === void 0 ? void 0 : cell.cellId,
+        columnId: cell === null || cell === void 0 ? void 0 : cell.column.columnId
+      });
+    }
+  }
+  columnSelectorClickedHandler(eventInfo) {
+    const columnSelector = this.manager.columns.getColumnSelector();
+    if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "select") {
+      this.selectAll(eventInfo.detail.checked);
+    }
+    else if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+      this.rowsMarked = this.manager.selection.markAllRows(eventInfo.detail.checked);
+    }
+  }
+  cellSelectorClickedHandler(eventInfo) {
+    const columnSelector = this.manager.columns.getColumnSelector();
+    if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "select") {
+      this.selectByPointerEvent(this.manager.getRowEventTarget(eventInfo), this.manager.getCellEventTarget(eventInfo), true, eventInfo.detail.range);
+    }
+    else if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+      this.rowsMarked = this.manager.selection.markRow(this.manager.getRowEventTarget(eventInfo), eventInfo.detail.checked, eventInfo.detail.range, this.rowsMarked);
+    }
+  }
+  columnStyleChangedHandler() {
+    if (this.manager) {
+      this.gridStyle = this.manager.getGridStyle();
+    }
+  }
+  columnFreezeChangedHandler() {
+    this.manager.columns.adjustFreezeOrder();
+  }
+  columnDragStartHandler(eventInfo) {
+    this.manager.columnDragStart(eventInfo.detail.columnId);
+  }
+  columnDraggingHandler(eventInfo) {
+    if (this.manager.columnDragging(eventInfo.detail.positionX)) {
+      this.gridStyle = this.manager.getGridStyle();
+    }
+  }
+  columnDragEndHandler() {
+    this.manager.columnDragEnd();
+    this.gridStyle = this.manager.getGridStyle();
+  }
+  rowDragStartHandler(eventInfo) {
+    this.manager.rowDragStart(eventInfo.detail.row);
+  }
+  rowEnsureVisibleHandler(eventInfo) {
+    this.manager.ensureRowVisible(eventInfo.target);
+  }
+  cellEnsureVisibleHandler(eventInfo) {
+    this.manager.ensureCellVisible(eventInfo.target);
+  }
+  settingsShowClickedHandler() {
+    this.gridSettingsUI.show = true;
+  }
+  settingsCloseClickedHandler() {
+    this.gridSettingsUI.show = false;
+  }
+  /**
+   * Retrieves the rowId of the currently focused row.
+   */
+  async getFocusedRow() {
+    var _a;
+    return (_a = this.rowFocused) === null || _a === void 0 ? void 0 : _a.rowId;
+  }
+  /**
+   * Retrieves the rowId of the currently hovered row.
+   */
+  async getHoveredRow() {
+    var _a;
+    return (_a = this.rowHighlighted) === null || _a === void 0 ? void 0 : _a.rowId;
+  }
+  /**
+   * Retrieves the list of rowId of the selected rows.
+   */
+  async getSelectedRows() {
+    return this.rowsSelected.map(row => row.rowId);
+  }
+  /**
+   * Retrieves the list of rowId of the marked rows.
+   */
+  async getMarkedRows() {
+    return this.rowsMarked.map(row => row.rowId);
+  }
+  /**
+   * Retrieves information about the currently selected cell.
+   */
+  async getSelectedCell() {
+    return {
+      cellId: this.cellSelected ? this.cellSelected.cellId : null,
+      rowId: this.cellSelected ? this.cellSelected.row.rowId : null,
+      columnId: this.cellSelected ? this.cellSelected.column.columnId : null
+    };
+  }
+  /**
+   * Selects or deselects a row.
+   * @param rowId - The rowId of the row to select or deselect.
+   * @param selected - A boolean indicating whether to select or deselect the row.
+   */
+  async selectRow(rowId, selected = true) {
+    const row = this.manager.getRow(rowId);
+    if (row) {
+      const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
+        rowFocused: this.rowFocused,
+        rowsSelected: this.rowsSelected,
+        cellSelected: this.cellSelected
+      }, row, null, selected);
+      this.rowFocused = rowFocused;
+      this.rowsSelected = rowsSelected;
+      this.cellSelected = cellSelected;
+      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+    }
+  }
+  /**
+   * Selects or deselects all rows.
+   * @param selected - A boolean indicating whether to select or deselect all rows.
+   */
+  async selectAllRows(selected = true) {
+    this.selectAll(selected);
+  }
+  /**
+   * Select or deselect a cell.
+   * The cell can be identified by the cellId parameter or
+   * by using the rowId and columnId pair.
+   * @param cellId - The cellId of the cell to select or deselect.
+   * @param rowId - The rowId of the row containing the cell.
+   * @param columnId - The columnId of the column containing the cell.
+   * @param selected - A boolean indicating whether to select or deselect the cell.
+   */
+  async selectCell(cellId, rowId, columnId, selected = true) {
+    const cell = this.manager.getCell(cellId, rowId, columnId);
+    if (cell) {
+      const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
+        rowFocused: this.rowFocused,
+        rowsSelected: this.rowsSelected,
+        cellSelected: this.cellSelected
+      }, cell.row, cell, selected);
+      this.rowFocused = rowFocused;
+      this.rowsSelected = rowsSelected;
+      this.cellSelected = cellSelected;
+      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+    }
+  }
+  /**
+   * Expands a row, showing its children.
+   * @param rowId - The rowId of the row to expand.
+   */
+  async expandRow(rowId) {
+    this.setRowCollapsed(this.manager.getRow(rowId), false);
+  }
+  /**
+   * Collapses a row, hiding its children.
+   * @param rowId - The rowId of the row to collapse.
+   */
+  async collapseRow(rowId) {
+    this.setRowCollapsed(this.manager.getRow(rowId), true);
+  }
+  /**
+   * Ensures that the row is visible within the control, scrolling the contents of the control if necessary.
+   * @param rowId - The rowId of the row to ensure visibility.
+   */
+  async rowEnsureVisible(rowId) {
+    const row = this.manager.getRow(rowId);
+    if (row) {
+      this.manager.ensureRowVisible(row);
+    }
+  }
+  /**
+   * Ensures that the cell is visible within the control, scrolling the contents of the control if necessary.
+   * @param cellId - The cellId of the cell to ensure visibility.
+   */
+  async cellEnsureVisible(cellId) {
+    const cell = this.manager.getCell(cellId);
+    if (cell) {
+      this.manager.ensureCellVisible(cell);
+    }
+  }
+  /**
+   * Retrieves the rowId of the previous row relative to the currently selected cell.
+   */
+  async getPreviousRow() {
+    var _a, _b;
+    const currentRow = (_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row;
+    if (currentRow) {
+      return ((_b = this.manager.getPreviousRow(currentRow)) === null || _b === void 0 ? void 0 : _b.rowId) || null;
+    }
+  }
+  /**
+   * Retrieves the rowId of the next row relative to the currently selected cell.
+   */
+  async getNextRow() {
+    var _a, _b;
+    const currentRow = (_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row;
+    if (currentRow) {
+      return ((_b = this.manager.getNextRow(currentRow)) === null || _b === void 0 ? void 0 : _b.rowId) || null;
+    }
+  }
+  /**
+   * Retrieves information about the previous cell relative to the currently selected cell.
+   */
+  async getPreviousCell() {
+    const previousCell = this.manager.getPreviousCell(this.cellSelected);
+    return {
+      cellId: previousCell ? previousCell.cellId : null,
+      rowId: previousCell ? previousCell.row.rowId : null,
+      columnId: previousCell ? previousCell.column.columnId : null
+    };
+  }
+  /**
+   * Retrieves information about the next cell relative to the currently selected cell.
+   */
+  async getNextCell() {
+    const nextCell = this.manager.getNextCell(this.cellSelected);
+    return {
+      cellId: nextCell ? nextCell.cellId : null,
+      rowId: nextCell ? nextCell.row.rowId : null,
+      columnId: nextCell ? nextCell.column.columnId : null
+    };
+  }
+  enterPressedHandler() {
+    var _a;
+    if (this.rowFocused) {
+      const cellFocused = ((_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row) === this.rowFocused ? this.cellSelected : null;
+      this.rowEnterPressed.emit({
+        rowId: this.rowFocused.rowId,
+        cellId: cellFocused ? cellFocused.cellId : null,
+        columnId: cellFocused ? cellFocused.column.columnId : null
+      });
+    }
+  }
+  toggleRowsMarked() {
+    const columnSelector = this.manager.columns.getColumnSelector();
+    if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+      const value = !this.rowFocused.marked;
+      if (value) {
+        this.rowsMarked = Array.from(new Set(this.rowsMarked.concat(this.rowsSelected)));
+      }
+      else {
+        this.rowsMarked = this.rowsMarked.filter(row => !this.rowsSelected.includes(row));
+      }
+    }
+  }
+  selectByPointerEvent(row, cell, append, range) {
+    const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.select({
+      rowFocused: this.rowFocused,
+      rowsSelected: this.rowsSelected,
+      cellSelected: this.cellSelected
+    }, row, cell, append, range);
+    this.rowFocused = rowFocused;
+    this.rowsSelected = rowsSelected;
+    this.cellSelected = cellSelected;
+    if (cellSelected) {
+      cellSelected.ensureVisible();
+    }
+    else {
+      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+    }
+  }
+  selectByKeyboardEvent(fn, append) {
+    const { rowFocused, rowsSelected, cellSelected } = fn({
+      rowFocused: this.rowFocused,
+      rowsSelected: this.rowsSelected,
+      cellSelected: this.cellSelected
+    }, append);
+    this.rowFocused = rowFocused;
+    this.rowsSelected = rowsSelected;
+    this.cellSelected = cellSelected;
+    if (cellSelected) {
+      cellSelected.ensureVisible();
+    }
+    else {
+      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+    }
+  }
+  selectAll(value = true) {
+    const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectAll({
+      rowFocused: this.rowFocused,
+      rowsSelected: this.rowsSelected,
+      cellSelected: this.cellSelected
+    }, value);
+    this.rowFocused = rowFocused;
+    this.rowsSelected = rowsSelected;
+    this.cellSelected = cellSelected;
+    if (cellSelected) {
+      cellSelected.ensureVisible();
+    }
+    else {
+      rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+    }
+  }
+  setRowCollapsed(row, collapsed) {
+    if (row && collapsed) {
+      if (row && row.hasChildRows) {
+        row.collapsed = true;
+      }
+    }
+    else if (row && !collapsed) {
+      row.collapsed = false;
+    }
+  }
+  render() {
+    return (h(Host, { tabindex: this.rowSelectionMode !== "none" ? "0" : false }, h("header", { part: "header" }, h("slot", { name: "header" })), h("section", { class: "main", style: this.gridStyle, part: "main", ref: el => (this.gridMainEl = el) }, h("slot", null)), h("aside", null, this.renderSettings(), h("slot", { name: "column-display" }), this.renderRowActions()), h("footer", { part: "footer" }, h("slot", { name: "footer" }))));
+  }
+  renderSettings() {
+    return (h("ch-grid-settings", { grid: this.el, ref: el => (this.gridSettingsUI = el), exportparts: "\n          mask:settings-mask,\n          window:settings-window,\n          header:settings-header,\n          caption:settings-caption,\n          close:settings-close,\n          main:settings-main,\n          footer:settings-footer\n        " }, h("slot", { name: "settings" }, h("ch-grid-settings-columns", { part: "settings-columns", columns: [...this.manager.getColumns()], exportparts: "\n              column:settings-columns-item,\n              column-label:settings-columns-label,\n              column-visible:settings-columns-visible,\n              column-visible-checked:settings-columns-visible-checked\n            " }))));
+  }
+  renderRowActions() {
+    return (h("section", { class: "row-actions", part: "row-actions", ref: el => (this.gridRowActionsEl = el) }, h("slot", { name: "row-actions" })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "baseLayer": ["baseLayerHandler"],
+    "rowHighlighted": ["rowHighlightedHandler"],
+    "rowFocused": ["rowFocusedHandler"],
+    "rowsSelected": ["rowsSelectedHandler"],
+    "rowsMarked": ["rowsMarkedHandler"],
+    "cellSelected": ["cellSelectedHandler"]
+  }; }
+  static get style() { return chGridCss; }
+}, [1, "ch-grid", {
+    "rowSelectionMode": [1, "row-selection-mode"],
+    "rowHighlightEnabled": [8, "row-highlight-enabled"],
+    "rowSelectedClass": [1, "row-selected-class"],
+    "rowHighlightedClass": [1, "row-highlighted-class"],
+    "rowFocusedClass": [1, "row-focused-class"],
+    "rowMarkedClass": [1, "row-marked-class"],
+    "allowColumnReorder": [4, "allow-column-reorder"],
+    "localization": [16],
+    "rowFocused": [32],
+    "rowHighlighted": [32],
+    "rowsMarked": [32],
+    "rowsSelected": [32],
+    "cellSelected": [32],
+    "gridStyle": [32],
+    "baseLayer": [32],
+    "getFocusedRow": [64],
+    "getHoveredRow": [64],
+    "getSelectedRows": [64],
+    "getMarkedRows": [64],
+    "getSelectedCell": [64],
+    "selectRow": [64],
+    "selectAllRows": [64],
+    "selectCell": [64],
+    "expandRow": [64],
+    "collapseRow": [64],
+    "rowEnsureVisible": [64],
+    "cellEnsureVisible": [64],
+    "getPreviousRow": [64],
+    "getNextRow": [64],
+    "getPreviousCell": [64],
+    "getNextCell": [64]
+  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid", "ch-grid-settings", "ch-grid-settings-columns", "ch-window", "ch-window-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGrid);
+      }
+      break;
+    case "ch-grid-settings":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-grid-settings-columns":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ChGrid as C, defineCustomElement as d };