@genexus/genexus-ide-ui 0.0.10 → 0.0.11

package/dist/components/ch-grid2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ChGridRowsetLegend } from './ch-grid-rowset-legend2.js';
 import { m as mouseEventModifierKey } from './helpers.js';
 import { d as defineCustomElement$4 } from './ch-grid-settings2.js';
 import { d as defineCustomElement$3 } from './ch-grid-settings-columns2.js';
@@ -205,7 +204,6 @@ class HTMLChGridRowElement extends HTMLElement {
     return this.parentGrid;
   }
 }
-HTMLChGridRowElement.TAG_NAME = "CH-GRID-ROW";
 if (!customElements.get("ch-grid-row")) {
   customElements.define("ch-grid-row", HTMLChGridRowElement);
 }
@@ -289,19 +287,18 @@ class HTMLChGridRowsetElement extends HTMLElement {
   }
   hasLegend() {
     var _a;
-    return ((_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === ChGridRowsetLegend.TAG_NAME;
+    return ((_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.tagName) === "ch-grid-rowset-legend";
   }
   isNestedRow() {
-    return this.parentElement.tagName === HTMLChGridRowElement.TAG_NAME;
+    return this.parentElement.tagName === "CH-GRID-ROW";
   }
   getParentRowset() {
     const node = this.parentElement.closest("ch-grid-rowset, ch-grid");
-    if (node.tagName === HTMLChGridRowsetElement.TAG_NAME) {
+    if (node.tagName === "CH-GRID-ROWSET") {
       return node;
     }
   }
 }
-HTMLChGridRowsetElement.TAG_NAME = "CH-GRID-ROWSET";
 if (!customElements.get("ch-grid-rowset")) {
   customElements.define("ch-grid-rowset", HTMLChGridRowsetElement);
 }
@@ -447,7 +444,10 @@ class HTMLChGridCellElement extends HTMLElement {
     }));
   }
   actionClickHandler() {
-    // TODO
+    this.dispatchEvent(new CustomEvent("cellRowActionClicked", {
+      bubbles: true,
+      composed: true
+    }));
   }
   definePlain() {
     this.cellType = ChGridCellType.Plain;
@@ -488,10 +488,11 @@ class HTMLChGridCellElement extends HTMLElement {
         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("mousedown", (eventInfo) => eventInfo.stopPropagation());
         this.selector.addEventListener("click", this.selectorClickHandler.bind(this));
         this.selectorLabel = this.shadowRoot.querySelector("[part='selector-label']");
+        this.selectorLabel.addEventListener("mousedown", (eventInfo) => eventInfo.stopPropagation());
         this.selectorLabel.addEventListener("click", this.selectorLabelClickHandler.bind(this));
       }
     }
@@ -513,80 +514,90 @@ class HTMLChGridCellElement extends HTMLElement {
     }
   }
 }
-HTMLChGridCellElement.TAG_NAME = "CH-GRID-CELL";
 if (!customElements.get("ch-grid-cell")) {
   customElements.define("ch-grid-cell", HTMLChGridCellElement);
 }
 
 class ChGridManagerColumnDrag {
-  constructor(columnId, columns) {
+  constructor(columnId, columns, isRTL) {
     this.lastTargetOrder = 0;
+    this.isRTL = isRTL;
     this.columns = columns.map(column => ({
-      column,
+      element: column,
       rect: column.getBoundingClientRect(),
       translateX: 0,
       order: column.order
     }));
-    this.column = this.columns.find(item => item.column.columnId === columnId);
+    this.column = this.columns.find(item => item.element.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;
+    const sourceOrder = this.column.element.order;
     /**
      * Indica a qué grupo de fijación pertenece la columna que se está arrastrando
      */
-    const sourceFreeze = this.column.column.freeze;
+    const sourceFreeze = this.column.element.freeze;
     let targetOrder = 0;
     let targetOrderChanged = false;
     this.column.translateX = 0;
     this.columns
-      .filter(item => item.column.freeze === sourceFreeze)
-      .forEach(item => {
+      .filter(column => column.element.freeze === sourceFreeze)
+      .forEach(column => {
       /**
        * Indica el orden de la columna actual
        */
-      const columnOrder = item.column.order;
+      const columnOrder = column.element.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.
+       * incrementar el orden según corresponda.
        */
-      const dragDirection = sourceOrder > columnOrder ? -1 : 1;
+      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 &&
+      const shiftDirection = (sourceOrder > columnOrder ? 1 : -1) * (this.isRTL ? -1 : 1);
+      if (column.rect.left < position &&
+        position < column.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);
+        this.swapColumnPosition(column, shiftDirection);
+        // actualizo el orden de la columna actual
+        column.order = column.element.order + dragDirection;
         targetOrder = columnOrder;
       }
-      else if (position < item.rect.left && columnOrder < sourceOrder) {
+      else if (position < column.rect.left &&
+        (this.isRTL ? columnOrder > sourceOrder : 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) {
+        this.swapColumnPosition(column, shiftDirection);
+        // actualizo el orden de la columna actual
+        column.order = column.element.order + dragDirection;
+        if (!targetOrder ||
+          (this.isRTL ? columnOrder > targetOrder : columnOrder < targetOrder)) {
           targetOrder = columnOrder;
         }
       }
-      else if (position > item.rect.right && columnOrder > sourceOrder) {
+      else if (position > column.rect.right &&
+        (this.isRTL ? columnOrder < sourceOrder : 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) {
+        this.swapColumnPosition(column, shiftDirection);
+        // actualizo el orden de la columna actual
+        column.order = column.element.order + dragDirection;
+        if (!targetOrder ||
+          (this.isRTL ? columnOrder < targetOrder : columnOrder > targetOrder)) {
           targetOrder = columnOrder;
         }
       }
@@ -595,84 +606,84 @@ class ChGridManagerColumnDrag {
           La posicion actual del mouse NO está dentro de la columna actual ni
           la cruza.
         */
-        this.resetColumnPosition(item);
+        this.resetColumnPosition(column);
       }
     });
-    this.column.order = targetOrder ? targetOrder : this.column.column.order;
+    this.column.order = targetOrder ? targetOrder : this.column.element.order;
     targetOrderChanged = targetOrder !== this.lastTargetOrder;
     this.lastTargetOrder = targetOrder;
     return targetOrderChanged;
   }
   dragEnd() {
-    this.columns.forEach(item => {
-      item.column.order = item.order;
-      item.translateX = 0;
+    this.columns.forEach(column => {
+      column.element.order = column.order;
+      column.translateX = 0;
     });
   }
   getColumnStyle(column) {
     return {
-      [`--ch-grid-column-${column.physicalOrder}-transform`]: `translateX(${this.columns[column.physicalOrder - 1].translateX}px)`
+      [`--ch-grid-column-${column.physicalOrder}-transform`]: `translateX(${this.columns.find(columnItem => columnItem.element === column)
+        .translateX}px)`
     };
   }
   getColumnsFirstLast() {
     let itemFirst;
     let itemLast;
     this.columns.forEach(item => {
-      if (!item.column.hidden && (!itemFirst || item.order < itemFirst.order)) {
+      if (!item.element.hidden &&
+        (!itemFirst || item.order < itemFirst.order)) {
         itemFirst = item;
       }
-      if (!item.column.hidden && (!itemLast || item.order > itemLast.order)) {
+      if (!item.element.hidden && (!itemLast || item.order > itemLast.order)) {
         itemLast = item;
       }
     });
     return {
-      columnFirst: itemFirst.column,
-      columnLast: itemLast.column
+      columnFirst: itemFirst.element,
+      columnLast: itemLast.element
     };
   }
-  swapColumnPosition(column, dragDirection, shiftDirection) {
+  swapColumnPosition(column, 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;
+    this.column.translateX += column.rect.width * (shiftDirection * -1);
   }
   resetColumnPosition(column) {
     // no desplazo la columna actual
     column.translateX = 0;
     // asigno su posición original
-    column.order = column.column.order;
+    column.order = column.element.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
+  setColumnHiddenRect(column) {
+    if (column.element.hidden) {
+      const columnSibling = this.getPreviousSiblingVisible(column) ||
+        this.getNextSiblingVisible(column);
+      column.rect = new DOMRect(column.element.order < columnSibling.element.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;
+    this.columns.forEach(column => {
+      if (!column.element.hidden &&
+        column.element.order < hidden.element.order &&
+        (!previous || column.element.order > previous.element.order)) {
+        previous = column;
       }
     });
     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;
+    this.columns.forEach(column => {
+      if (!column.element.hidden &&
+        column.element.order > hidden.element.order &&
+        (!next || column.element.order < next.element.order)) {
+        next = column;
       }
     });
     return next;
@@ -680,12 +691,13 @@ class ChGridManagerColumnDrag {
 }
 
 class ChGridManagerColumns {
-  constructor(grid) {
+  constructor(manager) {
     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.columnsWidth = [];
+    this.manager = manager;
+    this.columns = Array.from(this.manager.grid.querySelectorAll("ch-grid-column"));
     this.observeColumnset();
     this.defineColumns(this.columns);
     this.defineColumnsVariables();
@@ -773,7 +785,7 @@ class ChGridManagerColumns {
       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]);
+      this.manager.grid.appendChild(this.columnsDisplay[i]);
     }
   }
   defineColumnResizeObserver(column) {
@@ -782,14 +794,14 @@ class ChGridManagerColumns {
   defineColumnType(column) {
     switch (column.columnType) {
       case "tree":
-        this.grid.el
+        this.manager.grid
           .querySelectorAll(`ch-grid-cell:nth-child(${column.physicalOrder})`)
           .forEach((cell) => {
           cell.type = ChGridCellType.TreeNode;
         });
         break;
       case "rich":
-        this.grid.el
+        this.manager.grid
           .querySelectorAll(`ch-grid-cell:nth-child(${column.physicalOrder})`)
           .forEach((cell) => {
           cell.rowDrag = column.richRowDrag;
@@ -853,10 +865,10 @@ class ChGridManagerColumns {
     });
   }
   observeColumnset() {
-    this.columnsetObserver.observe(this.grid.el.querySelector("ch-grid-columnset"), { childList: true });
+    this.columnsetObserver.observe(this.manager.grid.querySelector("ch-grid-columnset"), { childList: true });
   }
   reloadColumns() {
-    const columns = Array.from(this.grid.el.querySelectorAll("ch-grid-column"));
+    const columns = Array.from(this.manager.grid.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) {
@@ -871,8 +883,9 @@ class ChGridManagerColumns {
   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`);
+      this.columnsWidth[column.physicalOrder - 1] = entry.contentRect.width;
     }
+    this.manager.setColumnWidthVariables(this.columnsWidth);
   }
   getColumnUniqueId() {
     const uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2);
@@ -887,7 +900,7 @@ class ChGridManagerColumns {
     });
   }
   adjustBaseLayer() {
-    this.grid.baseLayer = this.columns.length;
+    this.manager.setBaseLayer(this.columns.length);
   }
   fnSortByOrder(columnA, columnB) {
     if (columnA.order < columnB.order) {
@@ -901,20 +914,20 @@ class ChGridManagerColumns {
 }
 
 class ChGridManagerSelection {
-  constructor(grid) {
+  constructor(manager) {
     this.selectionStateNone = {
       rowFocused: null,
       rowsSelected: [],
       cellSelected: null
     };
-    this.grid = grid;
+    this.manager = manager;
   }
   select(state, row, cell, append, range) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
       range = false;
     }
@@ -923,7 +936,7 @@ class ChGridManagerSelection {
     let cellSelected = state.cellSelected;
     rowFocused = row;
     if (range) {
-      const rangeRows = this.grid.manager.getRowsRange((_a = this.rangeStart) !== null && _a !== void 0 ? _a : row, row);
+      const rangeRows = this.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)));
@@ -934,7 +947,7 @@ class ChGridManagerSelection {
         }
         cellSelected =
           cell ||
-            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
       }
       else {
         rowsSelected = rowsSelected.filter(rowSelected => !rangeRows.includes(rowSelected));
@@ -952,7 +965,7 @@ class ChGridManagerSelection {
         rowsSelected = [...rowsSelected, row];
         cellSelected =
           cell ||
-            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+            row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
       }
     }
     else {
@@ -964,26 +977,26 @@ class ChGridManagerSelection {
           : [row];
       cellSelected =
         cell ||
-          row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+          row.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectAll(state, value = true) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    const rows = this.grid.manager.getRows();
+    const rows = this.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();
+      rowFocused = rowFocused !== null && rowFocused !== void 0 ? rowFocused : this.manager.getFirstRow();
       rowsSelected = rows;
-      cellSelected = rowFocused.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+      cellSelected = rowFocused.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.manager.getFirstColumn());
     }
     else {
-      rowFocused = rowFocused !== null && rowFocused !== void 0 ? rowFocused : this.grid.manager.getFirstRow();
+      rowFocused = rowFocused !== null && rowFocused !== void 0 ? rowFocused : this.manager.getFirstRow();
       rowsSelected = [];
       cellSelected = null;
     }
@@ -1010,37 +1023,37 @@ class ChGridManagerSelection {
   }
   selectFirstRow(state, append) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const firstRow = this.grid.manager.getFirstRow();
+    const firstRow = this.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);
+        const rangeRows = this.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());
+      cellSelected = firstRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectPreviousRow(state, append) {
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const previousRow = this.grid.manager.getPreviousRow(state.rowFocused);
+    const previousRow = this.manager.getPreviousRow(state.rowFocused);
     let rowFocused = state.rowFocused;
     let rowsSelected = state.rowsSelected;
     let cellSelected = state.cellSelected;
@@ -1063,18 +1076,18 @@ class ChGridManagerSelection {
         rowsSelected = [previousRow];
       }
       rowFocused = previousRow;
-      cellSelected = previousRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+      cellSelected = previousRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectNextRow(state, append) {
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const nextRow = this.grid.manager.getNextRow(state.rowFocused);
+    const nextRow = this.manager.getNextRow(state.rowFocused);
     let rowFocused = state.rowFocused;
     let rowsSelected = state.rowsSelected;
     let cellSelected = state.cellSelected;
@@ -1098,52 +1111,52 @@ class ChGridManagerSelection {
         rowsSelected = [nextRow];
       }
       rowFocused = nextRow;
-      cellSelected = nextRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.grid.manager.getFirstColumn());
+      cellSelected = nextRow.getCell((cellSelected === null || cellSelected === void 0 ? void 0 : cellSelected.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectLastRow(state, append) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const firstRow = this.grid.manager.getLastRow();
+    const firstRow = this.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);
+        const rangeRows = this.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());
+      cellSelected = firstRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectPreviousPageRow(state, append) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const rows = this.grid.manager.getRows();
-    const rowsPerPage = this.grid.manager.getRowsPerPage();
+    const rows = this.manager.getRows();
+    const rowsPerPage = this.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);
+        const rangeRows = this.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : previousPageRow, previousPageRow);
         rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
       }
       else {
@@ -1153,27 +1166,27 @@ class ChGridManagerSelection {
             : [previousPageRow];
       }
       rowFocused = previousPageRow;
-      cellSelected = previousPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+      cellSelected = previousPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectNextPageRow(state, append) {
     var _a;
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.grid.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    else if (this.grid.rowSelectionMode !== "multiple") {
+    else if (this.manager.grid.rowSelectionMode !== "multiple") {
       append = false;
     }
-    const rows = this.grid.manager.getRows();
-    const rowsPerPage = this.grid.manager.getRowsPerPage();
+    const rows = this.manager.getRows();
+    const rowsPerPage = this.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);
+        const rangeRows = this.manager.getRowsRange(rowFocused !== null && rowFocused !== void 0 ? rowFocused : nextPageRow, nextPageRow);
         rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
       }
       else {
@@ -1183,19 +1196,19 @@ class ChGridManagerSelection {
             : [nextPageRow];
       }
       rowFocused = nextPageRow;
-      cellSelected = nextPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.grid.manager.getFirstColumn());
+      cellSelected = nextPageRow.getCell(((_a = state.cellSelected) === null || _a === void 0 ? void 0 : _a.column) || this.manager.getFirstColumn());
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectPreviousCell(state) {
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.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);
+      const nextCell = this.manager.getPreviousCell(cellSelected);
       if (nextCell) {
         cellSelected = nextCell;
       }
@@ -1205,20 +1218,20 @@ class ChGridManagerSelection {
         rowsSelected = [...rowsSelected, rowFocused];
       }
       if (!cellSelected) {
-        cellSelected = rowFocused.getCell(this.grid.manager.getFirstColumn());
+        cellSelected = rowFocused.getCell(this.manager.getFirstColumn());
       }
     }
     return { rowFocused, rowsSelected, cellSelected };
   }
   selectNextCell(state) {
-    if (this.grid.rowSelectionMode === "none") {
+    if (this.manager.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);
+      const nextCell = this.manager.getNextCell(cellSelected);
       if (nextCell) {
         cellSelected = nextCell;
       }
@@ -1228,7 +1241,7 @@ class ChGridManagerSelection {
         rowsSelected = [...rowsSelected, rowFocused];
       }
       if (!cellSelected) {
-        cellSelected = rowFocused.getCell(this.grid.manager.getFirstColumn());
+        cellSelected = rowFocused.getCell(this.manager.getFirstColumn());
       }
     }
     return { rowFocused, rowsSelected, cellSelected };
@@ -1238,7 +1251,7 @@ class ChGridManagerSelection {
     if (row) {
       if (range) {
         const value = !row.marked;
-        const rows = this.grid.manager.getRowsRange((_a = this.lastRowMarked) !== null && _a !== void 0 ? _a : row, row);
+        const rows = this.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)));
@@ -1261,14 +1274,14 @@ class ChGridManagerSelection {
   }
   markAllRows(value = true) {
     if (value) {
-      return this.grid.manager.getRows();
+      return this.manager.getRows();
     }
     else {
       return [];
     }
   }
   syncRowSelector(rows, previous = [], selectorMode) {
-    const columnSelector = this.grid.manager.columns.getColumnSelector();
+    const columnSelector = this.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 => {
@@ -1284,7 +1297,7 @@ class ChGridManagerSelection {
       if (rows.length === 0) {
         columnSelector.richRowSelectorState = "";
       }
-      else if (rows.length === this.grid.manager.getRows().length) {
+      else if (rows.length === this.manager.getRows().length) {
         columnSelector.richRowSelectorState = "checked";
       }
       else {
@@ -1293,7 +1306,7 @@ class ChGridManagerSelection {
     }
   }
   sortRowsSelected(rowsSelected) {
-    const rows = Array.from(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}`));
+    const rows = Array.from(this.manager.grid.querySelectorAll("ch-grid-row"));
     return rowsSelected.sort((rowA, rowB) => {
       const rowAIndex = rows.indexOf(rowA);
       const rowBIndex = rows.indexOf(rowB);
@@ -1307,7 +1320,7 @@ class ChGridManagerSelection {
     });
   }
   isContiguousSelection(sortedRowsSelected) {
-    const rows = Array.from(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}`)).filter(row => row.isVisible());
+    const rows = Array.from(this.manager.grid.querySelectorAll("ch-grid-row")).filter(row => row.isVisible());
     if (sortedRowsSelected.length === 0) {
       return false;
     }
@@ -1323,13 +1336,13 @@ class ChGridManagerSelection {
 }
 
 class ChGridManagerRowDrag {
-  constructor(grid) {
+  constructor(manager) {
     this.dragMouseMoveFn = this.dragMouseMoveHandler.bind(this);
-    this.grid = grid;
+    this.manager = manager;
   }
   dragStart(row) {
     this.row = row;
-    this.rowIndex = this.grid.manager.getGridRowIndex(row);
+    this.rowIndex = this.manager.getGridRowIndex(row);
     this.defineListeners();
     this.createRowShadow();
     this.floatRow();
@@ -1337,11 +1350,11 @@ class ChGridManagerRowDrag {
   }
   dragMouseMoveHandler(eventInfo) {
     const target = eventInfo.target;
-    const rowHover = target.closest(HTMLChGridRowElement.TAG_NAME);
+    const rowHover = target.closest("ch-grid-row");
     if (rowHover &&
       rowHover.parentElement === this.row.parentElement &&
-      rowHover.grid === this.grid.el) {
-      const rowHoverIndex = this.grid.manager.getGridRowIndex(rowHover);
+      rowHover.grid === this.manager.grid) {
+      const rowHoverIndex = this.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") !==
@@ -1357,7 +1370,7 @@ class ChGridManagerRowDrag {
   dragMouseUpHandler() {
     document.removeEventListener("mousemove", this.dragMouseMoveFn);
     const dropPosition = parseInt(this.rowShadow.style.getPropertyValue("--row-shadow-row-start"));
-    const rowDrop = this.grid.el
+    const rowDrop = this.manager.grid
       .querySelectorAll("ch-grid-row")
       .item(dropPosition - 2);
     if (dropPosition < this.rowIndex + 2) {
@@ -1380,10 +1393,10 @@ class ChGridManagerRowDrag {
     });
   }
   createRowShadow() {
-    const rowHeight = this.grid.manager.getRowHeight(this.row);
+    const rowHeight = this.manager.getRowHeight(this.row);
     this.rowShadow = document.createElement("div");
     this.rowShadow.style.display = "contents";
-    this.grid.manager.getColumnsWidth().forEach(width => {
+    this.manager.getColumnsWidth().forEach(width => {
       const column = document.createElement("div");
       column.style.opacity = "0";
       column.style.minWidth = width;
@@ -1393,15 +1406,15 @@ class ChGridManagerRowDrag {
     });
   }
   floatRow() {
-    const columnsWidth = this.grid.manager.getColumnsWidth();
-    const rowWidth = this.grid.gridMainEl.clientWidth;
+    const columnsWidth = this.manager.getColumnsWidth();
+    const rowWidth = this.manager.gridLayout.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`));
+      const columnPosition = parseInt(this.manager.gridLayout.style.getPropertyValue(`--ch-grid-column-${i + 1}-position`));
       if (!cell.hidden) {
         cell.style.width = columnsWidth[columnPosition - 1];
         cell.style.order = `${columnPosition}`;
@@ -1425,55 +1438,75 @@ class ChGridManagerRowDrag {
   }
 }
 
+class ChGridManagerRowActions {
+  constructor(manager) {
+    var _a;
+    this.manager = manager;
+    (_a = this.manager.grid
+      .querySelectorAll("ch-grid-row-actions")) === null || _a === void 0 ? void 0 : _a.forEach(rowActions => {
+      if (rowActions.showOnRowHover) {
+        this.showOnRowHover = rowActions;
+      }
+      if (rowActions.showOnRowActions) {
+        this.showOnRowActions = rowActions;
+      }
+      if (rowActions.showOnRowContext) {
+        this.showOnRowContext = rowActions;
+      }
+    });
+  }
+}
+
+var StyleRule;
+(function (StyleRule) {
+  StyleRule[StyleRule["BASE_LAYER"] = 0] = "BASE_LAYER";
+  StyleRule[StyleRule["COLUMNS_WIDTH"] = 1] = "COLUMNS_WIDTH";
+})(StyleRule || (StyleRule = {}));
 class ChGridManager {
   constructor(grid) {
+    this.styleSheet = new CSSStyleSheet();
     this.grid = grid;
-    this.columnsManager = new ChGridManagerColumns(this.grid);
-    this.selectionManager = new ChGridManagerSelection(this.grid);
+    this.styleSheet.insertRule(`:host {}`, StyleRule.BASE_LAYER);
+    this.styleSheet.insertRule(".main {}", StyleRule.COLUMNS_WIDTH);
+    this.grid.shadowRoot.adoptedStyleSheets.push(this.styleSheet);
+    this.columns = new ChGridManagerColumns(this);
+    this.selection = new ChGridManagerSelection(this);
+    this.rowActions = new ChGridManagerRowActions(this);
   }
-  get selection() {
-    return this.selectionManager;
+  get gridLayout() {
+    return this.gridLayoutElement;
   }
-  get columns() {
-    return this.columnsManager;
-  }
-  gridDidLoad() {
-    if (this.isRowActionsEnabled()) {
-      this.observeMainScroll();
-    }
+  componentDidLoad(gridLayout) {
+    this.gridLayoutElement = gridLayout;
   }
   getColumns() {
-    return this.columnsManager.getColumns();
+    return this.columns.getColumns();
   }
   getColumnsWidth() {
-    return getComputedStyle(this.grid.gridMainEl).gridTemplateColumns.split(" ");
+    return getComputedStyle(this.gridLayout).gridTemplateColumns.split(" ");
   }
   getColumnsetHeight() {
-    const gridColumnsHeight = getComputedStyle(this.grid.gridMainEl).gridTemplateRows.split(" ");
+    const gridColumnsHeight = getComputedStyle(this.gridLayout).gridTemplateRows.split(" ");
     return parseInt(gridColumnsHeight[0]) || 0;
   }
   getFirstColumn() {
-    return this.columnsManager.getColumnsFirstLast().columnFirst;
+    return this.columns.getColumnsFirstLast().columnFirst;
   }
   getFirstRow() {
-    return this.grid.el.querySelector(`${HTMLChGridRowElement.TAG_NAME.toLowerCase()}`);
+    return this.grid.querySelector("ch-grid-row");
   }
   getScrollOffsetTop() {
-    return this.grid.gridMainEl.offsetTop + this.getColumnsetHeight();
+    return this.gridLayout.offsetTop + this.getColumnsetHeight();
   }
   getScrollOffsetLeft() {
-    return this.grid.manager.columns
-      .getColumns(true)
-      .reduce((offsetRight, column) => {
+    return this.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 this.columns.getColumns(true).reduce((offsetRight, column) => {
       return column.freeze === "end" && !column.hidden
         ? offsetRight + column.offsetWidth
         : offsetRight;
@@ -1498,7 +1531,7 @@ class ChGridManager {
   }
   getPreviousCell(current) {
     const columnOrder = current.column.order;
-    const previousColumn = this.grid.manager.columns
+    const previousColumn = this.columns
       .getColumns()
       .reduce((previous, column) => {
       return column.order < columnOrder &&
@@ -1513,9 +1546,7 @@ class ChGridManager {
   }
   getNextCell(current) {
     const columnOrder = current.column.order;
-    const nextColumn = this.grid.manager.columns
-      .getColumns()
-      .reduce((previous, column) => {
+    const nextColumn = this.columns.getColumns().reduce((previous, column) => {
       return column.order > columnOrder &&
         !column.hidden &&
         (!previous || column.order < previous.order)
@@ -1527,27 +1558,27 @@ class ChGridManager {
     }
   }
   getGridRowIndex(row) {
-    return Array.prototype.indexOf.call(this.grid.el.querySelectorAll(`${HTMLChGridRowElement.TAG_NAME}, ${ChGridRowsetLegend.TAG_NAME}`), row);
+    return Array.prototype.indexOf.call(this.grid.querySelectorAll("ch-grid-row, ch-grid-rowset-legend"), row);
   }
   getRowsetRowIndex(row) {
     return Array.prototype.indexOf.call(row.parentElement.children, row);
   }
   getRowHeight(row) {
-    const gridRowsHeight = getComputedStyle(this.grid.gridMainEl).gridTemplateRows.split(" ");
+    const gridRowsHeight = getComputedStyle(this.gridLayout).gridTemplateRows.split(" ");
     const rowIndex = this.getGridRowIndex(row) + 1;
     return parseInt(gridRowsHeight[rowIndex]) || 0;
   }
   getRowsPerPage() {
-    const gridHeight = this.grid.gridMainEl.clientHeight;
+    const gridHeight = this.gridLayout.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}"]`);
+    return this.grid.querySelector(`ch-grid-row[rowid="${rowId}"]`);
   }
   getRows(state = "all") {
-    const rows = Array.from(this.grid.el.querySelectorAll(`ch-grid-row`));
+    const rows = Array.from(this.grid.querySelectorAll(`ch-grid-row`));
     if (state === "visible") {
       return rows.filter(row => row.isVisible());
     }
@@ -1556,7 +1587,7 @@ class ChGridManager {
     }
   }
   getRowsSelected() {
-    return Array.from(this.grid.el.querySelectorAll(`ch-grid-row[selected]`));
+    return Array.from(this.grid.querySelectorAll(`ch-grid-row[selected]`));
   }
   getRowsRange(start, end) {
     const rows = this.getRows();
@@ -1574,11 +1605,11 @@ class ChGridManager {
   isRowActionsEventTarget(eventInfo) {
     return (eventInfo
       .composedPath()
-      .find((target) => { var _a; return (_a = target.classList) === null || _a === void 0 ? void 0 : _a.contains("row-actions"); }) != null);
+      .find((target) => target.tagName === "CH-GRID-ROW-ACTIONS") != null);
   }
   getCell(cellId, rowId, columnId) {
     if (cellId) {
-      return this.grid.el.querySelector(`ch-grid-cell[cellid="${cellId}"]`);
+      return this.grid.querySelector(`ch-grid-cell[cellid="${cellId}"]`);
     }
     else if (rowId && columnId) {
       const row = this.getRow(rowId);
@@ -1594,7 +1625,7 @@ class ChGridManager {
       .find((target) => target.tagName === "CH-GRID-CELL");
   }
   columnDragStart(columnId) {
-    this.columnDragManager = new ChGridManagerColumnDrag(columnId, this.columnsManager.getColumns());
+    this.columnDragManager = new ChGridManagerColumnDrag(columnId, this.columns.getColumns(), this.isRTLDirection());
   }
   columnDragging(position) {
     return this.columnDragManager.dragging(position);
@@ -1604,43 +1635,38 @@ class ChGridManager {
     this.columnDragManager = null;
   }
   rowDragStart(row) {
-    this.rowDragManager = new ChGridManagerRowDrag(this.grid);
+    this.rowDragManager = new ChGridManagerRowDrag(this);
     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;
+  setBaseLayer(value) {
+    this.styleSheet.deleteRule(StyleRule.BASE_LAYER);
+    this.styleSheet.insertRule(`:host { --ch-grid-base-layer: ${value}; }`, StyleRule.BASE_LAYER);
   }
-  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");
-    }
+  setColumnWidthVariables(columnsWidth) {
+    this.styleSheet.deleteRule(StyleRule.COLUMNS_WIDTH);
+    this.styleSheet.insertRule(`.main { ${columnsWidth
+      .map((columnWidth, columnIndex) => `--ch-grid-column-${columnIndex + 1}-width:${columnWidth}px;`)
+      .join("\n")} }`, StyleRule.COLUMNS_WIDTH);
   }
   ensureRowVisible(row) {
-    let node = row.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
-    const { columnFirst } = this.columnsManager.getColumnsFirstLast();
+    let node = row.parentElement.closest("ch-grid-row, ch-grid-rowset");
+    const { columnFirst } = this.columns.getColumnsFirstLast();
     while (node) {
       node.collapsed = false;
-      node = node.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+      node = node.parentElement.closest("ch-grid-row, ch-grid-rowset");
     }
     if (row.children[columnFirst.physicalOrder]) {
       this.ensureVisible(row.children[columnFirst.physicalOrder]);
     }
   }
   ensureCellVisible(cell) {
-    let node = cell.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+    let node = cell.closest("ch-grid-row, ch-grid-rowset");
     while (!cell.isVisible() && node) {
       node.collapsed = false;
-      node = node.parentElement.closest(`${HTMLChGridRowElement.TAG_NAME}, ${HTMLChGridRowsetElement.TAG_NAME}`);
+      node = node.parentElement.closest("ch-grid-row, ch-grid-rowset");
     }
     if (!cell.isVisible()) {
       cell.column.hidden = false;
@@ -1649,7 +1675,7 @@ class ChGridManager {
   }
   ensureVisible(cell) {
     const isColumnFreeze = ["start", "end"].includes(cell.column.freeze);
-    const scroll = this.grid.gridMainEl;
+    const scroll = this.gridLayout;
     const scrollOffsetTop = this.getScrollOffsetTop();
     const scrollOffsetLeft = this.getScrollOffsetLeft();
     const scrollOffsetRight = this.getScrollOffsetRight();
@@ -1684,7 +1710,7 @@ class ChGridManager {
   }
   getGridTemplateColumns() {
     return {
-      "grid-template-columns": this.columnsManager
+      "grid-template-columns": this.columns
         .getColumns()
         .map(column => `var(--ch-grid-column-${column.physicalOrder}-size)`)
         .join(" ")
@@ -1693,7 +1719,7 @@ class ChGridManager {
   getRowBoxSimulationStyle() {
     const { columnFirst, columnLast } = this.columnDragManager
       ? this.columnDragManager.getColumnsFirstLast()
-      : this.columnsManager.getColumnsFirstLast();
+      : this.columns.getColumnsFirstLast();
     if (!columnFirst || !columnLast) {
       return null;
     }
@@ -1706,17 +1732,13 @@ class ChGridManager {
       [`--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 this.columns.getColumns().reduce((style, column) => {
       return Object.assign(Object.assign({}, style), this.getColumnStyle(column));
     }, {});
   }
@@ -1755,7 +1777,7 @@ class ChGridManager {
   }
   getColumnFreezeEndStyle(column) {
     const calcItems = ["0px"];
-    for (let i = this.columnsManager.getColumns().length; i > column.order; i--) {
+    for (let i = this.columns.getColumns().length; i > column.order; i--) {
       calcItems.push(`var(--ch-grid-column-${i}-width)`);
     }
     return {
@@ -1780,12 +1802,12 @@ class ChGridManager {
       [`--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 });
+  isRTLDirection() {
+    return getComputedStyle(this.grid).direction === "rtl";
   }
 }
 
-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 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}";
 
 const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
@@ -1816,49 +1838,36 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
      * 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;
+  rowFocusedHandler(row, previous) {
+    if (row) {
+      row.focused = true;
+    }
+    if (previous) {
+      previous.focused = false;
     }
   }
   rowHighlightedHandler(row, previous) {
+    var _a, _b;
+    // highlight
     if (row) {
       row.highlighted = true;
     }
     if (previous) {
       previous.highlighted = false;
     }
-    if (this.gridRowActionsEnabled) {
-      this.manager.setRowActionsPosition(row);
-    }
-  }
-  rowFocusedHandler(row, previous) {
+    // actions
     if (row) {
-      row.focused = true;
+      (_a = this.manager.rowActions.showOnRowHover) === null || _a === void 0 ? void 0 : _a.openRowHover(row);
     }
-    if (previous) {
-      previous.focused = false;
+    else {
+      (_b = this.manager.rowActions.showOnRowHover) === null || _b === void 0 ? void 0 : _b.close();
     }
   }
+  rowsMarkedHandler(rows, previous) {
+    this.manager.selection.syncRowSelector(rows, previous, "mark");
+    this.rowMarkingChanged.emit({ rowsId: rows.map(row => row.rowId) });
+  }
   rowsSelectedHandler(rows, previous) {
     if (previous) {
       previous
@@ -1871,10 +1880,6 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     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;
@@ -1888,6 +1893,23 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       columnId: this.cellSelected ? this.cellSelected.column.columnId : null
     });
   }
+  componentWillLoad() {
+    this.manager = new ChGridManager(this.el);
+    this.gridStyle = this.manager.getGridStyle();
+    this.rowsSelected = this.manager.getRowsSelected();
+  }
+  componentDidLoad() {
+    this.manager.componentDidLoad(this.gridLayoutElement);
+  }
+  componentShouldUpdate(_newValue, _oldValue, name) {
+    if (name === "rowFocused" ||
+      name === "rowHighlighted" ||
+      name === "rowSelected" ||
+      name === "rowsMarked" ||
+      name === "cellSelected") {
+      return false;
+    }
+  }
   focusHandler() {
     if (this.rowSelectionMode !== "none") {
       this.rowFocused = this.rowsSelected[0] || this.manager.getFirstRow();
@@ -2030,6 +2052,11 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       this.rowsMarked = this.manager.selection.markRow(this.manager.getRowEventTarget(eventInfo), eventInfo.detail.checked, eventInfo.detail.range, this.rowsMarked);
     }
   }
+  cellRowActionClickedHandler(eventInfo) {
+    var _a;
+    const cell = eventInfo.target;
+    (_a = this.manager.rowActions.showOnRowActions) === null || _a === void 0 ? void 0 : _a.openRowActions(cell);
+  }
   columnStyleChangedHandler() {
     if (this.manager) {
       this.gridStyle = this.manager.getGridStyle();
@@ -2060,10 +2087,10 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.manager.ensureCellVisible(eventInfo.target);
   }
   settingsShowClickedHandler() {
-    this.gridSettingsUI.show = true;
+    this.settingsUI.show = true;
   }
   settingsCloseClickedHandler() {
-    this.gridSettingsUI.show = false;
+    this.settingsUI.show = false;
   }
   /**
    * Retrieves the rowId of the currently focused row.
@@ -2150,6 +2177,28 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
     }
   }
+  /**
+   * Mark or unmark a row.
+   * @param rowId - The rowId of the row to select or deselect.
+   * @param marked - A boolean indicating whether to mark or unmark the row.
+   */
+  async markRow(rowId, marked = true) {
+    const columnSelector = this.manager.columns.getColumnSelector();
+    const row = this.manager.getRow(rowId);
+    if (row && (columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+      this.rowsMarked = this.manager.selection.markRow(row, marked, false, this.rowsMarked);
+    }
+  }
+  /**
+   * Mark or unmark all rows.
+   * @param marked - A boolean indicating whether to mark or unmark all rows.
+   */
+  async markAllRows(marked = true) {
+    const columnSelector = this.manager.columns.getColumnSelector();
+    if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+      this.rowsMarked = this.manager.selection.markAllRows(marked);
+    }
+  }
   /**
    * Expands a row, showing its children.
    * @param rowId - The rowId of the row to expand.
@@ -2307,22 +2356,18 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       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            " }))));
+    return (h("ch-grid-settings", { grid: this.el, ref: el => (this.settingsUI = 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" })));
+  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.gridLayoutElement = el) }, h("slot", null)), h("aside", null, this.renderSettings(), h("slot", { name: "column-display" }), h("slot", { name: "row-actions" })), h("footer", { part: "footer" }, h("slot", { name: "footer" }))));
   }
   get el() { return this; }
   static get watchers() { return {
-    "baseLayer": ["baseLayerHandler"],
-    "rowHighlighted": ["rowHighlightedHandler"],
     "rowFocused": ["rowFocusedHandler"],
-    "rowsSelected": ["rowsSelectedHandler"],
+    "rowHighlighted": ["rowHighlightedHandler"],
     "rowsMarked": ["rowsMarkedHandler"],
+    "rowsSelected": ["rowsSelectedHandler"],
     "cellSelected": ["cellSelectedHandler"]
   }; }
   static get style() { return chGridCss; }
@@ -2341,7 +2386,6 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "rowsSelected": [32],
     "cellSelected": [32],
     "gridStyle": [32],
-    "baseLayer": [32],
     "getFocusedRow": [64],
     "getHoveredRow": [64],
     "getSelectedRows": [64],
@@ -2350,6 +2394,8 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "selectRow": [64],
     "selectAllRows": [64],
     "selectCell": [64],
+    "markRow": [64],
+    "markAllRows": [64],
     "expandRow": [64],
     "collapseRow": [64],
     "rowEnsureVisible": [64],
@@ -2358,7 +2404,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     "getNextRow": [64],
     "getPreviousCell": [64],
     "getNextCell": [64]
-  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
+  }, [[1, "focus", "focusHandler"], [1, "blur", "blurHandler"], [8, "keydown", "windowKeyDownHandler"], [1, "keydown", "keyDownHandler"], [1, "mousemove", "mouseMoveHandler"], [1, "mouseleave", "mouseLeaveHandler"], [1, "mousedown", "clickHandler"], [1, "mouseup", "mouseUpHandler"], [1, "dblclick", "dblclickHandler"], [1, "columnSelectorClicked", "columnSelectorClickedHandler"], [1, "cellSelectorClicked", "cellSelectorClickedHandler"], [1, "cellRowActionClicked", "cellRowActionClickedHandler"], [0, "columnHiddenChanged", "columnStyleChangedHandler"], [0, "columnOrderChanged", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnStyleChangedHandler"], [0, "columnSizeChanging", "columnStyleChangedHandler"], [0, "columnFreezeChanged", "columnFreezeChangedHandler"], [0, "columnDragStarted", "columnDragStartHandler"], [0, "columnDragging", "columnDraggingHandler"], [0, "columnDragEnded", "columnDragEndHandler"], [0, "rowDragStarted", "rowDragStartHandler"], [0, "rowEnsureVisible", "rowEnsureVisibleHandler"], [0, "cellEnsureVisible", "cellEnsureVisibleHandler"], [0, "settingsShowClicked", "settingsShowClickedHandler"], [0, "settingsCloseClicked", "settingsCloseClickedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;