@revolist/revogrid 4.0.11 → 4.0.12

package/hydrate/index.js

@@ -7499,6 +7499,9 @@ class RowOrderService {
     }
 }
 
+/**
+ * Component for handling row order editor.
+ */
 class OrderEditor {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -8498,41 +8501,6 @@ function doPropMerge(existing, extra) {
     return props;
 }
 
-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(getRange(start, end));
-            }
-        }
-        // single focus
-        return this.config.focus(cell, end);
-    }
-}
-
 var codes;
 (function (codes) {
     codes[codes["MOUSE_LEFT"] = 1] = "MOUSE_LEFT";
@@ -8604,26 +8572,86 @@ var codesLetter;
     codesLetter["SHIFT"] = "Shift";
 })(codesLetter || (codesLetter = {}));
 
-/** Calculate cell based on x, y position */
+function isTouch(e) {
+    return !!e.touches;
+}
+function verifyTouchTarget(touchEvent, focusClass) {
+    if (focusClass && touchEvent) {
+        if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Function to get the value of a specific property from a MouseEvent or TouchEvent object.
+ */
+function getPropertyFromEvent(e, prop, focusClass // for touch events
+) {
+    // Check if the event is a touch event
+    if (isTouch(e)) {
+        // If the event has touches, get the first touch
+        if (e.touches.length > 0) {
+            const touchEvent = e.touches[0];
+            // Check if the target of the touch event is the specified element
+            if (!verifyTouchTarget(touchEvent, focusClass)) {
+                // If not, return null
+                return null;
+            }
+            // Get the value of the specified property from the touch event and return it
+            return touchEvent[prop] || 0;
+        }
+        // If there are no touches, return null
+        return null;
+    }
+    // If the event is not a touch event, get the value of the specified property from the event and return it
+    return e[prop] || 0;
+}
+
+function getFocusCellBasedOnEvent(e, data) {
+    // If event default is prevented, return
+    if (e.defaultPrevented) {
+        return null;
+    }
+    // Get coordinates from event object
+    const x = getPropertyFromEvent(e, 'clientX');
+    const y = 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 = getItemByPosition(rows, cellY);
     const rgCol = 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;
     }
@@ -8645,8 +8673,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 */
@@ -8841,9 +8872,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 codesLetter.ESCAPE:
                     this.sv.cancel();
@@ -8853,12 +8884,12 @@ class KeyboardService {
         }
         // IF NOT EDIT MODE
         // pressed clear key
-        if (this.sv.selectionStoreService.ranged && isClear(e.code)) {
+        if (range && 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
@@ -8934,7 +8965,7 @@ 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 = getRange(data.start, data.end);
@@ -8962,32 +8993,6 @@ class KeyboardService {
     }
 }
 
-function isTouch(e) {
-    return !!e.touches;
-}
-function verifyTouchTarget(touchEvent, focusClass) {
-    if (focusClass && touchEvent) {
-        if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) {
-            return false;
-        }
-    }
-    return true;
-}
-function getFromEvent(e, prop, focusClass // for touch events
-) {
-    if (isTouch(e)) {
-        if (e.touches.length > 0) {
-            const touchEvent = e.touches[0];
-            if (!verifyTouchTarget(touchEvent, focusClass)) {
-                return null;
-            }
-            return touchEvent[prop] || 0;
-        }
-        return null;
-    }
-    return e[prop] || 0;
-}
-
 class AutoFillService {
     constructor(sv) {
         this.sv = sv;
@@ -9012,7 +9017,10 @@ class AutoFillService {
         return (hAsync("div", { class: {
                 [CELL_HANDLER_CLASS]: true,
                 [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;
@@ -9028,7 +9036,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) {
@@ -9038,9 +9048,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 };
@@ -9056,8 +9064,8 @@ class AutoFillService {
         if (!this.autoFillInitial) {
             return;
         }
-        const x = getFromEvent(event, 'clientX', MOBILE_CLASS);
-        const y = getFromEvent(event, 'clientY', MOBILE_CLASS);
+        const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);
+        const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);
         // skip touch
         if (x === null || y === null) {
             return;
@@ -9070,11 +9078,12 @@ 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);
@@ -9095,39 +9104,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 = 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;
@@ -9147,8 +9165,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,
@@ -9190,6 +9207,9 @@ class AutoFillService {
 const revogrOverlayStyleCss = ".revo-drag-icon{width:11px}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:\"\";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:\"\";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:\"\";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:\"\";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}";
 var RevogrOverlaySelectionStyle0 = revogrOverlayStyleCss;
 
+/**
+ * Component for overlaying the grid with the selection.
+ */
 class OverlaySelection {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -9237,44 +9257,60 @@ class OverlaySelection {
     // #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) {
@@ -9296,7 +9332,6 @@ class OverlaySelection {
     /** Autofill */
     createAutoFillService() {
         this.autoFillService = new AutoFillService({
-            selectionStoreService: this.selectionStoreService,
             dimensionRow: this.dimensionRow,
             dimensionCol: this.dimensionCol,
             columnService: this.columnService,
@@ -9372,10 +9407,10 @@ class OverlaySelection {
             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(hAsync("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
@@ -9383,23 +9418,19 @@ class OverlaySelection {
                 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(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: '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, hAsync("slot", { key: '89b9bec7824739ea11fadeecbf3908ac74e85c96', name: "data" })));
+        return (hAsync(Host, { key: '9dbb6247aebf4ad00c1c8c78852191671be33a11', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '7769092a5029c5a49da8c2d6f36eb9f17b461bc2', 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) {
@@ -9433,31 +9464,48 @@ class OverlaySelection {
         }
         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 (isEditInput(e.target)) {
+        if (isEditInput(targetElement)) {
             return;
         }
+        // Get data from the component
         const data = this.getData();
-        if (e.defaultPrevented) {
-            return;
-        }
-        const x = getFromEvent(e, 'clientX');
-        const y = 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 (verifyTouchTarget(e.touches[0], MOBILE_CLASS)) {
+                // Prevent default behavior for touch events
+                // if target element is a mobile input
                 e.preventDefault();
             }
         }
@@ -9468,8 +9516,8 @@ class OverlaySelection {
     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 }));
         }
     }
@@ -9492,8 +9540,8 @@ class OverlaySelection {
         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 = getRange(focus, focus);
         }
@@ -9519,8 +9567,8 @@ class OverlaySelection {
         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;
         }
@@ -9540,13 +9588,13 @@ class OverlaySelection {
         }
     }
     clearCell() {
-        if (this.selectionStoreService.ranged &&
-            !isRangeSingleCell(this.selectionStoreService.ranged)) {
-            const data = this.columnService.getRangeStaticData(this.selectionStoreService.ranged, '');
-            this.autoFillService.onRangeApply(data, this.selectionStoreService.ranged);
+        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'));
         }
         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,
@@ -9568,8 +9616,24 @@ class OverlaySelection {
         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(getRange(start, end));
+        }
+        return this.doFocus(cell, end);
     }
     get types() {
         return {
@@ -9586,6 +9650,8 @@ class OverlaySelection {
             rows: this.dimensionRow.state,
             cols: this.dimensionCol.state,
             lastCell: this.lastCell,
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
         };
     }
     get element() { return getElement(this); }
@@ -12900,16 +12966,30 @@ class GroupingRowPlugin extends BasePlugin {
     }
 }
 
-/** Collect data for pinned columns in required @ViewportProps format */
-const HEADER_SLOT = 'header';
-const FOOTER_SLOT = 'footer';
-const CONTENT_SLOT = 'content';
-const DATA_SLOT = 'data';
-/** Receive last visible in viewport by required type */
+/**
+ * Collects data for pinned columns in the required @ViewportProps format.
+ */
+/**
+ * Represents the slot names for the viewport slots.
+ */
+const HEADER_SLOT = 'header'; // Slot name for the header slot
+const FOOTER_SLOT = 'footer'; // Slot name for the footer slot
+const CONTENT_SLOT = 'content'; // Slot name for the content slot
+const DATA_SLOT = 'data'; // Slot name for the data slot
+/**
+ * Returns the last visible cell in the viewport for a given row type.
+ * Coordinates are not zero-based and are relative to the viewport.
+ * If needed to be zero-based they can be adjusted by subtracting 1.
+ */
 function getLastCell(data, rowType) {
+    // Get the last visible column count from the viewport column data.
+    const lastVisibleColumnCount = data.viewports[data.colType].store.get('realCount');
+    // Get the last visible row count for the given row type from the viewport column data.
+    const lastVisibleRowCount = data.viewports[rowType].store.get('realCount');
+    // Return the last visible cell with the last visible column count and row count.
     return {
-        x: data.viewports[data.colType].store.get('realCount'),
-        y: data.viewports[rowType].store.get('realCount'),
+        x: lastVisibleColumnCount,
+        y: lastVisibleRowCount,
     };
 }
 
@@ -13064,6 +13144,7 @@ class ViewportService {
             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,
@@ -13272,9 +13353,9 @@ const OrderRenderer = ({ ref }) => {
 };
 
 const LETTER_BLOCK_SIZE = 10;
-const calculateRowHeaderSize = (itemsLength, rowHeaderColumn) => {
+const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
     return ((rowHeaderColumn === null || rowHeaderColumn === void 0 ? void 0 : rowHeaderColumn.size) ||
-        (itemsLength.toString().length + 1) * LETTER_BLOCK_SIZE);
+        Math.max((itemsLength.toString().length + 1) * LETTER_BLOCK_SIZE, minWidth));
 };
 
 class StretchColumn extends BasePlugin {
@@ -13922,7 +14003,7 @@ function isMobileDevice() {
     return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
 }
 
-const revoGridStyleCss = ".revo-drag-icon{width:11px}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px;box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .rowHeaders{background-color:#f7faff}revo-grid[theme=material] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=material] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=material] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=material] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=material] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=material] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=material] revogr-data .revo-draggable>.revo-drag-icon{background-color:#d4d4d4}revo-grid[theme=material] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:black}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkMaterial] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkMaterial] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkMaterial] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkMaterial] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] revogr-data .revo-draggable>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.5)}revo-grid[theme=darkMaterial] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.7)}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkCompact] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkCompact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkCompact] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkCompact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] revogr-data .revo-draggable>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.5)}revo-grid[theme=darkCompact] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.7)}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] .rowHeaders{background-color:#f7faff}revo-grid[theme=compact] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=compact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=compact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=compact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=compact] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=compact] revogr-data .revo-draggable>.revo-drag-icon{background-color:#d4d4d4}revo-grid[theme=compact] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:black}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{display:block;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;top:0;left:0;right:0;z-index:100;width:0;height:0;border-left:6px solid #0049cf;border-top:6px solid #0049cf;border-bottom:6px solid transparent;border-right:6px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;top:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:6px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-height:100%;display:flex;flex-direction:row;align-items:flex-start;max-width:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
+const revoGridStyleCss = ".revo-drag-icon{width:11px}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid #cecece}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .rowHeaders{background-color:#f7faff}revo-grid[theme=material] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=material] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=material] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=material] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=material] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=material] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=material] revogr-data .revo-draggable>.revo-drag-icon{background-color:#d4d4d4}revo-grid[theme=material] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:black}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkMaterial] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkMaterial] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkMaterial] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkMaterial] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] revogr-data .revo-draggable>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.5)}revo-grid[theme=darkMaterial] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.7)}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#d8d8d8}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkCompact] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkCompact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkCompact] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkCompact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] revogr-data .revo-draggable>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.5)}revo-grid[theme=darkCompact] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:rgba(216, 216, 216, 0.7)}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] .rowHeaders{background-color:#f7faff}revo-grid[theme=compact] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=compact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=compact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=compact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=compact] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=compact] revogr-data .revo-draggable>.revo-drag-icon{background-color:#d4d4d4}revo-grid[theme=compact] revogr-data .revo-draggable:hover>.revo-drag-icon{background-color:black}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{display:block;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;top:0;left:0;right:0;z-index:100;width:0;height:0;border-left:6px solid #0049cf;border-top:6px solid #0049cf;border-bottom:6px solid transparent;border-right:6px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;top:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:6px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-height:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1;max-width:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
 var RevoGridStyle0 = revoGridStyleCss;
 
 /**
@@ -14210,16 +14291,19 @@ class RevoGridComponent {
         return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange();
     }
     mousedownHandle(event) {
-        const screenX = getFromEvent(event, 'screenX');
-        const screenY = getFromEvent(event, 'screenY');
+        const screenX = getPropertyFromEvent(event, 'screenX');
+        const screenY = getPropertyFromEvent(event, 'screenY');
         if (screenX === null || screenY === null) {
             return;
         }
         this.clickTrackForFocusClear = screenX + screenY;
     }
+    /**
+     * To keep your elements from losing focus use mouseup/touchend e.preventDefault();
+     */
     mouseupHandle(event) {
-        const screenX = getFromEvent(event, 'screenX');
-        const screenY = getFromEvent(event, 'screenY');
+        const screenX = getPropertyFromEvent(event, 'screenX');
+        const screenY = getPropertyFromEvent(event, 'screenY');
         if (screenX === null || screenY === null) {
             return;
         }
@@ -14353,7 +14437,19 @@ class RevoGridComponent {
         this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
         // if theme change we need to reapply row size and reset viewport
         if (!init) {
-            this.rowSizeChanged(this.themeService.rowSize);
+            // clear existing data
+            this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+            this.rowDefChanged(
+            // for cases when some custom size present and not
+            this.rowDefinitions.length
+                ? this.rowDefinitions
+                : [
+                    {
+                        type: 'rgRow',
+                        size: this.themeService.rowSize,
+                        index: 0,
+                    },
+                ], this.rowDefinitions);
         }
     }
     dataSourceChanged(newVal = [], _, watchName) {
@@ -14601,10 +14697,10 @@ 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: '419c5eb752e8d8b9f84ad39db7192bf452ec26fd' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: '1b32ad72b926f749230e2f596329176bdb29b425' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
-            view.dataPorts.forEach((data) => {
+            view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
                 const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => this.selectionStoreConnector.selectAll(), editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onCanceledit: () => this.selectionStoreConnector.setEdit(false), onSetedit: ({ detail }) => {
                         const event = this.beforeeditstart.emit(detail);
@@ -14623,11 +14719,11 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '71caea92f25bd3afdf30783c0bfc469a4a20beda', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : hAsync("revogr-attribution", { class: "attribution" }), hAsync("div", { key: '6ea98110dd76dfcadfac32705b84706b0b2b81b8', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: 'f0d986b0d53c989e8f45491d6daa86062ab28b73', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '6299b1dbf4d1a2a6701789d21382a30093188e45', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: '4c633ee30609833648c6e2362bae615e854b93ff', class: "viewports" }, hAsync("slot", { key: '93000f290acfa202d8074b5794a5a6d4e040d624', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '554d3026c130dedf73778e4e21cb861befd4b981', 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: '79e6383066cc86910f783b03f7f97ec69ad736b7', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: '906847181f0b5d2a9466be95104911ad08be185f', 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: '61d52d916f03c730704e7cfaa2afaf2cb91de0e7', class: "viewports" }, hAsync("slot", { key: '8250aaeba4cac754d324145bb2940f4db01a901d', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'f18b9209c7a804cc4c295afcc70f6d375d8ad45d', 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: 'ef29f4dc8b587ac3bbfc0d76e7ffa9f9231e0c63', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'f8c4b8bd1cda04f2ab17b96cd7ec46faeeb6d7ad', 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));
     }
     get element() { return getElement(this); }
     static get watchers() { return {