@revolist/revogrid 4.9.1 → 4.9.3

package/hydrate/index.js

@@ -2311,8 +2311,10 @@ class Clipboard {
         }
         const clipboardData = this.getData(e);
         const isHTML = ((clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.types.indexOf('text/html')) || -1) > -1;
-        const data = isHTML ? clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text/html') : clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text');
-        const dataText = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text');
+        const data = (isHTML
+            ? clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text/html')
+            : clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text')) || '';
+        const dataText = (clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text')) || '';
         const beforePaste = this.beforePaste.emit({
             raw: data,
             dataText,
@@ -2421,7 +2423,8 @@ class Clipboard {
         return result;
     }
     getData(e) {
-        return e.clipboardData || (window === null || window === void 0 ? void 0 : window.clipboardData);
+        return (e.clipboardData ||
+            (window === null || window === void 0 ? void 0 : window.clipboardData));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -6829,11 +6832,16 @@ function gatherTrimmedItems(trimmedItems) {
     return trimmed;
 }
 
-/** Set stores data */
+/**
+ * Sets the given data on the specified store.
+ *
+ * @param store - The store to set data on.
+ * @param data - The data to set on the store.
+ */
 function setStore(store, data) {
-    for (let key in data) {
-        store.set(key, data[key]);
-    }
+    Object.entries(data).forEach(([key, value]) => {
+        store.set(key, value);
+    });
 }
 
 /**
@@ -7647,7 +7655,8 @@ class SelectionStore {
         setStore(this.store, { range, edit: null, tempRange: null });
     }
     setRange(start, end) {
-        this.setRangeArea(getRange(start, end));
+        const range = getRange(start, end);
+        this.setRangeArea(range);
     }
     setLastCell(lastCell) {
         setStore(this.store, { lastCell });
@@ -7746,7 +7755,7 @@ class SelectionStoreConnector {
             return this.columnStores[x];
         }
         this.columnStores[x] = new SelectionStore();
-        // build cross linking type to position
+        // build cross-linking type to position
         this.storesByType[type] = x;
         this.storesXToType[x] = type;
         return this.columnStores[x];
@@ -7797,13 +7806,13 @@ class SelectionStoreConnector {
         (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
         delete this.rowStores[y];
         delete this.columnStores[x];
-        // clear x cross link
+        // 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
+        // clear y cross-link
         if (this.storesYToType[y]) {
             const type = this.storesYToType[y];
             delete this.storesYToType[y];
@@ -7833,9 +7842,10 @@ class SelectionStoreConnector {
             return;
         }
         // Get the next store based on the current focus and the last cell.
-        const next = this.getNextStore(focus, this.focusedStore.position, this.focusedStore.entity.store.get('lastCell'));
+        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.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+        (_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));
     }
     focusByCell(storePos, start, end) {
         const store = this.stores[storePos.y][storePos.x];
@@ -7848,15 +7858,17 @@ class SelectionStoreConnector {
         }
         // check for the focus in nearby store/viewport
         const lastCell = store.store.get('lastCell');
-        const next = this.getNextStore(focus, currentStorePointer, 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;
         }
-        focus = cropCellToMax(focus, lastCell);
-        end = cropCellToMax(end, lastCell);
+        if (lastCell) {
+            focus = cropCellToMax(focus, lastCell);
+            end = cropCellToMax(end, lastCell);
+        }
         store.setFocus(focus, end);
         return focus;
     }
@@ -7893,10 +7905,9 @@ class SelectionStoreConnector {
     getNextStore(focus, currentStorePointer, lastCell) {
         // item in new store
         const nextItem = nextCell(focus, lastCell);
-        let nextStore = null;
+        let nextStore;
         if (nextItem) {
-            for (let i in nextItem) {
-                let type = i;
+            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
                 let stores;
                 switch (type) {
                     case 'x':
@@ -7906,20 +7917,20 @@ class SelectionStoreConnector {
                     case 'y':
                         // Get the Y stores for the current X coordinate of the current store pointer
                         stores = this.getYStores(currentStorePointer.x);
-                        stores = this.getYStores(currentStorePointer.x);
                         break;
                 }
-                if (nextItem[type] >= 0) {
+                // 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] + nextItem[type];
+                        nextItem[type] = nextLastCell[type] + nextItemCoord;
                     }
                 }
-            }
+            });
         }
         return {
             store: nextStore,
@@ -7951,7 +7962,9 @@ class SelectionStoreConnector {
                     continue;
                 }
                 const lastCell = store.store.get('lastCell');
-                store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                if (lastCell) {
+                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                }
             }
         }
     }
@@ -7990,21 +8003,17 @@ function nextCell(cell, lastCell) {
     return null;
 }
 function cropCellToMax(cell, lastCell) {
-    const newCell = Object.assign({}, cell);
-    let types = ['x', 'y'];
-    // previous item check
-    for (let t of types) {
-        if (cell[t] < 0) {
-            newCell[t] = 0;
+    const croppedCell = Object.assign({}, cell);
+    const cellCoordinates = ['x', 'y'];
+    for (const coordinate of cellCoordinates) {
+        if (cell[coordinate] < 0) {
+            croppedCell[coordinate] = 0;
         }
-    }
-    // next item check
-    for (let t of types) {
-        if (cell[t] >= lastCell[t]) {
-            newCell[t] = lastCell[t] - 1;
+        else if (cell[coordinate] >= lastCell[coordinate]) {
+            croppedCell[coordinate] = lastCell[coordinate] - 1;
         }
     }
-    return newCell;
+    return croppedCell;
 }
 function getRange(start, end) {
     return start && end
@@ -8120,6 +8129,7 @@ function getItems(opt, currentSize = 0) {
     return items;
 }
 function recombineByOffset(offset, data) {
+    var _a, _b;
     const newItems = [...data.items];
     const itemsCount = newItems.length;
     let newRange = {
@@ -8128,7 +8138,7 @@ function recombineByOffset(offset, data) {
     };
     // if offset out of revo-viewport, makes sense whole redraw
     if (offset > itemsCount) {
-        return null;
+        return undefined;
     }
     // is direction of scroll positive
     if (data.positiveDirection) {
@@ -8167,19 +8177,21 @@ function recombineByOffset(offset, data) {
         let firstItem = getFirstItem(data);
         const end = newRange.end;
         for (let i = 0; i < offset; i++) {
-            const newIndex = firstItem.itemIndex - 1;
+            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]) {
-                throw new Error('incorrect index');
+                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: firstItem.start - size,
-                end: firstItem.start,
+                start: firstItemStart - size,
+                end: firstItemStart,
                 itemIndex: newIndex,
                 size: size,
             };
@@ -8215,11 +8227,12 @@ function isActiveRange(pos, realSize, first, last) {
         (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 > (lastItem === null || lastItem === void 0 ? void 0 : lastItem.end);
+    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];
@@ -8362,7 +8375,7 @@ class ViewportStore {
         }
         else if (isActiveRangeOutsideLastItem(pos, virtualSize, firstItem, lastItem)) {
             const items = [...allItems.items];
-            // check is any item missing for full fill content
+            // check is any item missing for fulfill content
             const missing = addMissingItems(firstItem, this.store.get('realCount'), virtualSize + pos - firstItem.start, allItems, {
                 sizes: dimension.sizes,
                 originItemSize: dimension.originItemSize,
@@ -8741,7 +8754,7 @@ function measureEqualDepth(groupA, groupB) {
 }
 function getParsedGroup(id) {
     const parseGroup = JSON.parse(id);
-    // extra precaution and type safe guard
+    // extra precaution and type safeguard
     if (!Array.isArray(parseGroup)) {
         return null;
     }
@@ -8857,7 +8870,7 @@ class ColumnService {
             const data = this.rowDataModel(r, c);
             return readOnly(data);
         }
-        return readOnly;
+        return !!readOnly;
     }
     mergeProperties(r, c, defaultProps, model, extraPropsFunc) {
         const cellClass = {
@@ -9240,6 +9253,14 @@ function getPropertyFromEvent(e, prop, focusClass // for touch events
     return e[prop] || 0;
 }
 
+function collectModelsOfRange(data, store) {
+    const models = {};
+    for (let i in data) {
+        const rowIndex = parseInt(i, 10);
+        models[rowIndex] = getSourceItem(store, rowIndex);
+    }
+    return models;
+}
 function getFocusCellBasedOnEvent(e, data) {
     // If event default is prevented, return
     if (e.defaultPrevented) {
@@ -9290,18 +9311,18 @@ function getCurrentCell({ x, y }, { el, rows, cols }) {
     return { x: rgCol.itemIndex, y: rgRow.itemIndex };
 }
 function getCoordinate(range, focus, changes, isMulti = false) {
-    const updateCoordinate = (c) => {
+    const updateCoordinate = (c, pos = 0) => {
         const start = { x: range.x, y: range.y };
         const end = isMulti ? { x: range.x1, y: range.y1 } : start;
         const point = end[c] > focus[c] ? end : start;
-        point[c] += changes[c];
+        point[c] += pos;
         return { start, end };
     };
     if (changes.x) {
-        return updateCoordinate('x');
+        return updateCoordinate('x', changes['x']);
     }
     if (changes.y) {
-        return updateCoordinate('y');
+        return updateCoordinate('y', changes['y']);
     }
     return null;
 }
@@ -9705,8 +9726,9 @@ class AutoFillService {
             this.sv.setTempRange(null);
         }
         else {
+            const area = getRange(this.autoFillInitial, this.autoFillLast);
             this.sv.setTempRange({
-                area: getRange(this.autoFillInitial, this.autoFillLast),
+                area,
                 type: this.autoFillType,
             });
         }
@@ -9741,7 +9763,7 @@ class AutoFillService {
                         range,
                     });
                     // If data apply was not prevented, apply new range
-                    if (!stopApply) {
+                    if (!stopApply && oldRange) {
                         this.applyRangeWithData(newRange, oldRange);
                     }
                     else {
@@ -9767,28 +9789,26 @@ class AutoFillService {
         this.autoFillLast = null;
         this.autoFillStart = null;
     }
-    /** Trigger range apply events and handle responses */
+    /**
+     * Trigger range apply events and handle responses
+     */
     onRangeApply(data, range) {
-        const models = {};
-        for (let rowIndex in data) {
-            models[rowIndex] = getSourceItem(this.sv.dataStore, parseInt(rowIndex, 10));
-        }
         this.sv.rangeDataApply({
             data,
-            models,
+            models: collectModelsOfRange(data, this.sv.dataStore),
             type: this.sv.dataStore.get('type'),
         });
         this.sv.setRange(range);
     }
     /** Apply range and copy data during range application */
-    applyRangeWithData(newRange, oldRange) {
+    applyRangeWithData(newRange, rangeToCopy) {
         const rangeData = {
             type: this.sv.dataStore.get('type'),
             colType: this.sv.columnService.type,
             newData: {},
             mapping: {},
             newRange,
-            oldRange,
+            oldRange: rangeToCopy,
         };
         const { mapping, changed } = this.sv.columnService.getRangeData(rangeData, this.sv.columnService.columns);
         rangeData.newData = changed;
@@ -9855,7 +9875,6 @@ class OverlaySelection {
         this.beforeCellSave = createEvent(this, "beforecellsave", 7);
         this.keyboardService = null;
         this.autoFillService = null;
-        this.revogrEdit = null;
         this.unsubscribeSelectionStore = [];
         this.readonly = undefined;
         this.range = undefined;
@@ -9875,19 +9894,21 @@ class OverlaySelection {
     // #endregion
     // #region Listeners
     onMouseMove(e) {
+        var _a;
         if (this.selectionStore.get('focus')) {
-            this.autoFillService.selectionMouseMove(e);
+            (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionMouseMove(e);
         }
     }
     /**
-     * Action finished inside of the document.
+     * Action finished inside the document.
      * Pointer left document, clear any active operation.
      */
     onMouseUp() {
-        // Clear auto fill selection
+        var _a;
+        // Clear autofill selection
         // when pointer left document,
         // clear any active operation.
-        this.autoFillService.clearAutoFillSelection(this.selectionStore.get('focus'), this.selectionStore.get('range'));
+        (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.clearAutoFillSelection(this.selectionStore.get('focus'), this.selectionStore.get('range'));
     }
     /**
      * Row drag started.
@@ -9931,10 +9952,10 @@ class OverlaySelection {
         // clear subscriptions
         this.unsubscribeSelectionStore.forEach(v => v());
         this.unsubscribeSelectionStore.length = 0;
-        this.unsubscribeSelectionStore.push(s.onChange('nextFocus', (v) => this.doFocus(v, v)));
+        this.unsubscribeSelectionStore.push(s.onChange('nextFocus', (v) => v && this.doFocus(v, v)));
         this.keyboardService = new KeyboardService({
             selectionStore: s,
-            range: r => this.triggerRangeEvent(r),
+            range: r => !!r && this.triggerRangeEvent(r),
             focus: (f, changes, focusNextViewport) => {
                 if (focusNextViewport) {
                     this.beforeNextViewportFocus.emit(f);
@@ -9951,7 +9972,8 @@ class OverlaySelection {
                 this.doEdit(val);
             },
             cancel: async () => {
-                await this.revogrEdit.cancelChanges();
+                var _a;
+                await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
                 this.closeEdit();
             },
             clearCell: () => !this.readonly && this.clearCell(),
@@ -9973,7 +9995,7 @@ class OverlaySelection {
             selectionChanged: e => this.selectionChange.emit(e),
             rangeCopy: e => this.beforeRangeCopyApply.emit(e),
             rangeDataApply: e => this.rangeEditApply.emit(e),
-            setRange: e => this.triggerRangeEvent(e),
+            setRange: e => !!e && this.triggerRangeEvent(e),
             getData: () => this.getData(),
         });
     }
@@ -10035,6 +10057,7 @@ class OverlaySelection {
             } }));
     }
     render() {
+        var _a;
         const nodes = [];
         const editCell = this.renderEditor();
         // Editor
@@ -10054,14 +10077,14 @@ class OverlaySelection {
             }
             // Autofill
             if (focus && !this.readonly && this.range) {
-                nodes.push(this.autoFillService.renderAutofill(range, focus));
+                nodes.push((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.renderAutofill(range, focus));
             }
             // Order
             if (this.canDrag) {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: '81dee4cfcce410cefb2bd9ff2661261472fc3a75', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '6ac75c388ae3fbc5539a27c3acd58178dd53d1af', name: "data" })));
+        return (hAsync(Host, { key: '0767a5d015d0c8fe99444ef26b136a3a11792724', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '8551244579316e0d4ab61defa1c1c9bc1011f446', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -10116,6 +10139,7 @@ class OverlaySelection {
      * Handle mouse down event on Host element
      */
     onElementMouseDown(e, touch = false) {
+        var _a;
         // Get the target element from the event object
         const targetElement = e.target;
         // Ignore focus if clicked input
@@ -10132,7 +10156,7 @@ class OverlaySelection {
         this.focus(focusCell, this.range && e.shiftKey);
         // Initiate autofill selection
         if (this.range) {
-            this.autoFillService.selectionStart(targetElement, this.getData());
+            targetElement && ((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionStart(targetElement, this.getData()));
             // Prevent default behavior for mouse events,
             // but only if target element is not a mobile input
             if (!touch) {
@@ -10152,18 +10176,21 @@ class OverlaySelection {
         var _a;
         if (this.canEdit()) {
             const focus = this.selectionStore.get('focus');
+            if (!focus) {
+                return;
+            }
             const data = this.columnService.getSaveData(focus.y, focus.x);
             (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
         }
     }
     /**
      * Close editor event triggered
-     * @param details - if requires focus next
+     * @param details - if it requires focus next
      */
-    closeEdit(e) {
+    async closeEdit(e) {
         this.cancelEdit.emit();
         if (e === null || e === void 0 ? void 0 : e.detail) {
-            this.focusNext();
+            await this.focusNext();
         }
     }
     /**
@@ -10183,6 +10210,7 @@ class OverlaySelection {
         return range;
     }
     onCopy(e) {
+        var _a;
         const range = this.getRegion();
         const canCopyEvent = this.beforeCopyRegion.emit(range);
         if (canCopyEvent.defaultPrevented) {
@@ -10198,38 +10226,45 @@ class OverlaySelection {
                 rangeData = event.detail.data;
             }
         }
-        this.clipboard.doCopy(e, rangeData);
+        (_a = this.clipboard) === null || _a === void 0 ? void 0 : _a.doCopy(e, rangeData);
         return true;
     }
     onPaste(data) {
+        var _a;
         const focus = this.selectionStore.get('focus');
         const isEditing = this.selectionStore.get('edit') !== null;
         if (!focus || isEditing) {
             return;
         }
         let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
-        const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, range }, this.types));
+        const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
         if (canPaste) {
             return;
         }
-        this.autoFillService.onRangeApply(changed, range);
+        (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range);
     }
     async focusNext() {
-        const canFocus = await this.keyboardService.keyChangeSelection(new KeyboardEvent('keydown', {
+        var _a;
+        const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
             code: codesLetter.ARROW_DOWN,
-        }), this.range);
+        }), this.range));
         if (!canFocus) {
             this.closeEdit();
         }
     }
     clearCell() {
-        if (this.selectionStore.get('range') &&
-            !isRangeSingleCell(this.selectionStore.get('range'))) {
-            const data = this.columnService.getRangeStaticData(this.selectionStore.get('range'), '');
-            this.autoFillService.onRangeApply(data, this.selectionStore.get('range'));
+        var _a;
+        const range = this.selectionStore.get('range');
+        if (range &&
+            !isRangeSingleCell(range)) {
+            const data = this.columnService.getRangeStaticData(range, '');
+            (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(data, range);
         }
         else if (this.canEdit()) {
             const focused = this.selectionStore.get('focus');
+            if (!focused) {
+                return;
+            }
             const cell = this.columnService.getSaveData(focused.y, focused.x);
             this.cellEdit({
                 rgRow: focused.y,
@@ -10266,7 +10301,10 @@ class OverlaySelection {
         const end = cell;
         const start = this.selectionStore.get('focus');
         if (isRangeEdit && start) {
-            return this.triggerRangeEvent(getRange(start, end));
+            const range = getRange(start, end);
+            if (range) {
+                return this.triggerRangeEvent(range);
+            }
         }
         return this.doFocus(cell, end);
     }
@@ -10327,6 +10365,7 @@ class TextEditor {
     constructor(column, saveCallback) {
         this.column = column;
         this.saveCallback = saveCallback;
+        this.editInput = null;
         this.element = null;
         this.editCell = undefined;
     }
@@ -10357,7 +10396,8 @@ class TextEditor {
      * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
      */
     beforeDisconnect() {
-        this.editInput.blur();
+        var _a;
+        (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.blur();
     }
     /**
      * Get value from input
@@ -10460,8 +10500,8 @@ class RevoEdit {
         }
     }
     componentWillRender() {
-        // Active editor present
-        if (this.currentEditor) {
+        // Active editor present and not yet closed.
+        if (this.currentEditor || !this.column) {
             return;
         }
         this.preventSaveOnClose = false;
@@ -11142,8 +11182,9 @@ class DimensionProvider {
     }
     /**
      * Sets dimension data and view port coordinate
-     * @param items - data/column items
+     * @param itemCount
      * @param type - dimension type
+     * @param noVirtual - disable virtual data
      */
     setData(itemCount, type, noVirtual = false) {
         this.setItemCount(itemCount, type);
@@ -11297,7 +11338,7 @@ class ThemeService {
         }
     }
     static getTheme(theme) {
-        if (allowedThemes.indexOf(theme) > -1) {
+        if (theme && allowedThemes.indexOf(theme) > -1) {
             return theme;
         }
         return DEFAULT_THEME;
@@ -12153,10 +12194,6 @@ class SortingPlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.revogrid = revogrid;
-        // sorting order per column
-        this.sorting = null;
-        // sorting function per column, multiple columns sorting supported
-        this.sortingFunc = null;
         this.sortingPromise = null;
         this.postponeSort = debounce_1(async (order, comparison) => this.runSorting(order, comparison), 50);
         const beforeanysource = async ({ detail: { type }, }) => {
@@ -12170,7 +12207,7 @@ class SortingPlugin extends BasePlugin {
             }
         };
         const aftercolumnsset = async ({ detail: { order }, }) => {
-            const columns = await this.revogrid.getColumns();
+            const columns = (await this.revogrid.getColumns());
             const sortingFunc = {};
             for (let prop in order) {
                 const cmp = this.getComparer(ColumnDataProvider.getColumnByProp(columns, prop), order[prop]);
@@ -12216,6 +12253,7 @@ class SortingPlugin extends BasePlugin {
      * If additive - add to existing sorting, multiple columns can be sorted
      */
     async headerclick(column, index, additive) {
+        var _a, _b;
         let order = this.getNextOrder(column.order);
         const beforeEvent = this.emit('beforesorting', { column, order, additive });
         if (beforeEvent.defaultPrevented) {
@@ -12256,8 +12294,8 @@ class SortingPlugin extends BasePlugin {
                 this.sortingFunc = { [column.prop]: cmp };
             }
             else {
-                delete this.sorting[column.prop];
-                delete this.sortingFunc[column.prop];
+                (_a = this.sorting) === null || _a === void 0 ? true : delete _a[column.prop];
+                (_b = this.sortingFunc) === null || _b === void 0 ? true : delete _b[column.prop];
             }
         }
         this.startSorting(this.sorting, this.sortingFunc);
@@ -12273,8 +12311,8 @@ class SortingPlugin extends BasePlugin {
     async sort(sorting, sortingFunc, types = ['rgRow', 'rowPinStart', 'rowPinEnd']) {
         // if no sorting - reset
         if (!size_1(sorting)) {
-            this.sorting = null;
-            this.sortingFunc = null;
+            this.sorting = undefined;
+            this.sortingFunc = undefined;
             for (let type of types) {
                 const store = await this.revogrid.getSourceStore(type);
                 // row data
@@ -12319,10 +12357,10 @@ class SortingPlugin extends BasePlugin {
             return -1 * cmp(prop, a, b);
         };
     }
-    sortIndexByItems(indexes, source, sortingFunc) {
+    sortIndexByItems(indexes, source, sortingFunc = {}) {
         // if no sorting - return unsorted indexes
         if (Object.entries(sortingFunc).length === 0) {
-            // Unsort indexes
+            // Unsorted indexes
             return [...Array(indexes.length).keys()];
         }
         //
@@ -12338,7 +12376,7 @@ class SortingPlugin extends BasePlugin {
                  * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
                  * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
                  */
-                const sorted = cmp(prop, itemA, itemB);
+                const sorted = cmp === null || cmp === void 0 ? void 0 : cmp(prop, itemA, itemB);
                 if (sorted) {
                     return sorted;
                 }
@@ -12588,13 +12626,13 @@ class ExportFilePlugin extends BasePlugin {
     /** Export file */
     async exportFile(options = {}, t = ExportTypes.csv) {
         const formatter = this.formatter(t, options);
-        const blob = await this.getBlob(formatter);
         // url
         const URL = window.URL || window.webkitURL;
         const a = document.createElement('a');
         const { filename, fileKind } = formatter.options;
         const name = `${filename}.${fileKind}`;
-        const url = URL.createObjectURL(blob);
+        const blob = await this.getBlob(formatter);
+        const url = blob ? URL.createObjectURL(blob) : '';
         a.style.display = 'none';
         a.setAttribute('href', url);
         a.setAttribute('download', name);
@@ -13019,7 +13057,7 @@ class GroupingRowPlugin extends BasePlugin {
         const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
         // setup source
         this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
-        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes, oldNewIndexMap);
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap);
     }
     /**
      * Apply grouping on data set
@@ -13085,7 +13123,7 @@ class GroupingRowPlugin extends BasePlugin {
         this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
         this.updateTrimmed(undefined, undefined, oldNewIndexes);
     }
-    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap, secondLevelMap) {
+    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap = {}, secondLevelMap) {
         // map previously trimmed data
         const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.trimmed, firstLevelMap, secondLevelMap);
         for (let type in trimemedOptionsToUpgrade) {
@@ -13123,6 +13161,25 @@ function getLastCell(data, rowType) {
         y: lastVisibleRowCount,
     };
 }
+function viewportDataPartition(data, type, slot, fixed) {
+    return {
+        colData: data.colStore,
+        viewportCol: data.viewports[data.colType].store,
+        viewportRow: data.viewports[type].store,
+        // lastCell is the last real coordinate + 1
+        lastCell: getLastCell(data, type),
+        slot,
+        type,
+        canDrag: !fixed,
+        position: data.position,
+        dataStore: data.rowStores[type].store,
+        dimensionCol: data.dimensions[data.colType].store,
+        dimensionRow: data.dimensions[type].store,
+        style: fixed
+            ? { height: `${data.dimensions[type].store.get('realSize')}px` }
+            : undefined,
+    };
+}
 
 /** Collect Column data */
 function gatherColumnData(data) {
@@ -13205,11 +13262,9 @@ class ViewportService {
                 segmentSelection.setLastCell(rgRow.lastCell);
                 // register selection store for Row
                 const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-                const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
                         segmentSelection.setRangeArea(e.detail);
-                    }, onSettemprange: e => {
-                        segmentSelection.setTempArea(e.detail);
-                    }, onFocuscell: e => {
+                    }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
                         // todo: multi focus
                         segmentSelection.clearFocus();
                         config.selectionStoreConnector.focus(segmentSelection, e.detail);
@@ -13259,43 +13314,27 @@ class ViewportService {
         };
         // y position for selection
         let y = 0;
-        return rowTypes.reduce((r, type) => {
+        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 }) });
-            r.push(this.dataPartition(rgCol, type, slots[type], type !== 'rgRow'));
+            const partition = viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
+            result.push(partition);
             if (isPresent) {
                 y++;
             }
-            return r;
+            return result;
         }, []);
     }
-    dataPartition(data, type, slot, fixed) {
-        return {
-            colData: data.colStore,
-            viewportCol: data.viewports[data.colType].store,
-            viewportRow: data.viewports[type].store,
-            // lastCell is the last real coordinate + 1
-            lastCell: getLastCell(data, type),
-            slot,
-            type,
-            canDrag: !fixed,
-            position: data.position,
-            dataStore: data.rowStores[type].store,
-            dimensionCol: data.dimensions[data.colType].store,
-            dimensionRow: data.dimensions[type].store,
-            style: fixed
-                ? { height: `${data.dimensions[type].store.get('realSize')}px` }
-                : undefined,
-        };
-    }
     scrollToCell(cell) {
         for (let key in cell) {
             const coordinate = cell[key];
-            this.config.scrollingService.proxyScroll({
-                dimension: key === 'x' ? 'rgCol' : 'rgRow',
-                coordinate,
-            });
+            if (typeof coordinate === 'number') {
+                this.config.scrollingService.proxyScroll({
+                    dimension: key === 'x' ? 'rgCol' : 'rgRow',
+                    coordinate,
+                });
+            }
         }
     }
     /**
@@ -13331,22 +13370,30 @@ class ViewportService {
     }
     getStoreCoordinateByType(colType, rowType) {
         const stores = this.config.selectionStoreConnector.storesByType;
-        const storeCoordinate = {
+        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+            return;
+        }
+        return {
             x: stores[colType],
             y: stores[rowType],
         };
-        return storeCoordinate;
     }
     setFocus(colType, rowType, start, end) {
         var _a;
-        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(this.getStoreCoordinateByType(colType, rowType), start, end);
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
+        }
     }
     getSelectedRange() {
         return this.config.selectionStoreConnector.selectedRange;
     }
     setEdit(rowIndex, colIndex, colType, rowType) {
         var _a;
-        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(this.getStoreCoordinateByType(colType, rowType), { x: colIndex, y: rowIndex });
+        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 });
+        }
     }
 }
 
@@ -13357,7 +13404,7 @@ class GridScrollingService {
     }
     async proxyScroll(e, key) {
         var _a;
-        let newEvent;
+        let newEventPromise;
         let event = e;
         for (let elKey in this.elements) {
             // skip
@@ -13371,7 +13418,7 @@ class GridScrollingService {
                 }
                 for (let el of this.elements[elKey]) {
                     if (el.changeScroll) {
-                        newEvent = el.changeScroll(e);
+                        newEventPromise = el.changeScroll(e);
                     }
                 }
             }
@@ -13381,8 +13428,9 @@ class GridScrollingService {
                 }
             }
         }
+        const newEvent = await newEventPromise;
         if (newEvent) {
-            event = await newEvent;
+            event = newEvent;
         }
         this.setViewport(event);
     }
@@ -13582,14 +13630,15 @@ function isStretchPlugin(plugin) {
 const rowDefinitionByType = (newVal = []) => {
     const result = {};
     for (const v of newVal) {
-        if (!result[v.type]) {
-            result[v.type] = {};
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = {};
         }
         if (v.size) {
-            if (!result[v.type].sizes) {
-                result[v.type].sizes = {};
+            if (!rowDefs.sizes) {
+                rowDefs.sizes = {};
             }
-            result[v.type].sizes[v.index] = v.size;
+            rowDefs.sizes[v.index] = v.size;
         }
     }
     return result;
@@ -13597,11 +13646,12 @@ const rowDefinitionByType = (newVal = []) => {
 const rowDefinitionRemoveByType = (oldVal = []) => {
     const result = {};
     for (const v of oldVal) {
-        if (!result[v.type]) {
-            result[v.type] = [];
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = [];
         }
         if (v.size) {
-            result[v.type].push(v.index);
+            rowDefs.push(v.index);
         }
     }
     return result;
@@ -13721,6 +13771,7 @@ const defaultProps = (props) => {
 };
 class ResizeDirective {
     constructor(initialProps, $event) {
+        var _a, _b;
         this.initialProps = initialProps;
         this.$event = $event;
         this.mouseX = 0;
@@ -13735,8 +13786,8 @@ class ResizeDirective {
         this.mouseUpFunc = this.handleUp.bind(this);
         this.minW = this.props.minWidth;
         this.minH = this.props.minHeight;
-        this.maxW = this.props.maxWidth;
-        this.maxH = this.props.maxHeight;
+        this.maxW = (_a = this.props.maxWidth) !== null && _a !== void 0 ? _a : 0;
+        this.maxH = (_b = this.props.maxHeight) !== null && _b !== void 0 ? _b : 0;
         this.parent = { width: 0, height: 0 };
         this.resizeState = 0;
     }
@@ -13871,13 +13922,14 @@ class ResizeDirective {
         this.unbindMove();
     }
     setInitials({ clientX, clientY }, target) {
+        var _a, _b, _c, _d;
         const computedStyle = getComputedStyle(this.$el);
         this.$el.classList.add('active');
         this.activeResizer = target;
         if (this.disableCalcMap & DISABLE_MASK.w) {
             this.mouseX = clientX;
             this.width = this.$el.clientWidth;
-            this.parent.width = this.$el.parentElement.clientWidth;
+            this.parent.width = (_b = (_a = this.$el.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
             // min width
             const minPaddingX = parseFloat(computedStyle.paddingLeft) +
                 parseFloat(computedStyle.paddingRight);
@@ -13890,7 +13942,7 @@ class ResizeDirective {
         if (this.disableCalcMap & DISABLE_MASK.h) {
             this.mouseY = clientY;
             this.height = this.$el.clientHeight;
-            this.parent.height = this.$el.parentElement.clientHeight;
+            this.parent.height = (_d = (_c = this.$el.parentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
             // min height
             const minPaddingY = parseFloat(computedStyle.paddingTop) +
                 parseFloat(computedStyle.paddingBottom);
@@ -13908,7 +13960,7 @@ class ResizeDirective {
             this.activeResizer.removeAttribute('style');
         }
         this.$el.classList.remove('active');
-        this.activeResizer = null;
+        this.activeResizer = undefined;
     }
     bindMove() {
         document.documentElement.addEventListener('mouseup', this.mouseUpFunc, true);
@@ -13957,7 +14009,7 @@ const ResizableElement = (props, children) => {
             }
         }
     }
-    return (hAsync("div", Object.assign({}, props, { ref: (e) => directive === null || directive === void 0 ? void 0 : directive.set(e) }),
+    return (hAsync("div", Object.assign({}, props, { ref: (e) => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }),
         children,
         resizeEls));
 };
@@ -14086,7 +14138,7 @@ class ColumnPlugin extends BasePlugin {
     }
     onMouseUp(e) {
         // apply new positions
-        if (this.dragData) {
+        if (this.dragData && this.staticDragData) {
             let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
             if (relativePos < 0) {
                 relativePos = 0;
@@ -14203,9 +14255,6 @@ class RevoGridComponent {
         this.aftergridinit = createEvent(this, "aftergridinit", 7);
         this.additionaldatachanged = createEvent(this, "additionaldatachanged", 7);
         this.afterthemechanged = createEvent(this, "afterthemechanged", 7);
-        // #endregion
-        // #region Listeners outside scope
-        this.clickTrackForFocusClear = null;
         this.extraElements = [];
         this.viewport = null;
         this.isInited = false;
@@ -14377,6 +14426,7 @@ class RevoGridComponent {
      * @param column - full column details to update
      * @param index - virtual column index
      * @param order - order to apply
+     * @param additive - if false will replace current order
      */
     async updateColumnSorting(column, index, order, additive) {
         return this.columnProvider.updateColumnSorting(column, index, order, additive);
@@ -14415,8 +14465,8 @@ class RevoGridComponent {
      * Get the currently focused cell.
      */
     async getFocused() {
-        var _a;
-        return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused()) !== null && _b !== void 0 ? _b : null;
     }
     /**
      * Get size of content
@@ -14430,8 +14480,8 @@ class RevoGridComponent {
      * Get the currently selected Range.
      */
     async getSelectedRange() {
-        var _a;
-        return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange();
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange()) !== null && _b !== void 0 ? _b : null;
     }
     mousedownHandle(event) {
         const screenX = getPropertyFromEvent(event, 'screenX');
@@ -14444,7 +14494,8 @@ class RevoGridComponent {
     /**
      * To keep your elements from losing focus use mouseup/touchend e.preventDefault();
      */
-    mouseupHandle(event) {
+    async mouseupHandle(event) {
+        var _a;
         const screenX = getPropertyFromEvent(event, 'screenX');
         const screenY = getPropertyFromEvent(event, 'screenY');
         if (screenX === null || screenY === null) {
@@ -14455,16 +14506,16 @@ class RevoGridComponent {
         }
         const pos = screenX + screenY;
         // detect if mousemove then do nothing
-        if (Math.abs(this.clickTrackForFocusClear - pos) > 10) {
+        if (Math.abs(((_a = this.clickTrackForFocusClear) !== null && _a !== void 0 ? _a : 0) - pos) > 10) {
             return;
         }
-        // Check if action finished inside of the document
-        // if event prevented or it is current table don't clear focus
+        // Check if action finished inside the document
+        // if event prevented, or it is current table don't clear focus
         const path = event.composedPath();
         if (!path.includes(this.element) &&
-            !path.includes(this.element.shadowRoot)) {
+            !(this.element.shadowRoot && path.includes(this.element.shadowRoot))) {
             // Perform actions if the click is outside the component
-            this.clearFocus();
+            await this.clearFocus();
         }
     }
     // #endregion
@@ -14674,15 +14725,12 @@ class RevoGridComponent {
         let grPlugin;
         for (let p of this.internalPlugins) {
             const isGrouping = p;
-            if (isGrouping.setGrouping) {
+            if (!!isGrouping.setGrouping) {
                 grPlugin = isGrouping;
                 break;
             }
         }
-        if (!grPlugin) {
-            return;
-        }
-        grPlugin.setGrouping(newVal || {});
+        grPlugin === null || grPlugin === void 0 ? void 0 : grPlugin.setGrouping(newVal || {});
     }
     /**
      * Stretch Plugin Apply
@@ -14766,7 +14814,7 @@ class RevoGridComponent {
         (_a = this.plugins) === null || _a === void 0 ? void 0 : _a.forEach(p => this.internalPlugins.push(new p(this.element, pluginData)));
     }
     removePlugins() {
-        this.internalPlugins.forEach(p => p.destroy());
+        this.internalPlugins.forEach(p => { var _a; return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p); });
         this.internalPlugins = [];
     }
     // #endregion
@@ -14866,7 +14914,7 @@ class RevoGridComponent {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                hAsync("revogr-header", Object.assign({ key: 'ff8eefd6db3baf494c015a2ea573160d27739aa9' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: 'b08c837765cf20c88cb5b253a876f0f442c31628' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14888,11 +14936,12 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '21bbe81595f20f7bcb271f28c9c86feef472efec' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '7a3092cd02305a0dfaa3b3d3160164001f0ed08b', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '057a2cf1a64aaeec12d2aca17b09316fb3cbfde6' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'e89e3d136d756f80421f42f47e09583985edb1bc', class: "main-viewport", onClick: (e) => {
+                var _a;
                 if (e.currentTarget === e.target) {
-                    this.viewport.clearEdit();
+                    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, hAsync("div", { key: 'ae1dfccbb72cc2a9f7fa370889746c702d106045', class: "viewports" }, hAsync("slot", { key: '0725b46d877fbb63fb513845cc1c7b86d0f856b8', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'd41771f6ff459f1f6747ce496c8165b1dab44963', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '2914421478450c9b198e0aade898ed342e4d7f6a', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'bc1812c5ce54cda01e81cc06e28c69dc8e36fdf3', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { key: '177db78970907d36b8d56549386a18a683573944', class: "viewports" }, hAsync("slot", { key: '481d830a232b1969fcaa2519a5306fafaff58fb4', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '6a123b2e84bec95d7a63a73322fe167248e8415e', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: 'fea1be24668f2039746fff93d0ab5e76d932a166', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: '74c6e05c81b2782320755c910b098edf8858d6db', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
@@ -15104,10 +15153,13 @@ function renderCell(v) {
         // Row drag
         if (v.model.column.rowDrag &&
             isRowDragService(v.model.column.rowDrag, v.model)) {
-            els.push(hAsync("span", { class: DRAGGABLE_CLASS, onMouseDown: originalEvent => v.dragStartCell.emit({
-                    originalEvent,
-                    model: v.model,
-                }) },
+            els.push(hAsync("span", { class: DRAGGABLE_CLASS, onMouseDown: originalEvent => {
+                    var _a;
+                    return (_a = v.dragStartCell) === null || _a === void 0 ? void 0 : _a.emit({
+                        originalEvent,
+                        model: v.model,
+                    });
+                } },
                 hAsync("span", { class: DRAG_ICON_CLASS })));
         }
         els.push(`${getCellData(v.model.model[v.model.prop])}`);
@@ -15741,7 +15793,8 @@ const HeaderRenderer = (p) => {
         },
         onResize: p.onResize,
         onDoubleClick(originalEvent) {
-            p.onDoubleClick({
+            var _a;
+            (_a = p.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(p, {
                 column: p.data,
                 index: p.column.itemIndex,
                 originalEvent,
@@ -15806,7 +15859,7 @@ const ColumnGroupsRenderer = ({ additionalData, providers, depth, groups, visibl
                     // coordinates
                     const groupStart = getItemByIndex(dimensionCol, groupStartIndex).start;
                     const groupEnd = getItemByIndex(dimensionCol, groupEndIndex).end;
-                    groupRow.push(hAsync(GroupHeaderRenderer, { providers: providers, start: groupStart, end: groupEnd, group: group, active: active, canResize: canResize, onResize: e => onResize(e.changedX, groupStartIndex, groupEndIndex), additionalData: additionalData }));
+                    groupRow.push(hAsync(GroupHeaderRenderer, { providers: providers, start: groupStart, end: groupEnd, group: group, active: active, canResize: canResize, onResize: e => { var _a; return onResize((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex); }, additionalData: additionalData }));
                 }
             }
         }
@@ -15973,7 +16026,7 @@ class RevogrRowHeaders {
         const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE,
             // parent,
             slot: HEADER_SLOT });
-        return (hAsync(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, hAsync("revogr-viewport-scroll", Object.assign({ key: 'efaaa386cb5ea8b848d42e3407dbde8ad99d1db8' }, viewportScroll, { "row-header": true }), hAsync("revogr-header", Object.assign({ key: '57fb6d08cd094f9b19145ff65c3ab805992fbb68' }, viewportHeader)), dataViews)));
+        return (hAsync(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, hAsync("revogr-viewport-scroll", Object.assign({ key: '743c1dbaed3edf679c0616a2b79171a43d94806f' }, viewportScroll, { "row-header": true }), hAsync("revogr-header", Object.assign({ key: '53f1f64b1358d7828a5e45807915740ef198df21' }, viewportHeader)), dataViews)));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -16087,7 +16140,7 @@ class LocalScrollService {
         if (c < 0) {
             return NO_COORDINATE;
         }
-        if (c > param.maxSize) {
+        if (typeof param.maxSize === 'number' && c > param.maxSize) {
             return param.maxSize;
         }
         return c;
@@ -16100,8 +16153,9 @@ class LocalScrollService {
     }
     /* convert virtual to real and back, scale range */
     convert(pos, param, toReal = true) {
+        var _a;
         const minRange = param.clientSize;
-        const from = [0, param.virtualContentSize - minRange];
+        const from = [0, ((_a = param.virtualContentSize) !== null && _a !== void 0 ? _a : minRange) - minRange];
         const to = [0, param.contentSize - param.virtualSize];
         if (toReal) {
             return scaleValue(pos, from, to);
@@ -16143,7 +16197,7 @@ class AutohideScrollPlugin {
     show(element, timeout) {
         clearTimeout(timeout);
         return Number(setTimeout(() => {
-            element.removeAttribute('visible');
+            element === null || element === void 0 ? void 0 : element.removeAttribute('visible');
         }, 1000));
     }
     clear() {
@@ -16383,8 +16437,9 @@ class RevogrViewportScroll {
      * @param e
      */
     async changeScroll(e, silent = false) {
+        var _a, _b;
         if (silent) {
-            if (e.coordinate) {
+            if (e.coordinate && this.verticalScroll) {
                 switch (e.dimension) {
                     // for mobile devices to skip negative scroll loop. only on vertical scroll
                     case 'rgRow':
@@ -16392,7 +16447,7 @@ class RevogrViewportScroll {
                         break;
                 }
             }
-            return null;
+            return;
         }
         if (e.delta) {
             switch (e.dimension) {
@@ -16400,7 +16455,7 @@ class RevogrViewportScroll {
                     e.coordinate = this.horizontalScroll.scrollLeft + e.delta;
                     break;
                 case 'rgRow':
-                    e.coordinate = this.verticalScroll.scrollTop + e.delta;
+                    e.coordinate = ((_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0) + e.delta;
                     break;
             }
             this.setScroll(e);
@@ -16448,11 +16503,13 @@ class RevogrViewportScroll {
                         this.horizontalScroll.scrollLeft = e.coordinate;
                         break;
                     case 'rgRow':
-                        // this will trigger on scroll event
-                        this.verticalScroll.scrollTop = e.coordinate;
-                        // for mobile devices to skip negative scroll loop. only on vertical scroll
-                        if (this.verticalScroll.style.transform) {
-                            this.verticalScroll.style.transform = '';
+                        if (this.verticalScroll) {
+                            // this will trigger on scroll event
+                            this.verticalScroll.scrollTop = e.coordinate;
+                            // for mobile devices to skip negative scroll loop. only on vertical scroll
+                            if (this.verticalScroll.style.transform) {
+                                this.verticalScroll.style.transform = '';
+                            }
                         }
                         break;
                 }
@@ -16463,23 +16520,23 @@ class RevogrViewportScroll {
         // track horizontal viewport resize
         this.resizeService = new GridResizeService(this.horizontalScroll, {
             resize: entries => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 let height = ((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect.height) || 0;
                 if (height) {
-                    height -= this.header.clientHeight + this.footer.clientHeight;
+                    height -= ((_c = (_b = this.header) === null || _b === void 0 ? void 0 : _b.clientHeight) !== null && _c !== void 0 ? _c : 0) + ((_e = (_d = this.footer) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 0);
                 }
                 const els = {
                     rgRow: {
                         size: height,
                         contentSize: this.contentHeight,
-                        scroll: this.verticalScroll.scrollTop,
+                        scroll: (_f = this.verticalScroll) === null || _f === void 0 ? void 0 : _f.scrollTop,
                         noScroll: false,
                     },
                     rgCol: {
-                        size: ((_b = entries[0]) === null || _b === void 0 ? void 0 : _b.contentRect.width) || 0,
+                        size: ((_g = entries[0]) === null || _g === void 0 ? void 0 : _g.contentRect.width) || 0,
                         contentSize: this.contentWidth,
                         scroll: this.horizontalScroll.scrollLeft,
-                        noScroll: this.colType !== 'rgCol' ? true : false,
+                        noScroll: this.colType !== 'rgCol',
                     },
                 };
                 for (const [dim, item] of Object.entries(els)) {
@@ -16488,7 +16545,7 @@ class RevogrViewportScroll {
                     if (item.noScroll) {
                         continue;
                     }
-                    (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.scroll(item.scroll, dimension, true);
+                    (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll((_j = item.scroll) !== null && _j !== void 0 ? _j : 0, dimension, true);
                     // track scroll visibility on outer element change
                     this.setScrollVisibility(dimension, item.size, item.contentSize);
                 }
@@ -16518,10 +16575,10 @@ class RevogrViewportScroll {
         }
         // based on scroll visibility assign or remove class and event
         if (hasScroll) {
-            el.classList.add(`scroll-${type}`);
+            el === null || el === void 0 ? void 0 : el.classList.add(`scroll-${type}`);
         }
         else {
-            el.classList.remove(`scroll-${type}`);
+            el === null || el === void 0 ? void 0 : el.classList.remove(`scroll-${type}`);
         }
         this.scrollchange.emit({ type, hasScroll });
     }
@@ -16529,6 +16586,7 @@ class RevogrViewportScroll {
         this.resizeService.destroy();
     }
     async componentDidRender() {
+        var _a, _b, _c, _d;
         // scroll update if number of rows changed
         if (this.contentHeight < this.oldValY && this.verticalScroll) {
             this.verticalScroll.scrollTop += this.contentHeight - this.oldValY;
@@ -16541,7 +16599,7 @@ class RevogrViewportScroll {
         this.oldValX = this.contentWidth;
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: this.verticalScroll.clientHeight,
+            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
@@ -16549,11 +16607,11 @@ class RevogrViewportScroll {
             clientSize: this.horizontalScroll.clientWidth,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', this.verticalScroll.clientHeight, this.contentHeight);
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: '485d211d22fd720192de2206afef46545339902e', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e3d17c747ec3f525c2947a6fa2e4652ed0f498d9', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'f8fb5652593c76f676d57762911af866f46ce31d', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '6d96653adf4d23208a6091dab42000235d696b48', name: HEADER_SLOT })), hAsync("div", { key: 'afcfcdaeacfe01fa3d8fabc30db36f5aecb24ad3', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'f6ba7b1d8621fcb2ea8565cdea6a75e6abca9d35', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'e5377e124212312859b05431053bcd81543d8193', name: CONTENT_SLOT }))), hAsync("div", { key: '3e990a197388391d393c607c18441b363d60ab53', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'ae7eb7bde5e8798247b4d2a67ae622ba496c44f9', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '8395ce30127f30fff81dc67bfe2f4c3b087b2007', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'efd2db0f5b22b394e93923926f86f2ab9bffb8e0', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '2794c7187ec23ac45dab5f6cb3f20ba59102b2a7', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1a344d7e5cf58d77818390e8d541de88a75399d0', name: HEADER_SLOT })), hAsync("div", { key: '2aeb56f4bf3f3fc60eaeaffd8c18565beaa127ca', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '59482ef73d3c4617c2511b8613056bbc200cd089', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'f318ab365e5f6eddcd2812a314f55cac0959c3b4', name: CONTENT_SLOT }))), hAsync("div", { key: '265c036107a8ed3d47b767fec10ae0225cc927cf', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '2aa7e178375b462e666cf067e075856f592714b6', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16596,10 +16654,11 @@ class RevogrViewportScroll {
      * @param e
      */
     onVerticalMouseWheel(type, delta, e) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-        const pos = this.verticalScroll.scrollTop + e[delta];
-        (_b = this.localScrollService) === null || _b === void 0 ? void 0 : _b.scroll(pos, type, undefined, e[delta]);
+        const scrollTop = (_c = (_b = this.verticalScroll) === null || _b === void 0 ? void 0 : _b.scrollTop) !== null && _c !== void 0 ? _c : 0;
+        const pos = scrollTop + e[delta];
+        (_d = this.localScrollService) === null || _d === void 0 ? void 0 : _d.scroll(pos, type, undefined, e[delta]);
         this.localScrollTimer.latestScrollUpdate(type);
     }
     /**
@@ -16656,9 +16715,9 @@ class VNodeToHtml {
         });
     }
     render() {
-        var _a;
-        this.vnodes = (_a = this.redraw) === null || _a === void 0 ? void 0 : _a.call(this);
-        return (hAsync(Host, { key: '12ecb44c9ee03f85060c4dac3a090e2a0338c148', style: { visibility: 'hidden', position: 'absolute' } }, this.vnodes));
+        var _a, _b;
+        this.vnodes = (_b = (_a = this.redraw) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : null;
+        return (hAsync(Host, { key: 'dcaa7c6bd2f1eef1dd9a7f95a723f8ec778681a0', style: { visibility: 'hidden', position: 'absolute' } }, this.vnodes));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {