@revolist/revogrid 4.0.11 → 4.0.14

package/dist/cjs/revogr-attribution_6.cjs.entry.js

@@ -6,51 +6,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-84e32c2a.js');
-const index$1 = require('./index-73c149e3.js');
+const index$1 = require('./index-a9f1b728.js');
 const dimension_helpers = require('./dimension.helpers-ee39d6c4.js');
-const column_service = require('./column.service-e83d9809.js');
-const selection_store = require('./selection.store-2e110a67.js');
-const key_utils = require('./key.utils-59b9b528.js');
-const debounce = require('./debounce-e2b7c6fb.js');
-const events = require('./events-7ccd6894.js');
-const throttle = require('./throttle-f7aee21b.js');
 require('./toNumber-838e6ff5.js');
-require('./viewport.helpers-6670177c.js');
-
-class SelectionStoreService {
-    constructor(store, config) {
-        this.store = store;
-        this.config = config;
-        this.store = store;
-    }
-    get edited() {
-        return this.store.get('edit');
-    }
-    get focused() {
-        return this.store.get('focus');
-    }
-    get ranged() {
-        return this.store.get('range');
-    }
-    changeRange(range) {
-        return this.config.changeRange(range);
-    }
-    focus(cell, isMulti = false) {
-        if (!cell) {
-            return false;
-        }
-        let end = cell;
-        // range edit
-        if (isMulti) {
-            let start = this.store.get('focus');
-            if (start) {
-                return this.config.changeRange(selection_store.getRange(start, end));
-            }
-        }
-        // single focus
-        return this.config.focus(cell, end);
-    }
-}
+const events = require('./events-b28cc194.js');
+const column_service = require('./column.service-52b4cac9.js');
+const key_utils = require('./key.utils-ee3d9eab.js');
+const selection_helpers = require('./selection.helpers-32abb2a9.js');
+const debounce = require('./debounce-e2b7c6fb.js');
+const viewport_store = require('./viewport.store-2ab4e166.js');
+const throttle = require('./throttle-46478b04.js');
 
 const Attribution = class {
     constructor(hostRef) {
@@ -61,26 +26,50 @@ const Attribution = class {
     }
 };
 
-/** Calculate cell based on x, y position */
+function getFocusCellBasedOnEvent(e, data) {
+    // If event default is prevented, return
+    if (e.defaultPrevented) {
+        return null;
+    }
+    // Get coordinates from event object
+    const x = events.getPropertyFromEvent(e, 'clientX');
+    const y = events.getPropertyFromEvent(e, 'clientY');
+    // If coordinates are not available, return
+    if (x === null || y === null) {
+        return null;
+    }
+    // Get current cell based on coordinates and data
+    const focusCell = getCurrentCell({ x, y }, data);
+    // If current cell is not available, return
+    if (isAfterLast(focusCell, data.lastCell)) {
+        return null;
+    }
+    return focusCell;
+}
+/**
+ * Calculate cell based on x, y position
+ */
 function getCurrentCell({ x, y }, { el, rows, cols }) {
+    // Get the bounding rectangle of the element
     const { top, left, height, width } = el.getBoundingClientRect();
+    // Calculate the cell position relative to the element
     let cellY = y - top;
-    // limit to element height
+    let cellX = x - left;
+    // Limit the cell position to the element height
     if (cellY >= height) {
         cellY = height - 1;
     }
-    let cellX = x - left;
-    // limit to element width
+    // Limit the cell position to the element width
     if (cellX >= width) {
         cellX = width - 1;
     }
+    // Get the row and column items based on the cell position
     const rgRow = dimension_helpers.getItemByPosition(rows, cellY);
     const rgCol = dimension_helpers.getItemByPosition(cols, cellX);
-    // before first
+    // Set the row and column index to 0 if they are before the first item
     if (rgCol.itemIndex < 0) {
         rgCol.itemIndex = 0;
     }
-    // before first
     if (rgRow.itemIndex < 0) {
         rgRow.itemIndex = 0;
     }
@@ -102,8 +91,11 @@ function getCoordinate(range, focus, changes, isMulti = false) {
     }
     return null;
 }
-/** check if out of range */
-function isAfterLast({ x, y }, { lastCell }) {
+/**
+ * Check if the x coordinate of the cell position is after or equal to the x coordinate of the last cell position
+ * or if the y coordinate of the cell position is after or equal to the y coordinate of the last cell position
+ */
+function isAfterLast({ x, y }, lastCell) {
     return x >= lastCell.x || y >= lastCell.y;
 }
 /** check if out of range */
@@ -192,13 +184,14 @@ const RevogrFocus$1 = class {
         const column = dimension_helpers.getSourceItem(this.colData, focus.x);
         this.afterFocus.emit({
             model,
-            column
+            column,
         });
     }
     componentDidRender() {
         var _a, _b;
         const currentFocus = this.selectionStore.get('focus');
-        if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) && ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
+        if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) &&
+            ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
             return;
         }
         this.activeFocus = currentFocus;
@@ -244,9 +237,9 @@ class KeyboardService {
     constructor(sv) {
         this.sv = sv;
     }
-    async keyDown(e, canRange) {
+    async keyDown(e, canRange, isEditMode, { range, focus }) {
         // IF EDIT MODE
-        if (this.sv.selectionStoreService.edited) {
+        if (isEditMode) {
             switch (e.code) {
                 case key_utils.codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -256,12 +249,12 @@ class KeyboardService {
         }
         // IF NOT EDIT MODE
         // pressed clear key
-        if (this.sv.selectionStoreService.ranged && key_utils.isClear(e.code)) {
+        if (range && key_utils.isClear(e.code)) {
             this.sv.clearCell();
             return;
         }
         // below works with focus only
-        if (!this.sv.selectionStoreService.focused) {
+        if (!focus) {
             return;
         }
         // tab key means same as arrow right
@@ -337,10 +330,10 @@ class KeyboardService {
         }
         if (isMulti) {
             const eData = this.sv.getData();
-            if (isAfterLast(data.end, eData) || isBeforeFirst(data.start)) {
+            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
                 return false;
             }
-            const range = selection_store.getRange(data.start, data.end);
+            const range = selection_helpers.getRange(data.start, data.end);
             return this.sv.range(range);
         }
         return this.sv.focusNext(data.start, changes);
@@ -389,7 +382,10 @@ class AutoFillService {
         return (index.h("div", { class: {
                 [index$1.CELL_HANDLER_CLASS]: true,
                 [index$1.MOBILE_CLASS]: true,
-            }, style: { left: `${handlerStyle.right}px`, top: `${handlerStyle.bottom}px` }, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) }));
+            }, style: {
+                left: `${handlerStyle.right}px`,
+                top: `${handlerStyle.bottom}px`,
+            }, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) }));
     }
     autoFillHandler(e, type = "AutoFill" /* AutoFillType.autoFill */) {
         let target = null;
@@ -405,7 +401,9 @@ class AutoFillService {
     get isAutoFill() {
         return !!this.autoFillType;
     }
-    /** Process mouse move events */
+    /**
+     * Process mouse move events
+     */
     selectionMouseMove(e) {
         // initiate mouse move debounce if not present
         if (!this.onMouseMoveAutofill) {
@@ -415,9 +413,7 @@ class AutoFillService {
             this.onMouseMoveAutofill(e, this.sv.getData());
         }
     }
-    getFocus() {
-        let focus = this.sv.selectionStoreService.focused;
-        const range = this.sv.selectionStoreService.ranged;
+    getFocus(focus, range) {
         // there was an issue that it was taking last cell from range but focus was out
         if (!focus && range) {
             focus = { x: range.x, y: range.y };
@@ -433,8 +429,8 @@ class AutoFillService {
         if (!this.autoFillInitial) {
             return;
         }
-        const x = events.getFromEvent(event, 'clientX', index$1.MOBILE_CLASS);
-        const y = events.getFromEvent(event, 'clientY', index$1.MOBILE_CLASS);
+        const x = events.getPropertyFromEvent(event, 'clientX', index$1.MOBILE_CLASS);
+        const y = events.getPropertyFromEvent(event, 'clientY', index$1.MOBILE_CLASS);
         // skip touch
         if (x === null || y === null) {
             return;
@@ -447,18 +443,19 @@ class AutoFillService {
             }
         }
         // check if not the latest, if latest - do nothing
-        if (isAfterLast(current, data)) {
+        if (isAfterLast(current, data.lastCell)) {
             return;
         }
         this.autoFillLast = current;
-        const isSame = current.x === this.autoFillInitial.x && current.y === this.autoFillInitial.y;
+        const isSame = current.x === this.autoFillInitial.x &&
+            current.y === this.autoFillInitial.y;
         // if same as initial - clear
         if (isSame) {
             this.sv.setTempRange(null);
         }
         else {
             this.sv.setTempRange({
-                area: selection_store.getRange(this.autoFillInitial, this.autoFillLast),
+                area: selection_helpers.getRange(this.autoFillInitial, this.autoFillLast),
                 type: this.autoFillType,
             });
         }
@@ -472,39 +469,48 @@ class AutoFillService {
     selectionStart(target, data, type = "Selection" /* AutoFillType.selection */) {
         /** Get cell by autofill element */
         const { top, left } = target.getBoundingClientRect();
-        this.autoFillInitial = this.getFocus();
+        this.autoFillInitial = this.getFocus(data.focus, data.range);
         this.autoFillType = type;
         this.autoFillStart = getCurrentCell({ x: left, y: top }, data);
     }
     /**
-     * Clear current range selection
-     * on mouse up and mouse leave events
+     * Clear current range selection on mouse up and mouse leave events
      */
-    clearAutoFillSelection() {
-        // Apply autofill values on mouse up if present
+    clearAutoFillSelection(focus, oldRange) {
+        // If autofill was active, apply autofill values
         if (this.autoFillInitial) {
-            // Get latest
-            this.autoFillInitial = this.getFocus();
-            // Apply range data if present
+            // Fetch latest focus
+            this.autoFillInitial = this.getFocus(focus, oldRange);
+            // Apply range data if autofill mode is active
             if (this.autoFillType === "AutoFill" /* AutoFillType.autoFill */) {
-                const range = selection_store.getRange(this.autoFillInitial, this.autoFillLast);
+                const range = selection_helpers.getRange(this.autoFillInitial, this.autoFillLast);
+                // If range is present, apply data
                 if (range) {
-                    const { defaultPrevented: stopApply, detail: { range: newRange } } = this.sv.clearRangeDataApply({
+                    const { defaultPrevented: stopApply, detail: { range: newRange }, } = this.sv.clearRangeDataApply({
                         range,
                     });
+                    // If data apply was not prevented, apply new range
                     if (!stopApply) {
-                        this.applyRangeWithData(newRange);
+                        this.applyRangeWithData(newRange, oldRange);
                     }
                     else {
-                        // if prevented - clear temp range
+                        // If data apply was prevented, clear temporary range
                         this.sv.setTempRange(null);
                     }
                 }
             }
             else {
+                // If not autofill mode, apply range only
                 this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);
             }
         }
+        // Reset autofill state
+        this.resetAutoFillState();
+    }
+    /**
+     * Reset autofill state
+     */
+    resetAutoFillState() {
         this.autoFillType = null;
         this.autoFillInitial = null;
         this.autoFillLast = null;
@@ -524,8 +530,7 @@ class AutoFillService {
         this.sv.setRange(range);
     }
     /** Apply range and copy data during range application */
-    applyRangeWithData(newRange) {
-        const oldRange = this.sv.selectionStoreService.ranged;
+    applyRangeWithData(newRange, oldRange) {
         const rangeData = {
             type: this.sv.dataStore.get('type'),
             colType: this.sv.columnService.type,
@@ -559,7 +564,7 @@ class AutoFillService {
         if (!start || !end) {
             return;
         }
-        const newRange = selection_store.getRange(start, end);
+        const newRange = selection_helpers.getRange(start, end);
         this.sv.setRange(newRange);
     }
 }
@@ -614,44 +619,60 @@ const OverlaySelection = class {
     // #endregion
     // #region Listeners
     onMouseMove(e) {
-        if (this.selectionStoreService.focused) {
+        if (this.selectionStore.get('focus')) {
             this.autoFillService.selectionMouseMove(e);
         }
     }
-    /** Action finished inside of the document. */
-    /** Pointer left document, clear any active operation. */
+    /**
+     * Action finished inside of the document.
+     * Pointer left document, clear any active operation.
+     */
     onMouseUp() {
-        this.autoFillService.clearAutoFillSelection();
+        // Clear auto fill selection
+        // when pointer left document,
+        // clear any active operation.
+        this.autoFillService.clearAutoFillSelection(this.selectionStore.get('focus'), this.selectionStore.get('range'));
     }
-    /** Row drag started. */
+    /**
+     * Row drag started.
+     * This event is fired when drag action started on cell.
+     */
     onCellDrag(e) {
         var _a;
+        // Invoke drag start on order editor.
         (_a = this.orderEditor) === null || _a === void 0 ? void 0 : _a.dragStart(e.detail);
     }
-    /** Get keyboard down from element. */
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is released.
+     */
     onKeyUp(e) {
+        // Emit before key up event.
         this.beforeKeyUp.emit(e);
     }
-    /** Get keyboard down from element. */
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is pressed.
+     */
     onKeyDown(e) {
         var _a;
+        // Emit before key down event and check if default prevention is set.
         const proxy = this.beforeKeyDown.emit(e);
         if (e.defaultPrevented || proxy.defaultPrevented) {
             return;
         }
-        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range);
+        // Invoke key down on keyboard service.
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range, !!this.selectionStore.get('edit'), {
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
+        });
     }
     // #endregion
     /** Selection & Keyboard */
     selectionServiceSet(s) {
-        this.selectionStoreService = new SelectionStoreService(s, {
-            changeRange: range => this.triggerRangeEvent(range),
-            focus: (focus, end) => this.doFocus(focus, end),
-        });
         this.keyboardService = new KeyboardService({
-            selectionStoreService: this.selectionStoreService,
             selectionStore: s,
-            range: r => this.selectionStoreService.changeRange(r),
+            range: r => this.triggerRangeEvent(r),
             focusNext: (f, next) => this.doFocus(f, f, next),
             change: val => {
                 if (this.readonly) {
@@ -673,7 +694,6 @@ const OverlaySelection = class {
     /** Autofill */
     createAutoFillService() {
         this.autoFillService = new AutoFillService({
-            selectionStoreService: this.selectionStoreService,
             dimensionRow: this.dimensionRow,
             dimensionCol: this.dimensionCol,
             columnService: this.columnService,
@@ -749,10 +769,10 @@ const OverlaySelection = class {
             nodes.push(editCell);
         }
         else {
-            const range = this.selectionStoreService.ranged;
-            const selectionFocus = this.selectionStoreService.focused;
+            const range = this.selectionStore.get('range');
+            const focus = this.selectionStore.get('focus');
             // Clipboard
-            if ((range || selectionFocus) && this.useClipboard) {
+            if ((range || focus) && this.useClipboard) {
                 nodes.push(index.h("revogr-clipboard", { readonly: this.readonly, onCopyregion: e => this.onCopy(e.detail), onClearregion: () => !this.readonly && this.clearCell(), ref: e => (this.clipboard = e), onPasteregion: e => this.onPaste(e.detail) }));
             }
             // Range
@@ -760,23 +780,19 @@ const OverlaySelection = class {
                 nodes.push(...this.renderRange(range));
             }
             // Autofill
-            if (selectionFocus && !this.readonly && this.range) {
-                nodes.push(this.autoFillService.renderAutofill(range, selectionFocus));
+            if (focus && !this.readonly && this.range) {
+                nodes.push(this.autoFillService.renderAutofill(range, focus));
             }
             // Order
             if (this.canDrag) {
                 nodes.push(index.h("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 (index.h(index.Host, { key: 'd20fcf63958e3d491f4fd881a4a5dd242cfdd9ac', class: { mobile: this.isMobileDevice },
-            // Open Editor on DblClick
-            onDblClick: (e) => {
-                // DblClick prevented outside - Editor will not open
-                if (!e.defaultPrevented) {
-                    this.doEdit();
-                }
-            }, onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, index.h("slot", { key: '89b9bec7824739ea11fadeecbf3908ac74e85c96', name: "data" })));
+        return (index.h(index.Host, { key: '3d40ea4ca89197d464bc5b84354e859a7bb9e1fa', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, index.h("slot", { key: '0d318f6e73fe84efd8d3b621c463bb3700d11eed', name: "data" })));
     }
+    /**
+     * Executes the focus operation on the specified range of cells.
+     */
     doFocus(focus, end, next) {
         const { defaultPrevented } = this.beforeFocusCell.emit(this.columnService.getSaveData(focus.y, focus.x));
         if (defaultPrevented) {
@@ -810,31 +826,48 @@ const OverlaySelection = class {
         }
         return !e.defaultPrevented;
     }
+    /**
+     * Open Editor on DblClick
+     */
+    onElementDblClick(e) {
+        // DblClick prevented outside - Editor will not open
+        // Get data from the component
+        const data = this.getData();
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
+            return;
+        }
+        this.doEdit();
+    }
+    /**
+     * Handle mouse down event on Host element
+     */
     onElementMouseDown(e, touch = false) {
+        // Get the target element from the event object
+        const targetElement = e.target;
         // Ignore focus if clicked input
-        if (key_utils.isEditInput(e.target)) {
+        if (key_utils.isEditInput(targetElement)) {
             return;
         }
+        // Get data from the component
         const data = this.getData();
-        if (e.defaultPrevented) {
-            return;
-        }
-        const x = events.getFromEvent(e, 'clientX');
-        const y = events.getFromEvent(e, 'clientY');
-        // skip touch
-        if (x === null || y === null) {
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
             return;
         }
-        // Regular cell click
-        const focusCell = getCurrentCell({ x, y }, data);
-        this.selectionStoreService.focus(focusCell, this.range && e.shiftKey);
+        // Set focus on the current cell
+        this.focus(focusCell, this.range && e.shiftKey);
         // Initiate autofill selection
         if (this.range) {
-            this.autoFillService.selectionStart(e.target, data);
+            this.autoFillService.selectionStart(targetElement, this.getData());
+            // Prevent default behavior for mouse events,
+            // but only if target element is not a mobile input
             if (!touch) {
                 e.preventDefault();
             }
             else if (events.verifyTouchTarget(e.touches[0], index$1.MOBILE_CLASS)) {
+                // Prevent default behavior for touch events
+                // if target element is a mobile input
                 e.preventDefault();
             }
         }
@@ -845,8 +878,8 @@ const OverlaySelection = class {
     doEdit(val = '') {
         var _a;
         if (this.canEdit()) {
-            const editCell = this.selectionStore.get('focus');
-            const data = this.columnService.getSaveData(editCell.y, editCell.x);
+            const focus = this.selectionStore.get('focus');
+            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 }));
         }
     }
@@ -869,10 +902,10 @@ const OverlaySelection = class {
         this.cellEditApply.emit(dataToSave);
     }
     getRegion() {
-        const focus = this.selectionStoreService.focused;
-        let range = this.selectionStoreService.ranged;
+        const focus = this.selectionStore.get('focus');
+        let range = this.selectionStore.get('range');
         if (!range) {
-            range = selection_store.getRange(focus, focus);
+            range = selection_helpers.getRange(focus, focus);
         }
         return range;
     }
@@ -896,8 +929,8 @@ const OverlaySelection = class {
         return true;
     }
     onPaste(data) {
-        const focus = this.selectionStoreService.focused;
-        const isEditing = this.selectionStoreService.edited !== null;
+        const focus = this.selectionStore.get('focus');
+        const isEditing = this.selectionStore.get('edit') !== null;
         if (!focus || isEditing) {
             return;
         }
@@ -917,13 +950,13 @@ const OverlaySelection = class {
         }
     }
     clearCell() {
-        if (this.selectionStoreService.ranged &&
-            !selection_store.isRangeSingleCell(this.selectionStoreService.ranged)) {
-            const data = this.columnService.getRangeStaticData(this.selectionStoreService.ranged, '');
-            this.autoFillService.onRangeApply(data, this.selectionStoreService.ranged);
+        if (this.selectionStore.get('range') &&
+            !selection_helpers.isRangeSingleCell(this.selectionStore.get('range'))) {
+            const data = this.columnService.getRangeStaticData(this.selectionStore.get('range'), '');
+            this.autoFillService.onRangeApply(data, this.selectionStore.get('range'));
         }
         else if (this.canEdit()) {
-            const focused = this.selectionStoreService.focused;
+            const focused = this.selectionStore.get('focus');
             const cell = this.columnService.getSaveData(focused.y, focused.x);
             this.cellEdit({
                 rgRow: focused.y,
@@ -945,8 +978,24 @@ const OverlaySelection = class {
         if (this.readonly) {
             return false;
         }
-        const editCell = this.selectionStoreService.focused;
-        return editCell && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(editCell.y, editCell.x));
+        const focus = this.selectionStore.get('focus');
+        return focus && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(focus.y, focus.x));
+    }
+    get edited() {
+        return this.selectionStore.get('edit');
+    }
+    /**
+     * Sets the focus on a cell and optionally edits a range.
+     */
+    focus(cell, isRangeEdit = false) {
+        if (!cell)
+            return false;
+        const end = cell;
+        const start = this.selectionStore.get('focus');
+        if (isRangeEdit && start) {
+            return this.triggerRangeEvent(selection_helpers.getRange(start, end));
+        }
+        return this.doFocus(cell, end);
     }
     get types() {
         return {
@@ -963,6 +1012,8 @@ const OverlaySelection = class {
             rows: this.dimensionRow.state,
             cols: this.dimensionCol.state,
             lastCell: this.lastCell,
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
         };
     }
     get element() { return index.getElement(this); }
@@ -994,7 +1045,7 @@ const RevogrRowHeaders = class {
     }
     render() {
         const dataViews = [];
-        const viewport = new events.ViewportStore('colPinStart');
+        const viewport = new viewport_store.ViewportStore('colPinStart');
         /** render viewports rows */
         let totalLength = 1;
         // todo: this part could be optimized to avoid to often re-render dataPorts can be cached
@@ -1006,7 +1057,7 @@ const RevogrRowHeaders = class {
             const colData = new dimension_helpers.DataStore('colPinStart');
             const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
             colData.updateData([column]);
-            dataViews.push(index.h("revogr-data", Object.assign({}, data, { colType: 'rowHeaders', jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
+            dataViews.push(index.h("revogr-data", Object.assign({}, data, { colType: "rowHeaders", jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
             totalLength += itemCount;
         }
         const colSize = events.calculateRowHeaderSize(totalLength, this.rowHeaderColumn);
@@ -1033,7 +1084,7 @@ const RevogrRowHeaders = class {
         const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: index$1.ROW_HEADER_TYPE,
             // parent,
             slot: column_service.HEADER_SLOT });
-        return (index.h(index.Host, { class: { [index$1.ROW_HEADER_TYPE]: true }, key: index$1.ROW_HEADER_TYPE }, index.h("revogr-viewport-scroll", Object.assign({ key: '53de708aa9a00a2ce363d8323b10d85aee070171' }, viewportScroll, { "row-header": true }), index.h("revogr-header", Object.assign({ key: '72e73ae122bb25f011422d3d044ccf7df613520c' }, viewportHeader)), dataViews)));
+        return (index.h(index.Host, { class: { [index$1.ROW_HEADER_TYPE]: true }, key: index$1.ROW_HEADER_TYPE }, index.h("revogr-viewport-scroll", Object.assign({ key: 'efaaa386cb5ea8b848d42e3407dbde8ad99d1db8' }, viewportScroll, { "row-header": true }), index.h("revogr-header", Object.assign({ key: '57fb6d08cd094f9b19145ff65c3ab805992fbb68' }, viewportHeader)), dataViews)));
     }
 };
 
@@ -1186,7 +1237,7 @@ const RevogrScrollVirtual = class {
     }
     render() {
         const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        return (index.h(index.Host, { key: '648f7c565364722ee80475ca00ce44fb00c3a042', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '8aca236453e97e0f79d35946daa81c5be049fc26', style: {
+        return (index.h(index.Host, { key: '9d672a8992b1c13814270537389142ef53d322f9', onScroll: (e) => this.onScroll(e) }, index.h("div", { key: '250886ee28842f087d815d66cbb046b38c466ebf', style: {
                 [sizeType]: `${throttle.getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('virtualSize'))}px`,
             } })));
     }