@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/cjs/ch-grid_8.cjs.entry.js

@@ -12,11 +12,26 @@ const store = require('./store-ea3722c0.js');
  */
 class HTMLChGridRowElement 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(name, _oldValue, value) {
+        if (name === "selected") {
+            this.selected = value !== null ? value !== "false" : false;
+        }
+        if (name === "marked") {
+            this.marked = value !== null ? value !== "false" : false;
+        }
+        this.grid?.syncRowState(this);
     }
     /**
      * Returns the parent ch-grid element of the grid row.
@@ -60,7 +75,9 @@ class HTMLChGridRowElement extends HTMLElement {
     set selected(value) {
         const selectedClasses = this.grid.rowSelectedClass?.split(" ");
         if (value === true) {
-            this.setAttribute("selected", "");
+            if (!this.hasAttribute("selected")) {
+                this.setAttribute("selected", "");
+            }
             if (this.grid.rowSelectedClass) {
                 this.classList.add(...selectedClasses);
             }
@@ -81,7 +98,9 @@ class HTMLChGridRowElement extends HTMLElement {
     set marked(value) {
         const markedClasses = this.grid.rowMarkedClass?.split(" ");
         if (value === true) {
-            this.setAttribute("marked", "");
+            if (!this.hasAttribute("marked")) {
+                this.setAttribute("marked", "");
+            }
             if (this.grid.rowMarkedClass) {
                 this.classList.add(...markedClasses);
             }
@@ -346,12 +365,15 @@ class HTMLChGridCellElement extends HTMLElement {
             this.cellType = value;
         }
         if (name === "row-drag") {
+            this.cellType = ChGridCellType.Rich;
             this.rowDrag = value !== null ? value !== "false" : false;
         }
         if (name === "row-selector") {
+            this.cellType = ChGridCellType.Rich;
             this.rowSelector = value !== null ? value !== "false" : false;
         }
         if (name === "row-actions") {
+            this.cellType = ChGridCellType.Rich;
             this.rowActions = value !== null ? value !== "false" : false;
         }
     }
@@ -406,6 +428,20 @@ class HTMLChGridCellElement extends HTMLElement {
             this.removeAttribute("selected");
         }
     }
+    /**
+     * A boolean value indicating whether the cell is focused.
+     */
+    get focused() {
+        return this.hasAttribute("focused");
+    }
+    set focused(value) {
+        if (value === true) {
+            this.setAttribute("focused", "");
+        }
+        else {
+            this.removeAttribute("focused");
+        }
+    }
     /**
      * A boolean value indicates whether the grid cell is visible.
      */
@@ -521,9 +557,11 @@ class HTMLChGridCellElement extends HTMLElement {
             if (this.rowSelector) {
                 this.selector = this.shadowRoot.querySelector("[part='selector']");
                 this.selector.addEventListener("mousedown", (eventInfo) => eventInfo.stopPropagation());
+                this.selector.addEventListener("touchend", (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("touchend", (eventInfo) => eventInfo.stopPropagation());
                 this.selectorLabel.addEventListener("click", this.selectorLabelClickHandler.bind(this));
             }
         }
@@ -957,26 +995,45 @@ class ChGridManagerSelection {
     selectionStateNone = {
         rowFocused: null,
         rowsSelected: [],
+        cellFocused: null,
         cellSelected: null
     };
+    touch;
     selecting;
     selectingRow;
     selectingCell;
     constructor(manager) {
         this.manager = manager;
     }
-    select(state, row, cell, append, range, context) {
-        if (this.manager.grid.rowSelectionMode === "none") {
+    touchStart(touchEvent) {
+        this.touch = {
+            clientX: touchEvent.touches[0].clientX,
+            clientY: touchEvent.touches[0].clientY
+        };
+    }
+    isTouchEndSelection(touchEvent) {
+        return (Math.abs(this.touch.clientX - touchEvent.changedTouches[0].clientX) <
+            10 &&
+            Math.abs(this.touch.clientY - touchEvent.changedTouches[0].clientY) <
+                10 &&
+            touchEvent.cancelable);
+    }
+    select(state, row, cell, select, append, range, context) {
+        const grid = this.manager.grid;
+        if (grid.keyboardNavigationMode === "none" &&
+            grid.rowSelectionMode === "none") {
             return this.selectionStateNone;
         }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
+        if (grid.rowSelectionMode === "none") {
+            select = false;
+        }
+        if (grid.rowSelectionMode !== "multiple") {
             append = false;
             range = false;
         }
-        let rowFocused = state.rowFocused;
-        let rowsSelected = state.rowsSelected;
-        let cellSelected = state.cellSelected;
+        let { rowFocused, rowsSelected, cellFocused, cellSelected } = state;
         rowFocused = row;
+        cellFocused = cell;
         if (range) {
             const rangeRows = this.manager.getRowsRange(this.rangeStart ?? row, row);
             if (this.rangeValue) {
@@ -984,8 +1041,7 @@ class ChGridManagerSelection {
                     rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
                 }
                 else {
-                    rowsSelected =
-                        rowsSelected.length === rangeRows.length ? rowsSelected : rangeRows;
+                    rowsSelected = this.preserveInstanceIfSame(rangeRows, state.rowsSelected);
                 }
                 cellSelected =
                     cell ||
@@ -1001,7 +1057,7 @@ class ChGridManagerSelection {
             this.rangeValue = !row.selected;
             if (rowsSelected.includes(row)) {
                 rowsSelected = rowsSelected.filter(rowSelected => rowSelected !== row);
-                cellSelected = null;
+                cellSelected = state.cellSelected?.row === row ? null : cellSelected;
             }
             else {
                 rowsSelected = [...rowsSelected, row];
@@ -1013,15 +1069,16 @@ class ChGridManagerSelection {
         else {
             this.rangeStart = row;
             this.rangeValue = true;
-            if (!(rowsSelected.length === 1 && rowsSelected[0] === row) &&
-                !(context && rowsSelected.includes(row))) {
-                rowsSelected = [row];
+            if (select) {
+                if (!(context && state.rowsSelected.includes(row))) {
+                    rowsSelected = this.preserveInstanceIfSame([row], state.rowsSelected);
+                }
+                cellSelected =
+                    cell ||
+                        row.getCell(cellSelected?.column || this.manager.getFirstColumn());
             }
-            cellSelected =
-                cell ||
-                    row.getCell(cellSelected?.column || this.manager.getFirstColumn());
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return { rowFocused, rowsSelected, cellFocused, cellSelected };
     }
     selectAll(state, value = true) {
         if (this.manager.grid.rowSelectionMode === "none") {
@@ -1030,18 +1087,19 @@ class ChGridManagerSelection {
         const rows = this.manager.getRows();
         let rowFocused = state.rowFocused;
         let rowsSelected = state.rowsSelected;
+        let cellFocused = state.cellFocused;
         let cellSelected = state.cellSelected;
+        rowFocused ??= this.manager.getFirstRow();
+        cellFocused ??= rowFocused.getCell(state.cellFocused?.column || this.manager.getFirstColumn());
         if (value) {
-            rowFocused ??= this.manager.getFirstRow();
             rowsSelected = rows;
-            cellSelected = rowFocused.getCell(state.cellSelected?.column || this.manager.getFirstColumn());
+            cellSelected = cellFocused;
         }
         else {
-            rowFocused ??= this.manager.getFirstRow();
             rowsSelected = [];
             cellSelected = null;
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return { rowFocused, rowsSelected, cellFocused, cellSelected };
     }
     selectSet(state, row, cell, value = true) {
         let append = true;
@@ -1053,8 +1111,10 @@ class ChGridManagerSelection {
         }
         let rowFocused = state.rowFocused;
         let rowsSelected = state.rowsSelected;
+        let cellFocused = state.cellFocused;
         let cellSelected = state.cellSelected;
         rowFocused = row;
+        cellFocused = cell;
         if (value) {
             if (append) {
                 rowsSelected = rowsSelected.includes(row)
@@ -1072,224 +1132,67 @@ class ChGridManagerSelection {
                 : rowsSelected.filter(rowSelected => rowSelected !== row);
             cellSelected = null;
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return { rowFocused, rowsSelected, cellFocused, cellSelected };
     }
-    selectFirstRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
+    moveFirstRow(state, select, range, append) {
         const firstRow = this.manager.getFirstRow();
-        let rowFocused = state.rowFocused;
-        let rowsSelected = state.rowsSelected;
-        let cellSelected = state.cellSelected;
         if (firstRow) {
-            if (append) {
-                const rangeRows = this.manager.getRowsRange(rowFocused ?? firstRow, firstRow);
-                rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
-            }
-            else {
-                rowsSelected = [firstRow];
-            }
-            rowFocused = firstRow;
-            cellSelected = firstRow.getCell(state.cellSelected?.column || this.manager.getFirstColumn());
+            return this.select(state, firstRow, firstRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectPreviousRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
+    movePreviousRow(state, select, range, append) {
         const previousRow = this.manager.getPreviousRow(state.rowFocused);
-        let rowFocused = state.rowFocused;
-        let rowsSelected = state.rowsSelected;
-        let cellSelected = state.cellSelected;
         if (previousRow) {
-            if (append) {
-                const sortedRowsSelected = this.sortRowsSelected(rowsSelected);
-                const isContiguousSelection = this.isContiguousSelection(sortedRowsSelected);
-                if (isContiguousSelection && rowFocused === sortedRowsSelected[0]) {
-                    rowsSelected = [...rowsSelected, previousRow];
-                }
-                else if (isContiguousSelection &&
-                    rowFocused === sortedRowsSelected[sortedRowsSelected.length - 1]) {
-                    rowsSelected = rowsSelected.slice(0, -1);
-                }
-                else {
-                    rowsSelected = [rowFocused, previousRow];
-                }
-            }
-            else {
-                rowsSelected = [previousRow];
-            }
-            rowFocused = previousRow;
-            cellSelected = previousRow.getCell(cellSelected?.column || this.manager.getFirstColumn());
+            return this.select(state, previousRow, previousRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectNextRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
+    moveNextRow(state, select, range, append) {
         const nextRow = this.manager.getNextRow(state.rowFocused);
-        let rowFocused = state.rowFocused;
-        let rowsSelected = state.rowsSelected;
-        let cellSelected = state.cellSelected;
         if (nextRow) {
-            if (append) {
-                const sortedRowsSelected = this.sortRowsSelected(rowsSelected);
-                const isContiguousSelection = this.isContiguousSelection(sortedRowsSelected);
-                if (isContiguousSelection &&
-                    rowFocused === sortedRowsSelected[sortedRowsSelected.length - 1]) {
-                    rowsSelected = [...rowsSelected, nextRow];
-                }
-                else if (isContiguousSelection &&
-                    rowFocused === sortedRowsSelected[0]) {
-                    rowsSelected = rowsSelected.slice(1);
-                }
-                else {
-                    rowsSelected = [rowFocused, nextRow];
-                }
-            }
-            else {
-                rowsSelected = [nextRow];
-            }
-            rowFocused = nextRow;
-            cellSelected = nextRow.getCell(cellSelected?.column || this.manager.getFirstColumn());
+            return this.select(state, nextRow, nextRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectLastRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
-        const firstRow = this.manager.getLastRow();
-        let rowFocused = state.rowFocused;
-        let rowsSelected = state.rowsSelected;
-        let cellSelected = state.cellSelected;
-        if (firstRow) {
-            if (append) {
-                const rangeRows = this.manager.getRowsRange(rowFocused ?? firstRow, firstRow);
-                rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
-            }
-            else {
-                rowsSelected = [firstRow];
-            }
-            rowFocused = firstRow;
-            cellSelected = firstRow.getCell(state.cellSelected?.column || this.manager.getFirstColumn());
+    moveLastRow(state, select, range, append) {
+        const lastRow = this.manager.getLastRow();
+        if (lastRow) {
+            return this.select(state, lastRow, lastRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectPreviousPageRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
+    movePreviousPageRow(state, select, range, append) {
         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)];
+        const previousPageRow = rows[Math.max(rows.indexOf(state.rowFocused) - rowsPerPage, 0)];
         if (previousPageRow) {
-            if (append) {
-                const rangeRows = this.manager.getRowsRange(rowFocused ?? previousPageRow, previousPageRow);
-                rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
-            }
-            else {
-                rowsSelected =
-                    rowsSelected.length === 1 && rowsSelected[0] === previousPageRow
-                        ? rowsSelected
-                        : [previousPageRow];
-            }
-            rowFocused = previousPageRow;
-            cellSelected = previousPageRow.getCell(state.cellSelected?.column || this.manager.getFirstColumn());
+            return this.select(state, previousPageRow, previousPageRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectNextPageRow(state, append) {
-        if (this.manager.grid.rowSelectionMode === "none") {
-            return this.selectionStateNone;
-        }
-        if (this.manager.grid.rowSelectionMode !== "multiple") {
-            append = false;
-        }
+    moveNextPageRow(state, select, range, append) {
         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)];
+        const nextPageRow = rows[Math.min(rows.indexOf(state.rowFocused) + rowsPerPage, rows.length - 1)];
         if (nextPageRow) {
-            if (append) {
-                const rangeRows = this.manager.getRowsRange(rowFocused ?? nextPageRow, nextPageRow);
-                rowsSelected = Array.from(new Set(rowsSelected.concat(rangeRows)));
-            }
-            else {
-                rowsSelected =
-                    rowsSelected.length === 1 && rowsSelected[0] === nextPageRow
-                        ? rowsSelected
-                        : [nextPageRow];
-            }
-            rowFocused = nextPageRow;
-            cellSelected = nextPageRow.getCell(state.cellSelected?.column || this.manager.getFirstColumn());
+            return this.select(state, nextPageRow, nextPageRow.getCell(state.cellFocused.column), select, append, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectPreviousCell(state) {
-        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.manager.getPreviousCell(cellSelected);
-            if (nextCell) {
-                cellSelected = nextCell;
-            }
-        }
-        else {
-            if (!rowsSelected.includes(rowFocused)) {
-                rowsSelected = [...rowsSelected, rowFocused];
-            }
-            cellSelected ||= rowFocused.getCell(this.manager.getFirstColumn());
+    movePreviousCell(state, select, range) {
+        const previousCell = this.manager.getPreviousCell(state.cellFocused);
+        if (previousCell) {
+            return this.select(state, state.rowFocused, previousCell, select, false, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
-    selectNextCell(state) {
-        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.manager.getNextCell(cellSelected);
-            if (nextCell) {
-                cellSelected = nextCell;
-            }
-        }
-        else {
-            if (!rowsSelected.includes(rowFocused)) {
-                rowsSelected = [...rowsSelected, rowFocused];
-            }
-            cellSelected ||= rowFocused.getCell(this.manager.getFirstColumn());
+    moveNextCell(state, select, range) {
+        const nextCell = this.manager.getNextCell(state.cellFocused);
+        if (nextCell) {
+            return this.select(state, state.rowFocused, nextCell, select, false, range, false);
         }
-        return { rowFocused, rowsSelected, cellSelected };
+        return state;
     }
     markRow(row, checked, range, currentRowsMarked) {
         if (row) {
@@ -1312,6 +1215,15 @@ class ChGridManagerSelection {
         }
         return currentRowsMarked;
     }
+    markRows(rowFocused, rowsMarked, rowsSelected) {
+        const rows = rowsSelected.includes(rowFocused)
+            ? rowsSelected
+            : [rowFocused];
+        if (rows.some(row => !row.marked)) {
+            return Array.from(new Set(rowsMarked.concat(rows)));
+        }
+        return rowsMarked.filter(row => !rows.includes(row));
+    }
     markAllRows(value = true) {
         if (value) {
             return this.manager.getRows();
@@ -1334,42 +1246,26 @@ class ChGridManagerSelection {
                 const cell = row.children[indexColumnSelector];
                 cell.setSelectorChecked(true);
             });
-            if (rows.length === 0) {
-                columnSelector.richRowSelectorState = "";
-            }
-            else if (rows.length === this.manager.getRows().length) {
-                columnSelector.richRowSelectorState = "checked";
-            }
-            else {
-                columnSelector.richRowSelectorState = "indeterminate";
-            }
+            this.syncColumnSelector(rows.length, columnSelector);
         }
     }
-    sortRowsSelected(rowsSelected) {
-        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);
-            if (rowAIndex < rowBIndex) {
-                return -1;
-            }
-            if (rowAIndex > rowBIndex) {
-                return 1;
-            }
-            return 0;
-        });
-    }
-    isContiguousSelection(sortedRowsSelected) {
-        const rows = Array.from(this.manager.grid.querySelectorAll("ch-grid-row")).filter(row => row.isVisible());
-        if (sortedRowsSelected.length === 0) {
-            return false;
+    syncColumnSelector(length, columnSelector) {
+        columnSelector ??= this.manager.columns.getColumnSelector();
+        if (length === 0) {
+            columnSelector.richRowSelectorState = "";
         }
-        if (sortedRowsSelected.length === 1) {
-            return true;
+        else if (length === this.manager.getRows().length) {
+            columnSelector.richRowSelectorState = "checked";
+        }
+        else {
+            columnSelector.richRowSelectorState = "indeterminate";
         }
-        const startIndex = rows.indexOf(sortedRowsSelected[0]);
-        const endIndex = rows.indexOf(sortedRowsSelected[sortedRowsSelected.length - 1]);
-        return endIndex - startIndex + 1 === sortedRowsSelected.length;
+    }
+    preserveInstanceIfSame(newSelection, oldSelection) {
+        return newSelection.length === oldSelection.length &&
+            newSelection.every(item => oldSelection.includes(item))
+            ? oldSelection
+            : newSelection;
     }
 }
 
@@ -1729,9 +1625,6 @@ class ChGridManager {
         }
         return rows;
     }
-    getRowsSelected() {
-        return Array.from(this.grid.querySelectorAll(`ch-grid-row[selected]`));
-    }
     getRowsRange(start, end) {
         const rows = this.getRows();
         const indexStart = rows.indexOf(start);
@@ -1989,12 +1882,14 @@ const ChGrid = class {
         this.rowEnterPressed = index.createEvent(this, "rowEnterPressed", 7);
         this.rowContextMenu = index.createEvent(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;
@@ -2013,6 +1908,14 @@ const ChGrid = class {
             previous.focused = false;
         }
     }
+    cellFocusedHandler(cell, previous) {
+        if (cell) {
+            cell.focused = true;
+        }
+        if (previous) {
+            previous.focused = false;
+        }
+    }
     rowHighlightedHandler(row, previous) {
         var _a, _b;
         // highlight
@@ -2032,18 +1935,7 @@ const ChGrid = class {
     }
     rowsMarkedHandler(rows, previous) {
         this.manager.selection.syncRowSelector(rows, previous, "mark");
-        this.rowMarkingChanged.emit({
-            rowsId: rows.map(row => row.rowId),
-            addedRowsId: rows
-                .filter(row => !previous.includes(row))
-                .map(row => row.rowId),
-            removedRowsId: previous
-                .filter(row => !rows.includes(row))
-                .map(row => row.rowId),
-            unalteredRowsId: rows
-                .filter(row => previous.includes(row))
-                .map(row => row.rowId)
-        });
+        this.rowMarkingChanged.emit(this.getChangedEventDetail(rows, previous));
     }
     rowsSelectedHandler(rows, previous) {
         if (previous) {
@@ -2055,7 +1947,7 @@ const ChGrid = class {
             rows.forEach(row => (row.selected = true));
         }
         this.manager.selection.syncRowSelector(rows, previous, "select");
-        this.selectionChanged.emit({ rowsId: rows.map(row => row.rowId) });
+        this.selectionChanged.emit(this.getChangedEventDetail(rows, previous));
     }
     cellSelectedHandler(cell, previous) {
         if (cell) {
@@ -2073,7 +1965,6 @@ const ChGrid = class {
     componentWillLoad() {
         this.manager = new ChGridManager(this.el);
         this.gridStyle = this.manager.getGridStyle();
-        this.rowsSelected = this.manager.getRowsSelected();
     }
     componentDidLoad() {
         this.manager.componentDidLoad(this.gridLayoutElement);
@@ -2088,14 +1979,18 @@ const ChGrid = class {
         }
     }
     focusHandler() {
-        if (this.rowSelectionMode !== "none") {
-            this.rowFocused = this.rowsSelected[0] || this.manager.getFirstRow();
+        var _a, _b, _c;
+        if (this.keyboardNavigationMode !== "none") {
+            this.rowFocused || (this.rowFocused = (_a = this.rowsSelected[0]) !== null && _a !== void 0 ? _a : this.manager.getFirstRow());
+            this.cellFocused = (_b = this.rowFocused) === null || _b === void 0 ? void 0 : _b.getCell(((_c = this.cellSelected) === null || _c === void 0 ? void 0 : _c.column) || this.manager.getFirstColumn());
+            this.selectByKeyboardEvent(false, false);
         }
     }
     blurHandler() {
         this.rowFocused = null;
+        this.cellFocused = null;
     }
-    cellFocusedHandler(eventInfo) {
+    cellFocusedEventHandler(eventInfo) {
         const cell = eventInfo.target;
         if (this.rowSelectionMode !== "none" && !cell.selected) {
             this.setCellSelected(cell);
@@ -2120,10 +2015,13 @@ const ChGrid = class {
         }
     }
     keyDownHandler(eventInfo) {
-        if (helpers.focusComposedPath()[0] === this.el) {
+        if (helpers.focusComposedPath()[0] === this.el &&
+            this.keyboardNavigationMode !== "none") {
+            const range = eventInfo.shiftKey;
+            const append = helpers.mouseEventModifierKey(eventInfo);
             switch (eventInfo.key) {
                 case " ":
-                    this.toggleRowsMarked();
+                    this.spacePressedEvent(helpers.mouseEventModifierKey(eventInfo), eventInfo.shiftKey);
                     break;
                 case "+":
                     this.setRowCollapsed(this.rowFocused, false);
@@ -2132,28 +2030,28 @@ const ChGrid = class {
                     this.setRowCollapsed(this.rowFocused, true);
                     break;
                 case "Home":
-                    this.selectByKeyboardEvent(this.manager.selection.selectFirstRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.moveFirstRow, range, append);
                     break;
                 case "End":
-                    this.selectByKeyboardEvent(this.manager.selection.selectLastRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.moveLastRow, range, append);
                     break;
                 case "PageUp":
-                    this.selectByKeyboardEvent(this.manager.selection.selectPreviousPageRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.movePreviousPageRow, range, append);
                     break;
                 case "PageDown":
-                    this.selectByKeyboardEvent(this.manager.selection.selectNextPageRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.moveNextPageRow, range, append);
                     break;
                 case "ArrowUp":
-                    this.selectByKeyboardEvent(this.manager.selection.selectPreviousRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.movePreviousRow, range, append);
                     break;
                 case "ArrowDown":
-                    this.selectByKeyboardEvent(this.manager.selection.selectNextRow.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.moveNextRow, range, append);
                     break;
                 case "ArrowLeft":
-                    this.selectByKeyboardEvent(this.manager.selection.selectPreviousCell.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.movePreviousCell, range, append);
                     break;
                 case "ArrowRight":
-                    this.selectByKeyboardEvent(this.manager.selection.selectNextCell.bind(this.manager.selection), eventInfo.shiftKey);
+                    this.moveByKeyboardEvent(this.manager.selection.moveNextCell, range, append);
                     break;
                 case "Enter":
                     this.enterPressedHandler();
@@ -2198,17 +2096,15 @@ const ChGrid = class {
         const row = this.manager.getRowEventTarget(eventInfo);
         const cell = this.manager.getCellEventTarget(eventInfo);
         if (row) {
-            this.rowClicked.emit({
-                rowId: row.rowId,
-                cellId: cell === null || cell === void 0 ? void 0 : cell.cellId,
-                columnId: cell === null || cell === void 0 ? void 0 : cell.column.columnId
-            });
             this.manager.selection.selecting = true;
             this.selectByPointerEvent(row, cell, helpers.mouseEventModifierKey(eventInfo), eventInfo.shiftKey, eventInfo.button === helpers.MouseEventButton.RIGHT);
         }
     }
     mouseUpHandler() {
-        this.stopSelecting();
+        if (this.manager.selection.selecting) {
+            this.stopSelecting();
+            this.emitRowClicked(this.rowFocused, this.cellFocused);
+        }
     }
     dblclickHandler(eventInfo) {
         const row = this.manager.getRowEventTarget(eventInfo);
@@ -2221,6 +2117,23 @@ const ChGrid = class {
             });
         }
     }
+    touchstartHandler(eventInfo) {
+        this.manager.selection.touchStart(eventInfo);
+    }
+    touchendHandler(eventInfo) {
+        if (eventInfo.cancelable) {
+            eventInfo.preventDefault();
+        }
+        if (this.manager.selection.isTouchEndSelection(eventInfo)) {
+            const columnSelector = this.manager.columns.getColumnSelector();
+            const row = this.manager.getRowEventTarget(eventInfo);
+            const cell = this.manager.getCellEventTarget(eventInfo);
+            if (row) {
+                this.selectByPointerEvent(row, cell, (columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) !== "select", false, false);
+                this.emitRowClicked(row, cell);
+            }
+        }
+    }
     contextmenuHandler(eventInfo) {
         var _a, _b;
         let targetRow;
@@ -2340,6 +2253,16 @@ const ChGrid = class {
     async getMarkedRows() {
         return this.rowsMarked.map(row => row.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.
      */
@@ -2358,13 +2281,15 @@ const ChGrid = class {
     async selectRow(rowId, selected = true) {
         const row = this.manager.getRow(rowId);
         if (row) {
-            const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
+            const { rowFocused, rowsSelected, cellFocused, cellSelected } = this.manager.selection.selectSet({
                 rowFocused: this.rowFocused,
                 rowsSelected: this.rowsSelected,
+                cellFocused: this.cellFocused,
                 cellSelected: this.cellSelected
             }, row, null, selected);
             this.rowFocused = rowFocused;
             this.rowsSelected = rowsSelected;
+            this.cellFocused = cellFocused;
             this.cellSelected = cellSelected;
             rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
         }
@@ -2489,76 +2414,155 @@ const ChGrid = class {
             columnId: nextCell ? nextCell.column.columnId : null
         };
     }
+    /**
+     * Synchronizes the state of a row in the grid.
+     */
+    async syncRowState(el) {
+        const row = el;
+        const columnSelector = this.manager.columns.getColumnSelector();
+        if (this.rowSelectionMode !== "none") {
+            this.syncRowStateSelected(row);
+        }
+        if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
+            this.syncRowStateMarked(row);
+        }
+        if (columnSelector) {
+            this.syncRowStateSelector(row, columnSelector);
+            if (columnSelector.richRowSelectorMode === "select") {
+                this.manager.selection.syncColumnSelector(this.rowsSelected.length, columnSelector);
+            }
+            else if (columnSelector.richRowSelectorMode === "mark") {
+                this.manager.selection.syncColumnSelector(this.rowsMarked.length, columnSelector);
+            }
+        }
+    }
+    syncRowStateSelected(row) {
+        if (row.selected && this.rowSelectionMode === "single") {
+            this.rowsSelected[0] = row;
+        }
+        if (row.selected &&
+            this.rowSelectionMode === "multiple" &&
+            !this.rowsSelected.includes(row)) {
+            this.rowsSelected.push(row);
+        }
+        if (!row.selected) {
+            const index = this.rowsSelected.indexOf(row);
+            if (index !== -1) {
+                this.rowsSelected.splice(index, 1);
+            }
+        }
+    }
+    syncRowStateMarked(row) {
+        if (row.marked && !this.rowsMarked.includes(row)) {
+            this.rowsMarked.push(row);
+        }
+        if (!row.marked) {
+            const index = this.rowsMarked.indexOf(row);
+            if (index !== -1) {
+                this.rowsMarked.splice(index, 1);
+            }
+        }
+    }
+    syncRowStateSelector(row, columnSelector) {
+        const cell = row.getCell(columnSelector);
+        const value = (columnSelector.richRowSelectorMode === "select" && row.selected) ||
+            (columnSelector.richRowSelectorMode === "mark" && row.marked);
+        cell.setSelectorChecked(value);
+    }
+    getChangedEventDetail(rows, previous) {
+        return {
+            rowsId: rows.map(row => row.rowId),
+            addedRowsId: rows
+                .filter(row => !previous.includes(row))
+                .map(row => row.rowId),
+            removedRowsId: previous
+                .filter(row => !rows.includes(row))
+                .map(row => row.rowId),
+            unalteredRowsId: rows
+                .filter(row => previous.includes(row))
+                .map(row => row.rowId)
+        };
+    }
     enterPressedHandler() {
-        var _a;
         if (this.rowFocused) {
-            const cellFocused = ((_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row) === this.rowFocused ? this.cellSelected : null;
             this.rowEnterPressed.emit({
                 rowId: this.rowFocused.rowId,
-                cellId: cellFocused ? cellFocused.cellId : null,
-                columnId: cellFocused ? cellFocused.column.columnId : null
+                cellId: this.cellFocused ? this.cellFocused.cellId : null,
+                columnId: this.cellFocused ? this.cellFocused.column.columnId : null
             });
         }
     }
-    toggleRowsMarked() {
+    spacePressedEvent(ctrl, shift) {
+        if (this.keyboardNavigationMode === "focus") {
+            this.selectByKeyboardEvent(ctrl, shift);
+        }
+        else if (this.keyboardNavigationMode === "select") {
+            this.markByKeyboardEvent();
+        }
+        this.emitRowClicked(this.rowFocused, this.cellFocused);
+    }
+    markByKeyboardEvent() {
         const columnSelector = this.manager.columns.getColumnSelector();
         if ((columnSelector === null || columnSelector === void 0 ? void 0 : columnSelector.richRowSelectorMode) === "mark") {
-            const value = !this.rowFocused.marked;
-            if (value) {
-                this.rowsMarked = Array.from(new Set(this.rowsMarked.concat(this.rowsSelected)));
-            }
-            else {
-                this.rowsMarked = this.rowsMarked.filter(row => !this.rowsSelected.includes(row));
-            }
+            this.rowsMarked = this.manager.selection.markRows(this.rowFocused, this.rowsMarked, this.rowsSelected);
         }
     }
+    selectByKeyboardEvent(append, range) {
+        var _a;
+        const { rowFocused, rowsSelected, cellFocused, cellSelected } = this.manager.selection.select({
+            rowFocused: this.rowFocused,
+            rowsSelected: this.rowsSelected,
+            cellFocused: this.cellFocused,
+            cellSelected: this.cellSelected
+        }, this.rowFocused, this.cellFocused, true, append, range, false);
+        this.rowFocused = rowFocused;
+        this.rowsSelected = rowsSelected;
+        this.cellFocused = cellFocused;
+        this.cellSelected = cellSelected;
+        (_a = (cellFocused || rowFocused)) === null || _a === void 0 ? void 0 : _a.ensureVisible();
+    }
     selectByPointerEvent(row, cell, append, range, context) {
-        const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.select({
+        var _a;
+        const { rowFocused, rowsSelected, cellFocused, cellSelected } = this.manager.selection.select({
             rowFocused: this.rowFocused,
             rowsSelected: this.rowsSelected,
+            cellFocused: this.cellFocused,
             cellSelected: this.cellSelected
-        }, row, cell, append, range, context);
+        }, row, cell, true, append, range, context);
         this.rowFocused = rowFocused;
         this.rowsSelected = rowsSelected;
+        this.cellFocused = cellFocused;
         this.cellSelected = cellSelected;
-        if (cellSelected) {
-            cellSelected.ensureVisible();
-        }
-        else {
-            rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
-        }
+        (_a = (cellFocused || rowFocused)) === null || _a === void 0 ? void 0 : _a.ensureVisible();
     }
-    selectByKeyboardEvent(fn, append) {
-        const { rowFocused, rowsSelected, cellSelected } = fn({
+    moveByKeyboardEvent(fn, range, append) {
+        var _a;
+        const { rowFocused, rowsSelected, cellFocused, cellSelected } = fn.call(this.manager.selection, {
             rowFocused: this.rowFocused,
             rowsSelected: this.rowsSelected,
+            cellFocused: this.cellFocused,
             cellSelected: this.cellSelected
-        }, append);
+        }, this.rowSelectionMode !== "none" &&
+            this.keyboardNavigationMode === "select", this.rowSelectionMode === "multiple" ? range : false, this.rowSelectionMode === "multiple" ? range && append : false);
         this.rowFocused = rowFocused;
         this.rowsSelected = rowsSelected;
+        this.cellFocused = cellFocused;
         this.cellSelected = cellSelected;
-        if (cellSelected) {
-            cellSelected.ensureVisible();
-        }
-        else {
-            rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
-        }
+        (_a = (cellFocused || rowFocused)) === null || _a === void 0 ? void 0 : _a.ensureVisible();
     }
     selectAll(value = true) {
-        const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectAll({
+        var _a;
+        const { rowFocused, rowsSelected, cellFocused, cellSelected } = this.manager.selection.selectAll({
             rowFocused: this.rowFocused,
             rowsSelected: this.rowsSelected,
+            cellFocused: this.cellFocused,
             cellSelected: this.cellSelected
         }, value);
         this.rowFocused = rowFocused;
         this.rowsSelected = rowsSelected;
+        this.cellFocused = cellFocused;
         this.cellSelected = cellSelected;
-        if (cellSelected) {
-            cellSelected.ensureVisible();
-        }
-        else {
-            rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
-        }
+        (_a = (cellFocused || rowFocused)) === null || _a === void 0 ? void 0 : _a.ensureVisible();
     }
     setRowCollapsed(row, collapsed) {
         if (row && collapsed) {
@@ -2571,15 +2575,25 @@ const ChGrid = class {
         }
     }
     setCellSelected(cell, selected = true) {
-        const { rowFocused, rowsSelected, cellSelected } = this.manager.selection.selectSet({
+        var _a;
+        const { rowFocused, rowsSelected, cellFocused, cellSelected } = this.manager.selection.selectSet({
             rowFocused: this.rowFocused,
             rowsSelected: this.rowsSelected,
+            cellFocused: this.cellFocused,
             cellSelected: this.cellSelected
         }, cell.row, cell, selected);
         this.rowFocused = rowFocused;
         this.rowsSelected = rowsSelected;
+        this.cellFocused = cellFocused;
         this.cellSelected = cellSelected;
-        rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
+        (_a = (cellFocused || rowFocused)) === null || _a === void 0 ? void 0 : _a.ensureVisible();
+    }
+    emitRowClicked(row, cell) {
+        this.rowClicked.emit({
+            rowId: row.rowId,
+            cellId: cell === null || cell === void 0 ? void 0 : cell.cellId,
+            columnId: cell === null || cell === void 0 ? void 0 : cell.column.columnId
+        });
     }
     stopSelecting() {
         this.manager.selection.selecting = false;
@@ -2590,10 +2604,11 @@ const ChGrid = class {
         return (index.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        " }, index.h("slot", { name: "settings" }, index.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            " }))));
     }
     render() {
-        return (index.h(index.Host, { tabindex: this.rowSelectionMode !== "none" ? "0" : false }, index.h("header", { part: "header" }, index.h("slot", { name: "header" })), index.h("section", { class: "main", style: this.gridStyle, part: "main", ref: el => (this.gridLayoutElement = el) }, index.h("slot", null)), index.h("aside", null, this.renderSettings(), index.h("slot", { name: "column-display" }), index.h("slot", { name: "row-actions" })), index.h("footer", { part: "footer" }, index.h("slot", { name: "footer" }))));
+        return (index.h(index.Host, { tabindex: this.keyboardNavigationMode !== "none" ? "0" : false }, index.h("header", { part: "header" }, index.h("slot", { name: "header" })), index.h("section", { class: "main", style: this.gridStyle, part: "main", ref: el => (this.gridLayoutElement = el) }, index.h("slot", null)), index.h("aside", null, this.renderSettings(), index.h("slot", { name: "column-display" }), index.h("slot", { name: "row-actions" })), index.h("footer", { part: "footer" }, index.h("slot", { name: "footer" }))));
     }
     static get watchers() { return {
         "rowFocused": ["rowFocusedHandler"],
+        "cellFocused": ["cellFocusedHandler"],
         "rowHighlighted": ["rowHighlightedHandler"],
         "rowsMarked": ["rowsMarkedHandler"],
         "rowsSelected": ["rowsSelectedHandler"],
@@ -2620,6 +2635,9 @@ const ChGridColumn = class {
             });
             eventInfo.stopPropagation();
         };
+        this.selectorTouchEndHandler = (eventInfo) => {
+            eventInfo.stopPropagation();
+        };
         index.registerInstance(this, hostRef);
         this.columnHiddenChanged = index.createEvent(this, "columnHiddenChanged", 7);
         this.columnSizeChanging = index.createEvent(this, "columnSizeChanging", 7);
@@ -2759,7 +2777,7 @@ const ChGridColumn = class {
     renderSelector() {
         return (index.h("li", { class: "selector", part: "bar-selector", hidden: !(this.columnType === "rich" && this.richRowSelector) }, index.h("label", { part: "selector-label" }, index.h("input", { type: "checkbox", part: ["selector", this.richRowSelectorState]
                 .filter(part => part !== "")
-                .join(" "), onClick: this.selectorClickHandler, checked: this.richRowSelectorState === "checked", indeterminate: this.richRowSelectorState === "indeterminate" }))));
+                .join(" "), onClick: this.selectorClickHandler, onTouchEnd: this.selectorTouchEndHandler, checked: this.richRowSelectorState === "checked", indeterminate: this.richRowSelectorState === "indeterminate" }))));
     }
     renderName() {
         return (index.h("li", { class: "name", part: "bar-name", title: this.columnTooltip ||