@revolist/revogrid 4.1.0-next.4 → 4.1.0-next.40

package/custom-element/index.js

@@ -4316,17 +4316,31 @@ class ColumnDataProvider {
   }
   // columns processing
   static getColumns(columns, level = 0, types) {
+    const collection = {
+      columns: {
+        rgCol: [],
+        colPinStart: [],
+        colPinEnd: [],
+      },
+      columnGrouping: {
+        rgCol: [],
+        colPinStart: [],
+        colPinEnd: [],
+      },
+      maxLevel: level,
+      sort: {},
+    };
     return reduce_1(columns, (res, colData) => {
-      /** Grouped column */
+      // Grouped column
       if (GroupingColumnPlugin.isColGrouping(colData)) {
         return GroupingColumnPlugin.gatherGroup(res, colData, ColumnDataProvider.getColumns(colData.children, level + 1, types), level);
       }
-      /** Regular column */
+      // Regular column
       const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
-      // not pin
+      // Regular column, no Pin
       if (!regularColumn.pin) {
         res.columns.rgCol.push(regularColumn);
-        // pin
+        // Pin
       }
       else {
         res.columns[regularColumn.pin].push(regularColumn);
@@ -4337,20 +4351,7 @@ class ColumnDataProvider {
       // trigger setup hook if present
       regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
       return res;
-    }, {
-      columns: {
-        rgCol: [],
-        colPinStart: [],
-        colPinEnd: [],
-      },
-      columnGrouping: {
-        rgCol: [],
-        colPinStart: [],
-        colPinEnd: [],
-      },
-      maxLevel: level,
-      sort: {},
-    });
+    }, collection);
   }
   static getColumnType(rgCol) {
     if (rgCol.pin) {
@@ -4405,424 +4406,71 @@ class DataProvider {
   }
 }
 
-/** Used as references for the maximum length and index of an array. */
-var MAX_ARRAY_LENGTH$2 = 4294967295,
-    MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH$2 - 1;
+var lodash = createCommonjsModule(function (module, exports) {
+(function() {
 
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeFloor = Math.floor,
-    nativeMin$1 = Math.min;
+  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
+  var undefined$1;
 
-/**
- * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy`
- * which invokes `iteratee` for `value` and each element of `array` to compute
- * their sort ranking. The iteratee is invoked with one argument; (value).
- *
- * @private
- * @param {Array} array The sorted array to inspect.
- * @param {*} value The value to evaluate.
- * @param {Function} iteratee The iteratee invoked per element.
- * @param {boolean} [retHighest] Specify returning the highest qualified index.
- * @returns {number} Returns the index at which `value` should be inserted
- *  into `array`.
- */
-function baseSortedIndexBy(array, value, iteratee, retHighest) {
-  var low = 0,
-      high = array == null ? 0 : array.length;
-  if (high === 0) {
-    return 0;
-  }
+  /** Used as the semantic version number. */
+  var VERSION = '4.17.21';
 
-  value = iteratee(value);
-  var valIsNaN = value !== value,
-      valIsNull = value === null,
-      valIsSymbol = isSymbol_1(value),
-      valIsUndefined = value === undefined;
+  /** Used as the size to enable large array optimizations. */
+  var LARGE_ARRAY_SIZE = 200;
 
-  while (low < high) {
-    var mid = nativeFloor((low + high) / 2),
-        computed = iteratee(array[mid]),
-        othIsDefined = computed !== undefined,
-        othIsNull = computed === null,
-        othIsReflexive = computed === computed,
-        othIsSymbol = isSymbol_1(computed);
+  /** Error message constants. */
+  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
+      FUNC_ERROR_TEXT = 'Expected a function',
+      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
 
-    if (valIsNaN) {
-      var setLow = retHighest || othIsReflexive;
-    } else if (valIsUndefined) {
-      setLow = othIsReflexive && (retHighest || othIsDefined);
-    } else if (valIsNull) {
-      setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);
-    } else if (valIsSymbol) {
-      setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol);
-    } else if (othIsNull || othIsSymbol) {
-      setLow = false;
-    } else {
-      setLow = retHighest ? (computed <= value) : (computed < value);
-    }
-    if (setLow) {
-      low = mid + 1;
-    } else {
-      high = mid;
-    }
-  }
-  return nativeMin$1(high, MAX_ARRAY_INDEX);
-}
+  /** Used to stand-in for `undefined` hash values. */
+  var HASH_UNDEFINED = '__lodash_hash_undefined__';
 
-var _baseSortedIndexBy = baseSortedIndexBy;
+  /** Used as the maximum memoize cache size. */
+  var MAX_MEMOIZE_SIZE = 500;
 
-/** Used as references for the maximum length and index of an array. */
-var MAX_ARRAY_LENGTH$1 = 4294967295,
-    HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH$1 >>> 1;
+  /** Used as the internal argument placeholder. */
+  var PLACEHOLDER = '__lodash_placeholder__';
 
-/**
- * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which
- * performs a binary search of `array` to determine the index at which `value`
- * should be inserted into `array` in order to maintain its sort order.
- *
- * @private
- * @param {Array} array The sorted array to inspect.
- * @param {*} value The value to evaluate.
- * @param {boolean} [retHighest] Specify returning the highest qualified index.
- * @returns {number} Returns the index at which `value` should be inserted
- *  into `array`.
- */
-function baseSortedIndex(array, value, retHighest) {
-  var low = 0,
-      high = array == null ? low : array.length;
+  /** Used to compose bitmasks for cloning. */
+  var CLONE_DEEP_FLAG = 1,
+      CLONE_FLAT_FLAG = 2,
+      CLONE_SYMBOLS_FLAG = 4;
 
-  if (typeof value == 'number' && value === value && high <= HALF_MAX_ARRAY_LENGTH) {
-    while (low < high) {
-      var mid = (low + high) >>> 1,
-          computed = array[mid];
+  /** Used to compose bitmasks for value comparisons. */
+  var COMPARE_PARTIAL_FLAG = 1,
+      COMPARE_UNORDERED_FLAG = 2;
 
-      if (computed !== null && !isSymbol_1(computed) &&
-          (retHighest ? (computed <= value) : (computed < value))) {
-        low = mid + 1;
-      } else {
-        high = mid;
-      }
-    }
-    return high;
-  }
-  return _baseSortedIndexBy(array, value, identity_1, retHighest);
-}
+  /** Used to compose bitmasks for function metadata. */
+  var WRAP_BIND_FLAG = 1,
+      WRAP_BIND_KEY_FLAG = 2,
+      WRAP_CURRY_BOUND_FLAG = 4,
+      WRAP_CURRY_FLAG = 8,
+      WRAP_CURRY_RIGHT_FLAG = 16,
+      WRAP_PARTIAL_FLAG = 32,
+      WRAP_PARTIAL_RIGHT_FLAG = 64,
+      WRAP_ARY_FLAG = 128,
+      WRAP_REARG_FLAG = 256,
+      WRAP_FLIP_FLAG = 512;
 
-var _baseSortedIndex = baseSortedIndex;
+  /** Used as default options for `_.truncate`. */
+  var DEFAULT_TRUNC_LENGTH = 30,
+      DEFAULT_TRUNC_OMISSION = '...';
 
-/**
- * Uses a binary search to determine the lowest index at which `value`
- * should be inserted into `array` in order to maintain its sort order.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Array
- * @param {Array} array The sorted array to inspect.
- * @param {*} value The value to evaluate.
- * @returns {number} Returns the index at which `value` should be inserted
- *  into `array`.
- * @example
- *
- * _.sortedIndex([30, 50], 40);
- * // => 1
- */
-function sortedIndex(array, value) {
-  return _baseSortedIndex(array, value);
-}
+  /** Used to detect hot functions by number of calls within a span of milliseconds. */
+  var HOT_COUNT = 800,
+      HOT_SPAN = 16;
 
-var sortedIndex_1 = sortedIndex;
+  /** Used to indicate the type of lazy iteratees. */
+  var LAZY_FILTER_FLAG = 1,
+      LAZY_MAP_FLAG = 2,
+      LAZY_WHILE_FLAG = 3;
 
-/* Generate range on size
- */
-// (arr1[index1] < arr2[index2])
-function simpleCompare(el1, el2) {
-  return el1 < el2;
-}
-function mergeSortedArray(arr1, arr2, compareFn = simpleCompare) {
-  const merged = [];
-  let index1 = 0;
-  let index2 = 0;
-  let current = 0;
-  while (current < arr1.length + arr2.length) {
-    let isArr1Depleted = index1 >= arr1.length;
-    let isArr2Depleted = index2 >= arr2.length;
-    if (!isArr1Depleted && (isArr2Depleted || compareFn(arr1[index1], arr2[index2]))) {
-      merged[current] = arr1[index1];
-      index1++;
-    }
-    else {
-      merged[current] = arr2[index2];
-      index2++;
-    }
-    current++;
-  }
-  return merged;
-}
-/* Calculate system scrollbar width */
-function getScrollbarWidth(doc) {
-  // Creating invisible container
-  const outer = doc.createElement('div');
-  const styles = outer.style;
-  styles.visibility = 'hidden';
-  styles.overflow = 'scroll'; // forcing scrollbar to appear
-  styles.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
-  doc.body.appendChild(outer);
-  // Creating inner element and placing it in the container
-  const inner = doc.createElement('div');
-  outer.appendChild(inner);
-  // Calculating difference between container's full width and the child width
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  // Removing temporary elements from the DOM
-  outer.parentNode.removeChild(outer);
-  return scrollbarWidth;
-}
-/* Scale a value between 2 ranges
- *
- * Sample:
- * // 55 from a 0-100 range to a 0-1000 range (Ranges don't have to be positive)
- * const n = scaleValue(55, [0,100], [0,1000]);
- *
- * Ranges of two values
- * @from
- * @to
- *
- * ~~ return value does the equivalent of Math.floor but faster.
- */
-function scaleValue(value, from, to) {
-  return ((to[1] - to[0]) * (value - from[0])) / (from[1] - from[0]) + to[0];
-}
-async function timeout(delay = 0) {
-  await new Promise((r) => {
-    setTimeout(() => r(), delay);
-  });
-}
-
-/**
- * Pre-calculation
- * Dimension sizes for each cell
- */
-function calculateDimensionData(state, newSizes) {
-  let positionIndexes = [];
-  const positionIndexToItem = {};
-  const indexToItem = {};
-  // to compare how real width changed
-  let newTotal = 0;
-  // combine all sizes
-  const sizes = Object.assign(Object.assign({}, state.sizes), newSizes);
-  // prepare order sorted new sizes and calculate changed real size
-  let newIndexes = [];
-  each(newSizes, (size, index) => {
-    // if first introduced custom size
-    if (!state.sizes[index]) {
-      newTotal += size - (state.realSize ? state.originItemSize : 0);
-      newIndexes.splice(sortedIndex_1(newIndexes, parseInt(index, 10)), 0, parseInt(index, 10));
-    }
-    else {
-      newTotal += size - state.sizes[index];
-    }
-  });
-  // add order to cached order collection for faster linking
-  const updatedIndexesCache = mergeSortedArray(state.indexes, newIndexes);
-  // fill new coordinates
-  reduce_1(updatedIndexesCache, (previous, itemIndex, i) => {
-    const newItem = {
-      itemIndex,
-      start: 0,
-      end: 0,
-    };
-    if (previous) {
-      newItem.start = (itemIndex - previous.itemIndex - 1) * state.originItemSize + previous.end;
-    }
-    else {
-      newItem.start = itemIndex * state.originItemSize;
-    }
-    newItem.end = newItem.start + sizes[itemIndex];
-    positionIndexes.push(newItem.start);
-    indexToItem[itemIndex] = positionIndexToItem[i] = newItem;
-    return newItem;
-  }, undefined);
-  return {
-    indexes: updatedIndexesCache,
-    positionIndexes: [...positionIndexes],
-    positionIndexToItem: Object.assign({}, positionIndexToItem),
-    indexToItem,
-    realSize: state.realSize + newTotal,
-    sizes,
-  };
-}
-function getItemByPosition({ indexes, positionIndexes, originItemSize, positionIndexToItem }, pos) {
-  const item = {
-    itemIndex: 0,
-    start: 0,
-    end: 0,
-  };
-  const currentPlace = indexes.length ? sortedIndex_1(positionIndexes, pos) : 0;
-  // not found or first index
-  if (!currentPlace) {
-    item.itemIndex = Math.floor(pos / originItemSize);
-    item.start = item.itemIndex * originItemSize;
-    item.end = item.start + originItemSize;
-    return item;
-  }
-  const positionItem = positionIndexToItem[currentPlace - 1];
-  // if item has specified size
-  if (positionItem.end > pos) {
-    return positionItem;
-  }
-  // special size item was present before
-  const relativePos = pos - positionItem.end;
-  const relativeIndex = Math.floor(relativePos / originItemSize);
-  item.itemIndex = positionItem.itemIndex + 1 + relativeIndex;
-  item.start = positionItem.end + relativeIndex * originItemSize;
-  item.end = item.start + originItemSize;
-  return item;
-}
-function getItemByIndex(dimension, index) {
-  let item = {
-    itemIndex: index,
-    start: 0,
-    end: 0,
-  };
-  // if item has specified size
-  if (dimension.indexToItem[index]) {
-    return dimension.indexToItem[index];
-  }
-  const currentPlace = dimension.indexes.length ? sortedIndex_1(dimension.indexes, index) : 0;
-  // not found or first index
-  if (!currentPlace) {
-    item.start = item.itemIndex * dimension.originItemSize;
-    item.end = item.start + dimension.originItemSize;
-    return item;
-  }
-  // special size item was present before
-  const positionItem = dimension.indexToItem[dimension.indexes[currentPlace - 1]];
-  item.start = positionItem.end + (index - positionItem.itemIndex - 1) * dimension.originItemSize;
-  item.end = item.start + dimension.originItemSize;
-  return item;
-}
-
-/**
- * Storing pre-calculated
- * Dimension information and sizes
- */
-function initialBase() {
-  return {
-    indexes: [],
-    // item index to size
-    sizes: {},
-    // order in indexes[] to coordinate
-    positionIndexToItem: {},
-    // initial element to coordinate ^
-    indexToItem: {},
-    positionIndexes: [],
-  };
-}
-function initialState$1() {
-  return Object.assign(Object.assign({}, initialBase()), { 
-    // size which all items can take
-    realSize: 0, 
-    // initial item size if it wasn't changed
-    originItemSize: 0, frameOffset: 0 });
-}
-class DimensionStore {
-  constructor() {
-    this.store = createStore(initialState$1());
-  }
-  getCurrentState() {
-    const state = initialState$1();
-    const keys = Object.keys(state);
-    return reduce_1(keys, (r, k) => {
-      const data = this.store.get(k);
-      r[k] = data;
-      return r;
-    }, state);
-  }
-  setRealSize(count) {
-    let realSize = 0;
-    for (let i = 0; i < count; i++) {
-      realSize += this.store.get('sizes')[i] || this.store.get('originItemSize');
-    }
-    setStore(this.store, { realSize });
-  }
-  setStore(data) {
-    setStore(this.store, data);
-  }
-  drop() {
-    setStore(this.store, initialBase());
-  }
-  setDimensionSize(sizes) {
-    const dimensionData = calculateDimensionData(this.getCurrentState(), sizes);
-    setStore(this.store, dimensionData);
-    return dimensionData;
-  }
-}
-
-var lodash = createCommonjsModule(function (module, exports) {
-(function() {
-
-  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
-  var undefined$1;
-
-  /** Used as the semantic version number. */
-  var VERSION = '4.17.21';
-
-  /** Used as the size to enable large array optimizations. */
-  var LARGE_ARRAY_SIZE = 200;
-
-  /** Error message constants. */
-  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
-      FUNC_ERROR_TEXT = 'Expected a function',
-      INVALID_TEMPL_VAR_ERROR_TEXT = 'Invalid `variable` option passed into `_.template`';
-
-  /** Used to stand-in for `undefined` hash values. */
-  var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-  /** Used as the maximum memoize cache size. */
-  var MAX_MEMOIZE_SIZE = 500;
-
-  /** Used as the internal argument placeholder. */
-  var PLACEHOLDER = '__lodash_placeholder__';
-
-  /** Used to compose bitmasks for cloning. */
-  var CLONE_DEEP_FLAG = 1,
-      CLONE_FLAT_FLAG = 2,
-      CLONE_SYMBOLS_FLAG = 4;
-
-  /** Used to compose bitmasks for value comparisons. */
-  var COMPARE_PARTIAL_FLAG = 1,
-      COMPARE_UNORDERED_FLAG = 2;
-
-  /** Used to compose bitmasks for function metadata. */
-  var WRAP_BIND_FLAG = 1,
-      WRAP_BIND_KEY_FLAG = 2,
-      WRAP_CURRY_BOUND_FLAG = 4,
-      WRAP_CURRY_FLAG = 8,
-      WRAP_CURRY_RIGHT_FLAG = 16,
-      WRAP_PARTIAL_FLAG = 32,
-      WRAP_PARTIAL_RIGHT_FLAG = 64,
-      WRAP_ARY_FLAG = 128,
-      WRAP_REARG_FLAG = 256,
-      WRAP_FLIP_FLAG = 512;
-
-  /** Used as default options for `_.truncate`. */
-  var DEFAULT_TRUNC_LENGTH = 30,
-      DEFAULT_TRUNC_OMISSION = '...';
-
-  /** Used to detect hot functions by number of calls within a span of milliseconds. */
-  var HOT_COUNT = 800,
-      HOT_SPAN = 16;
-
-  /** Used to indicate the type of lazy iteratees. */
-  var LAZY_FILTER_FLAG = 1,
-      LAZY_MAP_FLAG = 2,
-      LAZY_WHILE_FLAG = 3;
-
-  /** Used as references for various `Number` constants. */
-  var INFINITY = 1 / 0,
-      MAX_SAFE_INTEGER = 9007199254740991,
-      MAX_INTEGER = 1.7976931348623157e+308,
-      NAN = 0 / 0;
+  /** Used as references for various `Number` constants. */
+  var INFINITY = 1 / 0,
+      MAX_SAFE_INTEGER = 9007199254740991,
+      MAX_INTEGER = 1.7976931348623157e+308,
+      NAN = 0 / 0;
 
   /** Used as references for the maximum length and index of an array. */
   var MAX_ARRAY_LENGTH = 4294967295,
@@ -21948,22 +21596,388 @@ var lodash = createCommonjsModule(function (module, exports) {
 }.call(commonjsGlobal));
 });
 
+/** Used as references for the maximum length and index of an array. */
+var MAX_ARRAY_LENGTH$2 = 4294967295,
+    MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH$2 - 1;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeFloor = Math.floor,
+    nativeMin$1 = Math.min;
+
+/**
+ * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy`
+ * which invokes `iteratee` for `value` and each element of `array` to compute
+ * their sort ranking. The iteratee is invoked with one argument; (value).
+ *
+ * @private
+ * @param {Array} array The sorted array to inspect.
+ * @param {*} value The value to evaluate.
+ * @param {Function} iteratee The iteratee invoked per element.
+ * @param {boolean} [retHighest] Specify returning the highest qualified index.
+ * @returns {number} Returns the index at which `value` should be inserted
+ *  into `array`.
+ */
+function baseSortedIndexBy(array, value, iteratee, retHighest) {
+  var low = 0,
+      high = array == null ? 0 : array.length;
+  if (high === 0) {
+    return 0;
+  }
+
+  value = iteratee(value);
+  var valIsNaN = value !== value,
+      valIsNull = value === null,
+      valIsSymbol = isSymbol_1(value),
+      valIsUndefined = value === undefined;
+
+  while (low < high) {
+    var mid = nativeFloor((low + high) / 2),
+        computed = iteratee(array[mid]),
+        othIsDefined = computed !== undefined,
+        othIsNull = computed === null,
+        othIsReflexive = computed === computed,
+        othIsSymbol = isSymbol_1(computed);
+
+    if (valIsNaN) {
+      var setLow = retHighest || othIsReflexive;
+    } else if (valIsUndefined) {
+      setLow = othIsReflexive && (retHighest || othIsDefined);
+    } else if (valIsNull) {
+      setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);
+    } else if (valIsSymbol) {
+      setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol);
+    } else if (othIsNull || othIsSymbol) {
+      setLow = false;
+    } else {
+      setLow = retHighest ? (computed <= value) : (computed < value);
+    }
+    if (setLow) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+  return nativeMin$1(high, MAX_ARRAY_INDEX);
+}
+
+var _baseSortedIndexBy = baseSortedIndexBy;
+
+/** Used as references for the maximum length and index of an array. */
+var MAX_ARRAY_LENGTH$1 = 4294967295,
+    HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH$1 >>> 1;
+
+/**
+ * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which
+ * performs a binary search of `array` to determine the index at which `value`
+ * should be inserted into `array` in order to maintain its sort order.
+ *
+ * @private
+ * @param {Array} array The sorted array to inspect.
+ * @param {*} value The value to evaluate.
+ * @param {boolean} [retHighest] Specify returning the highest qualified index.
+ * @returns {number} Returns the index at which `value` should be inserted
+ *  into `array`.
+ */
+function baseSortedIndex(array, value, retHighest) {
+  var low = 0,
+      high = array == null ? low : array.length;
+
+  if (typeof value == 'number' && value === value && high <= HALF_MAX_ARRAY_LENGTH) {
+    while (low < high) {
+      var mid = (low + high) >>> 1,
+          computed = array[mid];
+
+      if (computed !== null && !isSymbol_1(computed) &&
+          (retHighest ? (computed <= value) : (computed < value))) {
+        low = mid + 1;
+      } else {
+        high = mid;
+      }
+    }
+    return high;
+  }
+  return _baseSortedIndexBy(array, value, identity_1, retHighest);
+}
+
+var _baseSortedIndex = baseSortedIndex;
+
+/**
+ * Uses a binary search to determine the lowest index at which `value`
+ * should be inserted into `array` in order to maintain its sort order.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Array
+ * @param {Array} array The sorted array to inspect.
+ * @param {*} value The value to evaluate.
+ * @returns {number} Returns the index at which `value` should be inserted
+ *  into `array`.
+ * @example
+ *
+ * _.sortedIndex([30, 50], 40);
+ * // => 1
+ */
+function sortedIndex(array, value) {
+  return _baseSortedIndex(array, value);
+}
+
+var sortedIndex_1 = sortedIndex;
+
+// (arr1[index1] < arr2[index2])
+function simpleCompare(el1, el2) {
+  return el1 < el2;
+}
+/**
+ * Merge sorted array helper function
+ */
+function mergeSortedArray(arr1, arr2, compareFn = simpleCompare) {
+  const merged = [];
+  let index1 = 0;
+  let index2 = 0;
+  let current = 0;
+  while (current < arr1.length + arr2.length) {
+    let isArr1Depleted = index1 >= arr1.length;
+    let isArr2Depleted = index2 >= arr2.length;
+    if (!isArr1Depleted && (isArr2Depleted || compareFn(arr1[index1], arr2[index2]))) {
+      merged[current] = arr1[index1];
+      index1++;
+    }
+    else {
+      merged[current] = arr2[index2];
+      index2++;
+    }
+    current++;
+  }
+  return merged;
+}
+/* Calculate system scrollbar width */
+function getScrollbarWidth(doc) {
+  // Creating invisible container
+  const outer = doc.createElement('div');
+  const styles = outer.style;
+  styles.visibility = 'hidden';
+  styles.overflow = 'scroll'; // forcing scrollbar to appear
+  styles.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+  doc.body.appendChild(outer);
+  // Creating inner element and placing it in the container
+  const inner = doc.createElement('div');
+  outer.appendChild(inner);
+  // Calculating difference between container's full width and the child width
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  // Removing temporary elements from the DOM
+  outer.parentNode.removeChild(outer);
+  return scrollbarWidth;
+}
+/* Scale a value between 2 ranges
+ *
+ * Sample:
+ * // 55 from a 0-100 range to a 0-1000 range (Ranges don't have to be positive)
+ * const n = scaleValue(55, [0,100], [0,1000]);
+ *
+ * Ranges of two values
+ * @from
+ * @to
+ *
+ * ~~ return value does the equivalent of Math.floor but faster.
+ */
+function scaleValue(value, from, to) {
+  return ((to[1] - to[0]) * (value - from[0])) / (from[1] - from[0]) + to[0];
+}
+/**
+ * Async timeout
+ */
+async function timeout(delay = 0) {
+  await new Promise((r) => {
+    setTimeout(() => r(), delay);
+  });
+}
+
+/**
+ * Pre-calculation
+ * Dimension sizes for each cell
+ */
+function calculateDimensionData({ sizes: oldSizes, indexes: oldIndexes, originItemSize, realSize }, newSizes = {}) {
+  const positionIndexes = [];
+  const positionIndexToItem = {};
+  const indexToItem = {};
+  // to compare how real width changed
+  let newTotal = 0;
+  // combine all sizes
+  const sizes = Object.assign(Object.assign({}, oldSizes), newSizes);
+  // prepare order sorted new sizes and calculate changed real size
+  let newIndexes = [];
+  each(newSizes, (size, index) => {
+    // if first introduced custom size
+    if (!oldSizes[index]) {
+      newTotal += size - (realSize ? originItemSize : 0);
+      newIndexes.splice(sortedIndex_1(newIndexes, parseInt(index, 10)), 0, parseInt(index, 10));
+    }
+    else {
+      newTotal += size - oldSizes[index];
+    }
+  });
+  // add order to cached order collection for faster linking
+  const updatedIndexesCache = mergeSortedArray(oldIndexes, newIndexes);
+  // fill new coordinates
+  reduce_1(updatedIndexesCache, (previous, itemIndex, i) => {
+    const newItem = {
+      itemIndex,
+      start: 0,
+      end: 0,
+    };
+    if (previous) {
+      newItem.start = (itemIndex - previous.itemIndex - 1) * originItemSize + previous.end;
+    }
+    else {
+      newItem.start = itemIndex * originItemSize;
+    }
+    newItem.end = newItem.start + sizes[itemIndex];
+    positionIndexes.push(newItem.start);
+    indexToItem[itemIndex] = positionIndexToItem[i] = newItem;
+    return newItem;
+  }, undefined);
+  return {
+    indexes: updatedIndexesCache,
+    positionIndexes: [...positionIndexes],
+    positionIndexToItem: Object.assign({}, positionIndexToItem),
+    indexToItem,
+    realSize: realSize + newTotal,
+    sizes,
+  };
+}
+/**
+ * Calculate item by position
+ */
+function getItemByPosition({ indexes, positionIndexes, originItemSize, positionIndexToItem }, pos) {
+  const item = {
+    itemIndex: 0,
+    start: 0,
+    end: 0,
+  };
+  const currentPlace = indexes.length ? sortedIndex_1(positionIndexes, pos) : 0;
+  // not found or first index
+  if (!currentPlace) {
+    item.itemIndex = Math.floor(pos / originItemSize);
+    item.start = item.itemIndex * originItemSize;
+    item.end = item.start + originItemSize;
+    return item;
+  }
+  const positionItem = positionIndexToItem[currentPlace - 1];
+  // if item has specified size
+  if (positionItem.end > pos) {
+    return positionItem;
+  }
+  // special size item was present before
+  const relativePos = pos - positionItem.end;
+  const relativeIndex = Math.floor(relativePos / originItemSize);
+  item.itemIndex = positionItem.itemIndex + 1 + relativeIndex;
+  item.start = positionItem.end + relativeIndex * originItemSize;
+  item.end = item.start + originItemSize;
+  return item;
+}
+function getItemByIndex(dimension, index) {
+  let item = {
+    itemIndex: index,
+    start: 0,
+    end: 0,
+  };
+  // if item has specified size
+  if (dimension.indexToItem[index]) {
+    return dimension.indexToItem[index];
+  }
+  const currentPlace = dimension.indexes.length ? sortedIndex_1(dimension.indexes, index) : 0;
+  // not found or first index
+  if (!currentPlace) {
+    item.start = item.itemIndex * dimension.originItemSize;
+    item.end = item.start + dimension.originItemSize;
+    return item;
+  }
+  // special size item was present before
+  const positionItem = dimension.indexToItem[dimension.indexes[currentPlace - 1]];
+  item.start = positionItem.end + (index - positionItem.itemIndex - 1) * dimension.originItemSize;
+  item.end = item.start + dimension.originItemSize;
+  return item;
+}
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
+function initialBase() {
+  return {
+    indexes: [],
+    // item index to size
+    sizes: {},
+    // order in indexes[] to coordinate
+    positionIndexToItem: {},
+    // initial element to coordinate ^
+    indexToItem: {},
+    positionIndexes: [],
+  };
+}
+function initialState$1() {
+  return Object.assign(Object.assign({}, initialBase()), { 
+    // size which all items can take
+    realSize: 0, 
+    // initial item size if it wasn't changed
+    originItemSize: 0 });
+}
+class DimensionStore {
+  constructor() {
+    this.store = createStore(initialState$1());
+  }
+  getCurrentState() {
+    const state = initialState$1();
+    const keys = Object.keys(state);
+    return reduce_1(keys, (r, k) => {
+      const data = this.store.get(k);
+      r[k] = data;
+      return r;
+    }, state);
+  }
+  setRealSize(count) {
+    let realSize = 0;
+    for (let i = 0; i < count; i++) {
+      realSize += this.store.get('sizes')[i] || this.store.get('originItemSize');
+    }
+    setStore(this.store, { realSize });
+  }
+  dispose() {
+    setStore(this.store, initialState$1());
+  }
+  setStore(data) {
+    setStore(this.store, data);
+  }
+  drop() {
+    setStore(this.store, initialBase());
+  }
+  setDimensionSize(sizes) {
+    const dimensionData = calculateDimensionData(this.getCurrentState(), sizes);
+    setStore(this.store, dimensionData);
+    return dimensionData;
+  }
+}
+
 class DimensionProvider {
   constructor(viewports, config) {
     this.viewports = viewports;
-    const sizeChanged = lodash.debounce(() => config.realSizeChanged(), 100);
+    const sizeChanged = lodash.debounce((k) => config.realSizeChanged(k), 100);
     this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
       sources[k] = new DimensionStore();
-      sources[k].store.onChange('realSize', () => sizeChanged());
+      sources[k].store.onChange('realSize', () => sizeChanged(k));
       return sources;
     }, {});
   }
-  getItemByPosition(data, pos) {
-    return getItemByPosition(data, pos);
+  clearSize(t, count) {
+    this.stores[t].drop();
+    // after we done with drop trigger viewport recalculaction
+    this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
+    this.setRealSize(count, t);
   }
-  setDimensionSize(dimensionType, sizes) {
-    this.stores[dimensionType].setDimensionSize(sizes);
-    this.viewports.stores[dimensionType].setViewPortDimension(sizes);
+  setDimensionSize(type, sizes) {
+    this.stores[type].setDimensionSize(sizes);
+    this.viewports.stores[type].setViewPortDimension(sizes);
   }
   setRealSize(realCount, type) {
     this.viewports.stores[type].setViewport({ realCount });
@@ -22006,7 +22020,7 @@ class DimensionProvider {
     return { y, x };
   }
   setColumns(type, sizes, noVirtual = false) {
-    this.stores[type].setDimensionSize(sizes);
+    this.setDimensionSize(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }
@@ -22225,7 +22239,7 @@ function getLastItem(s) {
  * Viewport information for each dimension
  * Redraw items during scrolling
  */
-function initialState() {
+function initialState(type) {
   return {
     // virtual item information per rendered item
     items: [],
@@ -22238,12 +22252,15 @@ function initialState() {
     realCount: 0,
     // last coordinate for store position restore
     lastCoordinate: 0,
+    type
   };
 }
 class ViewportStore {
-  constructor() {
-    this.store = createStore(initialState());
-    this.store.onChange('realCount', () => this.clear());
+  constructor(type) {
+    this.store = createStore(initialState(type));
+    this.store.onChange('realCount', () => {
+      this.clear();
+    });
   }
   /** Render viewport based on coordinate, this is main method for draw */
   setViewPortCoordinate(position, dimension) {
@@ -22252,7 +22269,7 @@ class ViewportStore {
     if (!virtualSize) {
       return;
     }
-    const frameOffset = dimension.frameOffset;
+    const frameOffset = 1;
     const outsize = frameOffset * 2 * dimension.originItemSize;
     virtualSize += outsize;
     let maxCoordinate = virtualSize;
@@ -22288,7 +22305,9 @@ class ViewportStore {
       }
     }
   }
-  /** Update viewport sizes */
+  /**
+   * Update viewport sizes
+  */
   setViewPortDimension(sizes) {
     const items = this.store.get('items');
     const count = items.length;
@@ -22324,6 +22343,32 @@ class ViewportStore {
     }
     setStore(this.store, { items: [...items] });
   }
+  setOriginalSizes(size) {
+    const items = this.store.get('items');
+    const count = items.length;
+    // viewport not inited
+    if (!count) {
+      return;
+    }
+    let i = 0;
+    let start = this.store.get('start');
+    let pos = this.store.get('lastCoordinate');
+    // loop through array from initial item after recombination
+    while (i < count) {
+      const item = items[start];
+      item.start = pos;
+      item.size = size;
+      item.end = item.start + size;
+      pos = item.end;
+      // loop by start index
+      start++;
+      i++;
+      if (start === count) {
+        start = 0;
+      }
+    }
+    setStore(this.store, { items: [...items] });
+  }
   getItems() {
     return {
       items: this.store.get('items'),
@@ -22342,7 +22387,7 @@ class ViewportStore {
 class ViewportProvider {
   constructor() {
     this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
-      sources[k] = new ViewportStore();
+      sources[k] = new ViewportStore(k);
       return sources;
     }, {});
   }
@@ -22393,7 +22438,7 @@ class AutoSizeColumn extends BasePlugin {
       this.columnSet(columns);
     };
     const headerDblClick = ({ detail }) => {
-      const type = ColumnDataProvider.getColumnType(detail);
+      const type = ColumnDataProvider.getColumnType(detail.column);
       const size = this.getColumnSize(detail.index, type);
       if (size) {
         this.providers.dimensionProvider.setDimensionSize(type, {
@@ -23394,6 +23439,7 @@ const DATA_ROW = 'data-rgRow';
 const UUID = 'grid-uuid';
 const DISABLED_CLASS = 'disabled';
 const CELL_CLASS = 'rgCell';
+const ROW_HEADER_TYPE = 'rowHeaders';
 const HEADER_CLASS = 'rgHeaderCell';
 const HEADER_SORTABLE_CLASS = 'sortable';
 const HEADER_ROW_CLASS = 'header-rgRow';
@@ -24229,13 +24275,15 @@ const RevoViewPort = ({ viewports, dimensions, orderRef, nakedClick, registerEle
     }
   };
   let el;
+  const typeRow = 'rgRow';
+  const typeCol = 'rgCol';
   return [
     h("div", { class: "main-viewport", ref: e => (el = e), onClick: e => viewPortClick(e, el) },
       h("div", { class: "viewports" },
         children,
-        h("revogr-scroll-virtual", { class: "vertical", dimension: "rgRow", viewportStore: viewports['rgRow'].store, dimensionStore: dimensions['rgRow'].store, ref: el => registerElement(el, 'rowScroll'), onScrollVirtual: e => onScroll(e.detail) }),
+        h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => registerElement(el, 'rowScroll'), onScrollVirtual: e => onScroll(e.detail) }),
         h(OrderRenderer, { ref: orderRef }))),
-    h("revogr-scroll-virtual", { class: "horizontal", dimension: "rgCol", viewportStore: viewports['rgCol'].store, dimensionStore: dimensions['rgCol'].store, ref: el => registerElement(el, 'colScroll'), onScrollVirtual: e => onScroll(e.detail) }),
+    h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => registerElement(el, 'colScroll'), onScrollVirtual: e => onScroll(e.detail) }),
   ];
 };
 
@@ -24319,12 +24367,17 @@ class SelectionStore {
     setStore(this.store, { focus: null, range: null, edit: null, tempRange: null });
   }
   setFocus(focus, end) {
-    setStore(this.store, {
-      focus,
-      range: getRange(focus, end),
-      edit: null,
-      tempRange: null,
-    });
+    if (!end) {
+      setStore(this.store, { focus });
+    }
+    else {
+      setStore(this.store, {
+        focus,
+        range: getRange(focus, end),
+        edit: null,
+        tempRange: null,
+      });
+    }
   }
   setTempArea(range) {
     setStore(this.store, { tempRange: range === null || range === void 0 ? void 0 : range.area, tempRangeType: range === null || range === void 0 ? void 0 : range.type, edit: null });
@@ -24366,6 +24419,12 @@ class SelectionStoreConnector {
     this.stores = {};
     this.columnStores = {};
     this.rowStores = {};
+    /**
+     * Helpers for data conversion
+     */
+    this.storesByType = {};
+    this.storesXToType = {};
+    this.storesYToType = {};
     this.sections = [];
   }
   get focusedStore() {
@@ -24417,8 +24476,8 @@ class SelectionStoreConnector {
       this.dirty = false;
     }
   }
-  registerColumn(x) {
-    // if hidden just create store
+  registerColumn(x, type) {
+    // if hidden just create store but no operations needed
     if (isHiddenStore(x)) {
       return new SelectionStore();
     }
@@ -24426,9 +24485,12 @@ class SelectionStoreConnector {
       return this.columnStores[x];
     }
     this.columnStores[x] = new SelectionStore();
+    // build cross linking type to position
+    this.storesByType[type] = x;
+    this.storesXToType[x] = type;
     return this.columnStores[x];
   }
-  registerRow(y) {
+  registerRow(y, type) {
     // if hidden just create store
     if (isHiddenStore(y)) {
       return new SelectionStore();
@@ -24437,6 +24499,9 @@ class SelectionStoreConnector {
       return this.rowStores[y];
     }
     this.rowStores[y] = new SelectionStore();
+    // build cross linking type to position
+    this.storesByType[type] = y;
+    this.storesYToType[y] = type;
     return this.rowStores[y];
   }
   /**
@@ -24462,22 +24527,35 @@ class SelectionStoreConnector {
       this.rowStores[y].setRangeArea(c);
     });
     // clean up on remove
-    (_b = this.stores[y][x]) === null || _b === void 0 ? void 0 : _b.store.on('dispose', () => {
-      var _a, _b;
-      (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
-      (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
-      delete this.rowStores[y];
-      delete this.columnStores[x];
-      if (this.stores[y]) {
-        delete this.stores[y][x];
-      }
-      // clear empty rows
-      if (!Object.keys(this.stores[y] || {}).length) {
-        delete this.stores[y];
-      }
-    });
+    (_b = this.stores[y][x]) === null || _b === void 0 ? void 0 : _b.store.on('dispose', () => this.destroy(x, y));
     return this.stores[y][x];
   }
+  destroy(x, y) {
+    var _a, _b;
+    (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
+    delete this.rowStores[y];
+    delete this.columnStores[x];
+    // clear x cross link
+    if (this.storesXToType[x]) {
+      const type = this.storesXToType[x];
+      delete this.storesXToType[x];
+      delete this.storesByType[type];
+    }
+    // clear y cross link
+    if (this.storesYToType[y]) {
+      const type = this.storesYToType[y];
+      delete this.storesYToType[y];
+      delete this.storesByType[type];
+    }
+    if (this.stores[y]) {
+      delete this.stores[y][x];
+    }
+    // clear empty rows
+    if (!Object.keys(this.stores[y] || {}).length) {
+      delete this.stores[y];
+    }
+  }
   setEditByCell(storePos, editCell) {
     this.focusByCell(storePos, editCell, editCell);
     this.setEdit('');
@@ -24585,20 +24663,18 @@ class ViewportService {
   constructor(sv, contentHeight) {
     var _a, _b;
     this.sv = sv;
-    this.storesByType = {};
-    this.storesXToType = {};
-    this.storesYToType = {};
     (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
     this.columns = this.getViewportColumnData(contentHeight);
     (_b = this.sv.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
   }
-  onColumnResize(type, e, store) {
+  onColumnResize(type, { detail }, store) {
     var _a;
-    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, e.detail);
-    const changedItems = lodash.reduce(e.detail || {}, (r, size, index) => {
-      const item = getSourceItem(store, parseInt(index, 10));
+    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, detail);
+    const changedItems = lodash.reduce(detail || {}, (r, size, i) => {
+      const index = parseInt(i, 10);
+      const item = getSourceItem(store, index);
       if (item) {
-        r[item.prop] = Object.assign(Object.assign({}, item), { size });
+        r[index] = Object.assign(Object.assign({}, item), { size });
       }
       return r;
     }, {});
@@ -24628,9 +24704,7 @@ class ViewportService {
         colStore,
         onHeaderresize: e => this.onColumnResize(val, e, colStore),
       };
-      if (val === 'rgCol') {
-        column.onResizeViewport = (e) => { var _a; return (_a = this.sv.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, { virtualSize: e.detail.size }); };
-      }
+      column.onResizeViewport = (e) => { var _a; return (_a = this.sv.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, { virtualSize: e.detail.size }); };
       const colData = this.gatherColumnData(column);
       const columnSelectionStore = this.registerCol(colData.position.x, val);
       // render per each column data collections vertically
@@ -24659,17 +24733,11 @@ class ViewportService {
   }
   /** register selection store for Row */
   registerRow(y, type) {
-    // link to position
-    this.storesByType[type] = y;
-    this.storesYToType[y] = type;
-    return this.sv.selectionStoreConnector.registerRow(y).store;
+    return this.sv.selectionStoreConnector.registerRow(y, type).store;
   }
   /** register selection store for Column */
   registerCol(x, type) {
-    // link to position
-    this.storesByType[type] = x;
-    this.storesXToType[x] = type;
-    return this.sv.selectionStoreConnector.registerColumn(x).store;
+    return this.sv.selectionStoreConnector.registerColumn(x, type).store;
   }
   /** Collect Column data */
   gatherColumnData(data) {
@@ -24696,6 +24764,7 @@ class ViewportService {
     };
     return {
       prop,
+      type: data.colType,
       position: data.position,
       headerProp,
       parent,
@@ -24759,9 +24828,9 @@ class ViewportService {
     if (!focused) {
       return null;
     }
-    const colType = this.storesXToType[focused.position.x];
+    const colType = this.sv.selectionStoreConnector.storesXToType[focused.position.x];
     const column = this.sv.columnProvider.getColumn(focused.cell.x, colType);
-    const rowType = this.storesYToType[focused.position.x];
+    const rowType = this.sv.selectionStoreConnector.storesYToType[focused.position.x];
     const model = this.sv.dataProvider.getModel(focused.cell.x, rowType);
     return {
       column,
@@ -24772,7 +24841,7 @@ class ViewportService {
     };
   }
   getStoreCoordinateByType(colType, rowType) {
-    const stores = this.storesByType;
+    const stores = this.sv.selectionStoreConnector.storesByType;
     const storeCoordinate = {
       x: stores[colType],
       y: stores[rowType],
@@ -24799,8 +24868,9 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
   /** render viewports columns */
   for (let view of columns) {
     /** render viewports rows */
+    const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: resize, columnFilter });
     const dataViews = [
-      h("revogr-header", Object.assign({ viewportCol: view.viewportCol }, view.headerProp, { selectionStore: view.columnSelectionStore, slot: HEADER_SLOT, columnFilter: columnFilter, canResize: resize })),
+      h("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT })),
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
@@ -24981,8 +25051,19 @@ const rowDefinitionByType = (newVal = []) => {
     return r;
   }, {});
 };
+const rowDefinitionRemoveByType = (oldVal = []) => {
+  return reduce_1(oldVal, (r, v) => {
+    if (!r[v.type]) {
+      r[v.type] = [];
+    }
+    if (v.size) {
+      r[v.type].push(v.index);
+    }
+    return r;
+  }, {});
+};
 
-const revoGridStyleCss = ".revo-drag-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 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 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:7px;background-size:cover;background-repeat:no-repeat}.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:#2ee072;border:1px solid #20d565}.revo-button.light{border:2px solid #cedefa;line-height:32px;background:none;color:#4876ca;box-shadow:none}revo-grid[theme=default]{font-size:12px}revo-grid[theme=default] revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#61656a}revo-grid[theme=default] revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #c0c0c0, -1px 0 0 0 #c0c0c0 inset, 0 -1px 0 0 #c0c0c0, 0 -1px 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell{color:#61656a;box-shadow:0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] .rowHeaders revogr-header{box-shadow:0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #c0c0c0 inset}revo-grid[theme=default] .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{text-align:center}revo-grid[theme=default] 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{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] 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{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] .viewports{width:100%}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] .viewports{width:100%}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] .viewports{width:100%}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] .viewports{width:100%}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%;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 .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:red}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{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 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 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:7px;background-size:cover;background-repeat:no-repeat}.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:#2ee072;border:1px solid #20d565}.revo-button.light{border:2px solid #cedefa;line-height:32px;background:none;color:#4876ca;box-shadow:none}revo-grid[theme=default]{font-size:12px}revo-grid[theme=default] revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#61656a}revo-grid[theme=default] revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #c0c0c0, -1px 0 0 0 #c0c0c0 inset, 0 -1px 0 0 #c0c0c0, 0 -1px 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell{color:#61656a;box-shadow:0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] .rowHeaders revogr-header{box-shadow:0 -1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #c0c0c0 inset, -1px 0 0 0 #c0c0c0 inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #c0c0c0 inset}revo-grid[theme=default] .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{text-align:center}revo-grid[theme=default] 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{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] 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{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] .viewports{width:100%}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] .viewports{width:100%}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] .viewports{width:100%}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] .viewports{width:100%}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%;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 .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:red;pointer-events:none}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 RevoGridComponent = class extends HTMLElement {
   constructor() {
@@ -24993,7 +25074,7 @@ const RevoGridComponent = class extends HTMLElement {
     this.beforerangeedit = createEvent(this, "beforerangeedit", 7);
     this.afteredit = createEvent(this, "afteredit", 7);
     this.beforeautofill = createEvent(this, "beforeautofill", 7);
-    this.beforeaange = createEvent(this, "beforeaange", 7);
+    this.beforeange = createEvent(this, "beforeange", 7);
     this.roworderchanged = createEvent(this, "roworderchanged", 7);
     this.beforesourcesortingapply = createEvent(this, "beforesourcesortingapply", 7);
     this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
@@ -25003,6 +25084,7 @@ const RevoGridComponent = class extends HTMLElement {
     this.beforecellfocus = createEvent(this, "beforecellfocus", 7);
     this.beforefocuslost = createEvent(this, "beforefocuslost", 7);
     this.beforesourceset = createEvent(this, "beforesourceset", 7);
+    this.beforeAnySource = createEvent(this, "before-any-source", 7);
     this.aftersourceset = createEvent(this, "aftersourceset", 7);
     this.beforecolumnsset = createEvent(this, "beforecolumnsset", 7);
     this.beforecolumnapplied = createEvent(this, "beforecolumnapplied", 7);
@@ -25015,6 +25097,7 @@ const RevoGridComponent = class extends HTMLElement {
     this.beforeexport = createEvent(this, "beforeexport", 7);
     this.beforeeditstart = createEvent(this, "beforeeditstart", 7);
     this.aftercolumnresize = createEvent(this, "aftercolumnresize", 7);
+    this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
     /**
      * Defines how many rows/columns should be rendered outside visible area.
      */
@@ -25342,13 +25425,13 @@ const RevoGridComponent = class extends HTMLElement {
   }
   onRangeChanged(e) {
     e.cancelBubble = true;
-    const beforeaange = this.beforeaange.emit(e.detail);
-    if (beforeaange.defaultPrevented) {
+    const beforeange = this.beforeange.emit(e.detail);
+    if (beforeange.defaultPrevented) {
       e.preventDefault();
     }
     const beforeFill = this.beforeautofill.emit(e.detail);
     if (beforeFill.defaultPrevented) {
-      return;
+      e.preventDefault();
     }
   }
   onRowDropped(e) {
@@ -25389,39 +25472,55 @@ const RevoGridComponent = class extends HTMLElement {
   }
   themeChanged(t) {
     this.themeService.register(t);
-    this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize, frameOffset: this.frameSize || 0 }, 'rgRow');
-    this.dimensionProvider.setSettings({ originItemSize: this.colSize, frameOffset: this.frameSize || 0 }, 'rgCol');
-  }
-  dataChanged(source = []) {
-    let newSource = [...source];
-    const beforesourceset = this.beforesourceset.emit({
-      type: 'rgRow',
-      source: newSource,
-    });
-    newSource = beforesourceset.detail.source;
-    newSource = this.dataProvider.setData(newSource, 'rgRow');
-    this.aftersourceset.emit({
-      type: 'rgRow',
-      source: newSource,
-    });
-  }
-  dataBottomChanged(newVal = []) {
-    this.dataProvider.setData(newVal, 'rowPinEnd');
-  }
-  dataTopChanged(newVal = []) {
-    this.dataProvider.setData(newVal, 'rowPinStart');
+    this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+    this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
+  }
+  dataSourceChanged(newVal = [], _, watchName) {
+    let type = 'rgRow';
+    switch (watchName) {
+      case 'pinnedBottomSource':
+        type = 'rowPinEnd';
+        break;
+      case 'pinnedTopSource':
+        type = 'rowPinStart';
+        break;
+      case 'source':
+        type = 'rgRow';
+        /** applied for source only for cross compatability between plugins */
+        const beforesourceset = this.beforesourceset.emit({
+          type,
+          source: newVal,
+        });
+        newVal = beforesourceset.detail.source;
+        break;
+    }
+    this.dataSourceApply(newVal, type);
+    /** applied for source only for cross compatability between plugins */
+    if (watchName === 'source') {
+      this.aftersourceset.emit({
+        type,
+        source: newVal,
+      });
+    }
   }
-  rowDefChanged(newVal = [], oldVal) {
+  rowDefChanged(after, before) {
+    const { detail: { vals: newVal, oldVals: oldVal } } = this.beforerowdefinition.emit({
+      vals: after,
+      oldVals: before
+    });
+    // apply new vals
+    const newRows = rowDefinitionByType(newVal);
     // clear current defs
     if (oldVal) {
-      let oldRows = rowDefinitionByType(oldVal.map(v => (Object.assign(Object.assign({}, v), { size: this.rowSize }))));
-      each(oldRows, (r, k) => this.dimensionProvider.setDimensionSize(k, r.sizes || {}));
+      const remove = rowDefinitionRemoveByType(oldVal);
+      // clear all old data and drop sizes
+      each(remove, (_, t) => {
+        this.dimensionProvider.clearSize(t, this.dataProvider.stores[t].store.get('source').length);
+      });
     }
     if (!newVal.length) {
       return;
     }
-    // apply new vals
-    const newRows = rowDefinitionByType(newVal);
     each(newRows, (r, k) => this.dimensionProvider.setDimensionSize(k, r.sizes || {}));
   }
   trimmedRowsChanged(newVal = {}) {
@@ -25466,13 +25565,21 @@ const RevoGridComponent = class extends HTMLElement {
       this.internalPlugins.splice(index, 1);
     }
   }
+  dataSourceApply(source = [], type = 'rgRow') {
+    const beforesourceset = this.beforeAnySource.emit({
+      type,
+      source,
+    });
+    const newSource = [...beforesourceset.detail.source];
+    return this.dataProvider.setData(newSource, type);
+  }
   connectedCallback() {
     this.viewportProvider = new ViewportProvider();
     this.themeService = new ThemeService({
       rowSize: this.rowSize,
     });
     const dimensionProviderConfig = {
-      realSizeChanged: () => this.contentsizechanged.emit(),
+      realSizeChanged: (k) => this.contentsizechanged.emit(k),
     };
     this.dimensionProvider = new DimensionProvider(this.viewportProvider, dimensionProviderConfig);
     this.columnProvider = new ColumnDataProvider();
@@ -25511,9 +25618,9 @@ const RevoGridComponent = class extends HTMLElement {
     this.applyStretch(this.stretch);
     this.themeChanged(this.theme);
     this.columnChanged(this.columns);
-    this.dataChanged(this.source);
-    this.dataTopChanged(this.pinnedTopSource);
-    this.dataBottomChanged(this.pinnedBottomSource);
+    this.dataSourceChanged(this.source, undefined, 'source');
+    this.dataSourceChanged(this.pinnedTopSource, undefined, 'pinnedTopSource');
+    this.dataSourceChanged(this.pinnedBottomSource, undefined, 'pinnedBottomSource');
     this.trimmedRowsChanged(this.trimmedRows);
     this.rowDefChanged(this.rowDefinitions);
     this.groupingChanged(this.grouping);
@@ -25569,9 +25676,9 @@ const RevoGridComponent = class extends HTMLElement {
   static get watchers() { return {
     "columns": ["columnChanged"],
     "theme": ["themeChanged"],
-    "source": ["dataChanged"],
-    "pinnedBottomSource": ["dataBottomChanged"],
-    "pinnedTopSource": ["dataTopChanged"],
+    "source": ["dataSourceChanged"],
+    "pinnedBottomSource": ["dataSourceChanged"],
+    "pinnedTopSource": ["dataSourceChanged"],
     "rowDefinitions": ["rowDefChanged"],
     "trimmedRows": ["trimmedRowsChanged"],
     "grouping": ["groupingChanged"],
@@ -25694,7 +25801,7 @@ class ColumnService {
     }
     return props;
   }
-  customRenderer(_r, c, model, providers) {
+  customRenderer(_, c, model, providers) {
     var _a;
     const tpl = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.cellTemplate;
     if (tpl) {
@@ -25747,16 +25854,17 @@ class ColumnService {
       rowIndex,
     };
   }
-  getRangeData(d) {
+  getRangeData(d, columns) {
     const changed = {};
     // get original length sizes
-    const copyColLength = d.oldProps.length;
-    const copyFrom = this.copyRangeArray(d.oldRange, d.oldProps, this.dataStore);
-    const copyRowLength = copyFrom.length;
+    const copyColLength = d.oldRange.x1 - d.oldRange.x + 1;
+    const copyRowLength = d.oldRange.y1 - d.oldRange.y + 1;
+    const mapping = {};
     // rows
     for (let rowIndex = d.newRange.y, i = 0; rowIndex < d.newRange.y1 + 1; rowIndex++, i++) {
       // copy original data link
-      const copyRow = copyFrom[i % copyRowLength];
+      const oldRowIndex = d.oldRange.y + i % copyRowLength;
+      const copyRow = getSourceItem(this.dataStore, oldRowIndex);
       // columns
       for (let colIndex = d.newRange.x, j = 0; colIndex < d.newRange.x1 + 1; colIndex++, j++) {
         // check if old range area
@@ -25764,18 +25872,30 @@ class ColumnService {
           continue;
         }
         const p = this.columns[colIndex].prop;
-        const currentCol = j % copyColLength;
+        const copyColIndex = d.oldRange.x + j % copyColLength;
+        const copyColumnProp = columns[copyColIndex].prop;
         /** if can write */
         if (!this.isReadOnly(rowIndex, colIndex)) {
           /** to show before save */
           if (!changed[rowIndex]) {
             changed[rowIndex] = {};
           }
-          changed[rowIndex][p] = copyRow[currentCol];
+          changed[rowIndex][p] = copyRow[copyColumnProp];
+          /** Generate mapping object */
+          if (!mapping[rowIndex]) {
+            mapping[rowIndex] = {};
+          }
+          mapping[rowIndex][p] = {
+            colProp: copyColumnProp,
+            rowIndex: oldRowIndex
+          };
         }
       }
     }
-    return changed;
+    return {
+      changed,
+      mapping,
+    };
   }
   getTransformedDataToApply(start, data) {
     const changed = {};
@@ -25818,6 +25938,9 @@ class ColumnService {
     const items = {};
     for (let rowIndex in data) {
       const oldModel = (items[rowIndex] = getSourceItem(this.dataStore, parseInt(rowIndex, 10)));
+      if (!oldModel) {
+        continue;
+      }
       for (let prop in data[rowIndex]) {
         oldModel[prop] = data[rowIndex][prop];
       }
@@ -25845,7 +25968,7 @@ class ColumnService {
   }
   copyRangeArray(range, rangeProps, store) {
     const toCopy = [];
-    for (let i = range.y; i < range.y1 + 1; i++) {
+    for (let i = range.y; i <= range.y1; i++) {
       const rgRow = [];
       for (let prop of rangeProps) {
         const item = getSourceItem(store, i);
@@ -25859,7 +25982,7 @@ class ColumnService {
     if (typeof val === 'undefined' || val === null) {
       return '';
     }
-    return val.toString();
+    return val;
   }
   destroy() {
     this.unsubscribe.forEach(f => f());
@@ -25869,7 +25992,7 @@ class ColumnService {
 const CellRenderer = ({ model, onDragStart }) => {
   const els = [];
   if (model.column.rowDrag && isRowDragService(model.column.rowDrag, model)) {
-    els.push(h("span", { class: DRAGGABLE_CLASS, onMouseDown: e => onDragStart(e) },
+    els.push(h("span", { class: DRAGGABLE_CLASS, onMouseDown: e => onDragStart(Object.assign(Object.assign({}, e), { model })) },
       h("span", { class: DRAG_ICON_CLASS })));
   }
   els.push(`${ColumnService.getData(model.model[model.prop])}`);
@@ -25920,6 +26043,7 @@ const RevogrData$1 = class extends HTMLElement {
     super();
     this.__registerHost();
     this.dragStartCell = createEvent(this, "dragStartCell", 7);
+    this.beforeRowRender = createEvent(this, "beforeRowRender", 7);
   }
   onStoreChange() {
     var _a;
@@ -25944,10 +26068,10 @@ const RevogrData$1 = class extends HTMLElement {
     const rowsEls = [];
     const depth = this.dataStore.get('groupingDepth');
     for (let rgRow of rows) {
-      const dataRow = getSourceItem(this.dataStore, rgRow.itemIndex);
+      const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);
       /** grouping */
-      if (isGrouping(dataRow)) {
-        rowsEls.push(h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataRow, hasExpand: this.columnService.hasGrouping })));
+      if (isGrouping(dataItem)) {
+        rowsEls.push(h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataItem, hasExpand: this.columnService.hasGrouping })));
         continue;
       }
       /** grouping end */
@@ -25959,7 +26083,13 @@ const RevogrData$1 = class extends HTMLElement {
       for (let rgCol of cols) {
         cells.push(this.getCellRenderer(rgRow, rgCol, /** grouping apply*/ this.columnService.hasGrouping ? depth : 0));
       }
-      rowsEls.push(h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells));
+      const row = h(RowRenderer, { rowClass: rowClass, size: rgRow.size, start: rgRow.start }, cells);
+      this.beforeRowRender.emit({
+        node: row,
+        item: rgRow,
+        dataItem
+      });
+      rowsEls.push(row);
     }
     return rowsEls;
   }
@@ -25992,6 +26122,8 @@ const RevogrData$1 = class extends HTMLElement {
   }
   get providers() {
     return {
+      type: this.type,
+      data: this.dataStore,
       viewport: this.viewportCol,
       dimension: this.dimensionRow,
       selection: this.rowSelectionStore,
@@ -27061,7 +27193,7 @@ const GroupHeaderRenderer = (p) => {
     },
     onResize: p.onResize,
   };
-  return (h(HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { providers: p.providers, index: p.start }), props: groupProps }));
+  return (h(HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps }));
 };
 
 const ColumnGroupsRenderer = ({ providers, depth, groups, visibleProps, dimensionCol, canResize, onResize }) => {
@@ -27097,11 +27229,17 @@ const RevogrHeaderComponent = class extends HTMLElement {
     this.__registerHost();
     this.initialHeaderClick = createEvent(this, "initialHeaderClick", 7);
     this.headerresize = createEvent(this, "headerresize", 7);
+    this.beforeResize = createEvent(this, "before-resize", 7);
     this.headerdblClick = createEvent(this, "headerdblClick", 7);
     this.parent = '';
     this.groupingDepth = 0;
   }
   onResize({ width }, index) {
+    const col = this.colData[index];
+    const event = this.beforeResize.emit([Object.assign(Object.assign({}, col), { size: width || undefined })]);
+    if (event.defaultPrevented) {
+      return;
+    }
     this.headerresize.emit({ [index]: width || 0 });
   }
   onResizeGroup(changedX, startIndex, endIndex) {
@@ -27135,6 +27273,8 @@ const RevogrHeaderComponent = class extends HTMLElement {
   }
   get providers() {
     return {
+      type: this.type,
+      data: this.colData,
       viewport: this.viewportCol,
       dimension: this.dimensionCol,
       selection: this.selectionStore,
@@ -27558,17 +27698,9 @@ class KeyboardService {
     this.ctrlDown = false;
   }
   async keyDown(e, canRange) {
-    if (!this.sv.selectionStoreService.focused) {
-      return;
-    }
     if (isCtrlKey(e.keyCode, navigator.platform)) {
       this.ctrlDown = true;
     }
-    // tab key means same as arrow right
-    if (codesLetter.TAB === e.code) {
-      this.keyChangeSelection(e, canRange);
-      return;
-    }
     /**
      *  IF EDIT MODE
      */
@@ -27584,10 +27716,19 @@ class KeyboardService {
      *  IF NOT EDIT MODE
      */
     // pressed clear key
-    if (isClear(e.code)) {
+    if (this.sv.selectionStoreService.ranged && isClear(e.code)) {
       this.sv.clearCell();
       return;
     }
+    // below works with focus only
+    if (!this.sv.selectionStoreService.focused) {
+      return;
+    }
+    // tab key means same as arrow right
+    if (codesLetter.TAB === e.code) {
+      this.keyChangeSelection(e, canRange);
+      return;
+    }
     // pressed enter
     if (isEnterKey(e.code)) {
       this.sv.doEdit();
@@ -27676,72 +27817,6 @@ class KeyboardService {
   }
 }
 
-/**
- * The base implementation of `_.slice` without an iteratee call guard.
- *
- * @private
- * @param {Array} array The array to slice.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns the slice of `array`.
- */
-function baseSlice(array, start, end) {
-  var index = -1,
-      length = array.length;
-
-  if (start < 0) {
-    start = -start > length ? 0 : (length + start);
-  }
-  end = end > length ? length : end;
-  if (end < 0) {
-    end += length;
-  }
-  length = start > end ? 0 : ((end - start) >>> 0);
-  start >>>= 0;
-
-  var result = Array(length);
-  while (++index < length) {
-    result[index] = array[index + start];
-  }
-  return result;
-}
-
-var _baseSlice = baseSlice;
-
-/**
- * Creates a slice of `array` from `start` up to, but not including, `end`.
- *
- * **Note:** This method is used instead of
- * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
- * returned.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Array
- * @param {Array} array The array to slice.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns the slice of `array`.
- */
-function slice(array, start, end) {
-  var length = array == null ? 0 : array.length;
-  if (!length) {
-    return [];
-  }
-  if (end && typeof end != 'number' && _isIterateeCall(array, start, end)) {
-    start = 0;
-    end = length;
-  }
-  else {
-    start = start == null ? 0 : toInteger_1(start);
-    end = end === undefined ? length : toInteger_1(end);
-  }
-  return _baseSlice(array, start, end);
-}
-
-var slice_1 = slice;
-
 var AutoFillType;
 (function (AutoFillType) {
   AutoFillType["selection"] = "Selection";
@@ -27889,18 +27964,18 @@ class AutoFillService {
     }
     const oldRange = this.sv.selectionStoreService.ranged;
     const newRange = getRange(start, end);
-    const columns = [...this.sv.columnService.columns];
     const rangeData = {
       type: this.sv.dataStore.get('type'),
       newData: {},
+      mapping: {},
       newRange,
       oldRange,
-      newProps: slice_1(columns, newRange.x, newRange.x1 + 1).map(v => v.prop),
-      oldProps: slice_1(columns, oldRange.x, oldRange.x1 + 1).map(v => v.prop),
     };
-    rangeData.newData = this.sv.columnService.getRangeData(rangeData);
-    const selectionEndEvent = this.sv.internalSelectionChanged(rangeData);
-    if (selectionEndEvent.defaultPrevented) {
+    const { mapping, changed } = this.sv.columnService.getRangeData(rangeData, this.sv.columnService.columns);
+    rangeData.newData = changed;
+    rangeData.mapping = mapping;
+    const e = this.sv.internalSelectionChanged(rangeData);
+    if (e.defaultPrevented) {
       this.sv.setTempRange(null);
       return;
     }
@@ -27917,6 +27992,72 @@ class AutoFillService {
   }
 }
 
+/**
+ * The base implementation of `_.slice` without an iteratee call guard.
+ *
+ * @private
+ * @param {Array} array The array to slice.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns the slice of `array`.
+ */
+function baseSlice(array, start, end) {
+  var index = -1,
+      length = array.length;
+
+  if (start < 0) {
+    start = -start > length ? 0 : (length + start);
+  }
+  end = end > length ? length : end;
+  if (end < 0) {
+    end += length;
+  }
+  length = start > end ? 0 : ((end - start) >>> 0);
+  start >>>= 0;
+
+  var result = Array(length);
+  while (++index < length) {
+    result[index] = array[index + start];
+  }
+  return result;
+}
+
+var _baseSlice = baseSlice;
+
+/**
+ * Creates a slice of `array` from `start` up to, but not including, `end`.
+ *
+ * **Note:** This method is used instead of
+ * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
+ * returned.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Array
+ * @param {Array} array The array to slice.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns the slice of `array`.
+ */
+function slice(array, start, end) {
+  var length = array == null ? 0 : array.length;
+  if (!length) {
+    return [];
+  }
+  if (end && typeof end != 'number' && _isIterateeCall(array, start, end)) {
+    start = 0;
+    end = length;
+  }
+  else {
+    start = start == null ? 0 : toInteger_1(start);
+    end = end === undefined ? length : toInteger_1(end);
+  }
+  return _baseSlice(array, start, end);
+}
+
+var slice_1 = slice;
+
 class ClipboardService {
   constructor(sv) {
     this.sv = sv;
@@ -28024,10 +28165,10 @@ const OverlaySelection = class extends HTMLElement {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
-      clearCell: () => this.clearCell(),
+      doEdit: (v, c) => !this.readonly && this.doEdit(v, c),
+      clearCell: () => !this.readonly && this.clearCell(),
+      internalPaste: () => !this.readonly && this.internalPaste.emit(),
       getData: () => this.getData(),
-      internalPaste: () => this.internalPaste.emit(),
     });
     this.createAutoFillService();
     this.createClipboardService();
@@ -28209,7 +28350,7 @@ const RevogrRowHeaders$1 = class extends HTMLElement {
   }
   render() {
     const dataViews = [];
-    const viewport = new ViewportStore();
+    const viewport = new ViewportStore('colPinStart');
     /** render viewports rows */
     let totalLength = 1;
     for (let data of this.dataPorts) {
@@ -28247,8 +28388,8 @@ const RevogrRowHeaders$1 = class extends HTMLElement {
       ref: (el) => this.elementToScroll.emit(el),
       onScrollViewport: (e) => this.scrollViewport.emit(e.detail),
     };
-    const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, parent, slot: 'header' });
-    return (h(Host, { class: "rowHeaders", key: "rowHeaders" }, h("revogr-viewport-scroll", Object.assign({}, viewportScroll), h("revogr-header", Object.assign({}, viewportHeader)), dataViews)));
+    const viewportHeader = Object.assign(Object.assign({}, this.headerProp), { colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE, parent, slot: HEADER_SLOT });
+    return (h(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, h("revogr-viewport-scroll", Object.assign({}, viewportScroll), h("revogr-header", Object.assign({}, viewportHeader)), dataViews)));
   }
 };
 
@@ -28600,7 +28741,7 @@ const RevogrViewportScroll$1 = class extends HTMLElement {
     this.scrollViewport = createEvent(this, "scrollViewport", 3);
     this.resizeViewport = createEvent(this, "resizeViewport", 7);
     this.scrollchange = createEvent(this, "scrollchange", 7);
-    this.scrollThrottling = 30;
+    this.scrollThrottling = 10;
     /**
      * Width of inner content
      */
@@ -28640,6 +28781,9 @@ const RevogrViewportScroll$1 = class extends HTMLElement {
     }
     return e;
   }
+  mousewheelVertical({ detail: e }) {
+    this.verticalMouseWheel(e);
+  }
   connectedCallback() {
     /**
      * Bind scroll functions for farther usage
@@ -28801,7 +28945,7 @@ const RevogrViewportScroll$1 = class extends HTMLElement {
    */
   onVerticalMouseWheel(type, delta, e) {
     var _a;
-    e.preventDefault();
+    e.preventDefault && e.preventDefault();
     const pos = this.verticalScroll.scrollTop + e[delta];
     (_a = this.scrollService) === null || _a === void 0 ? void 0 : _a.scroll(pos, type, undefined, e[delta]);
     this.latestScrollUpdate(type);
@@ -28814,7 +28958,7 @@ const RevogrViewportScroll$1 = class extends HTMLElement {
    */
   onHorizontalMouseWheel(type, delta, e) {
     var _a;
-    e.preventDefault();
+    e.preventDefault && e.preventDefault();
     const pos = this.horizontalScroll.scrollLeft + e[delta];
     (_a = this.scrollService) === null || _a === void 0 ? void 0 : _a.scroll(pos, type, undefined, e[delta]);
     this.latestScrollUpdate(type);
@@ -28825,17 +28969,17 @@ const RevogrViewportScroll$1 = class extends HTMLElement {
 
 const RevoGrid = /*@__PURE__*/proxyCustomElement(RevoGridComponent, [0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"extraElements":[32]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"internalFocusCell","onCellFocus"]]]);
 const RevogrClipboard = /*@__PURE__*/proxyCustomElement(Clipboard, [0,"revogr-clipboard",null,[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]);
-const RevogrData = /*@__PURE__*/proxyCustomElement(RevogrData$1, [0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16]}]);
+const RevogrData = /*@__PURE__*/proxyCustomElement(RevogrData$1, [0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[1]}]);
 const RevogrEdit = /*@__PURE__*/proxyCustomElement(Edit, [0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16]}]);
 const RevogrFilterPanel = /*@__PURE__*/proxyCustomElement(FilterPanel, [0,"revogr-filter-panel",{"uuid":[1537],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"changes":[32]},[[5,"mousedown","onMouseDown"]]]);
 const RevogrFocus = /*@__PURE__*/proxyCustomElement(RevogrFocus$2, [0,"revogr-focus",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}]);
-const RevogrHeader = /*@__PURE__*/proxyCustomElement(RevogrHeaderComponent, [0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"]}]);
+const RevogrHeader = /*@__PURE__*/proxyCustomElement(RevogrHeaderComponent, [0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1]}]);
 const RevogrOrderEditor = /*@__PURE__*/proxyCustomElement(OrderEditor, [0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]]);
 const RevogrOverlaySelection = /*@__PURE__*/proxyCustomElement(OverlaySelection, [4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]]);
 const RevogrRowHeaders = /*@__PURE__*/proxyCustomElement(RevogrRowHeaders$1, [0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"resize":[4],"rowHeaderColumn":[16]}]);
 const RevogrScrollVirtual = /*@__PURE__*/proxyCustomElement(RevogrScrollVirtual$1, [0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16]}]);
 const RevogrTempRange = /*@__PURE__*/proxyCustomElement(RevogrFocus$1, [0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}]);
-const RevogrViewportScroll = /*@__PURE__*/proxyCustomElement(RevogrViewportScroll$1, [4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"]}]);
+const RevogrViewportScroll = /*@__PURE__*/proxyCustomElement(RevogrViewportScroll$1, [4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"]},[[0,"mousewheel-vertical","mousewheelVertical"]]]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [