@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/genexus-ide-ui/{p-94015503.entry.js → p-786e5448.entry.js}

@@ -10,11 +10,26 @@ import { s as g } from "./p-ac964d4c.js";
  * The `ch-grid-row` component represents a grid row.
  */ class u extends HTMLElement {
   parentGrid;
+  static get observedAttributes() {
+    return [ "selected", "marked" ];
+  }
   constructor() {
     super();
   }
   connectedCallback() {
     this.addEventListener("cellCaretClicked", this.cellCaretClickedHandler);
+    if (this.selected || this.marked) {
+      this.grid.syncRowState(this);
+    }
+  }
+  attributeChangedCallback(t, e, i) {
+    if (t === "selected") {
+      this.selected = i !== null ? i !== "false" : false;
+    }
+    if (t === "marked") {
+      this.marked = i !== null ? i !== "false" : false;
+    }
+    this.grid?.syncRowState(this);
   }
   /**
      * Returns the parent ch-grid element of the grid row.
@@ -53,7 +68,9 @@ import { s as g } from "./p-ac964d4c.js";
   set selected(t) {
     const e = this.grid.rowSelectedClass?.split(" ");
     if (t === true) {
-      this.setAttribute("selected", "");
+      if (!this.hasAttribute("selected")) {
+        this.setAttribute("selected", "");
+      }
       if (this.grid.rowSelectedClass) {
         this.classList.add(...e);
       }
@@ -72,7 +89,9 @@ import { s as g } from "./p-ac964d4c.js";
   set marked(t) {
     const e = this.grid.rowMarkedClass?.split(" ");
     if (t === true) {
-      this.setAttribute("marked", "");
+      if (!this.hasAttribute("marked")) {
+        this.setAttribute("marked", "");
+      }
       if (this.grid.rowMarkedClass) {
         this.classList.add(...e);
       }
@@ -319,12 +338,15 @@ if (!customElements.get("ch-grid-rowset")) {
       this.cellType = i;
     }
     if (t === "row-drag") {
+      this.cellType = m.Rich;
       this.rowDrag = i !== null ? i !== "false" : false;
     }
     if (t === "row-selector") {
+      this.cellType = m.Rich;
       this.rowSelector = i !== null ? i !== "false" : false;
     }
     if (t === "row-actions") {
+      this.cellType = m.Rich;
       this.rowActions = i !== null ? i !== "false" : false;
     }
   }
@@ -372,6 +394,18 @@ if (!customElements.get("ch-grid-rowset")) {
       this.removeAttribute("selected");
     }
   }
+  /**
+     * A boolean value indicating whether the cell is focused.
+     */  get focused() {
+    return this.hasAttribute("focused");
+  }
+  set focused(t) {
+    if (t === true) {
+      this.setAttribute("focused", "");
+    } else {
+      this.removeAttribute("focused");
+    }
+  }
   /**
      * A boolean value indicates whether the grid cell is visible.
      */  isVisible() {
@@ -483,9 +517,11 @@ if (!customElements.get("ch-grid-rowset")) {
       if (this.rowSelector) {
         this.selector = this.shadowRoot.querySelector("[part='selector']");
         this.selector.addEventListener("mousedown", (t => t.stopPropagation()));
+        this.selector.addEventListener("touchend", (t => t.stopPropagation()));
         this.selector.addEventListener("click", this.selectorClickHandler.bind(this));
         this.selectorLabel = this.shadowRoot.querySelector("[part='selector-label']");
         this.selectorLabel.addEventListener("mousedown", (t => t.stopPropagation()));
+        this.selectorLabel.addEventListener("touchend", (t => t.stopPropagation()));
         this.selectorLabel.addEventListener("click", this.selectorLabelClickHandler.bind(this));
       }
     }
@@ -506,7 +542,7 @@ if (!customElements.get("ch-grid-cell")) {
   customElements.define("ch-grid-cell", b);
 }
 
-class p {
+class v {
   column;
   columns;
   isRTL;
@@ -658,7 +694,7 @@ class p {
   }
 }
 
-class v {
+class p {
   manager;
   columnsetObserver=new MutationObserver(this.reloadColumns.bind(this));
   columnResizeObserver=new ResizeObserver(this.resizeColumnHandler.bind(this));
@@ -856,61 +892,78 @@ class w {
   selectionStateNone={
     rowFocused: null,
     rowsSelected: [],
+    cellFocused: null,
     cellSelected: null
   };
+  touch;
   selecting;
   selectingRow;
   selectingCell;
   constructor(t) {
     this.manager = t;
   }
-  select(t, e, i, s, r, o) {
-    if (this.manager.grid.rowSelectionMode === "none") {
+  touchStart(t) {
+    this.touch = {
+      clientX: t.touches[0].clientX,
+      clientY: t.touches[0].clientY
+    };
+  }
+  isTouchEndSelection(t) {
+    return Math.abs(this.touch.clientX - t.changedTouches[0].clientX) < 10 && Math.abs(this.touch.clientY - t.changedTouches[0].clientY) < 10 && t.cancelable;
+  }
+  select(t, e, i, s, r, o, n) {
+    const l = this.manager.grid;
+    if (l.keyboardNavigationMode === "none" && l.rowSelectionMode === "none") {
       return this.selectionStateNone;
     }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
+    if (l.rowSelectionMode === "none") {
       s = false;
+    }
+    if (l.rowSelectionMode !== "multiple") {
       r = false;
+      o = false;
     }
-    let n = t.rowFocused;
-    let l = t.rowsSelected;
-    let a = t.cellSelected;
-    n = e;
-    if (r) {
-      const t = this.manager.getRowsRange(this.rangeStart ?? e, e);
+    let {rowFocused: a, rowsSelected: c, cellFocused: h, cellSelected: d} = t;
+    a = e;
+    h = i;
+    if (o) {
+      const s = this.manager.getRowsRange(this.rangeStart ?? e, e);
       if (this.rangeValue) {
-        if (s) {
-          l = Array.from(new Set(l.concat(t)));
+        if (r) {
+          c = Array.from(new Set(c.concat(s)));
         } else {
-          l = l.length === t.length ? l : t;
+          c = this.preserveInstanceIfSame(s, t.rowsSelected);
         }
-        a = i || e.getCell(a?.column || this.manager.getFirstColumn());
+        d = i || e.getCell(d?.column || this.manager.getFirstColumn());
       } else {
-        l = l.filter((e => !t.includes(e)));
-        a = null;
+        c = c.filter((t => !s.includes(t)));
+        d = null;
       }
-    } else if (s) {
+    } else if (r) {
       this.rangeStart = e;
       this.rangeValue = !e.selected;
-      if (l.includes(e)) {
-        l = l.filter((t => t !== e));
-        a = null;
+      if (c.includes(e)) {
+        c = c.filter((t => t !== e));
+        d = t.cellSelected?.row === e ? null : d;
       } else {
-        l = [ ...l, e ];
-        a = i || e.getCell(a?.column || this.manager.getFirstColumn());
+        c = [ ...c, e ];
+        d = i || e.getCell(d?.column || this.manager.getFirstColumn());
       }
     } else {
       this.rangeStart = e;
       this.rangeValue = true;
-      if (!(l.length === 1 && l[0] === e) && !(o && l.includes(e))) {
-        l = [ e ];
+      if (s) {
+        if (!(n && t.rowsSelected.includes(e))) {
+          c = this.preserveInstanceIfSame([ e ], t.rowsSelected);
+        }
+        d = i || e.getCell(d?.column || this.manager.getFirstColumn());
       }
-      a = i || e.getCell(a?.column || this.manager.getFirstColumn());
     }
     return {
-      rowFocused: n,
-      rowsSelected: l,
-      cellSelected: a
+      rowFocused: a,
+      rowsSelected: c,
+      cellFocused: h,
+      cellSelected: d
     };
   }
   selectAll(t, e = true) {
@@ -920,20 +973,22 @@ class w {
     const i = this.manager.getRows();
     let s = t.rowFocused;
     let r = t.rowsSelected;
-    let o = t.cellSelected;
+    let o = t.cellFocused;
+    let n = t.cellSelected;
+    s ??= this.manager.getFirstRow();
+    o ??= s.getCell(t.cellFocused?.column || this.manager.getFirstColumn());
     if (e) {
-      s ??= this.manager.getFirstRow();
       r = i;
-      o = s.getCell(t.cellSelected?.column || this.manager.getFirstColumn());
+      n = o;
     } else {
-      s ??= this.manager.getFirstRow();
       r = [];
-      o = null;
+      n = null;
     }
     return {
       rowFocused: s,
       rowsSelected: r,
-      cellSelected: o
+      cellFocused: o,
+      cellSelected: n
     };
   }
   selectSet(t, e, i, s = true) {
@@ -946,252 +1001,87 @@ class w {
     }
     let o = t.rowFocused;
     let n = t.rowsSelected;
-    let l = t.cellSelected;
+    let l = t.cellFocused;
+    let a = t.cellSelected;
     o = e;
+    l = i;
     if (s) {
       if (r) {
         n = n.includes(e) ? n : [ ...n, e ];
       } else {
         n = n.includes(e) ? n : [ e ];
       }
-      l = i;
+      a = i;
     } else {
       n = !n.includes(e) ? n : n.filter((t => t !== e));
-      l = null;
+      a = null;
     }
     return {
       rowFocused: o,
       rowsSelected: n,
-      cellSelected: l
+      cellFocused: l,
+      cellSelected: a
     };
   }
-  selectFirstRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
-    }
-    const i = this.manager.getFirstRow();
-    let s = t.rowFocused;
-    let r = t.rowsSelected;
-    let o = t.cellSelected;
-    if (i) {
-      if (e) {
-        const t = this.manager.getRowsRange(s ?? i, i);
-        r = Array.from(new Set(r.concat(t)));
-      } else {
-        r = [ i ];
-      }
-      s = i;
-      o = i.getCell(t.cellSelected?.column || this.manager.getFirstColumn());
+  moveFirstRow(t, e, i, s) {
+    const r = this.manager.getFirstRow();
+    if (r) {
+      return this.select(t, r, r.getCell(t.cellFocused.column), e, s, i, false);
     }
-    return {
-      rowFocused: s,
-      rowsSelected: r,
-      cellSelected: o
-    };
+    return t;
   }
-  selectPreviousRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
-    }
-    const i = this.manager.getPreviousRow(t.rowFocused);
-    let s = t.rowFocused;
-    let r = t.rowsSelected;
-    let o = t.cellSelected;
-    if (i) {
-      if (e) {
-        const t = this.sortRowsSelected(r);
-        const e = this.isContiguousSelection(t);
-        if (e && s === t[0]) {
-          r = [ ...r, i ];
-        } else if (e && s === t[t.length - 1]) {
-          r = r.slice(0, -1);
-        } else {
-          r = [ s, i ];
-        }
-      } else {
-        r = [ i ];
-      }
-      s = i;
-      o = i.getCell(o?.column || this.manager.getFirstColumn());
+  movePreviousRow(t, e, i, s) {
+    const r = this.manager.getPreviousRow(t.rowFocused);
+    if (r) {
+      return this.select(t, r, r.getCell(t.cellFocused.column), e, s, i, false);
     }
-    return {
-      rowFocused: s,
-      rowsSelected: r,
-      cellSelected: o
-    };
+    return t;
   }
-  selectNextRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
-    }
-    const i = this.manager.getNextRow(t.rowFocused);
-    let s = t.rowFocused;
-    let r = t.rowsSelected;
-    let o = t.cellSelected;
-    if (i) {
-      if (e) {
-        const t = this.sortRowsSelected(r);
-        const e = this.isContiguousSelection(t);
-        if (e && s === t[t.length - 1]) {
-          r = [ ...r, i ];
-        } else if (e && s === t[0]) {
-          r = r.slice(1);
-        } else {
-          r = [ s, i ];
-        }
-      } else {
-        r = [ i ];
-      }
-      s = i;
-      o = i.getCell(o?.column || this.manager.getFirstColumn());
+  moveNextRow(t, e, i, s) {
+    const r = this.manager.getNextRow(t.rowFocused);
+    if (r) {
+      return this.select(t, r, r.getCell(t.cellFocused.column), e, s, i, false);
     }
-    return {
-      rowFocused: s,
-      rowsSelected: r,
-      cellSelected: o
-    };
+    return t;
   }
-  selectLastRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
-    }
-    const i = this.manager.getLastRow();
-    let s = t.rowFocused;
-    let r = t.rowsSelected;
-    let o = t.cellSelected;
-    if (i) {
-      if (e) {
-        const t = this.manager.getRowsRange(s ?? i, i);
-        r = Array.from(new Set(r.concat(t)));
-      } else {
-        r = [ i ];
-      }
-      s = i;
-      o = i.getCell(t.cellSelected?.column || this.manager.getFirstColumn());
+  moveLastRow(t, e, i, s) {
+    const r = this.manager.getLastRow();
+    if (r) {
+      return this.select(t, r, r.getCell(t.cellFocused.column), e, s, i, false);
     }
-    return {
-      rowFocused: s,
-      rowsSelected: r,
-      cellSelected: o
-    };
+    return t;
   }
-  selectPreviousPageRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
+  movePreviousPageRow(t, e, i, s) {
+    const r = this.manager.getRows();
+    const o = this.manager.getRowsPerPage();
+    const n = r[Math.max(r.indexOf(t.rowFocused) - o, 0)];
+    if (n) {
+      return this.select(t, n, n.getCell(t.cellFocused.column), e, s, i, false);
     }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
-    }
-    const i = this.manager.getRows();
-    const s = this.manager.getRowsPerPage();
-    let r = t.rowFocused;
-    let o = t.rowsSelected;
-    let n = t.cellSelected;
-    const l = i[Math.max(i.indexOf(r) - s, 0)];
-    if (l) {
-      if (e) {
-        const t = this.manager.getRowsRange(r ?? l, l);
-        o = Array.from(new Set(o.concat(t)));
-      } else {
-        o = o.length === 1 && o[0] === l ? o : [ l ];
-      }
-      r = l;
-      n = l.getCell(t.cellSelected?.column || this.manager.getFirstColumn());
-    }
-    return {
-      rowFocused: r,
-      rowsSelected: o,
-      cellSelected: n
-    };
+    return t;
   }
-  selectNextPageRow(t, e) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    if (this.manager.grid.rowSelectionMode !== "multiple") {
-      e = false;
+  moveNextPageRow(t, e, i, s) {
+    const r = this.manager.getRows();
+    const o = this.manager.getRowsPerPage();
+    const n = r[Math.min(r.indexOf(t.rowFocused) + o, r.length - 1)];
+    if (n) {
+      return this.select(t, n, n.getCell(t.cellFocused.column), e, s, i, false);
     }
-    const i = this.manager.getRows();
-    const s = this.manager.getRowsPerPage();
-    let r = t.rowFocused;
-    let o = t.rowsSelected;
-    let n = t.cellSelected;
-    const l = i[Math.min(i.indexOf(r) + s, i.length - 1)];
-    if (l) {
-      if (e) {
-        const t = this.manager.getRowsRange(r ?? l, l);
-        o = Array.from(new Set(o.concat(t)));
-      } else {
-        o = o.length === 1 && o[0] === l ? o : [ l ];
-      }
-      r = l;
-      n = l.getCell(t.cellSelected?.column || this.manager.getFirstColumn());
-    }
-    return {
-      rowFocused: r,
-      rowsSelected: o,
-      cellSelected: n
-    };
+    return t;
   }
-  selectPreviousCell(t) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    const e = t.rowFocused;
-    let i = t.rowsSelected;
-    let s = t.cellSelected;
+  movePreviousCell(t, e, i) {
+    const s = this.manager.getPreviousCell(t.cellFocused);
     if (s) {
-      const t = this.manager.getPreviousCell(s);
-      if (t) {
-        s = t;
-      }
-    } else {
-      if (!i.includes(e)) {
-        i = [ ...i, e ];
-      }
-      s ||= e.getCell(this.manager.getFirstColumn());
+      return this.select(t, t.rowFocused, s, e, false, i, false);
     }
-    return {
-      rowFocused: e,
-      rowsSelected: i,
-      cellSelected: s
-    };
+    return t;
   }
-  selectNextCell(t) {
-    if (this.manager.grid.rowSelectionMode === "none") {
-      return this.selectionStateNone;
-    }
-    const e = t.rowFocused;
-    let i = t.rowsSelected;
-    let s = t.cellSelected;
+  moveNextCell(t, e, i) {
+    const s = this.manager.getNextCell(t.cellFocused);
     if (s) {
-      const t = this.manager.getNextCell(s);
-      if (t) {
-        s = t;
-      }
-    } else {
-      if (!i.includes(e)) {
-        i = [ ...i, e ];
-      }
-      s ||= e.getCell(this.manager.getFirstColumn());
+      return this.select(t, t.rowFocused, s, e, false, i, false);
     }
-    return {
-      rowFocused: e,
-      rowsSelected: i,
-      cellSelected: s
-    };
+    return t;
   }
   markRow(t, e, i, s) {
     if (t) {
@@ -1214,6 +1104,13 @@ class w {
     }
     return s;
   }
+  markRows(t, e, i) {
+    const s = i.includes(t) ? i : [ t ];
+    if (s.some((t => !t.marked))) {
+      return Array.from(new Set(e.concat(s)));
+    }
+    return e.filter((t => !s.includes(t)));
+  }
   markAllRows(t = true) {
     if (t) {
       return this.manager.getRows();
@@ -1234,44 +1131,25 @@ class w {
         const e = t.children[i];
         e.setSelectorChecked(true);
       }));
-      if (t.length === 0) {
-        s.richRowSelectorState = "";
-      } else if (t.length === this.manager.getRows().length) {
-        s.richRowSelectorState = "checked";
-      } else {
-        s.richRowSelectorState = "indeterminate";
-      }
+      this.syncColumnSelector(t.length, s);
     }
   }
-  sortRowsSelected(t) {
-    const e = Array.from(this.manager.grid.querySelectorAll("ch-grid-row"));
-    return t.sort(((t, i) => {
-      const s = e.indexOf(t);
-      const r = e.indexOf(i);
-      if (s < r) {
-        return -1;
-      }
-      if (s > r) {
-        return 1;
-      }
-      return 0;
-    }));
-  }
-  isContiguousSelection(t) {
-    const e = Array.from(this.manager.grid.querySelectorAll("ch-grid-row")).filter((t => t.isVisible()));
-    if (t.length === 0) {
-      return false;
-    }
-    if (t.length === 1) {
-      return true;
+  syncColumnSelector(t, e) {
+    e ??= this.manager.columns.getColumnSelector();
+    if (t === 0) {
+      e.richRowSelectorState = "";
+    } else if (t === this.manager.getRows().length) {
+      e.richRowSelectorState = "checked";
+    } else {
+      e.richRowSelectorState = "indeterminate";
     }
-    const i = e.indexOf(t[0]);
-    const s = e.indexOf(t[t.length - 1]);
-    return s - i + 1 === t.length;
+  }
+  preserveInstanceIfSame(t, e) {
+    return t.length === e.length && t.every((t => e.includes(t))) ? e : t;
   }
 }
 
-class x {
+class k {
   manager;
   row;
   rowIndex;
@@ -1369,7 +1247,7 @@ class x {
   }
 }
 
-class k {
+class x {
   manager;
   showOnRowHover;
   showOnRowActions;
@@ -1500,9 +1378,9 @@ class S {
     this.styleSheet.insertRule(".main {}", z.COLUMNS_WIDTH);
     this.grid.shadowRoot.adoptedStyleSheets.push(this.styleSheet);
     n(this.grid.shadowRoot.adoptedStyleSheets);
-    this.columns = new v(this);
+    this.columns = new p(this);
     this.selection = new w(this);
-    this.rowActions = new k(this);
+    this.rowActions = new x(this);
   }
   get gridLayout() {
     return this.gridLayoutElement;
@@ -1594,9 +1472,6 @@ class S {
     }
     return e;
   }
-  getRowsSelected() {
-    return Array.from(this.grid.querySelectorAll(`ch-grid-row[selected]`));
-  }
   getRowsRange(t, e) {
     const i = this.getRows();
     const s = i.indexOf(t);
@@ -1625,7 +1500,7 @@ class S {
     return t.composedPath().find((t => t.tagName === "CH-GRID-CELL"));
   }
   columnDragStart(t) {
-    this.columnDragManager = new p(t, this.columns.getColumns(), this.isRTLDirection());
+    this.columnDragManager = new v(t, this.columns.getColumns(), this.isRTLDirection());
   }
   columnDragging(t) {
     return this.columnDragManager.dragging(t);
@@ -1645,7 +1520,7 @@ class S {
     this.columnResizeManager = null;
   }
   rowDragStart(t) {
-    this.rowDragManager = new x(this);
+    this.rowDragManager = new k(this);
     this.rowDragManager.dragStart(t);
   }
   getGridStyle() {
@@ -1821,12 +1696,14 @@ const _ = class {
     this.rowEnterPressed = e(this, "rowEnterPressed", 7);
     this.rowContextMenu = e(this, "rowContextMenu", 7);
     this.rowFocused = undefined;
+    this.cellFocused = undefined;
     this.rowHighlighted = undefined;
     this.rowsMarked = [];
     this.rowsSelected = [];
     this.cellSelected = undefined;
     this.gridStyle = undefined;
     this.rowSelectionMode = "single";
+    this.keyboardNavigationMode = "select";
     this.rowHighlightEnabled = "auto";
     this.rowSelectedClass = undefined;
     this.rowHighlightedClass = undefined;
@@ -1847,6 +1724,14 @@ const _ = class {
       e.focused = false;
     }
   }
+  cellFocusedHandler(t, e) {
+    if (t) {
+      t.focused = true;
+    }
+    if (e) {
+      e.focused = false;
+    }
+  }
   rowHighlightedHandler(t, e) {
     var i, s;
     // highlight
@@ -1865,12 +1750,7 @@ const _ = class {
   }
   rowsMarkedHandler(t, e) {
     this.manager.selection.syncRowSelector(t, e, "mark");
-    this.rowMarkingChanged.emit({
-      rowsId: t.map((t => t.rowId)),
-      addedRowsId: t.filter((t => !e.includes(t))).map((t => t.rowId)),
-      removedRowsId: e.filter((e => !t.includes(e))).map((t => t.rowId)),
-      unalteredRowsId: t.filter((t => e.includes(t))).map((t => t.rowId))
-    });
+    this.rowMarkingChanged.emit(this.getChangedEventDetail(t, e));
   }
   rowsSelectedHandler(t, e) {
     if (e) {
@@ -1880,9 +1760,7 @@ const _ = class {
       t.forEach((t => t.selected = true));
     }
     this.manager.selection.syncRowSelector(t, e, "select");
-    this.selectionChanged.emit({
-      rowsId: t.map((t => t.rowId))
-    });
+    this.selectionChanged.emit(this.getChangedEventDetail(t, e));
   }
   cellSelectedHandler(t, e) {
     if (t) {
@@ -1900,7 +1778,6 @@ const _ = class {
   componentWillLoad() {
     this.manager = new S(this.el);
     this.gridStyle = this.manager.getGridStyle();
-    this.rowsSelected = this.manager.getRowsSelected();
   }
   componentDidLoad() {
     this.manager.componentDidLoad(this.gridLayoutElement);
@@ -1911,14 +1788,18 @@ const _ = class {
     }
   }
   focusHandler() {
-    if (this.rowSelectionMode !== "none") {
-      this.rowFocused = this.rowsSelected[0] || this.manager.getFirstRow();
+    var t, e, i;
+    if (this.keyboardNavigationMode !== "none") {
+      this.rowFocused || (this.rowFocused = (t = this.rowsSelected[0]) !== null && t !== void 0 ? t : this.manager.getFirstRow());
+      this.cellFocused = (e = this.rowFocused) === null || e === void 0 ? void 0 : e.getCell(((i = this.cellSelected) === null || i === void 0 ? void 0 : i.column) || this.manager.getFirstColumn());
+      this.selectByKeyboardEvent(false, false);
     }
   }
   blurHandler() {
     this.rowFocused = null;
+    this.cellFocused = null;
   }
-  cellFocusedHandler(t) {
+  cellFocusedEventHandler(t) {
     const e = t.target;
     if (this.rowSelectionMode !== "none" && !e.selected) {
       this.setCellSelected(e);
@@ -1930,10 +1811,12 @@ const _ = class {
     }
   }
   keyDownHandler(t) {
-    if (l()[0] === this.el) {
+    if (l()[0] === this.el && this.keyboardNavigationMode !== "none") {
+      const e = t.shiftKey;
+      const i = a(t);
       switch (t.key) {
        case " ":
-        this.toggleRowsMarked();
+        this.spacePressedEvent(a(t), t.shiftKey);
         break;
 
        case "+":
@@ -1945,35 +1828,35 @@ const _ = class {
         break;
 
        case "Home":
-        this.selectByKeyboardEvent(this.manager.selection.selectFirstRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.moveFirstRow, e, i);
         break;
 
        case "End":
-        this.selectByKeyboardEvent(this.manager.selection.selectLastRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.moveLastRow, e, i);
         break;
 
        case "PageUp":
-        this.selectByKeyboardEvent(this.manager.selection.selectPreviousPageRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.movePreviousPageRow, e, i);
         break;
 
        case "PageDown":
-        this.selectByKeyboardEvent(this.manager.selection.selectNextPageRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.moveNextPageRow, e, i);
         break;
 
        case "ArrowUp":
-        this.selectByKeyboardEvent(this.manager.selection.selectPreviousRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.movePreviousRow, e, i);
         break;
 
        case "ArrowDown":
-        this.selectByKeyboardEvent(this.manager.selection.selectNextRow.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.moveNextRow, e, i);
         break;
 
        case "ArrowLeft":
-        this.selectByKeyboardEvent(this.manager.selection.selectPreviousCell.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.movePreviousCell, e, i);
         break;
 
        case "ArrowRight":
-        this.selectByKeyboardEvent(this.manager.selection.selectNextCell.bind(this.manager.selection), t.shiftKey);
+        this.moveByKeyboardEvent(this.manager.selection.moveNextCell, e, i);
         break;
 
        case "Enter":
@@ -2011,17 +1894,15 @@ const _ = class {
     const e = this.manager.getRowEventTarget(t);
     const i = this.manager.getCellEventTarget(t);
     if (e) {
-      this.rowClicked.emit({
-        rowId: e.rowId,
-        cellId: i === null || i === void 0 ? void 0 : i.cellId,
-        columnId: i === null || i === void 0 ? void 0 : i.column.columnId
-      });
       this.manager.selection.selecting = true;
       this.selectByPointerEvent(e, i, a(t), t.shiftKey, t.button === c.RIGHT);
     }
   }
   mouseUpHandler() {
-    this.stopSelecting();
+    if (this.manager.selection.selecting) {
+      this.stopSelecting();
+      this.emitRowClicked(this.rowFocused, this.cellFocused);
+    }
   }
   dblclickHandler(t) {
     const e = this.manager.getRowEventTarget(t);
@@ -2034,6 +1915,23 @@ const _ = class {
       });
     }
   }
+  touchstartHandler(t) {
+    this.manager.selection.touchStart(t);
+  }
+  touchendHandler(t) {
+    if (t.cancelable) {
+      t.preventDefault();
+    }
+    if (this.manager.selection.isTouchEndSelection(t)) {
+      const e = this.manager.columns.getColumnSelector();
+      const i = this.manager.getRowEventTarget(t);
+      const s = this.manager.getCellEventTarget(t);
+      if (i) {
+        this.selectByPointerEvent(i, s, (e === null || e === void 0 ? void 0 : e.richRowSelectorMode) !== "select", false, false);
+        this.emitRowClicked(i, s);
+      }
+    }
+  }
   contextmenuHandler(t) {
     var e, i;
     let s;
@@ -2145,6 +2043,15 @@ const _ = class {
      */  async getMarkedRows() {
     return this.rowsMarked.map((t => t.rowId));
   }
+  /**
+     * Retrieves information about the currently focused cell.
+     */  async getFocusedCell() {
+    return {
+      cellId: this.cellFocused ? this.cellFocused.cellId : null,
+      rowId: this.cellFocused ? this.cellFocused.row.rowId : null,
+      columnId: this.cellFocused ? this.cellFocused.column.columnId : null
+    };
+  }
   /**
      * Retrieves information about the currently selected cell.
      */  async getSelectedCell() {
@@ -2161,14 +2068,16 @@ const _ = class {
      */  async selectRow(t, e = true) {
     const i = this.manager.getRow(t);
     if (i) {
-      const {rowFocused: t, rowsSelected: s, cellSelected: r} = this.manager.selection.selectSet({
+      const {rowFocused: t, rowsSelected: s, cellFocused: r, cellSelected: o} = this.manager.selection.selectSet({
         rowFocused: this.rowFocused,
         rowsSelected: this.rowsSelected,
+        cellFocused: this.cellFocused,
         cellSelected: this.cellSelected
       }, i, null, e);
       this.rowFocused = t;
       this.rowsSelected = s;
-      this.cellSelected = r;
+      this.cellFocused = r;
+      this.cellSelected = o;
       t === null || t === void 0 ? void 0 : t.ensureVisible();
     }
   }
@@ -2280,72 +2189,142 @@ const _ = class {
       columnId: t ? t.column.columnId : null
     };
   }
+  /**
+     * Synchronizes the state of a row in the grid.
+     */  async syncRowState(t) {
+    const e = t;
+    const i = this.manager.columns.getColumnSelector();
+    if (this.rowSelectionMode !== "none") {
+      this.syncRowStateSelected(e);
+    }
+    if ((i === null || i === void 0 ? void 0 : i.richRowSelectorMode) === "mark") {
+      this.syncRowStateMarked(e);
+    }
+    if (i) {
+      this.syncRowStateSelector(e, i);
+      if (i.richRowSelectorMode === "select") {
+        this.manager.selection.syncColumnSelector(this.rowsSelected.length, i);
+      } else if (i.richRowSelectorMode === "mark") {
+        this.manager.selection.syncColumnSelector(this.rowsMarked.length, i);
+      }
+    }
+  }
+  syncRowStateSelected(t) {
+    if (t.selected && this.rowSelectionMode === "single") {
+      this.rowsSelected[0] = t;
+    }
+    if (t.selected && this.rowSelectionMode === "multiple" && !this.rowsSelected.includes(t)) {
+      this.rowsSelected.push(t);
+    }
+    if (!t.selected) {
+      const e = this.rowsSelected.indexOf(t);
+      if (e !== -1) {
+        this.rowsSelected.splice(e, 1);
+      }
+    }
+  }
+  syncRowStateMarked(t) {
+    if (t.marked && !this.rowsMarked.includes(t)) {
+      this.rowsMarked.push(t);
+    }
+    if (!t.marked) {
+      const e = this.rowsMarked.indexOf(t);
+      if (e !== -1) {
+        this.rowsMarked.splice(e, 1);
+      }
+    }
+  }
+  syncRowStateSelector(t, e) {
+    const i = t.getCell(e);
+    const s = e.richRowSelectorMode === "select" && t.selected || e.richRowSelectorMode === "mark" && t.marked;
+    i.setSelectorChecked(s);
+  }
+  getChangedEventDetail(t, e) {
+    return {
+      rowsId: t.map((t => t.rowId)),
+      addedRowsId: t.filter((t => !e.includes(t))).map((t => t.rowId)),
+      removedRowsId: e.filter((e => !t.includes(e))).map((t => t.rowId)),
+      unalteredRowsId: t.filter((t => e.includes(t))).map((t => t.rowId))
+    };
+  }
   enterPressedHandler() {
-    var t;
     if (this.rowFocused) {
-      const e = ((t = this.cellSelected) === null || t === void 0 ? void 0 : t.row) === this.rowFocused ? this.cellSelected : null;
       this.rowEnterPressed.emit({
         rowId: this.rowFocused.rowId,
-        cellId: e ? e.cellId : null,
-        columnId: e ? e.column.columnId : null
+        cellId: this.cellFocused ? this.cellFocused.cellId : null,
+        columnId: this.cellFocused ? this.cellFocused.column.columnId : null
       });
     }
   }
-  toggleRowsMarked() {
+  spacePressedEvent(t, e) {
+    if (this.keyboardNavigationMode === "focus") {
+      this.selectByKeyboardEvent(t, e);
+    } else if (this.keyboardNavigationMode === "select") {
+      this.markByKeyboardEvent();
+    }
+    this.emitRowClicked(this.rowFocused, this.cellFocused);
+  }
+  markByKeyboardEvent() {
     const t = this.manager.columns.getColumnSelector();
     if ((t === null || t === void 0 ? void 0 : t.richRowSelectorMode) === "mark") {
-      const t = !this.rowFocused.marked;
-      if (t) {
-        this.rowsMarked = Array.from(new Set(this.rowsMarked.concat(this.rowsSelected)));
-      } else {
-        this.rowsMarked = this.rowsMarked.filter((t => !this.rowsSelected.includes(t)));
-      }
+      this.rowsMarked = this.manager.selection.markRows(this.rowFocused, this.rowsMarked, this.rowsSelected);
     }
   }
-  selectByPointerEvent(t, e, i, s, r) {
-    const {rowFocused: o, rowsSelected: n, cellSelected: l} = this.manager.selection.select({
+  selectByKeyboardEvent(t, e) {
+    var i;
+    const {rowFocused: s, rowsSelected: r, cellFocused: o, cellSelected: n} = this.manager.selection.select({
       rowFocused: this.rowFocused,
       rowsSelected: this.rowsSelected,
+      cellFocused: this.cellFocused,
       cellSelected: this.cellSelected
-    }, t, e, i, s, r);
-    this.rowFocused = o;
-    this.rowsSelected = n;
-    this.cellSelected = l;
-    if (l) {
-      l.ensureVisible();
-    } else {
-      o === null || o === void 0 ? void 0 : o.ensureVisible();
-    }
+    }, this.rowFocused, this.cellFocused, true, t, e, false);
+    this.rowFocused = s;
+    this.rowsSelected = r;
+    this.cellFocused = o;
+    this.cellSelected = n;
+    (i = o || s) === null || i === void 0 ? void 0 : i.ensureVisible();
   }
-  selectByKeyboardEvent(t, e) {
-    const {rowFocused: i, rowsSelected: s, cellSelected: r} = t({
+  selectByPointerEvent(t, e, i, s, r) {
+    var o;
+    const {rowFocused: n, rowsSelected: l, cellFocused: a, cellSelected: c} = this.manager.selection.select({
       rowFocused: this.rowFocused,
       rowsSelected: this.rowsSelected,
+      cellFocused: this.cellFocused,
       cellSelected: this.cellSelected
-    }, e);
-    this.rowFocused = i;
-    this.rowsSelected = s;
-    this.cellSelected = r;
-    if (r) {
-      r.ensureVisible();
-    } else {
-      i === null || i === void 0 ? void 0 : i.ensureVisible();
-    }
+    }, t, e, true, i, s, r);
+    this.rowFocused = n;
+    this.rowsSelected = l;
+    this.cellFocused = a;
+    this.cellSelected = c;
+    (o = a || n) === null || o === void 0 ? void 0 : o.ensureVisible();
+  }
+  moveByKeyboardEvent(t, e, i) {
+    var s;
+    const {rowFocused: r, rowsSelected: o, cellFocused: n, cellSelected: l} = t.call(this.manager.selection, {
+      rowFocused: this.rowFocused,
+      rowsSelected: this.rowsSelected,
+      cellFocused: this.cellFocused,
+      cellSelected: this.cellSelected
+    }, this.rowSelectionMode !== "none" && this.keyboardNavigationMode === "select", this.rowSelectionMode === "multiple" ? e : false, this.rowSelectionMode === "multiple" ? e && i : false);
+    this.rowFocused = r;
+    this.rowsSelected = o;
+    this.cellFocused = n;
+    this.cellSelected = l;
+    (s = n || r) === null || s === void 0 ? void 0 : s.ensureVisible();
   }
   selectAll(t = true) {
-    const {rowFocused: e, rowsSelected: i, cellSelected: s} = this.manager.selection.selectAll({
+    var e;
+    const {rowFocused: i, rowsSelected: s, cellFocused: r, cellSelected: o} = this.manager.selection.selectAll({
       rowFocused: this.rowFocused,
       rowsSelected: this.rowsSelected,
+      cellFocused: this.cellFocused,
       cellSelected: this.cellSelected
     }, t);
-    this.rowFocused = e;
-    this.rowsSelected = i;
-    this.cellSelected = s;
-    if (s) {
-      s.ensureVisible();
-    } else {
-      e === null || e === void 0 ? void 0 : e.ensureVisible();
-    }
+    this.rowFocused = i;
+    this.rowsSelected = s;
+    this.cellFocused = r;
+    this.cellSelected = o;
+    (e = r || i) === null || e === void 0 ? void 0 : e.ensureVisible();
   }
   setRowCollapsed(t, e) {
     if (t && e) {
@@ -2357,15 +2336,25 @@ const _ = class {
     }
   }
   setCellSelected(t, e = true) {
-    const {rowFocused: i, rowsSelected: s, cellSelected: r} = this.manager.selection.selectSet({
+    var i;
+    const {rowFocused: s, rowsSelected: r, cellFocused: o, cellSelected: n} = this.manager.selection.selectSet({
       rowFocused: this.rowFocused,
       rowsSelected: this.rowsSelected,
+      cellFocused: this.cellFocused,
       cellSelected: this.cellSelected
     }, t.row, t, e);
-    this.rowFocused = i;
-    this.rowsSelected = s;
-    this.cellSelected = r;
-    i === null || i === void 0 ? void 0 : i.ensureVisible();
+    this.rowFocused = s;
+    this.rowsSelected = r;
+    this.cellFocused = o;
+    this.cellSelected = n;
+    (i = o || s) === null || i === void 0 ? void 0 : i.ensureVisible();
+  }
+  emitRowClicked(t, e) {
+    this.rowClicked.emit({
+      rowId: t.rowId,
+      cellId: e === null || e === void 0 ? void 0 : e.cellId,
+      columnId: e === null || e === void 0 ? void 0 : e.column.columnId
+    });
   }
   stopSelecting() {
     this.manager.selection.selecting = false;
@@ -2387,7 +2376,7 @@ const _ = class {
   }
   render() {
     return s(r, {
-      tabindex: this.rowSelectionMode !== "none" ? "0" : false
+      tabindex: this.keyboardNavigationMode !== "none" ? "0" : false
     }, s("header", {
       part: "header"
     }, s("slot", {
@@ -2410,6 +2399,7 @@ const _ = class {
   static get watchers() {
     return {
       rowFocused: [ "rowFocusedHandler" ],
+      cellFocused: [ "cellFocusedHandler" ],
       rowHighlighted: [ "rowHighlightedHandler" ],
       rowsMarked: [ "rowsMarkedHandler" ],
       rowsSelected: [ "rowsSelectedHandler" ],
@@ -2438,6 +2428,9 @@ const H = class {
       });
       t.stopPropagation();
     };
+    this.selectorTouchEndHandler = t => {
+      t.stopPropagation();
+    };
     t(this, i);
     this.columnHiddenChanged = e(this, "columnHiddenChanged", 7);
     this.columnSizeChanging = e(this, "columnSizeChanging", 7);
@@ -2599,6 +2592,7 @@ const H = class {
       type: "checkbox",
       part: [ "selector", this.richRowSelectorState ].filter((t => t !== "")).join(" "),
       onClick: this.selectorClickHandler,
+      onTouchEnd: this.selectorTouchEndHandler,
       checked: this.richRowSelectorState === "checked",
       indeterminate: this.richRowSelectorState === "indeterminate"
     })));
@@ -2741,9 +2735,9 @@ const $ = class {
 
 $.style = I;
 
-const D = ":host{display:contents}";
+const F = ":host{display:contents}";
 
-const E = class {
+const D = class {
   constructor(e) {
     t(this, e);
     this.column = undefined;
@@ -2773,11 +2767,11 @@ const E = class {
   }
 };
 
-E.style = D;
+D.style = F;
 
-const F = "@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  ch-grid-row[collapsed] > ch-grid-rowset {\n    display: none;\n  }\n  ch-grid-row:is([leaf=false], :has(> ch-grid-rowset)) > ch-grid-cell::part(caret) {\n    visibility: visible;\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  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  ch-grid-cell[selected] {\n    --ch-grid-cell-z-index-active: var(--ch-grid-cell-active-layer);\n  }\n  ch-grid-cell,\n  ch-grid-row[selected] > ch-grid-cell,\n  ch-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  ch-grid-cell:before {\n    margin-inline-start: calc(var(--indent) * var(--level));\n  }\n  ch-grid-cell::part(indent) {\n    width: calc(var(--indent) * var(--level));\n  }\n  ch-grid-cell::part(caret) {\n    visibility: hidden;\n  }\n}";
+const E = "@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  ch-grid-row[collapsed] > ch-grid-rowset {\n    display: none;\n  }\n  ch-grid-row:is([leaf=false], :has(> ch-grid-rowset)) > ch-grid-cell::part(caret) {\n    visibility: visible;\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  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  ch-grid-cell[selected] {\n    --ch-grid-cell-z-index-active: var(--ch-grid-cell-active-layer);\n  }\n  ch-grid-cell,\n  ch-grid-row[selected] > ch-grid-cell,\n  ch-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  ch-grid-cell:before {\n    margin-inline-start: calc(var(--indent) * var(--level));\n  }\n  ch-grid-cell::part(indent) {\n    width: calc(var(--indent) * var(--level));\n  }\n  ch-grid-cell::part(caret) {\n    visibility: hidden;\n  }\n}";
 
-const A = class {
+const M = class {
   constructor(e) {
     t(this, e);
   }
@@ -2794,9 +2788,9 @@ const A = class {
   }
 };
 
-A.style = F;
+M.style = E;
 
-const M = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
+const A = ":host{display:contents;--ch-window-mask-z-index:var(--ch-grid-settings-layer)}";
 
 const L = class {
   constructor(i) {
@@ -2825,7 +2819,7 @@ const L = class {
   }
 };
 
-L.style = M;
+L.style = A;
 
 const O = ":host{display:flex;flex-direction:column}ul{display:contents;list-style-type:none}";
 
@@ -2905,5 +2899,5 @@ const T = class {
 
 T.style = P;
 
-export { _ as ch_grid, H as ch_grid_column, $ as ch_grid_column_resize, E as ch_grid_column_settings, A as ch_grid_columnset, L as ch_grid_settings, U as ch_grid_settings_columns, T as gxg_grid };
-//# sourceMappingURL=p-94015503.entry.js.map
+export { _ as ch_grid, H as ch_grid_column, $ as ch_grid_column_resize, D as ch_grid_column_settings, M as ch_grid_columnset, L as ch_grid_settings, U as ch_grid_settings_columns, T as gxg_grid };
+//# sourceMappingURL=p-786e5448.entry.js.map