@revolist/revogrid 4.17.2 → 4.18.0

package/hydrate/index.js

@@ -8139,568 +8139,262 @@ class SelectionStore {
     }
 }
 
-const EMPTY_INDEX = -1;
-class SelectionStoreConnector {
-    constructor() {
-        // dirty flag required to cleanup whole store in case visibility of panels changed
-        this.dirty = false;
-        this.stores = {};
-        this.columnStores = {};
-        this.rowStores = {};
-        /**
-         * Helpers for data conversion
-         */
-        this.storesByType = {};
-        this.storesXToType = {};
-        this.storesYToType = {};
-        this.sections = [];
-    }
-    get focusedStore() {
-        var _a;
-        for (let y in this.stores) {
-            for (let x in this.stores[y]) {
-                const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get('focus');
-                if (focused) {
-                    return {
-                        entity: this.stores[y][x],
-                        cell: focused,
-                        position: {
-                            x: parseInt(x, 10),
-                            y: parseInt(y, 10),
-                        },
-                    };
-                }
-            }
-        }
-        return null;
-    }
-    get edit() {
-        var _a;
-        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('edit');
-    }
-    get focused() {
-        var _a;
-        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('focus');
-    }
-    get selectedRange() {
-        var _a;
-        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
-    }
-    registerSection(e) {
-        if (!e) {
-            this.sections.length = 0;
-            // some elements removed, rebuild stores
-            this.dirty = true;
-            return;
-        }
-        if (this.sections.indexOf(e) === -1) {
-            this.sections.push(e);
-        }
-    }
-    // check if require to cleanup all stores
-    beforeUpdate() {
-        if (this.dirty) {
-            for (let y in this.stores) {
-                for (let x in this.stores[y]) {
-                    this.stores[y][x].dispose();
-                }
-            }
-            this.dirty = false;
+function nextCell(cell, lastCell) {
+    const nextItem = {};
+    let types = ['x', 'y'];
+    // previous item check
+    for (let t of types) {
+        if (cell[t] < 0) {
+            nextItem[t] = cell[t];
+            return nextItem;
         }
     }
-    registerColumn(x, type) {
-        // if hidden just create store but no operations needed
-        if (isHiddenStore(x)) {
-            return new SelectionStore();
-        }
-        if (this.columnStores[x]) {
-            return this.columnStores[x];
+    // next item check
+    for (let t of types) {
+        if (cell[t] >= lastCell[t]) {
+            nextItem[t] = cell[t] - lastCell[t];
+            return nextItem;
         }
-        this.columnStores[x] = new SelectionStore();
-        // build cross-linking type to position
-        this.storesByType[type] = x;
-        this.storesXToType[x] = type;
-        return this.columnStores[x];
     }
-    registerRow(y, type) {
-        // if hidden just create store
-        if (isHiddenStore(y)) {
-            return new SelectionStore();
+    return null;
+}
+function cropCellToMax(cell, lastCell) {
+    const croppedCell = Object.assign({}, cell);
+    const cellCoordinates = ['x', 'y'];
+    for (const coordinate of cellCoordinates) {
+        if (cell[coordinate] < 0) {
+            croppedCell[coordinate] = 0;
         }
-        if (this.rowStores[y]) {
-            return this.rowStores[y];
+        else if (cell[coordinate] >= lastCell[coordinate]) {
+            croppedCell[coordinate] = lastCell[coordinate] - 1;
         }
-        this.rowStores[y] = new SelectionStore();
-        // build cross linking type to position
-        this.storesByType[type] = y;
-        this.storesYToType[y] = type;
-        return this.rowStores[y];
     }
-    /**
-     * Cross store proxy, based on multiple dimensions
-     */
-    register({ x, y }) {
-        var _a, _b;
-        // if hidden just create store
-        if (isHiddenStore(x) || isHiddenStore(y)) {
-            return new SelectionStore();
-        }
-        if (!this.stores[y]) {
-            this.stores[y] = {};
+    return croppedCell;
+}
+function getRange(start, end) {
+    return start && end
+        ? {
+            x: Math.min(start.x, end.x),
+            y: Math.min(start.y, end.y),
+            x1: Math.max(start.x, end.x),
+            y1: Math.max(start.y, end.y),
         }
-        if (this.stores[y][x]) {
-            // Store already registered. Do not register twice
-            return this.stores[y][x];
+        : null;
+}
+function isRangeSingleCell(a) {
+    return a.x === a.x1 && a.y === a.y1;
+}
+
+/**
+ * Update items based on new scroll position
+ * If viewport wasn't changed fully simple recombination of positions
+ * Otherwise rebuild viewport items
+ */
+function getUpdatedItemsByPosition(pos, // coordinate
+items, realCount, virtualSize, dimension) {
+    const activeItem = getItemByPosition(dimension, pos);
+    const firstItem = getFirstItem(items);
+    let toUpdate;
+    // do simple position recombination if items already present in viewport
+    if (firstItem) {
+        let changedOffsetStart = activeItem.itemIndex - (firstItem.itemIndex || 0);
+        // if item changed
+        if (changedOffsetStart) {
+            // simple recombination
+            toUpdate = recombineByOffset(Math.abs(changedOffsetStart), Object.assign(Object.assign({ positiveDirection: changedOffsetStart > -1 }, dimension), items));
         }
-        this.stores[y][x] = new SelectionStore();
-        // proxy update, column store trigger only range area
-        (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.onChange('range', c => {
-            this.columnStores[x].setRangeArea(c);
-            this.rowStores[y].setRangeArea(c);
-        });
-        // clean up on remove
-        (_b = this.stores[y][x]) === null || _b === void 0 ? void 0 : _b.store.on('dispose', () => this.destroy(x, y));
-        return this.stores[y][x];
     }
-    destroy(x, y) {
-        var _a, _b;
-        (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
-        delete this.rowStores[y];
-        delete this.columnStores[x];
-        // clear x cross-link
-        if (this.storesXToType[x]) {
-            const type = this.storesXToType[x];
-            delete this.storesXToType[x];
-            delete this.storesByType[type];
-        }
-        // clear y cross-link
-        if (this.storesYToType[y]) {
-            const type = this.storesYToType[y];
-            delete this.storesYToType[y];
-            delete this.storesByType[type];
-        }
-        if (this.stores[y]) {
-            delete this.stores[y][x];
-        }
-        // clear empty rows
-        if (!Object.keys(this.stores[y] || {}).length) {
-            delete this.stores[y];
+    const maxSizeVirtualSize = getMaxVirtualSize(virtualSize, dimension.realSize, activeItem);
+    // if partial recombination add items if revo-viewport has some space left
+    if (toUpdate) {
+        const extra = addMissingItems(activeItem, realCount, maxSizeVirtualSize, toUpdate, dimension);
+        if (extra.length) {
+            updateMissingAndRange(toUpdate.items, extra, toUpdate);
         }
     }
-    setEditByCell(storePos, editCell) {
-        this.focusByCell(storePos, editCell, editCell);
-        this.setEdit('');
+    // new collection if no items after replacement full replacement
+    if (!toUpdate) {
+        const items = getItems({
+            firstItemStart: activeItem.start,
+            firstItemIndex: activeItem.itemIndex,
+            origSize: dimension.originItemSize,
+            maxSize: maxSizeVirtualSize,
+            maxCount: realCount,
+            sizes: dimension.sizes,
+        });
+        // range now comes from 0 to length - 1
+        toUpdate = {
+            items,
+            start: 0,
+            end: items.length - 1,
+        };
     }
-    /**
-     * Sets the next focus cell before the current one.
-     *
-     * @param focus - The cell to set as the next focus.
-     */
-    beforeNextFocusCell(focus) {
-        var _a;
-        // If there is no focused store, return early.
-        if (!this.focusedStore) {
-            return;
-        }
-        // Get the next store based on the current focus and the last cell.
-        const lastCell = this.focusedStore.entity.store.get('lastCell');
-        const next = lastCell && this.getNextStore(focus, this.focusedStore.position, lastCell);
-        // Set the next focus cell in the store.
-        (_a = next === null || next === void 0 ? void 0 : next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+    return toUpdate;
+}
+// virtual size can differ based on scroll position if some big items are present
+// scroll can be in the middle of item and virtual size will be larger
+// so we need to exclude this part from virtual size hence it's already passed
+function getMaxVirtualSize(virtualSize, realSize, activeItem) {
+    return Math.min(virtualSize + (activeItem.end - activeItem.start), realSize);
+}
+function updateMissingAndRange(items, missing, range) {
+    items.splice(range.end + 1, 0, ...missing);
+    // update range if start larger after recombination
+    if (range.start >= range.end &&
+        !(range.start === range.end && range.start === 0)) {
+        range.start += missing.length;
     }
-    focusByCell(storePos, start, end) {
-        const store = this.stores[storePos.y][storePos.x];
-        this.focus(store, { focus: start, end });
+    range.end += missing.length;
+}
+/**
+ * If partial replacement
+ * this function adds items if viewport has some space left
+ */
+function addMissingItems(firstItem, realCount, virtualSize, existingCollection, dimension) {
+    const lastItem = getLastItem(existingCollection);
+    const items = getItems({
+        sizes: dimension.sizes,
+        firstItemStart: lastItem.end,
+        firstItemIndex: lastItem.itemIndex + 1,
+        origSize: dimension.originItemSize,
+        maxSize: virtualSize - (lastItem.end - firstItem.start),
+        maxCount: realCount,
+    });
+    return items;
+}
+/**
+ * Get wiewport items parameters
+ * caching position and calculating items count in viewport
+ */
+function getItems(opt, currentSize = 0) {
+    const items = [];
+    let index = opt.firstItemIndex;
+    let size = currentSize;
+    // max size or max count
+    while (size <= opt.maxSize && index < opt.maxCount) {
+        const newSize = getItemSize(index, opt.sizes, opt.origSize);
+        items.push({
+            start: opt.firstItemStart + size,
+            end: opt.firstItemStart + size + newSize,
+            itemIndex: index,
+            size: newSize,
+        });
+        size += newSize;
+        index++;
     }
-    focus(store, { focus, end }) {
-        const currentStorePointer = this.getCurrentStorePointer(store);
-        if (!currentStorePointer) {
-            return null;
-        }
-        // check for the focus in nearby store/viewport
-        const lastCell = store.store.get('lastCell');
-        const next = lastCell && this.getNextStore(focus, currentStorePointer, lastCell);
-        // if next store present - update
-        if (next === null || next === void 0 ? void 0 : next.store) {
-            const item = Object.assign(Object.assign({}, focus), next.item);
-            this.focus(next.store, { focus: item, end: item });
-            return null;
-        }
-        if (lastCell) {
-            focus = cropCellToMax(focus, lastCell);
-            end = cropCellToMax(end, lastCell);
-        }
-        store.setFocus(focus, end);
-        return focus;
+    return items;
+}
+function recombineByOffset(offset, data) {
+    var _a, _b;
+    const newItems = [...data.items];
+    const itemsCount = newItems.length;
+    let newRange = {
+        start: data.start,
+        end: data.end,
+    };
+    // if offset out of revo-viewport, makes sense whole redraw
+    if (offset > itemsCount) {
+        return undefined;
     }
-    /**
-     * Retrieves the current store pointer based on the active store.
-     * Clears focus from all stores except the active one.
-     */
-    getCurrentStorePointer(store) {
-        let currentStorePointer;
-        // Iterate through all stores
-        for (let y in this.stores) {
-            for (let x in this.stores[y]) {
-                const s = this.stores[y][x];
-                // Clear focus from stores other than the active one
-                if (s !== store) {
-                    s.clearFocus();
-                }
-                else {
-                    // Update the current store pointer with the active store coordinates
-                    currentStorePointer = {
-                        x: parseInt(x, 10),
-                        y: parseInt(y, 10)
-                    };
-                }
+    // is direction of scroll positive
+    if (data.positiveDirection) {
+        // push item to the end
+        let lastItem = getLastItem(data);
+        let i = newRange.start;
+        const length = i + offset;
+        for (; i < length; i++) {
+            const newIndex = lastItem.itemIndex + 1;
+            const size = getItemSize(newIndex, data.sizes, data.originItemSize);
+            // if item overlapped limit break a loop
+            if (lastItem.end + size > data.realSize) {
+                break;
             }
-        }
-        return currentStorePointer;
-    }
-    /**
-     * Retrieves the next store based on the focus cell and current store pointer.
-     * If the next store exists, returns an object with the next store and the item in the new store.
-     * If the next store does not exist, returns null.
-     */
-    getNextStore(focus, currentStorePointer, lastCell) {
-        // item in new store
-        const nextItem = nextCell(focus, lastCell);
-        let nextStore;
-        if (nextItem) {
-            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
-                let stores;
-                switch (type) {
-                    case 'x':
-                        // Get the X stores for the current Y coordinate of the current store pointer
-                        stores = this.getXStores(currentStorePointer.y);
-                        break;
-                    case 'y':
-                        // Get the Y stores for the current X coordinate of the current store pointer
-                        stores = this.getYStores(currentStorePointer.x);
-                        break;
-                }
-                // Get the next store based on the item in the new store
-                if (nextItemCoord >= 0) {
-                    nextStore = stores[++currentStorePointer[type]];
-                }
-                else {
-                    nextStore = stores[--currentStorePointer[type]];
-                    const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
-                    if (nextLastCell) {
-                        nextItem[type] = nextLastCell[type] + nextItemCoord;
-                    }
-                }
-            });
-        }
-        return {
-            store: nextStore,
-            item: nextItem,
-        };
-    }
-    clearAll() {
-        var _a;
-        for (let y in this.stores) {
-            for (let x in this.stores[y]) {
-                (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
+            // new item index to recombine
+            let newEnd = i % itemsCount;
+            // item should always present, we do not create new item, we recombine them
+            if (!newItems[newEnd]) {
+                throw new Error('incorrect index');
             }
+            // do recombination
+            newItems[newEnd] = lastItem = {
+                start: lastItem.end,
+                end: lastItem.end + size,
+                itemIndex: newIndex,
+                size: size,
+            };
+            // update range
+            newRange.start++;
+            newRange.end = newEnd;
         }
+        // direction is negative
     }
-    setEdit(val) {
-        if (!this.focusedStore) {
-            return;
-        }
-        this.focusedStore.entity.setEdit(val);
-    }
-    /**
-     * Select all cells across all stores
-     */
-    selectAll() {
-        for (let y in this.stores) {
-            for (let x in this.stores[y]) {
-                const store = this.stores[y][x];
-                if (!store) {
-                    continue;
-                }
-                const lastCell = store.store.get('lastCell');
-                if (lastCell) {
-                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
-                }
+    else {
+        // push item to the start
+        let firstItem = getFirstItem(data);
+        const end = newRange.end;
+        for (let i = 0; i < offset; i++) {
+            const newIndex = ((_a = firstItem === null || firstItem === void 0 ? void 0 : firstItem.itemIndex) !== null && _a !== void 0 ? _a : 0) - 1;
+            const size = getItemSize(newIndex, data.sizes, data.originItemSize);
+            // new item index to recombine
+            let newStart = end - i;
+            newStart = (newStart < 0 ? itemsCount + newStart : newStart) % itemsCount;
+            // item should always present, we do not create new item, we recombine them
+            if (!newItems[newStart]) {
+                console.error('incorrect index');
+                break;
             }
+            // do recombination
+            const firstItemStart = (_b = firstItem === null || firstItem === void 0 ? void 0 : firstItem.start) !== null && _b !== void 0 ? _b : 0;
+            newItems[newStart] = firstItem = {
+                start: firstItemStart - size,
+                end: firstItemStart,
+                itemIndex: newIndex,
+                size: size,
+            };
+            // update range
+            newRange.start = newStart;
+            newRange.end--;
         }
     }
-    getXStores(y) {
-        return this.stores[y];
-    }
-    getYStores(x) {
-        const stores = {};
-        for (let i in this.stores) {
-            stores[i] = this.stores[i][x];
-        }
-        return stores;
-    }
-}
-
-function isHiddenStore(pos) {
-    return pos === EMPTY_INDEX;
+    const range = {
+        start: (newRange.start < 0 ? itemsCount + newRange.start : newRange.start) %
+            itemsCount,
+        end: (newRange.end < 0 ? itemsCount + newRange.end : newRange.end) %
+            itemsCount,
+    };
+    return Object.assign({ items: newItems }, range);
 }
-function nextCell(cell, lastCell) {
-    const nextItem = {};
-    let types = ['x', 'y'];
-    // previous item check
-    for (let t of types) {
-        if (cell[t] < 0) {
-            nextItem[t] = cell[t];
-            return nextItem;
-        }
+function getItemSize(index, sizes, origSize = 0) {
+    if (sizes && sizes[index]) {
+        return sizes[index];
     }
-    // next item check
-    for (let t of types) {
-        if (cell[t] >= lastCell[t]) {
-            nextItem[t] = cell[t] - lastCell[t];
-            return nextItem;
-        }
+    return origSize;
+}
+/**
+ * Verify if position is in range of the PositionItem, start and end are included
+ */
+function isActiveRange(pos, realSize, first, last) {
+    if (!first || !last) {
+        return false;
     }
-    return null;
+    // if position is in range of first item
+    // or position is after first item and last item is the last item in real size
+    return ((pos >= first.start && pos <= first.end) ||
+        (pos > first.end && last.end === realSize));
 }
-function cropCellToMax(cell, lastCell) {
-    const croppedCell = Object.assign({}, cell);
-    const cellCoordinates = ['x', 'y'];
-    for (const coordinate of cellCoordinates) {
-        if (cell[coordinate] < 0) {
-            croppedCell[coordinate] = 0;
-        }
-        else if (cell[coordinate] >= lastCell[coordinate]) {
-            croppedCell[coordinate] = lastCell[coordinate] - 1;
-        }
+function isActiveRangeOutsideLastItem(pos, virtualSize, firstItem, lastItem) {
+    var _a;
+    // if no first item, means no items in viewport
+    if (!firstItem) {
+        return false;
     }
-    return croppedCell;
+    return virtualSize + pos > ((_a = lastItem === null || lastItem === void 0 ? void 0 : lastItem.end) !== null && _a !== void 0 ? _a : 0);
 }
-function getRange(start, end) {
-    return start && end
-        ? {
-            x: Math.min(start.x, end.x),
-            y: Math.min(start.y, end.y),
-            x1: Math.max(start.x, end.x),
-            y1: Math.max(start.y, end.y),
-        }
-        : null;
+function getFirstItem(s) {
+    return s.items[s.start];
 }
-function isRangeSingleCell(a) {
-    return a.x === a.x1 && a.y === a.y1;
-}
-
-/**
- * Update items based on new scroll position
- * If viewport wasn't changed fully simple recombination of positions
- * Otherwise rebuild viewport items
- */
-function getUpdatedItemsByPosition(pos, // coordinate
-items, realCount, virtualSize, dimension) {
-    const activeItem = getItemByPosition(dimension, pos);
-    const firstItem = getFirstItem(items);
-    let toUpdate;
-    // do simple position recombination if items already present in viewport
-    if (firstItem) {
-        let changedOffsetStart = activeItem.itemIndex - (firstItem.itemIndex || 0);
-        // if item changed
-        if (changedOffsetStart) {
-            // simple recombination
-            toUpdate = recombineByOffset(Math.abs(changedOffsetStart), Object.assign(Object.assign({ positiveDirection: changedOffsetStart > -1 }, dimension), items));
-        }
-    }
-    const maxSizeVirtualSize = getMaxVirtualSize(virtualSize, dimension.realSize, activeItem);
-    // if partial recombination add items if revo-viewport has some space left
-    if (toUpdate) {
-        const extra = addMissingItems(activeItem, realCount, maxSizeVirtualSize, toUpdate, dimension);
-        if (extra.length) {
-            updateMissingAndRange(toUpdate.items, extra, toUpdate);
-        }
-    }
-    // new collection if no items after replacement full replacement
-    if (!toUpdate) {
-        const items = getItems({
-            firstItemStart: activeItem.start,
-            firstItemIndex: activeItem.itemIndex,
-            origSize: dimension.originItemSize,
-            maxSize: maxSizeVirtualSize,
-            maxCount: realCount,
-            sizes: dimension.sizes,
-        });
-        // range now comes from 0 to length - 1
-        toUpdate = {
-            items,
-            start: 0,
-            end: items.length - 1,
-        };
-    }
-    return toUpdate;
-}
-// virtual size can differ based on scroll position if some big items are present
-// scroll can be in the middle of item and virtual size will be larger
-// so we need to exclude this part from virtual size hence it's already passed
-function getMaxVirtualSize(virtualSize, realSize, activeItem) {
-    return Math.min(virtualSize + (activeItem.end - activeItem.start), realSize);
-}
-function updateMissingAndRange(items, missing, range) {
-    items.splice(range.end + 1, 0, ...missing);
-    // update range if start larger after recombination
-    if (range.start >= range.end &&
-        !(range.start === range.end && range.start === 0)) {
-        range.start += missing.length;
-    }
-    range.end += missing.length;
-}
-/**
- * If partial replacement
- * this function adds items if viewport has some space left
- */
-function addMissingItems(firstItem, realCount, virtualSize, existingCollection, dimension) {
-    const lastItem = getLastItem(existingCollection);
-    const items = getItems({
-        sizes: dimension.sizes,
-        firstItemStart: lastItem.end,
-        firstItemIndex: lastItem.itemIndex + 1,
-        origSize: dimension.originItemSize,
-        maxSize: virtualSize - (lastItem.end - firstItem.start),
-        maxCount: realCount,
-    });
-    return items;
-}
-/**
- * Get wiewport items parameters
- * caching position and calculating items count in viewport
- */
-function getItems(opt, currentSize = 0) {
-    const items = [];
-    let index = opt.firstItemIndex;
-    let size = currentSize;
-    // max size or max count
-    while (size <= opt.maxSize && index < opt.maxCount) {
-        const newSize = getItemSize(index, opt.sizes, opt.origSize);
-        items.push({
-            start: opt.firstItemStart + size,
-            end: opt.firstItemStart + size + newSize,
-            itemIndex: index,
-            size: newSize,
-        });
-        size += newSize;
-        index++;
-    }
-    return items;
-}
-function recombineByOffset(offset, data) {
-    var _a, _b;
-    const newItems = [...data.items];
-    const itemsCount = newItems.length;
-    let newRange = {
-        start: data.start,
-        end: data.end,
-    };
-    // if offset out of revo-viewport, makes sense whole redraw
-    if (offset > itemsCount) {
-        return undefined;
-    }
-    // is direction of scroll positive
-    if (data.positiveDirection) {
-        // push item to the end
-        let lastItem = getLastItem(data);
-        let i = newRange.start;
-        const length = i + offset;
-        for (; i < length; i++) {
-            const newIndex = lastItem.itemIndex + 1;
-            const size = getItemSize(newIndex, data.sizes, data.originItemSize);
-            // if item overlapped limit break a loop
-            if (lastItem.end + size > data.realSize) {
-                break;
-            }
-            // new item index to recombine
-            let newEnd = i % itemsCount;
-            // item should always present, we do not create new item, we recombine them
-            if (!newItems[newEnd]) {
-                throw new Error('incorrect index');
-            }
-            // do recombination
-            newItems[newEnd] = lastItem = {
-                start: lastItem.end,
-                end: lastItem.end + size,
-                itemIndex: newIndex,
-                size: size,
-            };
-            // update range
-            newRange.start++;
-            newRange.end = newEnd;
-        }
-        // direction is negative
-    }
-    else {
-        // push item to the start
-        let firstItem = getFirstItem(data);
-        const end = newRange.end;
-        for (let i = 0; i < offset; i++) {
-            const newIndex = ((_a = firstItem === null || firstItem === void 0 ? void 0 : firstItem.itemIndex) !== null && _a !== void 0 ? _a : 0) - 1;
-            const size = getItemSize(newIndex, data.sizes, data.originItemSize);
-            // new item index to recombine
-            let newStart = end - i;
-            newStart = (newStart < 0 ? itemsCount + newStart : newStart) % itemsCount;
-            // item should always present, we do not create new item, we recombine them
-            if (!newItems[newStart]) {
-                console.error('incorrect index');
-                break;
-            }
-            // do recombination
-            const firstItemStart = (_b = firstItem === null || firstItem === void 0 ? void 0 : firstItem.start) !== null && _b !== void 0 ? _b : 0;
-            newItems[newStart] = firstItem = {
-                start: firstItemStart - size,
-                end: firstItemStart,
-                itemIndex: newIndex,
-                size: size,
-            };
-            // update range
-            newRange.start = newStart;
-            newRange.end--;
-        }
-    }
-    const range = {
-        start: (newRange.start < 0 ? itemsCount + newRange.start : newRange.start) %
-            itemsCount,
-        end: (newRange.end < 0 ? itemsCount + newRange.end : newRange.end) %
-            itemsCount,
-    };
-    return Object.assign({ items: newItems }, range);
-}
-function getItemSize(index, sizes, origSize = 0) {
-    if (sizes && sizes[index]) {
-        return sizes[index];
-    }
-    return origSize;
-}
-/**
- * Verify if position is in range of the PositionItem, start and end are included
- */
-function isActiveRange(pos, realSize, first, last) {
-    if (!first || !last) {
-        return false;
-    }
-    // if position is in range of first item
-    // or position is after first item and last item is the last item in real size
-    return ((pos >= first.start && pos <= first.end) ||
-        (pos > first.end && last.end === realSize));
-}
-function isActiveRangeOutsideLastItem(pos, virtualSize, firstItem, lastItem) {
-    var _a;
-    // if no first item, means no items in viewport
-    if (!firstItem) {
-        return false;
-    }
-    return virtualSize + pos > ((_a = lastItem === null || lastItem === void 0 ? void 0 : lastItem.end) !== null && _a !== void 0 ? _a : 0);
-}
-function getFirstItem(s) {
-    return s.items[s.start];
-}
-function getLastItem(s) {
-    return s.items[s.end];
+function getLastItem(s) {
+    return s.items[s.end];
 }
 /**
  * Set items sizes from start index to end
@@ -13371,7 +13065,9 @@ function viewportDataPartition(data, type, slot, fixed) {
         colData: data.colStore,
         viewportCol: data.viewports[data.colType].store,
         viewportRow: data.viewports[type].store,
-        // lastCell is the last real coordinate + 1
+        /**
+         * lastCell is the last real coordinate + 1, saved to selection store
+         */
         lastCell: getLastCell(data, type),
         slot,
         type,
@@ -13419,10 +13115,9 @@ function gatherColumnData(data) {
 }
 class ViewportService {
     constructor(config, contentHeight) {
-        var _a, _b;
-        this.config = config;
-        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
         // ----------- Handle columns ----------- //
+        var _a;
+        this.config = config;
         // Transform data from stores and apply it to different components
         const columns = [];
         let x = 0; // we increase x only if column present
@@ -13463,11 +13158,10 @@ class ViewportService {
             // render per each column data collections vertically
             const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
                 // register selection store for Segment
-                const segmentSelection = this.registerSegment(rgRow.position);
-                segmentSelection.setLastCell(rgRow.lastCell);
+                const segmentSelection = this.registerSegment(rgRow.position, rgRow.lastCell);
                 // register selection store for Row
                 const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, onSetrange: e => {
                         segmentSelection.setRangeArea(e.detail);
                     }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
                         // todo: multi focus
@@ -13483,7 +13177,7 @@ class ViewportService {
         });
         this.columns = columns;
         // ----------- Handle columns end ----------- //
-        (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+        (_a = this.config.scrollingService) === null || _a === void 0 ? void 0 : _a.unregister();
     }
     onColumnResize(type, { detail }, store) {
         var _a;
@@ -13501,8 +13195,10 @@ class ViewportService {
         this.config.resize(changedItems);
     }
     /** register selection store for Segment */
-    registerSegment(position) {
-        return this.config.selectionStoreConnector.register(position);
+    registerSegment(position, lastCell) {
+        const store = this.config.selectionStoreConnector.register(position);
+        store.setLastCell(lastCell);
+        return store;
     }
     /** register selection store for Row */
     registerRow(y, type) {
@@ -13522,14 +13218,10 @@ class ViewportService {
         // y position for selection
         let y = 0;
         return rowTypes.reduce((result, type) => {
-            // filter out empty sources, we still need to return source to keep slot working
-            const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
-            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y }) });
             const partition = viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
             result.push(partition);
-            if (isPresent) {
-                y++;
-            }
+            y++;
             return result;
         }, []);
     }
@@ -13544,162 +13236,432 @@ class ViewportService {
             }
         }
     }
-    /**
-     * Clear current grid focus
-     */
-    clearFocused() {
-        this.config.selectionStoreConnector.clearAll();
-    }
-    clearEdit() {
-        this.config.selectionStoreConnector.setEdit(false);
+    /**
+     * Clear current grid focus
+     */
+    clearFocused() {
+        this.config.selectionStoreConnector.clearAll();
+    }
+    clearEdit() {
+        this.config.selectionStoreConnector.setEdit(false);
+    }
+    /**
+     * Collect focused element data
+     */
+    getFocused() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
+        return {
+            column,
+            model,
+            cell: focused.cell,
+            colType,
+            rowType,
+        };
+    }
+    getStoreCoordinateByType(colType, rowType) {
+        const stores = this.config.selectionStoreConnector.storesByType;
+        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+            return;
+        }
+        return {
+            x: stores[colType],
+            y: stores[rowType],
+        };
+    }
+    setFocus(colType, rowType, start, end) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
+        }
+    }
+    getSelectedRange() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const range = focused.entity.store.get('range');
+        if (!range) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, range), { colType,
+            rowType });
+    }
+    setEdit(rowIndex, colIndex, colType, rowType) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
+        }
+    }
+}
+
+class GridScrollingService {
+    constructor(setViewport) {
+        this.setViewport = setViewport;
+        this.elements = {};
+    }
+    async proxyScroll(e, key) {
+        var _a;
+        let newEventPromise;
+        let event = e;
+        for (let elKey in this.elements) {
+            // skip
+            if (e.dimension === 'rgCol' && elKey === 'headerRow') {
+                continue;
+                // pinned column only
+            }
+            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+                if (elKey === key || !e.delta) {
+                    continue;
+                }
+                for (let el of this.elements[elKey]) {
+                    if (el.changeScroll) {
+                        newEventPromise = el.changeScroll(e);
+                    }
+                }
+            }
+            else {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
+                }
+            }
+        }
+        const newEvent = await newEventPromise;
+        if (newEvent) {
+            event = newEvent;
+        }
+        this.setViewport(event);
+    }
+    /**
+     * Silent scroll update for mobile devices when we have negative scroll top
+     */
+    async scrollSilentService(e, key) {
+        var _a;
+        for (let elKey in this.elements) {
+            // skip same element update
+            if (elKey === key) {
+                continue;
+            }
+            if (columnTypes.includes(key) &&
+                (elKey === 'headerRow' ||
+                    columnTypes.includes(elKey))) {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+                }
+                continue;
+            }
+        }
+    }
+    isPinnedColumn(key) {
+        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+    }
+    registerElements(els) {
+        this.elements = els;
+    }
+    /**
+     * Register new element for farther scroll support
+     * @param el - can be null if holder removed
+     * @param key - element key
+     */
+    registerElement(el, key) {
+        if (!this.elements[key]) {
+            this.elements[key] = [];
+        }
+        // new element added
+        if (el) {
+            this.elements[key].push(el);
+        }
+        else if (this.elements[key]) {
+            // element removed
+            delete this.elements[key];
+        }
+    }
+    unregister() {
+        this.elements = {};
+    }
+}
+
+class SelectionStoreConnector {
+    constructor() {
+        this.stores = {};
+        this.columnStores = {};
+        this.rowStores = {};
+        /**
+         * Helpers for data conversion
+         */
+        this.storesByType = {};
+        this.storesXToType = {};
+        this.storesYToType = {};
+    }
+    get focusedStore() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get('focus');
+                if (focused) {
+                    return {
+                        entity: this.stores[y][x],
+                        cell: focused,
+                        position: {
+                            x: parseInt(x, 10),
+                            y: parseInt(y, 10),
+                        },
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    get edit() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('edit');
+    }
+    get focused() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('focus');
+    }
+    get selectedRange() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
+    }
+    registerColumn(x, type) {
+        if (this.columnStores[x]) {
+            return this.columnStores[x];
+        }
+        this.columnStores[x] = new SelectionStore();
+        // build cross-linking type to position
+        this.storesByType[type] = x;
+        this.storesXToType[x] = type;
+        return this.columnStores[x];
+    }
+    registerRow(y, type) {
+        if (this.rowStores[y]) {
+            return this.rowStores[y];
+        }
+        this.rowStores[y] = new SelectionStore();
+        // build cross linking type to position
+        this.storesByType[type] = y;
+        this.storesYToType[y] = type;
+        return this.rowStores[y];
+    }
+    /**
+     * Cross store proxy, based on multiple dimensions
+     */
+    register({ x, y }) {
+        if (!this.stores[y]) {
+            this.stores[y] = {};
+        }
+        let store = this.stores[y][x];
+        if (store) {
+            // Store already registered. Do not register twice
+            return store;
+        }
+        this.stores[y][x] = store = new SelectionStore();
+        // proxy update, column store trigger only range area
+        store.onChange('range', c => {
+            this.columnStores[x].setRangeArea(c);
+            this.rowStores[y].setRangeArea(c);
+        });
+        // clean up on remove
+        store.store.on('dispose', () => this.destroy(x, y));
+        return store;
+    }
+    destroy(x, y) {
+        var _a, _b;
+        (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
+        delete this.rowStores[y];
+        delete this.columnStores[x];
+        // clear x cross-link
+        if (this.storesXToType[x]) {
+            const type = this.storesXToType[x];
+            delete this.storesXToType[x];
+            delete this.storesByType[type];
+        }
+        // clear y cross-link
+        if (this.storesYToType[y]) {
+            const type = this.storesYToType[y];
+            delete this.storesYToType[y];
+            delete this.storesByType[type];
+        }
+        if (this.stores[y]) {
+            delete this.stores[y][x];
+        }
+        // clear empty rows
+        if (!Object.keys(this.stores[y] || {}).length) {
+            delete this.stores[y];
+        }
+    }
+    setEditByCell(storePos, editCell) {
+        this.focusByCell(storePos, editCell, editCell);
+        this.setEdit('');
     }
     /**
-     * Collect focused element data
+     * Sets the next focus cell before the current one.
+     *
+     * @param focus - The cell to set as the next focus.
      */
-    getFocused() {
-        const focused = this.config.selectionStoreConnector.focusedStore;
-        if (!focused) {
-            return null;
-        }
-        // get column data
-        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
-        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
-        // get row data
-        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
-        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
-        return {
-            column,
-            model,
-            cell: focused.cell,
-            colType,
-            rowType,
-        };
-    }
-    getStoreCoordinateByType(colType, rowType) {
-        const stores = this.config.selectionStoreConnector.storesByType;
-        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+    beforeNextFocusCell(focus) {
+        var _a;
+        // If there is no focused store, return early.
+        if (!this.focusedStore) {
             return;
         }
-        return {
-            x: stores[colType],
-            y: stores[rowType],
-        };
+        // Get the next store based on the current focus and the last cell.
+        const lastCell = this.focusedStore.entity.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, this.focusedStore.position, lastCell);
+        // Set the next focus cell in the store.
+        (_a = next === null || next === void 0 ? void 0 : next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
     }
-    setFocus(colType, rowType, start, end) {
-        var _a;
-        const coordinate = this.getStoreCoordinateByType(colType, rowType);
-        if (coordinate) {
-            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
-        }
+    focusByCell(storePos, start, end) {
+        const store = this.stores[storePos.y][storePos.x];
+        this.focus(store, { focus: start, end });
     }
-    getSelectedRange() {
-        const focused = this.config.selectionStoreConnector.focusedStore;
-        if (!focused) {
+    focus(store, { focus, end }) {
+        const currentStorePointer = this.getCurrentStorePointer(store);
+        if (!currentStorePointer) {
             return null;
         }
-        // get column data
-        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
-        // get row data
-        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
-        const range = focused.entity.store.get('range');
-        if (!range) {
+        // check for the focus in nearby store/viewport
+        const lastCell = store.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, currentStorePointer, lastCell);
+        // if next store present - update
+        if (next === null || next === void 0 ? void 0 : next.store) {
+            const item = Object.assign(Object.assign({}, focus), next.item);
+            this.focus(next.store, { focus: item, end: item });
             return null;
         }
-        return Object.assign(Object.assign({}, range), { colType,
-            rowType });
-    }
-    setEdit(rowIndex, colIndex, colType, rowType) {
-        var _a;
-        const coordinate = this.getStoreCoordinateByType(colType, rowType);
-        if (coordinate) {
-            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
+        if (lastCell) {
+            focus = cropCellToMax(focus, lastCell);
+            end = cropCellToMax(end, lastCell);
         }
+        store.setFocus(focus, end);
+        return focus;
     }
-}
-
-class GridScrollingService {
-    constructor(setViewport) {
-        this.setViewport = setViewport;
-        this.elements = {};
-    }
-    async proxyScroll(e, key) {
-        var _a;
-        let newEventPromise;
-        let event = e;
-        for (let elKey in this.elements) {
-            // skip
-            if (e.dimension === 'rgCol' && elKey === 'headerRow') {
-                continue;
-                // pinned column only
-            }
-            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
-                if (elKey === key || !e.delta) {
-                    continue;
-                }
-                for (let el of this.elements[elKey]) {
-                    if (el.changeScroll) {
-                        newEventPromise = el.changeScroll(e);
-                    }
+    /**
+     * Retrieves the current store pointer based on the active store.
+     * Clears focus from all stores except the active one.
+     */
+    getCurrentStorePointer(store) {
+        let currentStorePointer;
+        // Iterate through all stores
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const s = this.stores[y][x];
+                // Clear focus from stores other than the active one
+                if (s !== store) {
+                    s.clearFocus();
                 }
-            }
-            else {
-                for (let el of this.elements[elKey]) {
-                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
+                else {
+                    // Update the current store pointer with the active store coordinates
+                    currentStorePointer = {
+                        x: parseInt(x, 10),
+                        y: parseInt(y, 10)
+                    };
                 }
             }
         }
-        const newEvent = await newEventPromise;
-        if (newEvent) {
-            event = newEvent;
-        }
-        this.setViewport(event);
+        return currentStorePointer;
     }
     /**
-     * Silent scroll update for mobile devices when we have negative scroll top
+     * Retrieves the next store based on the focus cell and current store pointer.
+     * If the next store exists, returns an object with the next store and the item in the new store.
+     * If the next store does not exist, returns null.
      */
-    async scrollSilentService(e, key) {
-        var _a;
-        for (let elKey in this.elements) {
-            // skip same element update
-            if (elKey === key) {
-                continue;
-            }
-            if (columnTypes.includes(key) &&
-                (elKey === 'headerRow' ||
-                    columnTypes.includes(elKey))) {
-                for (let el of this.elements[elKey]) {
-                    await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+    getNextStore(focus, currentStorePointer, lastCell) {
+        // item in new store
+        const nextItem = nextCell(focus, lastCell);
+        let nextStore;
+        if (nextItem) {
+            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
+                let stores;
+                switch (type) {
+                    case 'x':
+                        // Get the X stores for the current Y coordinate of the current store pointer
+                        stores = this.getXStores(currentStorePointer.y);
+                        break;
+                    case 'y':
+                        // Get the Y stores for the current X coordinate of the current store pointer
+                        stores = this.getYStores(currentStorePointer.x);
+                        break;
                 }
-                continue;
-            }
+                // Get the next store based on the item in the new store
+                if (nextItemCoord >= 0) {
+                    nextStore = stores[++currentStorePointer[type]];
+                }
+                else {
+                    nextStore = stores[--currentStorePointer[type]];
+                    const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+                    if (nextLastCell) {
+                        nextItem[type] = nextLastCell[type] + nextItemCoord;
+                    }
+                }
+            });
+        }
+        // if last cell is empty store is empty, no next store
+        const lastCellNext = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+        if (!(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.x) || !(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.y)) {
+            nextStore = undefined;
         }
+        return {
+            store: nextStore,
+            item: nextItem,
+        };
     }
-    isPinnedColumn(key) {
-        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+    clearAll() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
+            }
+        }
     }
-    registerElements(els) {
-        this.elements = els;
+    setEdit(val) {
+        if (!this.focusedStore) {
+            return;
+        }
+        this.focusedStore.entity.setEdit(val);
     }
     /**
-     * Register new element for farther scroll support
-     * @param el - can be null if holder removed
-     * @param key - element key
+     * Select all cells across all stores
      */
-    registerElement(el, key) {
-        if (!this.elements[key]) {
-            this.elements[key] = [];
-        }
-        // new element added
-        if (el) {
-            this.elements[key].push(el);
-        }
-        else if (this.elements[key]) {
-            // element removed
-            delete this.elements[key];
+    selectAll() {
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const store = this.stores[y][x];
+                if (!store) {
+                    continue;
+                }
+                const lastCell = store.store.get('lastCell');
+                if (lastCell) {
+                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                }
+            }
         }
     }
-    unregister() {
-        this.elements = {};
+    getXStores(y) {
+        return this.stores[y];
+    }
+    getYStores(x) {
+        const stores = {};
+        for (let i in this.stores) {
+            stores[i] = this.stores[i][x];
+        }
+        return stores;
     }
 }
 
@@ -16619,7 +16581,7 @@ const HeaderGroupRenderer = (p) => {
     return (hAsync(HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps, additionalData: p.additionalData }));
 };
 
-const revogrHeaderStyleCss = "@charset \"UTF-8\";revogr-header{position:relative;z-index:5;display:block}revogr-header .rgHeaderCell{display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell i.asc:after,revogr-header .rgHeaderCell i.desc:after{font-size:13px}revogr-header .rgHeaderCell i.asc:after{content:\"↑\"}revogr-header .rgHeaderCell i.desc:after{content:\"↓\"}revogr-header .rgHeaderCell,revogr-header .grouped-cell{position:absolute;box-sizing:border-box;height:100%;z-index:1}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}";
+const revogrHeaderStyleCss = "@charset \"UTF-8\";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell i.asc:after,revogr-header .rgHeaderCell i.desc:after{font-size:13px}revogr-header .rgHeaderCell i.asc:after{content:\"↑\"}revogr-header .rgHeaderCell i.desc:after{content:\"↓\"}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}";
 
 class RevogrHeaderComponent {
     constructor(hostRef) {