@revolist/revogrid 4.9.3 → 4.9.5

package/hydrate/index.mjs

@@ -156,7 +156,7 @@ function queryNonceMetaTagContent(doc2) {
 var result_exports = {};
 __export(result_exports, {
   err: () => err,
-  map: () => map$1,
+  map: () => map,
   ok: () => ok,
   unwrap: () => unwrap$1,
   unwrapErr: () => unwrapErr
@@ -171,7 +171,7 @@ var err = (value) => ({
   isErr: true,
   value
 });
-function map$1(result, fn) {
+function map(result, fn) {
   if (result.isOk) {
     const val = fn(result.value);
     if (val instanceof Promise) {
@@ -2291,13 +2291,13 @@ class Clipboard {
         registerInstance(this, hostRef);
         this.beforePaste = createEvent(this, "beforepaste", 7);
         this.beforePasteApply = createEvent(this, "beforepasteapply", 7);
-        this.pasteRegion = createEvent(this, "pasteregion", 3);
+        this.pasteRegion = createEvent(this, "pasteregion", 7);
         this.afterPasteApply = createEvent(this, "afterpasteapply", 7);
         this.beforeCut = createEvent(this, "beforecut", 7);
         this.clearRegion = createEvent(this, "clearregion", 7);
         this.beforeCopy = createEvent(this, "beforecopy", 7);
         this.beforeCopyApply = createEvent(this, "beforecopyapply", 7);
-        this.copyRegion = createEvent(this, "copyregion", 3);
+        this.copyRegion = createEvent(this, "copyregion", 7);
         this.readonly = undefined;
     }
     onPaste(e) {
@@ -4621,12 +4621,12 @@ var _arrayPush = arrayPush$1;
  * // => false
  */
 
-var isArray$d = Array.isArray;
+var isArray$c = Array.isArray;
 
-var isArray_1 = isArray$d;
+var isArray_1 = isArray$c;
 
 var arrayPush = _arrayPush,
-    isArray$c = isArray_1;
+    isArray$b = isArray_1;
 
 /**
  * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
@@ -4641,7 +4641,7 @@ var arrayPush = _arrayPush,
  */
 function baseGetAllKeys$1(object, keysFunc, symbolsFunc) {
   var result = keysFunc(object);
-  return isArray$c(object) ? result : arrayPush(result, symbolsFunc(object));
+  return isArray$b(object) ? result : arrayPush(result, symbolsFunc(object));
 }
 
 var _baseGetAllKeys = baseGetAllKeys$1;
@@ -5076,7 +5076,7 @@ var isTypedArray_1 = isTypedArray$2;
 
 var baseTimes = _baseTimes,
     isArguments$1 = isArguments_1,
-    isArray$b = isArray_1,
+    isArray$a = isArray_1,
     isBuffer$1 = isBuffer$2.exports,
     isIndex$2 = _isIndex,
     isTypedArray$1 = isTypedArray_1;
@@ -5096,7 +5096,7 @@ var hasOwnProperty$3 = objectProto$4.hasOwnProperty;
  * @returns {Array} Returns the array of property names.
  */
 function arrayLikeKeys$1(value, inherited) {
-  var isArr = isArray$b(value),
+  var isArr = isArray$a(value),
       isArg = !isArr && isArguments$1(value),
       isBuff = !isArr && !isArg && isBuffer$1(value),
       isType = !isArr && !isArg && !isBuff && isTypedArray$1(value),
@@ -5227,15 +5227,15 @@ var isFunction = isFunction_1,
  * _.isArrayLike(_.noop);
  * // => false
  */
-function isArrayLike$6(value) {
+function isArrayLike$5(value) {
   return value != null && isLength$1(value.length) && !isFunction(value);
 }
 
-var isArrayLike_1 = isArrayLike$6;
+var isArrayLike_1 = isArrayLike$5;
 
 var arrayLikeKeys = _arrayLikeKeys,
     baseKeys$1 = _baseKeys,
-    isArrayLike$5 = isArrayLike_1;
+    isArrayLike$4 = isArrayLike_1;
 
 /**
  * Creates an array of the own enumerable property names of `object`.
@@ -5266,7 +5266,7 @@ var arrayLikeKeys = _arrayLikeKeys,
  * // => ['0', '1']
  */
 function keys$4(object) {
-  return isArrayLike$5(object) ? arrayLikeKeys(object) : baseKeys$1(object);
+  return isArrayLike$4(object) ? arrayLikeKeys(object) : baseKeys$1(object);
 }
 
 var keys_1 = keys$4;
@@ -5475,7 +5475,7 @@ var Stack$1 = _Stack,
     equalByTag = _equalByTag,
     equalObjects = _equalObjects,
     getTag$1 = _getTag,
-    isArray$a = isArray_1,
+    isArray$9 = isArray_1,
     isBuffer = isBuffer$2.exports,
     isTypedArray = isTypedArray_1;
 
@@ -5508,8 +5508,8 @@ var hasOwnProperty = objectProto.hasOwnProperty;
  * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
  */
 function baseIsEqualDeep$1(object, other, bitmask, customizer, equalFunc, stack) {
-  var objIsArr = isArray$a(object),
-      othIsArr = isArray$a(other),
+  var objIsArr = isArray$9(object),
+      othIsArr = isArray$9(other),
       objTag = objIsArr ? arrayTag : getTag$1(object),
       othTag = othIsArr ? arrayTag : getTag$1(other);
 
@@ -5732,7 +5732,7 @@ function baseMatches$1(source) {
 
 var _baseMatches = baseMatches$1;
 
-var isArray$9 = isArray_1,
+var isArray$8 = isArray_1,
     isSymbol$4 = isSymbol_1;
 
 /** Used to match property names within property paths. */
@@ -5748,7 +5748,7 @@ var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
  * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
  */
 function isKey$3(value, object) {
-  if (isArray$9(value)) {
+  if (isArray$8(value)) {
     return false;
   }
   var type = typeof value;
@@ -5901,7 +5901,7 @@ var _stringToPath = stringToPath$1;
  * @returns {Array} Returns the new mapped array.
  */
 
-function arrayMap$2(array, iteratee) {
+function arrayMap$1(array, iteratee) {
   var index = -1,
       length = array == null ? 0 : array.length,
       result = Array(length);
@@ -5912,11 +5912,11 @@ function arrayMap$2(array, iteratee) {
   return result;
 }
 
-var _arrayMap = arrayMap$2;
+var _arrayMap = arrayMap$1;
 
 var Symbol = _Symbol,
-    arrayMap$1 = _arrayMap,
-    isArray$8 = isArray_1,
+    arrayMap = _arrayMap,
+    isArray$7 = isArray_1,
     isSymbol$3 = isSymbol_1;
 
 /** Used as references for various `Number` constants. */
@@ -5939,9 +5939,9 @@ function baseToString$1(value) {
   if (typeof value == 'string') {
     return value;
   }
-  if (isArray$8(value)) {
+  if (isArray$7(value)) {
     // Recursively convert values (susceptible to call stack limits).
-    return arrayMap$1(value, baseToString$1) + '';
+    return arrayMap(value, baseToString$1) + '';
   }
   if (isSymbol$3(value)) {
     return symbolToString ? symbolToString.call(value) : '';
@@ -5981,7 +5981,7 @@ function toString$1(value) {
 
 var toString_1 = toString$1;
 
-var isArray$7 = isArray_1,
+var isArray$6 = isArray_1,
     isKey$2 = _isKey,
     stringToPath = _stringToPath,
     toString = toString_1;
@@ -5995,7 +5995,7 @@ var isArray$7 = isArray_1,
  * @returns {Array} Returns the cast property path array.
  */
 function castPath$2(value, object) {
-  if (isArray$7(value)) {
+  if (isArray$6(value)) {
     return value;
   }
   return isKey$2(value, object) ? [value] : stringToPath(toString(value));
@@ -6101,7 +6101,7 @@ var _baseHasIn = baseHasIn$1;
 
 var castPath = _castPath,
     isArguments = isArguments_1,
-    isArray$6 = isArray_1,
+    isArray$5 = isArray_1,
     isIndex$1 = _isIndex,
     isLength = isLength_1,
     toKey$2 = _toKey;
@@ -6134,7 +6134,7 @@ function hasPath$1(object, path, hasFunc) {
   }
   length = object == null ? 0 : object.length;
   return !!length && isLength(length) && isIndex$1(key, length) &&
-    (isArray$6(object) || isArguments(object));
+    (isArray$5(object) || isArguments(object));
 }
 
 var _hasPath = hasPath$1;
@@ -6300,7 +6300,7 @@ var property_1 = property$1;
 var baseMatches = _baseMatches,
     baseMatchesProperty = _baseMatchesProperty,
     identity$2 = identity_1,
-    isArray$5 = isArray_1,
+    isArray$4 = isArray_1,
     property = property_1;
 
 /**
@@ -6310,7 +6310,7 @@ var baseMatches = _baseMatches,
  * @param {*} [value=_.identity] The value to convert to an iteratee.
  * @returns {Function} Returns the iteratee.
  */
-function baseIteratee$5(value) {
+function baseIteratee$4(value) {
   // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.
   // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.
   if (typeof value == 'function') {
@@ -6320,14 +6320,14 @@ function baseIteratee$5(value) {
     return identity$2;
   }
   if (typeof value == 'object') {
-    return isArray$5(value)
+    return isArray$4(value)
       ? baseMatchesProperty(value[0], value[1])
       : baseMatches(value);
   }
   return property(value);
 }
 
-var _baseIteratee = baseIteratee$5;
+var _baseIteratee = baseIteratee$4;
 
 var toNumber = toNumber_1;
 
@@ -6410,7 +6410,7 @@ function toInteger$4(value) {
 var toInteger_1 = toInteger$4;
 
 var baseFindIndex = _baseFindIndex,
-    baseIteratee$4 = _baseIteratee,
+    baseIteratee$3 = _baseIteratee,
     toInteger$3 = toInteger_1;
 
 /* Built-in method references for those with the same name as other `lodash` methods. */
@@ -6460,7 +6460,7 @@ function findIndex$1(array, predicate, fromIndex) {
   if (index < 0) {
     index = nativeMax$1(length + index, 0);
   }
-  return baseFindIndex(array, baseIteratee$4(predicate), index);
+  return baseFindIndex(array, baseIteratee$3(predicate), index);
 }
 
 var findIndex_1 = findIndex$1;
@@ -6496,7 +6496,7 @@ function baseRange$1(start, end, step, fromRight) {
 var _baseRange = baseRange$1;
 
 var eq$1 = eq_1,
-    isArrayLike$4 = isArrayLike_1,
+    isArrayLike$3 = isArrayLike_1,
     isIndex = _isIndex,
     isObject$1 = isObject_1;
 
@@ -6516,7 +6516,7 @@ function isIterateeCall$3(value, index, object) {
   }
   var type = typeof index;
   if (type == 'number'
-        ? (isArrayLike$4(object) && isIndex(index, object.length))
+        ? (isArrayLike$3(object) && isIndex(index, object.length))
         : (type == 'string' && index in object)
       ) {
     return eq$1(object[index], value);
@@ -7039,7 +7039,7 @@ function baseForOwn$1(object, iteratee) {
 
 var _baseForOwn = baseForOwn$1;
 
-var isArrayLike$3 = isArrayLike_1;
+var isArrayLike$2 = isArrayLike_1;
 
 /**
  * Creates a `baseEach` or `baseEachRight` function.
@@ -7054,7 +7054,7 @@ function createBaseEach$1(eachFunc, fromRight) {
     if (collection == null) {
       return collection;
     }
-    if (!isArrayLike$3(collection)) {
+    if (!isArrayLike$2(collection)) {
       return eachFunc(collection, iteratee);
     }
     var length = collection.length,
@@ -7083,9 +7083,9 @@ var baseForOwn = _baseForOwn,
  * @param {Function} iteratee The function invoked per iteration.
  * @returns {Array|Object} Returns `collection`.
  */
-var baseEach$4 = createBaseEach(baseForOwn);
+var baseEach$3 = createBaseEach(baseForOwn);
 
-var _baseEach = baseEach$4;
+var _baseEach = baseEach$3;
 
 /**
  * The base implementation of `_.reduce` and `_.reduceRight`, without support
@@ -7113,10 +7113,10 @@ function baseReduce$1(collection, iteratee, accumulator, initAccum, eachFunc) {
 var _baseReduce = baseReduce$1;
 
 var arrayReduce = _arrayReduce,
-    baseEach$3 = _baseEach,
-    baseIteratee$3 = _baseIteratee,
+    baseEach$2 = _baseEach,
+    baseIteratee$2 = _baseIteratee,
     baseReduce = _baseReduce,
-    isArray$4 = isArray_1;
+    isArray$3 = isArray_1;
 
 /**
  * Reduces `collection` to a value which is the accumulated result of running
@@ -7156,10 +7156,10 @@ var arrayReduce = _arrayReduce,
  * // => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed)
  */
 function reduce(collection, iteratee, accumulator) {
-  var func = isArray$4(collection) ? arrayReduce : baseReduce,
+  var func = isArray$3(collection) ? arrayReduce : baseReduce,
       initAccum = arguments.length < 3;
 
-  return func(collection, baseIteratee$3(iteratee), accumulator, initAccum, baseEach$3);
+  return func(collection, baseIteratee$2(iteratee), accumulator, initAccum, baseEach$2);
 }
 
 var reduce_1 = reduce;
@@ -7204,9 +7204,9 @@ function castFunction$1(value) {
 var _castFunction = castFunction$1;
 
 var arrayEach = _arrayEach,
-    baseEach$2 = _baseEach,
+    baseEach$1 = _baseEach,
     castFunction = _castFunction,
-    isArray$3 = isArray_1;
+    isArray$2 = isArray_1;
 
 /**
  * Iterates over elements of `collection` and invokes `iteratee` for each element.
@@ -7239,7 +7239,7 @@ var arrayEach = _arrayEach,
  * // => Logs 'a' then 'b' (iteration order is not guaranteed).
  */
 function forEach(collection, iteratee) {
-  var func = isArray$3(collection) ? arrayEach : baseEach$2;
+  var func = isArray$2(collection) ? arrayEach : baseEach$1;
   return func(collection, castFunction(iteratee));
 }
 
@@ -9921,7 +9921,7 @@ class OverlaySelection {
      */
     onKeyUp(e) {
         // Emit before key up event.
-        this.beforeKeyUp.emit(e);
+        this.beforeKeyUp.emit(Object.assign({ original: e }, this.getData()));
     }
     /**
      * Get keyboard down from element.
@@ -9930,7 +9930,7 @@ class OverlaySelection {
     onKeyDown(e) {
         var _a;
         // Emit before key down event and check if default prevention is set.
-        const proxy = this.beforeKeyDown.emit(e);
+        const proxy = this.beforeKeyDown.emit(Object.assign({ original: e }, this.getData()));
         if (e.defaultPrevented || proxy.defaultPrevented) {
             return;
         }
@@ -10080,7 +10080,7 @@ class OverlaySelection {
                 nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: '0767a5d015d0c8fe99444ef26b136a3a11792724', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '8551244579316e0d4ab61defa1c1c9bc1011f446', name: "data" })));
+        return (hAsync(Host, { key: '1913cd032d2cede0a8d560e330358a178500dc21', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '96cc5bc4e39d5d229f4d3c7ae98d092cc5ff9102', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -10321,6 +10321,7 @@ class OverlaySelection {
             lastCell: this.lastCell,
             focus: this.selectionStore.get('focus'),
             range: this.selectionStore.get('range'),
+            edit: this.selectionStore.get('edit'),
         };
     }
     get element() { return getElement(this); }
@@ -10588,8 +10589,8 @@ class RevoEdit {
     }; }
 }
 
-var baseIteratee$2 = _baseIteratee,
-    isArrayLike$2 = isArrayLike_1,
+var baseIteratee$1 = _baseIteratee,
+    isArrayLike$1 = isArrayLike_1,
     keys = keys_1;
 
 /**
@@ -10602,8 +10603,8 @@ var baseIteratee$2 = _baseIteratee,
 function createFind$1(findIndexFunc) {
   return function(collection, predicate, fromIndex) {
     var iterable = Object(collection);
-    if (!isArrayLike$2(collection)) {
-      var iteratee = baseIteratee$2(predicate);
+    if (!isArrayLike$1(collection)) {
+      var iteratee = baseIteratee$1(predicate);
       collection = keys(collection);
       predicate = function(key) { return iteratee(iterable[key], key, iterable); };
     }
@@ -10657,219 +10658,142 @@ var find = createFind(findIndex);
 
 var find_1 = find;
 
-var baseEach$1 = _baseEach,
-    isArrayLike$1 = isArrayLike_1;
-
-/**
- * The base implementation of `_.map` without support for iteratee shorthands.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-function baseMap$1(collection, iteratee) {
-  var index = -1,
-      result = isArrayLike$1(collection) ? Array(collection.length) : [];
-
-  baseEach$1(collection, function(value, key, collection) {
-    result[++index] = iteratee(value, key, collection);
-  });
-  return result;
+function getColumnType(rgCol) {
+    if (rgCol.pin) {
+        return rgCol.pin;
+    }
+    return 'rgCol';
+}
+function getColumnSizes(cols) {
+    const res = {};
+    for (const [i, c] of cols.entries()) {
+        if (c.size) {
+            res[i] = c.size;
+        }
+    }
+    return res;
 }
-
-var _baseMap = baseMap$1;
-
-var arrayMap = _arrayMap,
-    baseIteratee$1 = _baseIteratee,
-    baseMap = _baseMap,
-    isArray$2 = isArray_1;
-
 /**
- * Creates an array of values by running each element in `collection` thru
- * `iteratee`. The iteratee is invoked with three arguments:
- * (value, index|key, collection).
- *
- * Many lodash methods are guarded to work as iteratees for methods like
- * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.
- *
- * The guarded methods are:
- * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,
- * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,
- * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,
- * `template`, `trim`, `trimEnd`, `trimStart`, and `words`
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- * @example
- *
- * function square(n) {
- *   return n * n;
- * }
- *
- * _.map([4, 8], square);
- * // => [16, 64]
- *
- * _.map({ 'a': 4, 'b': 8 }, square);
- * // => [16, 64] (iteration order is not guaranteed)
- *
- * var users = [
- *   { 'user': 'barney' },
- *   { 'user': 'fred' }
- * ];
- *
- * // The `_.property` iteratee shorthand.
- * _.map(users, 'user');
- * // => ['barney', 'fred']
+ * Check if column is grouping column
  */
-function map(collection, iteratee) {
-  var func = isArray$2(collection) ? arrayMap : baseMap;
-  return func(collection, baseIteratee$1(iteratee));
+function isColGrouping(colData) {
+    return !!colData.children;
 }
-
-var map_1 = map;
-
 /**
- * Base layer for plugins
- * Provide minimal starting core for plugins to work
- * Extend this class to create plugin
+ * This function is used to create a collection of columns.
  */
-class BasePlugin {
-    constructor(revogrid, providers) {
-        this.revogrid = revogrid;
-        this.providers = providers;
-        this.h = hAsync;
-        this.subscriptions = {};
-    }
-    /**
-     *
-     * @param eventName - event name to subscribe to in revo-grid component (e.g. 'beforeheaderclick')
-     * @param callback - callback function for event
-     */
-    addEventListener(eventName, callback) {
-        this.revogrid.addEventListener(eventName, callback);
-        this.subscriptions[eventName] = callback;
-    }
-    /**
-     * Subscribe to property change in revo-grid component
-     * You can return false in callback to prevent default value set
-     *
-     * @param prop - property name
-     * @param callback - callback function
-     * @param immediate - trigger callback immediately with current value
-     */
-    watch(prop, callback, { immediate } = { immediate: false }) {
-        const nativeValueDesc = Object.getOwnPropertyDescriptor(this.revogrid, prop) ||
-            Object.getOwnPropertyDescriptor(this.revogrid.constructor.prototype, prop);
-        // Overwrite property descriptor for this instance
-        Object.defineProperty(this.revogrid, prop, {
-            set(val) {
-                var _a;
-                const keepDefault = callback(val);
-                if (keepDefault === false) {
-                    return;
-                }
-                // Continue with native behavior
-                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.set) === null || _a === void 0 ? void 0 : _a.call(this, val);
-            },
-            get() {
-                var _a;
-                // Continue with native behavior
-                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
-            },
-        });
-        if (immediate) {
-            callback(nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.value);
+function getColumns(columns, level = 0, types) {
+    const collection = {
+        // columns as they are in stores per type
+        columns: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // columns indexed by prop for quick access
+        columnByProp: {},
+        // column grouping
+        columnGrouping: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // max depth level for column grouping
+        maxLevel: level,
+        // sorting
+        sort: {},
+    };
+    return reduce_1(columns, (res, colData) => {
+        // Grouped column
+        if (isColGrouping(colData)) {
+            return gatherGroup(res, colData, getColumns(colData.children, level + 1, types), level);
+        }
+        // Regular column
+        const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
+        // Regular column, no Pin
+        if (!regularColumn.pin) {
+            res.columns.rgCol.push(regularColumn);
+            // Pin
         }
-    }
-    /**
-     * Remove event listener
-     * @param eventName
-     */
-    removeEventListener(eventName) {
-        this.revogrid.removeEventListener(eventName, this.subscriptions[eventName]);
-        delete this.subscriptions[eventName];
-    }
-    /**
-     * Emit event from revo-grid component
-     * Event can be cancelled by calling event.preventDefault() in callback
-     */
-    emit(eventName, detail) {
-        const event = new CustomEvent(eventName, { detail, cancelable: true });
-        this.revogrid.dispatchEvent(event);
-        return event;
-    }
-    /**
-     * Clear all subscriptions
-     */
-    clearSubscriptions() {
-        for (let type in this.subscriptions) {
-            this.removeEventListener(type);
+        else {
+            res.columns[regularColumn.pin].push(regularColumn);
+        }
+        if (regularColumn.order) {
+            res.sort[regularColumn.prop] = regularColumn;
+        }
+        // it's possible that some columns have same prop, but better to avoid it
+        if (!res.columnByProp[regularColumn.prop]) {
+            res.columnByProp[regularColumn.prop] = [];
+        }
+        res.columnByProp[regularColumn.prop].push(regularColumn);
+        // trigger setup hook if present
+        regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
+        return res;
+    }, collection);
+}
+function gatherGroup(res, colData, collection, level = 0) {
+    // group template
+    const group = Object.assign(Object.assign({}, colData), { level, ids: [] });
+    // check columns for update
+    for (let k in collection.columns) {
+        const key = k;
+        const resultItem = res.columns[key];
+        const collectionItem = collection.columns[key];
+        // if column data
+        if (isArray_1(resultItem) && isArray_1(collectionItem)) {
+            // fill columns
+            resultItem.push(...collectionItem);
+            // fill grouping
+            if (collectionItem.length) {
+                res.columnGrouping[key].push(Object.assign(Object.assign({}, group), { ids: collectionItem.map(item => item.prop) }));
+            }
         }
     }
-    /**
-     * Destroy plugin and clear all subscriptions
-     */
-    destroy() {
-        this.clearSubscriptions();
+    // merge column groupings
+    for (let k in collection.columnGrouping) {
+        const key = k;
+        const collectionItem = collection.columnGrouping[key];
+        res.columnGrouping[key].push(...collectionItem);
     }
+    res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
+    res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
+    return res;
 }
-
-class GroupingColumnPlugin extends BasePlugin {
-    static gatherGroup(res, colData, collection, level = 0) {
-        // group template
-        const group = Object.assign(Object.assign({}, colData), { level, ids: [] });
-        // check columns for update
-        for (let k in collection.columns) {
-            const key = k;
-            const resultItem = res.columns[key];
-            const collectionItem = collection.columns[key];
-            // if column data
-            if (isArray_1(resultItem) && isArray_1(collectionItem)) {
-                // fill columns
-                resultItem.push(...collectionItem);
-                // fill grouping
-                if (collectionItem.length) {
-                    res.columnGrouping[key].push(Object.assign(Object.assign({}, group), { ids: map_1(collectionItem, 'prop') }));
-                }
+function findColumn(columns, prop) {
+    for (const c of columns) {
+        if (isColGrouping(c)) {
+            const found = findColumn(c.children, prop);
+            if (found) {
+                return found;
             }
         }
-        // merge column groupings
-        for (let k in collection.columnGrouping) {
-            const key = k;
-            const collectionItem = collection.columnGrouping[key];
-            res.columnGrouping[key].push(...collectionItem);
+        else if (c.prop === prop) {
+            return c;
         }
-        res.maxLevel = Math.max(res.maxLevel, collection.maxLevel);
-        res.sort = Object.assign(Object.assign({}, res.sort), collection.sort);
-        return res;
     }
+    return undefined;
 }
-/**
- * Check if column is grouping column
- */
-function isColGrouping(colData) {
-    return !!colData.children;
+function getColumnByProp(columns, prop) {
+    return findColumn(columns, prop);
 }
 
 class ColumnDataProvider {
     get order() {
-        return reduce_1(this.sorting, (r, c, prop) => {
-            r[prop] = c.order;
-            return r;
-        }, {});
+        const order = {};
+        const sorting = this.sorting;
+        if (sorting) {
+            Object.keys(sorting).forEach((prop) => {
+                order[prop] = sorting[prop].order;
+            });
+        }
+        return order;
     }
     get stores() {
         return this.dataSources;
     }
     constructor() {
         this.sorting = null;
-        this.dataSources = reduce_1(columnTypes, (sources, k) => {
+        this.dataSources = columnTypes.reduce((sources, k) => {
             sources[k] = new DataStore(k);
             return sources;
         }, {});
@@ -10931,7 +10855,7 @@ class ColumnDataProvider {
     updateColumns(cols) {
         // collect column by type and propert
         const columnByKey = cols.reduce((res, c) => {
-            const type = ColumnDataProvider.getColumnType(c);
+            const type = getColumnType(c);
             if (!res[type]) {
                 res[type] = {};
             }
@@ -10940,20 +10864,32 @@ class ColumnDataProvider {
         }, {});
         // find indexes in source
         const colByIndex = {};
-        each(columnByKey, (colsToUpdate, type) => {
+        for (const t in columnByKey) {
+            if (!columnByKey.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            const colsToUpdate = columnByKey[type];
             const items = this.dataSources[type].store.get('source');
-            colByIndex[type] = items.reduce((result, rgCol, index) => {
+            colByIndex[type] = {};
+            for (let i = 0; i < items.length; i++) {
+                const rgCol = items[i];
                 const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[rgCol.prop];
                 if (colToUpdateIfExists) {
-                    result[index] = colToUpdateIfExists;
+                    colByIndex[type][i] = colToUpdateIfExists;
                 }
-                return result;
-            }, {});
-        });
-        each(colByIndex, (colsToUpdate, type) => setSourceByVirtualIndex(this.dataSources[type].store, colsToUpdate || {}));
+            }
+        }
+        for (const t in colByIndex) {
+            if (!colByIndex.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            setSourceByVirtualIndex(this.dataSources[type].store, colByIndex[type] || {});
+        }
     }
     updateColumn(column, index) {
-        const type = ColumnDataProvider.getColumnType(column);
+        const type = getColumnType(column);
         setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
     }
     updateColumnSorting(column, index, sorting, additive) {
@@ -10970,7 +10906,7 @@ class ColumnDataProvider {
     }
     clearSorting() {
         const types = reduce_1(this.sorting, (r, c) => {
-            const k = ColumnDataProvider.getColumnType(c);
+            const k = getColumnType(c);
             r[k] = true;
             return r;
         }, {});
@@ -10981,78 +10917,6 @@ class ColumnDataProvider {
         });
         this.sorting = {};
     }
-    static getSizes(cols) {
-        return reduce_1(cols, (res, c, i) => {
-            if (c.size) {
-                res[i] = c.size;
-            }
-            return res;
-        }, {});
-    }
-    static getColumnByProp(columns, prop) {
-        return find_1(columns, c => {
-            if (isColGrouping(c)) {
-                return ColumnDataProvider.getColumnByProp(c.children, prop);
-            }
-            return c.prop === prop;
-        });
-    }
-    // columns processing
-    static getColumns(columns, level = 0, types) {
-        const collection = {
-            // columns as they are in stores per type
-            columns: {
-                rgCol: [],
-                colPinStart: [],
-                colPinEnd: [],
-            },
-            // columns grouped by prop for quick access
-            columnByProp: {},
-            // column grouping
-            columnGrouping: {
-                rgCol: [],
-                colPinStart: [],
-                colPinEnd: [],
-            },
-            // max depth level for column grouping
-            maxLevel: level,
-            // sorting
-            sort: {},
-        };
-        return reduce_1(columns, (res, colData) => {
-            // Grouped column
-            if (isColGrouping(colData)) {
-                return GroupingColumnPlugin.gatherGroup(res, colData, ColumnDataProvider.getColumns(colData.children, level + 1, types), level);
-            }
-            // Regular column
-            const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
-            // Regular column, no Pin
-            if (!regularColumn.pin) {
-                res.columns.rgCol.push(regularColumn);
-                // Pin
-            }
-            else {
-                res.columns[regularColumn.pin].push(regularColumn);
-            }
-            if (regularColumn.order) {
-                res.sort[regularColumn.prop] = regularColumn;
-            }
-            // technically it's possible that some columns have same prop, but better to avoid it
-            if (!res.columnByProp[regularColumn.prop]) {
-                res.columnByProp[regularColumn.prop] = [];
-            }
-            res.columnByProp[regularColumn.prop].push(regularColumn);
-            // trigger setup hook if present
-            regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
-            return res;
-        }, collection);
-    }
-    static getColumnType(rgCol) {
-        if (rgCol.pin) {
-            return rgCol.pin;
-        }
-        return 'rgCol';
-    }
 }
 
 /**
@@ -11203,7 +11067,7 @@ class DimensionProvider {
             // setItemCount
             this.stores[type].setStore({ count: items.length });
             // setCustomSizes
-            const newSizes = ColumnDataProvider.getSizes(items);
+            const newSizes = getColumnSizes(items);
             this.stores[type].setDimensionSize(newSizes);
             const vpUpdate = {
                 // this triggers drop on realCount change
@@ -11341,6 +11205,113 @@ class ThemeService {
     }
 }
 
+/**
+ * Base layer for plugins
+ * Provide minimal starting core for plugins to work
+ * Extend this class to create plugin
+ */
+class BasePlugin {
+    constructor(revogrid, providers) {
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.h = hAsync;
+        this.subscriptions = {};
+    }
+    /**
+     *
+     * @param eventName - event name to subscribe to in revo-grid component (e.g. 'beforeheaderclick')
+     * @param callback - callback function for event
+     */
+    addEventListener(eventName, callback) {
+        this.revogrid.addEventListener(eventName, callback);
+        this.subscriptions[eventName] = callback;
+    }
+    /**
+     * Subscribe to property change in revo-grid component
+     * You can return false in callback to prevent default value set
+     *
+     * @param prop - property name
+     * @param callback - callback function
+     * @param immediate - trigger callback immediately with current value
+     */
+    watch(prop, callback, { immediate } = { immediate: false }) {
+        const nativeValueDesc = Object.getOwnPropertyDescriptor(this.revogrid, prop) ||
+            Object.getOwnPropertyDescriptor(this.revogrid.constructor.prototype, prop);
+        // Overwrite property descriptor for this instance
+        Object.defineProperty(this.revogrid, prop, {
+            set(val) {
+                var _a;
+                const keepDefault = callback(val);
+                if (keepDefault === false) {
+                    return;
+                }
+                // Continue with native behavior
+                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.set) === null || _a === void 0 ? void 0 : _a.call(this, val);
+            },
+            get() {
+                var _a;
+                // Continue with native behavior
+                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
+            },
+        });
+        if (immediate) {
+            callback(nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.value);
+        }
+    }
+    /**
+     * Remove event listener
+     * @param eventName
+     */
+    removeEventListener(eventName) {
+        this.revogrid.removeEventListener(eventName, this.subscriptions[eventName]);
+        delete this.subscriptions[eventName];
+    }
+    /**
+     * Emit event from revo-grid component
+     * Event can be cancelled by calling event.preventDefault() in callback
+     */
+    emit(eventName, detail) {
+        const event = new CustomEvent(eventName, { detail, cancelable: true });
+        this.revogrid.dispatchEvent(event);
+        return event;
+    }
+    /**
+     * Clear all subscriptions
+     */
+    clearSubscriptions() {
+        for (let type in this.subscriptions) {
+            this.removeEventListener(type);
+        }
+    }
+    /**
+     * Destroy plugin and clear all subscriptions
+     */
+    destroy() {
+        this.clearSubscriptions();
+    }
+}
+
+/**
+ * Dispatches a custom event to a specified target element.
+ *
+ * @param target - The target element to dispatch the event to.
+ * @param eventName - The name of the custom event.
+ * @param detail - Optional. The detail of the custom event.
+ * @returns The custom event that was dispatched.
+ */
+function dispatch(target, eventName, detail) {
+    // Create a new CustomEvent with the specified event name and detail.
+    const event = new CustomEvent(eventName, {
+        detail,
+        cancelable: true, // Indicates whether the event can be canceled.
+        bubbles: true, // Indicates whether the event bubbles up through the DOM.
+    });
+    // Dispatch the event on the target element.
+    target === null || target === void 0 ? void 0 : target.dispatchEvent(event);
+    // Return the custom event that was dispatched.
+    return event;
+}
+
 /**
  * Plugin module for revo-grid grid system
  * Add support for automatic column resize
@@ -11383,7 +11354,7 @@ class AutoSizeColumnPlugin extends BasePlugin {
             this.columnSet(columns);
         };
         const headerDblClick = ({ detail }) => {
-            const type = ColumnDataProvider.getColumnType(detail.column);
+            const type = getColumnType(detail.column);
             const size = this.getColumnSize(detail.index, type);
             if (size) {
                 this.providers.dimension.setCustomSizes(type, {
@@ -12206,7 +12177,7 @@ class SortingPlugin extends BasePlugin {
             const columns = (await this.revogrid.getColumns());
             const sortingFunc = {};
             for (let prop in order) {
-                const cmp = this.getComparer(ColumnDataProvider.getColumnByProp(columns, prop), order[prop]);
+                const cmp = this.getComparer(getColumnByProp(columns, prop), order[prop]);
                 sortingFunc[prop] = cmp;
             }
             this.runSorting(order, sortingFunc);
@@ -13719,27 +13690,6 @@ class ColumnOrderHandler {
     }
 }
 
-/**
- * Dispatches a custom event to a specified target element.
- *
- * @param target - The target element to dispatch the event to.
- * @param eventName - The name of the custom event.
- * @param detail - Optional. The detail of the custom event.
- * @returns The custom event that was dispatched.
- */
-function dispatch(target, eventName, detail) {
-    // Create a new CustomEvent with the specified event name and detail.
-    const event = new CustomEvent(eventName, {
-        detail,
-        cancelable: true, // Indicates whether the event can be canceled.
-        bubbles: true, // Indicates whether the event bubbles up through the DOM.
-    });
-    // Dispatch the event on the target element.
-    target === null || target === void 0 ? void 0 : target.dispatchEvent(event);
-    // Return the custom event that was dispatched.
-    return event;
-}
-
 var ResizeEvents;
 (function (ResizeEvents) {
     ResizeEvents["start"] = "resize:start";
@@ -14376,7 +14326,7 @@ class RevoGridComponent {
     /**  Open editor for cell. */
     async setCellEdit(rgRow, prop, rowSource = 'rgRow') {
         var _a;
-        const rgCol = ColumnDataProvider.getColumnByProp(this.columns, prop);
+        const rgCol = getColumnByProp(this.columns, prop);
         if (!rgCol) {
             return;
         }
@@ -14600,7 +14550,7 @@ class RevoGridComponent {
         this.columnChanged(this.columns);
     }
     columnChanged(newVal = []) {
-        const columnGather = ColumnDataProvider.getColumns(newVal, 0, this.columnTypes);
+        const columnGather = getColumns(newVal, 0, this.columnTypes);
         this.beforecolumnsset.emit(columnGather);
         this.dimensionProvider.applyNewColumns(columnGather.columns, this.disableVirtualX);
         this.beforecolumnapplied.emit(columnGather);
@@ -14910,7 +14860,7 @@ class RevoGridComponent {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                hAsync("revogr-header", Object.assign({ key: 'b08c837765cf20c88cb5b253a876f0f442c31628' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: 'bada77126c317da09a9826312186c16617c7b0af' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14932,12 +14882,12 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: '057a2cf1a64aaeec12d2aca17b09316fb3cbfde6' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'e89e3d136d756f80421f42f47e09583985edb1bc', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '9b95aef4de8af770036a733986e7e0fe2dd3ffda' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '68dbc0fca826a0089402157d301c49a0776e9007', class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, hAsync("div", { key: '177db78970907d36b8d56549386a18a683573944', class: "viewports" }, hAsync("slot", { key: '481d830a232b1969fcaa2519a5306fafaff58fb4', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '6a123b2e84bec95d7a63a73322fe167248e8415e', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: 'fea1be24668f2039746fff93d0ab5e76d932a166', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: '74c6e05c81b2782320755c910b098edf8858d6db', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { key: '6f927e04dd8c7e542a87fdc0a4f6d74248c65ccb', class: "viewports" }, hAsync("slot", { key: 'b6d421fa412b34ce9821cd1fa30a80ae37282f37', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '4ce3045201685f6c6c617c84fddc5a3d531034bd', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: 'e5bd92c37bdc31f0601a4d4cf4a62026e0e25406', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'dbda0fb90cf6a9eb6ac66ca16bcff30cf254b1e1', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed