@genexus/genexus-ide-ui 0.0.9

package/dist/esm/ch-grid_9.entry.js

@@ -0,0 +1,2892 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { C as ChGridRowsetLegend } from './ch-grid-rowset-legend-d6a0dd68.js';
+import { m as mouseEventModifierKey } from './helpers-78ca0d8a.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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 getElement(this); }
+  static get watchers() { return {
+    "baseLayer": ["baseLayerHandler"],
+    "rowHighlighted": ["rowHighlightedHandler"],
+    "rowFocused": ["rowFocusedHandler"],
+    "rowsSelected": ["rowsSelectedHandler"],
+    "rowsMarked": ["rowsMarkedHandler"],
+    "cellSelected": ["cellSelectedHandler"]
+  }; }
+};
+ChGrid.style = chGridCss;
+
+const chGridActionRefreshCss = "@layer ch-grid {\n  ch-grid-action-refresh[disabled] {\n    pointer-events: none;\n  }\n}";
+
+const ChGridActionRefresh = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.refreshClicked = createEvent(this, "refreshClicked", 7);
+  }
+  pressedHandler(eventInfo) {
+    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
+      this.refreshClicked.emit();
+      eventInfo.stopPropagation();
+    }
+  }
+  render() {
+    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
+  }
+};
+ChGridActionRefresh.style = chGridActionRefreshCss;
+
+const chGridActionSettingsCss = "@layer ch-grid {\n  ch-grid-action-settings[disabled] {\n    pointer-events: none;\n  }\n}";
+
+const ChGridActionSettings = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.settingsShowClicked = createEvent(this, "settingsShowClicked", 7);
+  }
+  pressedHandler(eventInfo) {
+    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
+      this.settingsShowClicked.emit();
+      eventInfo.stopPropagation();
+    }
+  }
+  render() {
+    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
+  }
+};
+ChGridActionSettings.style = chGridActionSettingsCss;
+
+const chGridActionbarCss = "";
+
+const ChGridActionbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get el() { return getElement(this); }
+};
+ChGridActionbar.style = chGridActionbarCss;
+
+const chGridColumnCss = ":host{display:flex;position:sticky;top:0}:host{background-color:inherit;margin-block-start:inherit;margin-block-end:inherit;border-block-start:inherit;border-block-end:inherit;padding-block-start:inherit;padding-block-end:inherit;transition:transform var(--column-drag-transition-duration, 0.2s)}:host{--ch-grid-column-z-index-head:var(--ch-grid-column-header-layer)}:host([show-settings]),:host([resizing]){--ch-grid-column-z-index-active:var(--ch-grid-column-active-layer)}:host([sort-direction=asc]) .bar .sort .sort-asc{visibility:visible}:host([sort-direction=desc]) .bar .sort .sort-desc{visibility:visible}.bar{list-style-type:none;margin:0;padding:0;display:flex;align-items:center}.bar .selector{overflow:hidden;order:0}.bar .selector:not([hidden]){display:flex}.bar .name{display:flex;overflow:hidden;order:1}.bar .name .name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar .sort{position:relative;align-items:center;order:2}.bar .sort:not([hidden]){display:flex}.bar .sort .sort-asc{visibility:hidden;animation-fill-mode:forwards}.bar .sort .sort-desc{position:absolute;visibility:hidden;animation-fill-mode:forwards}.bar .settings{order:3}.bar .resize{align-self:stretch;margin-left:auto;order:4}@keyframes column-sort{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}";
+
+const ChGridColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.columnHiddenChanged = createEvent(this, "columnHiddenChanged", 7);
+    this.columnSizeChanging = createEvent(this, "columnSizeChanging", 7);
+    this.columnSizeChanged = createEvent(this, "columnSizeChanged", 7);
+    this.columnOrderChanged = createEvent(this, "columnOrderChanged", 7);
+    this.columnSortChanged = createEvent(this, "columnSortChanged", 7);
+    this.columnFreezeChanged = createEvent(this, "columnFreezeChanged", 7);
+    this.columnDragStarted = createEvent(this, "columnDragStarted", 7);
+    this.columnDragging = createEvent(this, "columnDragging", 7);
+    this.columnDragEnded = createEvent(this, "columnDragEnded", 7);
+    this.columnSelectorClicked = createEvent(this, "columnSelectorClicked", 7);
+    this.dragging = false;
+    this.dragMouseMoveFn = this.dragMouseMoveHandler.bind(this);
+    /**
+     * One of "plain", "rich", or "tree", indicating the type of cell displayed in the column.
+     */
+    this.columnType = "plain";
+    /**
+     * @deprecated Use "columnTooltip" and "columnNameHidden" instead.
+     * One of "text" or "title", indicating whether the `columnName` should be displayed as the column text or as tooltip of the column image.
+     */
+    this.columnNamePosition = "text";
+    /**
+     * One of "select" or "mark", indicating the mode of rich row selector.
+     * "select" indicates that the row selector is bound to the row selection.
+     * "mark" allows to mark a row independently of the selection.
+     */
+    this.richRowSelectorMode = "select";
+    /**
+     * Indicate the state of the rich row selector.
+     * "" indicates that all rows are unchecked.
+     * "checked" indicates that all rows are checked.
+     * "indeterminate" indicates that some rows are marked.
+     */
+    this.richRowSelectorState = "";
+    /**
+     * A boolean indicating whether the column should be hidden.
+     * The user can display it from the grid settings.
+     */
+    this.hidden = false;
+    /**
+     * A boolean indicating whether the column should be hideable (i.e. whether the user should be able to show/hide the column).
+     */
+    this.hideable = true;
+    /**
+     * A boolean indicating whether the column should be resizable (i.e. whether the user should be able to drag its width).
+     */
+    this.resizable = true;
+    /**
+     * A boolean indicating whether the column should be sortable (i.e. whether the user should be able to click the column header to sort the data).
+     */
+    this.sortable = true;
+    /**
+     * A boolean indicating whether the user should be able to open a settings panel for the column.
+     */
+    this.settingable = true;
+    /**
+     * A boolean indicating whether the settings panel for the column should be visible.
+     */
+    this.showSettings = false;
+    this.settingsClickHandler = (eventInfo) => {
+      eventInfo.stopPropagation();
+      this.showSettings = true;
+    };
+    this.selectorClickHandler = (eventInfo) => {
+      const target = eventInfo.target;
+      this.richRowSelectorState = target.checked ? "checked" : "";
+      this.columnSelectorClicked.emit({
+        checked: target.checked
+      });
+      eventInfo.stopPropagation();
+    };
+  }
+  freezeHandler() {
+    this.columnFreezeChanged.emit({
+      columnId: this.columnId,
+      freeze: this.freeze
+    });
+  }
+  hiddenHandler() {
+    this.columnHiddenChanged.emit({
+      columnId: this.columnId,
+      hidden: this.hidden
+    });
+  }
+  orderHandler() {
+    this.columnOrderChanged.emit({
+      columnId: this.columnId,
+      order: this.order
+    });
+  }
+  sizeHandler() {
+    this.columnSizeChanging.emit({
+      columnId: this.columnId,
+      size: this.size
+    });
+  }
+  sortDirectionHandler() {
+    if (this.sortDirection) {
+      this.columnSortChanged.emit({
+        columnId: this.columnId,
+        sortDirection: this.sortDirection
+      });
+    }
+  }
+  componentDidLoad() {
+    this.el.addEventListener("mousedown", this.mousedownHandler.bind(this));
+  }
+  clickHandler() {
+    if (!this.dragging) {
+      if (this.sortable) {
+        this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
+      }
+    }
+    else {
+      this.dragging = false;
+    }
+  }
+  columnResizeStartedHandler() {
+    this.resizing = true;
+  }
+  columnResizeFinishedHandler() {
+    this.resizing = false;
+    this.columnSizeChanged.emit({
+      columnId: this.columnId,
+      size: this.size
+    });
+  }
+  allowColumnReorder() {
+    return this.el.closest("ch-grid").allowColumnReorder;
+  }
+  mousedownHandler(eventInfo) {
+    eventInfo.preventDefault();
+    eventInfo.stopPropagation();
+    if (this.allowColumnReorder()) {
+      this.dragMouseDownHandler(eventInfo);
+      document.addEventListener("mousemove", this.dragMouseMoveFn, {
+        passive: true
+      });
+      document.addEventListener("mouseup", this.dragMouseUpHandler.bind(this), {
+        once: true
+      });
+    }
+  }
+  dragMouseDownHandler(eventInfo) {
+    this.dragMouseMoveStartPositionX = eventInfo.pageX;
+    this.columnDragStarted.emit({ columnId: this.columnId });
+  }
+  dragMouseMoveHandler(eventInfo) {
+    if (this.dragging ||
+      Math.abs(this.dragMouseMoveStartPositionX - eventInfo.pageX) > 5) {
+      this.dragging = true;
+      this.columnDragging.emit({
+        columnId: this.columnId,
+        positionX: eventInfo.pageX,
+        direction: eventInfo.movementX > 0 ? "right" : "left"
+      });
+    }
+  }
+  dragMouseUpHandler() {
+    document.removeEventListener("mousemove", this.dragMouseMoveFn);
+    this.columnDragEnded.emit({ columnId: this.columnId });
+  }
+  settingsMouseDownHandler(eventInfo) {
+    eventInfo.stopPropagation();
+  }
+  render() {
+    return (h(Host, null, h("ul", { class: "bar", part: "bar" }, this.renderSelector(), this.renderName(), this.renderSort(), this.renderSettings(), this.renderResize()), h("ch-grid-column-settings", { column: this.el, onMouseDown: this.settingsMouseDownHandler, show: this.showSettings, 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" }))));
+  }
+  renderSelector() {
+    return (h("li", { class: "selector", part: "bar-selector", hidden: !(this.columnType === "rich" && this.richRowSelector) }, h("label", { part: "selector-label" }, h("input", { type: "checkbox", part: ["selector", this.richRowSelectorState]
+        .filter(part => part !== "")
+        .join(" "), onClick: this.selectorClickHandler, checked: this.richRowSelectorState === "checked", indeterminate: this.richRowSelectorState === "indeterminate" }))));
+  }
+  renderName() {
+    return (h("li", { class: "name", part: "bar-name", title: this.columnTooltip ||
+        (this.columnNamePosition === "title" ? this.columnName : null) }, this.columnIconUrl || this.columnImage || this.columnImageSet ? (h("img", { class: "name-icon", part: "bar-name-icon", src: this.columnImage || this.columnIconUrl, srcSet: this.columnImageSet })) : (h("div", { class: "name-icon", part: "bar-name-icon" })), h("span", { class: "name-text", part: "bar-name-text", hidden: this.columnNameHidden || this.columnNamePosition !== "text" }, this.columnName)));
+  }
+  renderSort() {
+    return (h("li", { class: "sort", part: "bar-sort", hidden: !this.sortable }, h("div", { class: "sort-asc", part: "bar-sort-ascending" }), h("div", { class: "sort-desc", part: "bar-sort-descending" })));
+  }
+  renderSettings() {
+    return (h("li", { class: "settings", part: "bar-settings", hidden: !this.settingable }, h("button", { class: "button", part: "bar-settings-button", onClick: this.settingsClickHandler })));
+  }
+  renderResize() {
+    return (h("li", { class: "resize", part: "bar-resize", hidden: !this.resizable }, h("ch-grid-column-resize", { column: this.el, class: "resize-split", part: "bar-resize-split" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "freeze": ["freezeHandler"],
+    "hidden": ["hiddenHandler"],
+    "order": ["orderHandler"],
+    "size": ["sizeHandler"],
+    "sortDirection": ["sortDirectionHandler"]
+  }; }
+};
+ChGridColumn.style = chGridColumnCss;
+
+const chGridColumnsetCss = "@layer ch-grid {\n  ch-grid-columnset {\n    display: contents;\n  }\n}\n@layer ch-grid {\n  ch-grid-row {\n    display: contents;\n  }\n\n  ch-grid-row[collapsed] > ch-grid-rowset {\n    display: none;\n  }\n\n  ch-grid-row:is([leaf=\"false\"], :has(> ch-grid-rowset)) > ch-grid-cell::part(caret) {\n    visibility: visible;\n  }\n\n  ch-grid-row[dragging] {\n    display: flex;\n    position: fixed;\n    pointer-events: none;\n    box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px;\n    z-index: 1000;\n    transition: top var(--row-drag-transition-duration, 0.1s);\n  }\n}\n@layer ch-grid {\n  ch-grid-rowset {\n    display: contents;\n  }\n\n  ch-grid-rowset[collapsed] > :not(ch-grid-rowset-legend) {\n    display: none;\n  }\n}\n@layer ch-grid {\n  ch-grid-cell {\n    position: sticky;\n    grid-column: var(--grid-column);\n    transition: transform var(--column-drag-transition-duration, 0.2s);\n  }\n\n  ch-grid-cell[selected] {\n    --ch-grid-cell-z-index-active: var(--ch-grid-cell-active-layer);\n  }\n\n  ch-grid-cell,\nch-grid-row[selected] > ch-grid-cell,\nch-grid-row[highlighted] > ch-grid-cell {\n    background-color: inherit;\n    margin-block-start: inherit;\n    margin-block-end: inherit;\n    border-block-start: inherit;\n    border-block-end: inherit;\n    padding-block-start: inherit;\n    padding-block-end: inherit;\n  }\n\n  ch-grid-cell:before {\n    margin-inline-start: calc(var(--indent) * var(--level));\n  }\n\n  ch-grid-cell::part(indent) {\n    width: calc(var(--indent) * var(--level));\n  }\n\n  ch-grid-cell::part(caret) {\n    visibility: hidden;\n  }\n}";
+
+const ChGridColumnset = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  columnSortChangedHandler(eventInfo) {
+    const columns = Array.from(this.el.querySelectorAll("ch-grid-column"));
+    columns.forEach(column => {
+      if (column.columnId !== eventInfo.detail.columnId) {
+        column.sortDirection = null;
+      }
+    });
+  }
+  get el() { return getElement(this); }
+};
+ChGridColumnset.style = chGridColumnsetCss;
+
+const chPaginatorCss = ":host{display:flex}";
+
+const ChPaginator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.activePageChanged = createEvent(this, "activePageChanged", 7);
+    this.pageNavigationRequested = createEvent(this, "pageNavigationRequested", 7);
+    /**
+     * The active page number.
+     */
+    this.activePage = 1;
+    /**
+     * The total number of pages.
+     * Use -1 if not known and 'hasNextPage' property to indicate
+     * that the end has been reached.
+     */
+    this.totalPages = 1;
+    /**
+     * Indicates that the end has been reached.
+     * Use when total pages are not known (totalPages = -1).
+     */
+    this.hasNextPage = false;
+  }
+  activePageHandler() {
+    this.activePageChanged.emit({ activePage: this.activePage });
+  }
+  componentWillLoad() {
+    this.loadElements();
+  }
+  navigateClickedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    switch (eventInfo.detail.type) {
+      case "first":
+        this.first();
+        break;
+      case "previous":
+        this.previous();
+        break;
+      case "next":
+        this.next();
+        break;
+      case "last":
+        this.last();
+        break;
+    }
+    this.pageNavigationRequested.emit({ type: eventInfo.detail.type });
+  }
+  pageChangedHandler(eventInfo) {
+    eventInfo.stopPropagation();
+    const emitPageNavigationRequested = this.activePage !== eventInfo.detail.page;
+    this.activePage = eventInfo.detail.page;
+    if (emitPageNavigationRequested) {
+      this.pageNavigationRequested.emit({
+        type: "goto",
+        page: eventInfo.detail.page
+      });
+    }
+  }
+  loadElements() {
+    this.elPages = this.el.querySelector("ch-paginator-pages");
+    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
+    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
+    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
+    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+  }
+  keyDownHandler(eventInfo) {
+    switch (eventInfo.key) {
+      case "Home":
+        this.first();
+        this.elFirst.focus();
+        break;
+      case "PageUp":
+        this.previous();
+        this.elPrevious.focus();
+        break;
+      case "PageDown":
+        this.next();
+        this.elNext.focus();
+        break;
+      case "End":
+        this.last();
+        this.elLast.focus();
+        break;
+    }
+  }
+  first() {
+    this.activePage = 1;
+  }
+  previous() {
+    this.activePage = Math.max(this.activePage - 1, 1);
+  }
+  next() {
+    this.activePage =
+      this.totalPages < 0
+        ? this.activePage + 1
+        : Math.min(this.activePage + 1, this.totalPages);
+  }
+  last() {
+    this.activePage = this.totalPages;
+  }
+  render() {
+    if (this.elPages) {
+      this.elPages.totalPages = this.totalPages;
+      this.elPages.page = this.activePage;
+    }
+    if (this.elFirst) {
+      this.elFirst.disabled = this.activePage === 1;
+    }
+    if (this.elPrevious) {
+      this.elPrevious.disabled = this.activePage === 1;
+    }
+    if (this.elNext) {
+      this.elNext.disabled =
+        this.activePage === this.totalPages ||
+          (this.totalPages < 0 && !this.hasNextPage);
+    }
+    if (this.elLast) {
+      this.elLast.disabled =
+        this.activePage === this.totalPages ||
+          (this.totalPages < 0 && !this.hasNextPage);
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "activePage": ["activePageHandler"]
+  }; }
+};
+ChPaginator.style = chPaginatorCss;
+
+const chPaginatorNavigateCss = "ch-paginator-navigate[disabled]{pointer-events:none}";
+
+const ChPaginatorNavigate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.navigateClicked = createEvent(this, "navigateClicked", 7);
+  }
+  pressedHandler(eventInfo) {
+    if (!eventInfo.key || eventInfo.key === "Enter" || eventInfo.key === " ") {
+      this.navigateClicked.emit({ type: this.type });
+      eventInfo.stopPropagation();
+    }
+  }
+  render() {
+    return h(Host, { role: "button", tabindex: "0", disabled: this.disabled });
+  }
+};
+ChPaginatorNavigate.style = chPaginatorNavigateCss;
+
+var GxControlType;
+(function (GxControlType) {
+  GxControlType[GxControlType["EDIT"] = 1] = "EDIT";
+  GxControlType[GxControlType["RADIO"] = 4] = "RADIO";
+  GxControlType[GxControlType["COMBO"] = 5] = "COMBO";
+  GxControlType[GxControlType["CHECK"] = 7] = "CHECK";
+})(GxControlType || (GxControlType = {}));
+var GxControlDataType;
+(function (GxControlDataType) {
+  GxControlDataType[GxControlDataType["NUMBER"] = 0] = "NUMBER";
+  GxControlDataType[GxControlDataType["CHAR"] = 1] = "CHAR";
+  GxControlDataType[GxControlDataType["DATE"] = 2] = "DATE";
+  GxControlDataType[GxControlDataType["DATETIME"] = 3] = "DATETIME";
+  GxControlDataType[GxControlDataType["VARCHAR"] = 5] = "VARCHAR";
+  GxControlDataType[GxControlDataType["LONGVARCHAR"] = 6] = "LONGVARCHAR";
+  GxControlDataType[GxControlDataType["BOOLEAN"] = 7] = "BOOLEAN";
+})(GxControlDataType || (GxControlDataType = {}));
+
+const gxGridChameleonColumnFilterCss = "";
+
+const GridChameleonColumnFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.columnSettingsChanged = createEvent(this, "columnSettingsChanged", 7);
+    this.filterEnum = [];
+    this.applyClickHandler = () => {
+      this.equal = this.getControlValue(this.inputEqual);
+      this.less = this.getControlValue(this.inputLess);
+      this.greater = this.getControlValue(this.inputGreater);
+      this.columnSettingsChanged.emit({
+        column: this.column,
+        equal: this.equal,
+        less: this.less,
+        greater: this.greater
+      });
+    };
+    this.resetClickHandler = () => {
+      this.equal = "";
+      this.less = "";
+      this.greater = "";
+      this.columnSettingsChanged.emit({
+        column: this.column,
+        equal: this.equal,
+        less: this.less,
+        greater: this.greater
+      });
+    };
+  }
+  componentWillLoad() {
+    if (Array.isArray(this.column.FilterEnum) &&
+      this.column.FilterEnum.length > 0) {
+      this.filterEnum = this.column.FilterEnum;
+    }
+  }
+  getControlValue(input) {
+    var _a;
+    const value = (_a = input === null || input === void 0 ? void 0 : input.value) !== null && _a !== void 0 ? _a : "";
+    let dataType = this.column.gxControl.dataType;
+    if (dataType === GxControlDataType.DATETIME &&
+      this.column.FilterDateTimeAsDate === -1) {
+      dataType = GxControlDataType.DATE;
+    }
+    switch (dataType) {
+      case GxControlDataType.DATE:
+        return gx.date.ctod(value, "Y4MD").toString();
+      case GxControlDataType.DATETIME:
+        return gx.date.ctot(value, "Y4MD").toString();
+      default:
+        return value;
+    }
+  }
+  toControlValue(value) {
+    let dataType = this.column.gxControl.dataType;
+    if (!value) {
+      return "";
+    }
+    if (dataType === GxControlDataType.DATETIME &&
+      this.column.FilterDateTimeAsDate === -1) {
+      dataType = GxControlDataType.DATE;
+    }
+    switch (dataType) {
+      case GxControlDataType.DATE:
+        return this.convertGxDateToISO(gx.date.ctod(value), false);
+      case GxControlDataType.DATETIME:
+        return this.convertGxDateToISO(gx.date.ctot(value), true);
+      default:
+        return value;
+    }
+  }
+  convertGxDateToISO(gxdate, isDateTime) {
+    const pad = (n) => n.toString().padStart(2, "0");
+    const date = gxdate.Value;
+    if (gx.date.isNullDate(date)) {
+      return "";
+    }
+    if (isDateTime) {
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    }
+    else {
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    }
+  }
+  getFilterInputType(dataType) {
+    switch (dataType) {
+      case GxControlDataType.BOOLEAN:
+        return "checkbox";
+      case GxControlDataType.CHAR:
+      case GxControlDataType.VARCHAR:
+      case GxControlDataType.LONGVARCHAR:
+        return "text";
+      case GxControlDataType.DATE:
+        return "date";
+      case GxControlDataType.DATETIME:
+        return "datetime-local";
+      case GxControlDataType.NUMBER:
+        return "number";
+      default:
+        return "text";
+    }
+  }
+  renderColumnFilterControl(input, type, dataType, possibleValues, label, value) {
+    const part = input.replace("input", "").toLowerCase();
+    if (this.filterEnum.length > 0) {
+      type = GxControlType.COMBO;
+      possibleValues = this.filterEnum.map(filter => [
+        filter.Value,
+        filter.Description
+      ]);
+    }
+    if (dataType === GxControlDataType.DATETIME &&
+      this.column.FilterDateTimeAsDate === -1) {
+      dataType = GxControlDataType.DATE;
+    }
+    switch (type) {
+      case GxControlType.EDIT:
+      case GxControlType.CHECK:
+        return (h("label", { part: `label ${part}` }, label, h("input", { type: this.getFilterInputType(dataType), value: this.toControlValue(value), ref: el => (this[input] = el), part: `field ${part}` })));
+      case GxControlType.COMBO:
+        return (h("label", { part: `label ${part}` }, label, h("select", { ref: el => (this[input] = el), part: `field ${part}` }, possibleValues.map(([optionValue, optionDescription]) => (h("option", { value: optionValue, selected: optionValue === value }, optionDescription))))));
+    }
+  }
+  render() {
+    return (h(Host, null, h("fieldset", { part: "main" }, h("caption", { part: "caption" }, this.column.FilterCaption), this.column.FilterMode === "single" &&
+      this.renderColumnFilterControl("inputEqual", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelEqual, this.equal), this.column.FilterMode === "range" &&
+      this.renderColumnFilterControl("inputGreater", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelGreater, this.greater), this.column.FilterMode === "range" &&
+      this.renderColumnFilterControl("inputLess", this.column.gxControl.type, this.column.gxControl.dataType, this.column.gxControl.possibleValues, this.column.FilterLabelLess, this.less)), h("section", { part: "footer" }, h("button", { part: "button reset", onClick: this.resetClickHandler }, this.buttonResetText), h("button", { part: "button apply", onClick: this.applyClickHandler }, this.buttonApplyText))));
+  }
+  get el() { return getElement(this); }
+};
+GridChameleonColumnFilter.style = gxGridChameleonColumnFilterCss;
+
+export { ChGrid as ch_grid, ChGridActionRefresh as ch_grid_action_refresh, ChGridActionSettings as ch_grid_action_settings, ChGridActionbar as ch_grid_actionbar, ChGridColumn as ch_grid_column, ChGridColumnset as ch_grid_columnset, ChPaginator as ch_paginator, ChPaginatorNavigate as ch_paginator_navigate, GridChameleonColumnFilter as gx_grid_chameleon_column_filter };