@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/esm/revo-grid.entry.js

@@ -0,0 +1,3988 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-21436631.js';
+import { k as createStore, r as reduce_1, l as setStore, h as calculateDimensionData, m as each, _ as _baseIteratee, n as isArrayLike_1, o as keys_1, q as findIndex_1, u as _baseEach, v as _arrayMap, w as isArray_1, b as getSourceItem, e as getSourceItemVirtualIndexByProp, s as setSourceByVirtualIndex, D as DataStore, a as getVisibleSourceItem, f as gatherTrimmedItems, j as getItemByIndex, x as _baseProperty, y as _baseKeys, z as _getTag, A as range_1, B as toInteger_1, C as _isIterateeCall, g as getPhysical, d as setItems, i as getItemByPosition } from './dimension.helpers-a3065cb1.js';
+import { B as BasePlugin, c as columnTypes, r as rowTypes, i as isRowType } from './storeTypes-f2647985.js';
+import { d as debounce_1 } from './debounce-7781346d.js';
+import { R as RESIZE_INTERVAL, t as timeout, g as getScrollbarSize, U as UUID } from './index-98fd0168.js';
+import { V as ViewportStore, c as calculateRowHeaderSize, g as getFromEvent } from './events-3dd8ee7c.js';
+import { F as FILTER_PROP, i as isFilterBtn } from './filter.button-46ce4f80.js';
+import { _ as _baseGetTag, c as isObjectLike_1 } from './toNumber-8de324a7.js';
+import { i as isGrouping, g as getGroupingName, G as GROUP_EXPANDED, a as getParsedGroup, b as isSameGroup, c as GROUP_DEPTH, P as PSEUDO_GROUP_ITEM_VALUE, d as PSEUDO_GROUP_ITEM_ID, e as GROUPING_ROW_TYPE, f as PSEUDO_GROUP_COLUMN, h as GROUP_EXPAND_EVENT, j as gatherGrouping, k as isGroupingColumn, l as getLastCell, H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT, D as DATA_SLOT } from './column.service-21a3af74.js';
+import { E as EMPTY_INDEX, b as SelectionStoreConnector } from './selection.store-2577ddf9.js';
+import { d as dispatch } from './dispatcher-8ea9187d.js';
+import { O as ON_COLUMN_CLICK } from './header-cell-renderer-1ca84d5f.js';
+import './viewport.helpers-6591d423.js';
+
+class ThemeCompact {
+    constructor() {
+        this.defaultRowSize = 32;
+    }
+}
+
+class ThemeDefault {
+    constructor() {
+        this.defaultRowSize = 27;
+    }
+}
+
+class ThemeMaterial {
+    constructor() {
+        this.defaultRowSize = 42;
+    }
+}
+
+const DEFAULT_THEME = 'default';
+const allowedThemes = [
+    DEFAULT_THEME,
+    'material',
+    'compact',
+    'darkMaterial',
+    'darkCompact',
+];
+class ThemeService {
+    get theme() {
+        return this.currentTheme;
+    }
+    get rowSize() {
+        return this.customRowSize || this.currentTheme.defaultRowSize;
+    }
+    set rowSize(size) {
+        this.customRowSize = size;
+    }
+    constructor(cfg) {
+        this.customRowSize = 0;
+        this.customRowSize = cfg.rowSize;
+        this.register('default');
+    }
+    register(theme) {
+        const parsedTheme = ThemeService.getTheme(theme);
+        switch (parsedTheme) {
+            case 'material':
+            case 'darkMaterial':
+                this.currentTheme = new ThemeMaterial();
+                break;
+            case 'compact':
+            case 'darkCompact':
+                this.currentTheme = new ThemeCompact();
+                break;
+            default:
+                this.currentTheme = new ThemeDefault();
+                break;
+        }
+    }
+    static getTheme(theme) {
+        if (allowedThemes.indexOf(theme) > -1) {
+            return theme;
+        }
+        return DEFAULT_THEME;
+    }
+}
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
+const trimmedPlugin = (store) => {
+    let trimmedSize = {};
+    const setTrimmed = (sizes, trimmed) => {
+        const newSize = Object.assign({}, sizes);
+        trimmedSize = {};
+        each(trimmed, (v, index) => {
+            if (v && newSize[index]) {
+                trimmedSize[index] = newSize[index];
+                delete newSize[index];
+            }
+        });
+        store.setDimensionSize(newSize);
+    };
+    return {
+        set(key, val) {
+            switch (key) {
+                case 'trimmed':
+                    const trim = val;
+                    const sizes = store.store.get('sizes');
+                    // recover trimmed, apply new trim
+                    setTrimmed(Object.assign(Object.assign({}, sizes), trimmedSize), trim);
+                    break;
+            }
+        },
+    };
+};
+const realSizePlugin = (store) => {
+    return {
+        set(k) {
+            switch (k) {
+                case 'count':
+                case 'sizes':
+                case 'originItemSize':
+                    let realSize = 0;
+                    const count = store.store.get('count');
+                    for (let i = 0; i < count; i++) {
+                        realSize +=
+                            store.store.get('sizes')[i] || store.store.get('originItemSize');
+                    }
+                    store.setStore({ realSize });
+            }
+        },
+    };
+};
+function initialBase() {
+    return {
+        indexes: [],
+        count: 0,
+        // plugin support
+        trimmed: {},
+        // size operations, this provider stores only changed sizes, not all of them
+        // same as indexes but for sizes and positions
+        // item index to size
+        sizes: {},
+        // order in indexes[] to coordinate
+        positionIndexToItem: {},
+        // initial element to coordinate ^
+        indexToItem: {},
+        positionIndexes: [],
+    };
+}
+function initialState() {
+    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());
+        this.store.use(trimmedPlugin(this));
+        this.store.use(realSizePlugin(this));
+    }
+    getCurrentState() {
+        const state = initialState();
+        const keys = Object.keys(state);
+        return reduce_1(keys, (r, k) => {
+            const data = this.store.get(k);
+            r[k] = data;
+            return r;
+        }, state);
+    }
+    dispose() {
+        setStore(this.store, initialState());
+    }
+    setStore(data) {
+        setStore(this.store, data);
+    }
+    drop() {
+        setStore(this.store, initialBase());
+    }
+    /**
+     * Set custom dimension sizes and overwrite old
+     * Generates new indexes based on sizes
+     * @param sizes - sizes to set
+     */
+    setDimensionSize(sizes) {
+        const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
+        setStore(this.store, dimensionData);
+        return dimensionData;
+    }
+}
+
+var baseIteratee$1 = _baseIteratee,
+    isArrayLike$2 = isArrayLike_1,
+    keys = keys_1;
+
+/**
+ * Creates a `_.find` or `_.findLast` function.
+ *
+ * @private
+ * @param {Function} findIndexFunc The function to find the collection index.
+ * @returns {Function} Returns the new find function.
+ */
+function createFind$1(findIndexFunc) {
+  return function(collection, predicate, fromIndex) {
+    var iterable = Object(collection);
+    if (!isArrayLike$2(collection)) {
+      var iteratee = baseIteratee$1(predicate);
+      collection = keys(collection);
+      predicate = function(key) { return iteratee(iterable[key], key, iterable); };
+    }
+    var index = findIndexFunc(collection, predicate, fromIndex);
+    return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
+  };
+}
+
+var _createFind = createFind$1;
+
+var createFind = _createFind,
+    findIndex = findIndex_1;
+
+/**
+ * Iterates over elements of `collection`, returning the first element
+ * `predicate` returns truthy for. The predicate is invoked with three
+ * arguments: (value, index|key, collection).
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object} collection The collection to inspect.
+ * @param {Function} [predicate=_.identity] The function invoked per iteration.
+ * @param {number} [fromIndex=0] The index to search from.
+ * @returns {*} Returns the matched element, else `undefined`.
+ * @example
+ *
+ * var users = [
+ *   { 'user': 'barney',  'age': 36, 'active': true },
+ *   { 'user': 'fred',    'age': 40, 'active': false },
+ *   { 'user': 'pebbles', 'age': 1,  'active': true }
+ * ];
+ *
+ * _.find(users, function(o) { return o.age < 40; });
+ * // => object for 'barney'
+ *
+ * // The `_.matches` iteratee shorthand.
+ * _.find(users, { 'age': 1, 'active': true });
+ * // => object for 'pebbles'
+ *
+ * // The `_.matchesProperty` iteratee shorthand.
+ * _.find(users, ['active', false]);
+ * // => object for 'fred'
+ *
+ * // The `_.property` iteratee shorthand.
+ * _.find(users, 'active');
+ * // => object for 'barney'
+ */
+var find = createFind(findIndex);
+
+var find_1 = find;
+
+var baseEach = _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(collection, function(value, key, collection) {
+    result[++index] = iteratee(value, key, collection);
+  });
+  return result;
+}
+
+var _baseMap = baseMap$1;
+
+var arrayMap = _arrayMap,
+    baseIteratee = _baseIteratee,
+    baseMap = _baseMap,
+    isArray$1 = 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']
+ */
+function map(collection, iteratee) {
+  var func = isArray$1(collection) ? arrayMap : baseMap;
+  return func(collection, baseIteratee(iteratee));
+}
+
+var map_1 = map;
+
+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') }));
+                }
+            }
+        }
+        // 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;
+    }
+}
+/**
+ * Check if column is grouping column
+ */
+function isColGrouping(colData) {
+    return !!colData.children;
+}
+
+class ColumnDataProvider {
+    get order() {
+        return reduce_1(this.sorting, (r, c, prop) => {
+            r[prop] = c.order;
+            return r;
+        }, {});
+    }
+    get stores() {
+        return this.dataSources;
+    }
+    constructor() {
+        this.sorting = null;
+        this.dataSources = reduce_1(columnTypes, (sources, k) => {
+            sources[k] = new DataStore(k);
+            return sources;
+        }, {});
+    }
+    column(c, pin) {
+        return this.getColumn(c, pin || 'rgCol');
+    }
+    getColumn(virtualIndex, type) {
+        return getSourceItem(this.dataSources[type].store, virtualIndex);
+    }
+    getRawColumns() {
+        return reduce_1(this.dataSources, (result, item, type) => {
+            result[type] = item.store.get('source');
+            return result;
+        }, {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        });
+    }
+    getColumns(type = 'all') {
+        if (type !== 'all') {
+            return this.dataSources[type].store.get('source');
+        }
+        return columnTypes.reduce((r, t) => {
+            r.push(...this.dataSources[t].store.get('source'));
+            return r;
+        }, []);
+    }
+    getColumnIndexByProp(prop, type) {
+        return getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
+    }
+    getColumnByProp(prop, type) {
+        const items = this.dataSources[type].store.get('source');
+        return find_1(items, { prop });
+    }
+    refreshByType(type) {
+        this.dataSources[type].refresh();
+    }
+    setColumns(data) {
+        columnTypes.forEach(k => {
+            // set columns data
+            this.dataSources[k].updateData(data.columns[k], {
+                // max depth level
+                depth: data.maxLevel,
+                // groups
+                groups: data.columnGrouping[k].reduce((res, g) => {
+                    if (!res[g.level]) {
+                        res[g.level] = [];
+                    }
+                    res[g.level].push(g);
+                    return res;
+                }, {}),
+            });
+        });
+        this.sorting = data.sort;
+        return data;
+    }
+    updateColumns(cols) {
+        // collect column by type and propert
+        const columnByKey = cols.reduce((res, c) => {
+            const type = ColumnDataProvider.getColumnType(c);
+            if (!res[type]) {
+                res[type] = {};
+            }
+            res[type][c.prop] = c;
+            return res;
+        }, {});
+        // find indexes in source
+        const colByIndex = {};
+        each(columnByKey, (colsToUpdate, type) => {
+            const items = this.dataSources[type].store.get('source');
+            colByIndex[type] = items.reduce((result, rgCol, index) => {
+                const colToUpdateIfExists = colsToUpdate[rgCol.prop];
+                if (colToUpdateIfExists) {
+                    result[index] = colToUpdateIfExists;
+                }
+                return result;
+            }, {});
+        });
+        each(colByIndex, (colsToUpdate, type) => setSourceByVirtualIndex(this.dataSources[type].store, colsToUpdate));
+    }
+    updateColumn(column, index) {
+        const type = ColumnDataProvider.getColumnType(column);
+        setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
+    }
+    updateColumnSorting(column, index, sorting, additive) {
+        if (!additive) {
+            this.clearSorting();
+        }
+        column.order = sorting;
+        this.sorting[column.prop] = column;
+        this.updateColumn(column, index);
+        return column;
+    }
+    clearSorting() {
+        const types = reduce_1(this.sorting, (r, c) => {
+            const k = ColumnDataProvider.getColumnType(c);
+            r[k] = true;
+            return r;
+        }, {});
+        each(types, (_, type) => {
+            const cols = this.dataSources[type].store.get('source');
+            each(cols, (c) => (c.order = undefined));
+            this.dataSources[type].setData({ source: [...cols] });
+        });
+        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';
+    }
+}
+
+/**
+ * Data source provider
+ */
+class DataProvider {
+    constructor(dimensionProvider) {
+        this.dimensionProvider = dimensionProvider;
+        this.stores = reduce_1(rowTypes, (sources, k) => {
+            sources[k] = new DataStore(k);
+            return sources;
+        }, {});
+    }
+    setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
+        // set rgRow data
+        this.stores[type].updateData([...data], grouping, silent);
+        // for pinned row no need virtual data
+        const noVirtual = type !== 'rgRow' || disableVirtualRows;
+        this.dimensionProvider.setData(data.length, type, noVirtual);
+        return data;
+    }
+    getModel(virtualIndex, type = 'rgRow') {
+        const store = this.stores[type].store;
+        return getSourceItem(store, virtualIndex);
+    }
+    setCellData({ type, rowIndex, prop, val }, mutate = true) {
+        const model = this.getModel(rowIndex, type);
+        model[prop] = val;
+        // apply data to source
+        setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model }, mutate);
+    }
+    setRangeData(data, type) {
+        const items = {};
+        for (let rowIndex in data) {
+            const oldModel = (items[rowIndex] = getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
+            if (!oldModel) {
+                continue;
+            }
+            for (let prop in data[rowIndex]) {
+                oldModel[prop] = data[rowIndex][prop];
+            }
+        }
+        // apply data to source
+        setSourceByVirtualIndex(this.stores[type].store, items);
+    }
+    refresh(type = 'all') {
+        if (isRowType(type)) {
+            this.refreshItems(type);
+        }
+        rowTypes.forEach((t) => this.refreshItems(t));
+    }
+    refreshItems(type = 'rgRow') {
+        const items = this.stores[type].store.get('items');
+        this.stores[type].setData({ items: [...items] });
+    }
+    setGrouping({ depth }, type = 'rgRow') {
+        this.stores[type].setData({ groupingDepth: depth });
+    }
+    setTrimmed(trimmed, type = 'rgRow') {
+        const store = this.stores[type];
+        store.addTrimmed(trimmed);
+        this.dimensionProvider.setTrimmed(trimmed, type);
+        if (type === 'rgRow') {
+            this.dimensionProvider.setData(getVisibleSourceItem(store.store).length, type);
+        }
+    }
+}
+
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ */
+class DimensionProvider {
+    constructor(viewports, config) {
+        this.viewports = viewports;
+        const sizeChanged = debounce_1((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
+        this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
+            sources[k] = new DimensionStore();
+            sources[k].store.onChange('realSize', () => sizeChanged(k));
+            return sources;
+        }, {});
+    }
+    /**
+     * Clear old sizes from dimension and viewports
+     * @param type - dimension type
+     * @param count - count of items
+     */
+    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.setItemCount(count, t);
+    }
+    /**
+     * Apply new custom sizes to dimension and view port
+     * @param type - dimension type
+     * @param sizes - new custom sizes
+     * @param keepOld - keep old sizes merge new with old
+     */
+    setCustomSizes(type, sizes, keepOld = false) {
+        let newSizes = sizes;
+        if (keepOld) {
+            const oldSizes = this.stores[type].store.get('sizes');
+            newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
+        }
+        this.stores[type].setDimensionSize(newSizes);
+        this.viewports.stores[type].setViewPortDimensionSizes(newSizes, !keepOld ? this.stores[type].store.get('originItemSize') : undefined);
+    }
+    setItemCount(realCount, type) {
+        this.viewports.stores[type].setViewport({ realCount });
+        this.stores[type].setStore({ count: realCount });
+    }
+    /**
+     * Apply trimmed items
+     * @param trimmed - trimmed items
+     * @param type
+     */
+    setTrimmed(trimmed, type) {
+        const allTrimmed = gatherTrimmedItems(trimmed);
+        const dimStoreType = this.stores[type];
+        dimStoreType.setStore({ trimmed: allTrimmed });
+        this.viewports.stores[type].setViewPortDimensionSizes(dimStoreType.store.get('sizes'));
+    }
+    /**
+     * Sets dimension data and view port coordinate
+     * @param items - data/column items
+     * @param type - dimension type
+     */
+    setData(itemCount, type, noVirtual = false) {
+        this.setItemCount(itemCount, type);
+        // Virtualization will get disabled
+        if (noVirtual) {
+            const dimension = this.stores[type].getCurrentState();
+            this.viewports.stores[type].setViewport({
+                virtualSize: dimension.realSize,
+            });
+        }
+        this.updateViewport(type);
+    }
+    applyNewColumns(columns, disableVirtualX) {
+        for (let type of columnTypes) {
+            // clear existing data
+            this.stores[type].drop();
+            const items = columns[type];
+            // for pinned col no need virtual data
+            const noVirtual = type !== 'rgCol' || disableVirtualX;
+            // setItemCount
+            this.stores[type].setStore({ count: items.length });
+            // setCustomSizes
+            const newSizes = ColumnDataProvider.getSizes(items);
+            this.stores[type].setDimensionSize(newSizes);
+            const vpUpdate = {
+                // this triggers drop on realCount change
+                realCount: items.length,
+            };
+            // Virtualization will get disabled
+            if (noVirtual) {
+                vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
+            }
+            this.viewports.stores[type].setViewport(vpUpdate);
+            this.setViewPortCoordinate({
+                coordinate: this.viewports.stores[type].lastCoordinate,
+                type,
+            });
+        }
+    }
+    getFullSize() {
+        var _a, _b;
+        let x = 0;
+        let y = 0;
+        for (let type of columnTypes) {
+            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
+        }
+        for (let type of rowTypes) {
+            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
+        }
+        return { y, x };
+    }
+    updateViewport(type) {
+        this.setViewPortCoordinate({
+            coordinate: this.viewports.stores[type].lastCoordinate,
+            type,
+        });
+    }
+    setViewPortCoordinate({ coordinate, type, }) {
+        const dimension = this.stores[type].getCurrentState();
+        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension);
+    }
+    getViewPortPos(e) {
+        const dimension = this.stores[e.dimension].getCurrentState();
+        const item = getItemByIndex(dimension, e.coordinate);
+        return item.start;
+    }
+    setSettings(data, dimensionType) {
+        let stores = [];
+        switch (dimensionType) {
+            case 'rgCol':
+                stores = columnTypes;
+                break;
+            case 'rgRow':
+                stores = rowTypes;
+                break;
+        }
+        for (let s of stores) {
+            this.stores[s].setStore(data);
+        }
+    }
+}
+
+class ViewportProvider {
+    constructor() {
+        this.stores = reduce_1([...rowTypes, ...columnTypes], (sources, k) => {
+            sources[k] = new ViewportStore(k);
+            return sources;
+        }, {});
+    }
+    setViewport(type, data) {
+        this.stores[type].setViewport(data);
+    }
+}
+
+/**
+ * Plugin module for revo-grid grid system
+ * Add support for automatic column resize
+ */
+const LETTER_BLOCK_SIZE = 7;
+var ColumnAutoSizeMode;
+(function (ColumnAutoSizeMode) {
+    // increases column width on header click according the largest text value
+    ColumnAutoSizeMode["headerClickAutosize"] = "headerClickAutoSize";
+    // increases column width on data set and text edit, decreases performance
+    ColumnAutoSizeMode["autoSizeOnTextOverlap"] = "autoSizeOnTextOverlap";
+    // increases and decreases column width based on all items sizes, worst for performance
+    ColumnAutoSizeMode["autoSizeAll"] = "autoSizeAll";
+})(ColumnAutoSizeMode || (ColumnAutoSizeMode = {}));
+class AutoSizeColumnPlugin extends BasePlugin {
+    constructor(revogrid, providers, config) {
+        super(revogrid, providers);
+        this.providers = providers;
+        this.config = config;
+        this.autoSizeColumns = null;
+        /** for edge case when no columns defined before data */
+        this.dataResolve = null;
+        this.dataReject = null;
+        this.letterBlockSize = (config === null || config === void 0 ? void 0 : config.letterBlockSize) || LETTER_BLOCK_SIZE;
+        // create test container to check text width
+        if (config === null || config === void 0 ? void 0 : config.preciseSize) {
+            this.precsizeCalculationArea = this.initiatePresizeElement();
+            revogrid.appendChild(this.precsizeCalculationArea);
+        }
+        const aftersourceset = ({ detail: { source } }) => {
+            this.setSource(source);
+        };
+        const afteredit = ({ detail }) => {
+            this.afteredit(detail);
+        };
+        const afterEditAll = ({ detail }) => {
+            this.afterEditAll(detail);
+        };
+        const beforecolumnsset = ({ detail: { columns } }) => {
+            this.columnSet(columns);
+        };
+        const headerDblClick = ({ detail }) => {
+            const type = ColumnDataProvider.getColumnType(detail.column);
+            const size = this.getColumnSize(detail.index, type);
+            if (size) {
+                this.providers.dimension.setCustomSizes(type, {
+                    [detail.index]: size,
+                }, true);
+            }
+        };
+        this.addEventListener('beforecolumnsset', beforecolumnsset);
+        switch (config === null || config === void 0 ? void 0 : config.mode) {
+            case ColumnAutoSizeMode.autoSizeOnTextOverlap:
+                this.addEventListener('aftersourceset', aftersourceset);
+                this.addEventListener('afteredit', afteredit);
+                break;
+            case ColumnAutoSizeMode.autoSizeAll:
+                this.addEventListener('aftersourceset', aftersourceset);
+                this.addEventListener('afteredit', afterEditAll);
+                break;
+            default:
+                this.addEventListener('headerdblclick', headerDblClick);
+                break;
+        }
+    }
+    async setSource(source) {
+        let autoSize = this.autoSizeColumns;
+        if (this.dataReject) {
+            this.dataReject();
+            this.clearPromise();
+        }
+        /** If data set first and no column provided await until get one */
+        if (!autoSize) {
+            const request = new Promise((resolve, reject) => {
+                this.dataResolve = resolve;
+                this.dataReject = reject;
+            });
+            try {
+                autoSize = await request;
+            }
+            catch (e) {
+                return;
+            }
+        }
+        // calculate sizes
+        each(autoSize, (_v, type) => {
+            const sizes = {};
+            each(autoSize[type], rgCol => {
+                // calculate size
+                rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ''));
+            });
+            this.providers.dimension.setCustomSizes(type, sizes, true);
+        });
+    }
+    getLength(len) {
+        var _a;
+        const padding = 15;
+        if (!len) {
+            return 0;
+        }
+        try {
+            const str = len.toString();
+            /**if exact calculation required proxy with html element, slow operation */
+            if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.preciseSize) {
+                this.precsizeCalculationArea.innerText = str;
+                return this.precsizeCalculationArea.scrollWidth + padding * 2;
+            }
+            return str.length * this.letterBlockSize + padding * 2;
+        }
+        catch (e) {
+            return 0;
+        }
+    }
+    afteredit(e) {
+        let data;
+        if (this.isRangeEdit(e)) {
+            data = e.data;
+        }
+        else {
+            data = { 0: { [e.prop]: e.val } };
+        }
+        each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            each(columns, rgCol => {
+                // calculate size
+                const size = reduce_1(data, (prev, rgRow) => {
+                    if (typeof rgRow[rgCol.prop] === 'undefined') {
+                        return prev;
+                    }
+                    return Math.max(prev || 0, this.getLength(rgRow[rgCol.prop]));
+                }, undefined);
+                if (size && rgCol.size < size) {
+                    rgCol.size = sizes[rgCol.index] = size;
+                }
+            });
+            this.providers.dimension.setCustomSizes(type, sizes, true);
+        });
+    }
+    afterEditAll(e) {
+        const props = {};
+        if (this.isRangeEdit(e)) {
+            each(e.data, r => each(r, (_v, p) => (props[p] = true)));
+        }
+        else {
+            props[e.prop] = true;
+        }
+        each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            each(columns, rgCol => {
+                if (props[rgCol.prop]) {
+                    const size = this.getColumnSize(rgCol.index, type);
+                    if (size) {
+                        sizes[rgCol.index] = size;
+                    }
+                }
+            });
+            this.providers.dimension.setCustomSizes(type, sizes, true);
+        });
+    }
+    getColumnSize(index, type) {
+        const rgCol = this.autoSizeColumns[type][index];
+        if (!rgCol) {
+            return 0;
+        }
+        return reduce_1(this.providers.data.stores, (r, s) => {
+            const perStore = reduce_1(s.store.get('items'), (prev, _row, i) => {
+                const item = getSourceItem(s.store, i);
+                return Math.max(prev || 0, this.getLength(item[rgCol.prop]));
+            }, 0);
+            return Math.max(r, perStore);
+        }, rgCol.size || 0);
+    }
+    columnSet(columns) {
+        var _a;
+        for (let t of columnTypes) {
+            const type = t;
+            const cols = columns[type];
+            for (let i in cols) {
+                if (cols[i].autoSize || ((_a = this.config) === null || _a === void 0 ? void 0 : _a.allColumns)) {
+                    if (!this.autoSizeColumns) {
+                        this.autoSizeColumns = {};
+                    }
+                    if (!this.autoSizeColumns[type]) {
+                        this.autoSizeColumns[type] = {};
+                    }
+                    this.autoSizeColumns[type][i] = Object.assign(Object.assign({}, cols[i]), { index: parseInt(i, 10) });
+                }
+            }
+        }
+        if (this.dataResolve) {
+            this.dataResolve(this.autoSizeColumns);
+            this.clearPromise();
+        }
+    }
+    clearPromise() {
+        this.dataResolve = null;
+        this.dataReject = null;
+    }
+    isRangeEdit(e) {
+        return !!e.data;
+    }
+    initiatePresizeElement() {
+        const styleForFontTest = {
+            position: 'absolute',
+            fontSize: '14px',
+            height: '0',
+            width: '0',
+            whiteSpace: 'nowrap',
+            top: '0',
+            overflowX: 'scroll',
+        };
+        const el = document.createElement('div');
+        for (let s in styleForFontTest) {
+            el.style[s] = styleForFontTest[s];
+        }
+        el.classList.add('revo-test-container');
+        return el;
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+}
+
+const eq = (value, extra) => {
+    if (typeof value === 'undefined' || (value === null && !extra)) {
+        return true;
+    }
+    if (typeof value !== 'string') {
+        value = JSON.stringify(value);
+    }
+    const filterVal = extra.toString().toLocaleLowerCase();
+    if (filterVal.length === 0) {
+        return true;
+    }
+    return value.toLocaleLowerCase() === filterVal;
+};
+const notEq = (value, extra) => !eq(value, extra);
+notEq.extra = 'input';
+eq.extra = 'input';
+
+const gtThan = function (value, extra) {
+    let conditionValue;
+    if (typeof value === 'number') {
+        conditionValue = parseFloat(extra === null || extra === void 0 ? void 0 : extra.toString());
+        return value > conditionValue;
+    }
+    return false;
+};
+gtThan.extra = 'input';
+
+const gtThanEq = function (value, extra) {
+    return eq(value, extra) || gtThan(value, extra);
+};
+gtThanEq.extra = 'input';
+
+const lt = function (value, extra) {
+    let conditionValue;
+    if (typeof value === 'number') {
+        conditionValue = parseFloat(extra === null || extra === void 0 ? void 0 : extra.toString());
+        return value < conditionValue;
+    }
+    else {
+        return false;
+    }
+};
+lt.extra = 'input';
+
+const lsEq = function (value, extra) {
+    return eq(value, extra) || lt(value, extra);
+};
+lsEq.extra = 'input';
+
+const set = (value) => !(value === '' || value === null || value === void 0);
+const notSet = (value) => !set(value);
+
+const beginsWith = (value, extra) => {
+    if (!value) {
+        return false;
+    }
+    if (!extra) {
+        return true;
+    }
+    if (typeof value !== 'string') {
+        value = JSON.stringify(value);
+    }
+    if (typeof extra !== 'string') {
+        extra = JSON.stringify(extra);
+    }
+    return value.toLocaleLowerCase().indexOf(extra.toLocaleLowerCase()) === 0;
+};
+beginsWith.extra = 'input';
+
+const contains = (value, extra) => {
+    if (!extra) {
+        return true;
+    }
+    if (!value) {
+        return false;
+    }
+    if (extra) {
+        if (typeof value !== 'string') {
+            value = JSON.stringify(value);
+        }
+        return value.toLocaleLowerCase().indexOf(extra.toString().toLowerCase()) > -1;
+    }
+    return true;
+};
+const notContains = (value, extra) => {
+    return !contains(value, extra);
+};
+notContains.extra = 'input';
+contains.extra = 'input';
+
+const filterNames = {
+    none: 'None',
+    empty: 'Not set',
+    notEmpty: 'Set',
+    eq: 'Equal',
+    notEq: 'Not equal',
+    begins: 'Begins with',
+    contains: 'Contains',
+    notContains: 'Does not contain',
+    eqN: '=',
+    neqN: '!=',
+    gt: '>',
+    gte: '>=',
+    lt: '<',
+    lte: '<=',
+};
+const filterEntities = {
+    none: () => true,
+    empty: notSet,
+    notEmpty: set,
+    eq: eq,
+    notEq: notEq,
+    begins: beginsWith,
+    contains: contains,
+    notContains: notContains,
+    eqN: eq,
+    neqN: notEq,
+    gt: gtThan,
+    gte: gtThanEq,
+    lt: lt,
+    lte: lsEq,
+};
+const filterTypes = {
+    string: ['notEmpty', 'empty', 'eq', 'notEq', 'begins', 'contains', 'notContains'],
+    number: ['notEmpty', 'empty', 'eqN', 'neqN', 'gt', 'gte', 'lt', 'lte'],
+};
+
+const FILTER_TRIMMED_TYPE = 'filter';
+const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
+class FilterPlugin extends BasePlugin {
+    constructor(revogrid, providers, uiid, config) {
+        var _a;
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.filterCollection = {};
+        this.multiFilterItems = {};
+        this.possibleFilters = Object.assign({}, filterTypes);
+        this.possibleFilterNames = Object.assign({}, filterNames);
+        this.possibleFilterEntities = Object.assign({}, filterEntities);
+        this.filterProp = FILTER_PROP;
+        if (config) {
+            this.initConfig(config);
+        }
+        const headerclick = (e) => this.headerclick(e);
+        const aftersourceset = async () => {
+            const filterCollectionProps = Object.keys(this.filterCollection);
+            if (filterCollectionProps.length > 0) {
+                // handle old way of filtering by reworking FilterCollection to new MultiFilterItem
+                filterCollectionProps.forEach((prop, index) => {
+                    if (!this.multiFilterItems[prop]) {
+                        this.multiFilterItems[prop] = [
+                            {
+                                id: index,
+                                type: this.filterCollection[prop].type,
+                                value: this.filterCollection[prop].value,
+                                relation: 'and',
+                            },
+                        ];
+                    }
+                });
+            }
+            await this.runFiltering();
+        };
+        this.addEventListener('headerclick', headerclick);
+        this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
+            if (!detail) {
+                this.clearFiltering();
+                return;
+            }
+            if (typeof detail === 'object') {
+                this.initConfig(detail);
+            }
+            aftersourceset();
+        });
+        this.addEventListener('aftersourceset', aftersourceset);
+        this.addEventListener('filter', ({ detail }) => this.onFilterChange(detail));
+        const existingNodes = this.revogrid.registerVNode.filter((n) => n.$tag$ !== 'revogr-filter-panel');
+        this.revogrid.registerVNode = [
+            ...existingNodes,
+            h("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
+        ];
+    }
+    initConfig(config) {
+        if (config.multiFilterItems) {
+            this.multiFilterItems = Object.assign({}, config.multiFilterItems);
+        }
+        if (config.customFilters) {
+            for (let cType in config.customFilters) {
+                const cFilter = config.customFilters[cType];
+                if (!this.possibleFilters[cFilter.columnFilterType]) {
+                    this.possibleFilters[cFilter.columnFilterType] = [];
+                }
+                this.possibleFilters[cFilter.columnFilterType].push(cType);
+                this.possibleFilterEntities[cType] = cFilter.func;
+                this.possibleFilterNames[cType] = cFilter.name;
+            }
+        }
+        if (config.filterProp) {
+            this.filterProp = config.filterProp;
+        }
+        /**
+         * which filters has to be included/excluded
+         * convinient way to exclude system filters
+         */
+        if (config.include) {
+            const filters = {};
+            for (let t in this.possibleFilters) {
+                // validate filters, if appropriate function present
+                const newTypes = this.possibleFilters[t].filter(f => config.include.indexOf(f) > -1);
+                if (newTypes.length) {
+                    filters[t] = newTypes;
+                }
+            }
+            // if any valid filters provided show them
+            if (Object.keys(filters).length > 0) {
+                this.possibleFilters = filters;
+            }
+        }
+        if (config.collection) {
+            this.filterCollection = reduce_1(config.collection, (result, item, prop) => {
+                if (this.possibleFilterEntities[item.type]) {
+                    result[prop] = item;
+                }
+                else {
+                    console.warn(`${item.type} type is not found.`);
+                }
+                return result;
+            }, {});
+        }
+        if (config.localization) {
+            if (config.localization.filterNames) {
+                Object.entries(config.localization.filterNames).forEach(([k, v]) => {
+                    if (this.possibleFilterNames[k] != void 0) {
+                        this.possibleFilterNames[k] = v;
+                    }
+                });
+            }
+        }
+    }
+    async headerclick(e) {
+        var _a;
+        const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
+        if (!isFilterBtn(el)) {
+            return;
+        }
+        e.preventDefault();
+        // close if same
+        const changes = await this.pop.getChanges();
+        if (changes && (changes === null || changes === void 0 ? void 0 : changes.prop) === e.detail.prop) {
+            this.pop.show();
+            return;
+        }
+        // filter button clicked, open filter dialog
+        const gridPos = this.revogrid.getBoundingClientRect();
+        const buttonPos = el.getBoundingClientRect();
+        const prop = e.detail.prop;
+        this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
+        this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    }
+    getColumnFilter(type) {
+        let filterType = 'string';
+        if (!type) {
+            return { [filterType]: this.possibleFilters[filterType] };
+        }
+        // if custom column filter
+        if (this.isValidType(type)) {
+            filterType = type;
+            // if multiple filters applied
+        }
+        else if (typeof type === 'object' && type.length) {
+            return type.reduce((r, multiType) => {
+                if (this.isValidType(multiType)) {
+                    r[multiType] = this.possibleFilters[multiType];
+                }
+                return r;
+            }, {});
+        }
+        return { [filterType]: this.possibleFilters[filterType] };
+    }
+    isValidType(type) {
+        return !!(typeof type === 'string' && this.possibleFilters[type]);
+    }
+    // called on internal component change
+    async onFilterChange(filterItems) {
+        this.multiFilterItems = filterItems;
+        this.runFiltering();
+    }
+    /**
+     * Triggers grid filtering
+     */
+    async doFiltering(collection, items, columns, filterItems) {
+        const columnsToUpdate = [];
+        columns.forEach(rgCol => {
+            const column = Object.assign({}, rgCol);
+            const hasFilter = filterItems[column.prop];
+            if (column[this.filterProp] && !hasFilter) {
+                delete column[this.filterProp];
+                columnsToUpdate.push(column);
+            }
+            if (!column[this.filterProp] && hasFilter) {
+                columnsToUpdate.push(column);
+                column[this.filterProp] = true;
+            }
+        });
+        const itemsToFilter = this.getRowFilter(items, filterItems);
+        // check is filter event prevented
+        const { defaultPrevented, detail } = this.emit('beforefiltertrimmed', {
+            collection,
+            itemsToFilter,
+            source: items,
+            filterItems,
+        });
+        if (defaultPrevented) {
+            return;
+        }
+        // check is trimmed event prevented
+        const isAddedEvent = await this.revogrid.addTrimmed(detail.itemsToFilter, FILTER_TRIMMED_TYPE);
+        if (isAddedEvent.defaultPrevented) {
+            return;
+        }
+        // applies the hasFilter to the columns to show filter icon
+        await this.revogrid.updateColumns(columnsToUpdate);
+        this.emit('afterFilterApply');
+    }
+    async clearFiltering() {
+        this.multiFilterItems = {};
+        await this.runFiltering();
+    }
+    async runFiltering() {
+        const collection = {};
+        // handle old filterCollection to return the first filter only (if any) from multiFilterItems
+        const filterProps = Object.keys(this.multiFilterItems);
+        for (const prop of filterProps) {
+            // check if we have any filter for a column
+            if (this.multiFilterItems[prop].length > 0) {
+                const firstFilterItem = this.multiFilterItems[prop][0];
+                collection[prop] = {
+                    filter: filterEntities[firstFilterItem.type],
+                    type: firstFilterItem.type,
+                    value: firstFilterItem.value,
+                };
+            }
+        }
+        this.filterCollection = collection;
+        const { source, columns } = await this.getData();
+        const { defaultPrevented, detail } = this.emit('beforefilterapply', {
+            collection: this.filterCollection,
+            source,
+            columns,
+            filterItems: this.multiFilterItems,
+        });
+        if (defaultPrevented) {
+            return;
+        }
+        this.doFiltering(detail.collection, detail.source, detail.columns, detail.filterItems);
+    }
+    async getData() {
+        return {
+            source: await this.revogrid.getSource(),
+            columns: await this.revogrid.getColumns(),
+        };
+    }
+    getRowFilter(rows, filterItems) {
+        const propKeys = Object.keys(filterItems);
+        const trimmed = {};
+        let propFilterSatisfiedCount = 0;
+        let lastFilterResults = [];
+        // each rows
+        rows.forEach((model, rowIndex) => {
+            // working on all props
+            for (const prop of propKeys) {
+                const propFilters = filterItems[prop];
+                propFilterSatisfiedCount = 0;
+                lastFilterResults = [];
+                // testing each filter for a prop
+                for (const [filterIndex, filterData] of propFilters.entries()) {
+                    // the filter LogicFunction based on the type
+                    const filter = this.possibleFilterEntities[filterData.type];
+                    // THE MAGIC OF FILTERING IS HERE
+                    if (filterData.relation === 'or') {
+                        lastFilterResults = [];
+                        if (filter(model[prop], filterData.value)) {
+                            continue;
+                        }
+                        propFilterSatisfiedCount++;
+                    }
+                    else {
+                        // 'and' relation will need to know the next filter
+                        // so we save this current filter to include it in the next filter
+                        lastFilterResults.push(!filter(model[prop], filterData.value));
+                        // check first if we have a filter on the next index to pair it with this current filter
+                        const nextFilterData = propFilters[filterIndex + 1];
+                        // stop the sequence if there is no next filter or if the next filter is not an 'and' relation
+                        if (!nextFilterData || nextFilterData.relation !== 'and') {
+                            // let's just continue since for sure propFilterSatisfiedCount cannot be satisfied
+                            if (lastFilterResults.indexOf(true) === -1) {
+                                lastFilterResults = [];
+                                continue;
+                            }
+                            // we need to add all of the lastFilterResults since we need to satisfy all
+                            propFilterSatisfiedCount += lastFilterResults.length;
+                            lastFilterResults = [];
+                        }
+                    }
+                } // end of propFilters forEach
+                // add to the list of removed/trimmed rows of filter condition is satisfied
+                if (propFilterSatisfiedCount === propFilters.length)
+                    trimmed[rowIndex] = true;
+            } // end of for-of propKeys
+        });
+        return trimmed;
+    }
+}
+
+var baseGetTag = _baseGetTag,
+    isArray = isArray_1,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var stringTag = '[object String]';
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, else `false`.
+ * @example
+ *
+ * _.isString('abc');
+ * // => true
+ *
+ * _.isString(1);
+ * // => false
+ */
+function isString$1(value) {
+  return typeof value == 'string' ||
+    (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
+}
+
+var isString_1 = isString$1;
+
+var baseProperty = _baseProperty;
+
+/**
+ * Gets the size of an ASCII `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+var asciiSize$1 = baseProperty('length');
+
+var _asciiSize = asciiSize$1;
+
+/** Used to compose unicode character classes. */
+
+var rsAstralRange$1 = '\\ud800-\\udfff',
+    rsComboMarksRange$1 = '\\u0300-\\u036f',
+    reComboHalfMarksRange$1 = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange$1 = '\\u20d0-\\u20ff',
+    rsComboRange$1 = rsComboMarksRange$1 + reComboHalfMarksRange$1 + rsComboSymbolsRange$1,
+    rsVarRange$1 = '\\ufe0e\\ufe0f';
+
+/** Used to compose unicode capture groups. */
+var rsZWJ$1 = '\\u200d';
+
+/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
+var reHasUnicode = RegExp('[' + rsZWJ$1 + rsAstralRange$1  + rsComboRange$1 + rsVarRange$1 + ']');
+
+/**
+ * Checks if `string` contains Unicode symbols.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {boolean} Returns `true` if a symbol is found, else `false`.
+ */
+function hasUnicode$1(string) {
+  return reHasUnicode.test(string);
+}
+
+var _hasUnicode = hasUnicode$1;
+
+/** Used to compose unicode character classes. */
+
+var rsAstralRange = '\\ud800-\\udfff',
+    rsComboMarksRange = '\\u0300-\\u036f',
+    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
+    rsVarRange = '\\ufe0e\\ufe0f';
+
+/** Used to compose unicode capture groups. */
+var rsAstral = '[' + rsAstralRange + ']',
+    rsCombo = '[' + rsComboRange + ']',
+    rsFitz = '\\ud83c[\\udffb-\\udfff]',
+    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+    rsNonAstral = '[^' + rsAstralRange + ']',
+    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+    rsZWJ = '\\u200d';
+
+/** Used to compose unicode regexes. */
+var reOptMod = rsModifier + '?',
+    rsOptVar = '[' + rsVarRange + ']?',
+    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+    rsSeq = rsOptVar + reOptMod + rsOptJoin,
+    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
+
+/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
+var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
+
+/**
+ * Gets the size of a Unicode `string`.
+ *
+ * @private
+ * @param {string} string The string inspect.
+ * @returns {number} Returns the string size.
+ */
+function unicodeSize$1(string) {
+  var result = reUnicode.lastIndex = 0;
+  while (reUnicode.test(string)) {
+    ++result;
+  }
+  return result;
+}
+
+var _unicodeSize = unicodeSize$1;
+
+var asciiSize = _asciiSize,
+    hasUnicode = _hasUnicode,
+    unicodeSize = _unicodeSize;
+
+/**
+ * Gets the number of symbols in `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the string size.
+ */
+function stringSize$1(string) {
+  return hasUnicode(string)
+    ? unicodeSize(string)
+    : asciiSize(string);
+}
+
+var _stringSize = stringSize$1;
+
+var baseKeys = _baseKeys,
+    getTag = _getTag,
+    isArrayLike = isArrayLike_1,
+    isString = isString_1,
+    stringSize = _stringSize;
+
+/** `Object#toString` result references. */
+var mapTag = '[object Map]',
+    setTag = '[object Set]';
+
+/**
+ * Gets the size of `collection` by returning its length for array-like
+ * values or the number of own enumerable string keyed properties for objects.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Collection
+ * @param {Array|Object|string} collection The collection to inspect.
+ * @returns {number} Returns the collection size.
+ * @example
+ *
+ * _.size([1, 2, 3]);
+ * // => 3
+ *
+ * _.size({ 'a': 1, 'b': 2 });
+ * // => 2
+ *
+ * _.size('pebbles');
+ * // => 7
+ */
+function size(collection) {
+  if (collection == null) {
+    return 0;
+  }
+  if (isArrayLike(collection)) {
+    return isString(collection) ? stringSize(collection) : collection.length;
+  }
+  var tag = getTag(collection);
+  if (tag == mapTag || tag == setTag) {
+    return collection.size;
+  }
+  return baseKeys(collection).length;
+}
+
+var size_1 = size;
+
+/**
+ * Lifecycle
+ * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
+ * 2. @method `updateColumnSorting` - Updates the column sorting icon on the grid and the column itself, but the data remains untouched.
+ * 3. @event `beforesortingapply` - Triggered before the sorting data is applied to the data source. You can prevent this event, and the data will not be sorted. This event is only called from a column sorting click.
+ * 4. @event `aftersortingapply` - Triggered after sorting has been applied and completed. This event occurs for both row and column sorting.
+ *
+ * Note: If you prevent an event, it will not proceed to the subsequent steps.
+ */
+class SortingPlugin extends BasePlugin {
+    async runSorting(order, comparison) {
+        var _a;
+        await this.sort(order, comparison);
+        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.sortingPromise = null;
+    }
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        // sorting order per column
+        this.sorting = null;
+        // sorting function per column, multiple columns sorting supported
+        this.sortingFunc = null;
+        this.sortingPromise = null;
+        this.postponeSort = debounce_1(async (order, comparison) => this.runSorting(order, comparison), 50);
+        const beforeanysource = async ({ detail: { type, }, }) => {
+            // if sorting was provided - sort data
+            if (!!this.sorting && this.sortingFunc) {
+                const beforeEvent = this.emit('beforesorting', { type });
+                if (beforeEvent.defaultPrevented) {
+                    return;
+                }
+                this.startSorting(this.sorting, this.sortingFunc);
+            }
+        };
+        const aftercolumnsset = async ({ detail: { order }, }) => {
+            const columns = await this.revogrid.getColumns();
+            const sortingFunc = {};
+            for (let prop in order) {
+                const cmp = this.getComparer(ColumnDataProvider.getColumnByProp(columns, prop), order[prop]);
+                sortingFunc[prop] = cmp;
+            }
+            this.runSorting(order, sortingFunc);
+        };
+        const headerclick = async (e) => {
+            var _a, _b;
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (!e.detail.column.sortable) {
+                return;
+            }
+            this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
+        };
+        this.addEventListener('beforeanysource', beforeanysource);
+        this.addEventListener('aftercolumnsset', aftercolumnsset);
+        this.addEventListener('beforeheaderclick', headerclick);
+    }
+    startSorting(order, sortingFunc) {
+        if (!this.sortingPromise) {
+            this.revogrid.jobsBeforeRender.push(new Promise((resolve) => {
+                this.sortingPromise = resolve;
+            }));
+        }
+        this.postponeSort(order, sortingFunc);
+    }
+    getComparer(column, order) {
+        var _a;
+        const cellCmp = ((_a = column === null || column === void 0 ? void 0 : column.cellCompare) === null || _a === void 0 ? void 0 : _a.bind({ order })) || this.defaultCellCompare;
+        if (order == 'asc') {
+            return cellCmp;
+        }
+        if (order == 'desc') {
+            return this.descCellCompare(cellCmp);
+        }
+        return undefined;
+    }
+    /**
+     * Apply sorting to data on header click
+     * If additive - add to existing sorting, multiple columns can be sorted
+     */
+    async headerclick(column, index, additive) {
+        let order = this.getNextOrder(column.order);
+        const beforeEvent = this.emit('beforesorting', { column, order, additive });
+        if (beforeEvent.defaultPrevented) {
+            return;
+        }
+        order = beforeEvent.detail.order;
+        const newCol = await this.revogrid.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
+        // apply sort data
+        const beforeApplyEvent = this.emit('beforesortingapply', {
+            column: newCol,
+            order,
+            additive,
+        });
+        if (beforeApplyEvent.defaultPrevented) {
+            return;
+        }
+        order = beforeApplyEvent.detail.order;
+        const cmp = this.getComparer(column, order);
+        if (additive && this.sorting) {
+            const sorting = {};
+            const sortingFunc = {};
+            this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
+            // extend sorting function with new sorting for multiple columns sorting
+            this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
+            if (column.prop in sorting && size_1(sorting) > 1 && order === undefined) {
+                delete sorting[column.prop];
+                delete sortingFunc[column.prop];
+            }
+            else {
+                sorting[column.prop] = order;
+                sortingFunc[column.prop] = cmp;
+            }
+        }
+        else {
+            if (order) {
+                // reset sorting
+                this.sorting = { [column.prop]: order };
+                this.sortingFunc = { [column.prop]: cmp };
+            }
+            else {
+                delete this.sorting[column.prop];
+                delete this.sortingFunc[column.prop];
+            }
+        }
+        this.startSorting(this.sorting, this.sortingFunc);
+    }
+    /**
+     * Sort items by sorting function
+     * @requires proxyItems applied to row store
+     * @requires source applied to row store
+     *
+     * @param sorting - per column sorting
+     * @param data - this.stores['rgRow'].store.get('source')
+     */
+    async sort(sorting, sortingFunc, types = ['rgRow', 'rowPinStart', 'rowPinEnd']) {
+        // if no sorting - reset
+        if (!size_1(sorting)) {
+            this.sorting = null;
+            this.sortingFunc = null;
+            for (let type of types) {
+                const store = await this.revogrid.getSourceStore(type);
+                // row data
+                const source = store.get('source');
+                // row indexes
+                const proxyItems = range_1(0, source.length);
+                setStore(store, {
+                    proxyItems,
+                    source: [...source],
+                });
+            }
+        }
+        else {
+            // set sorting
+            this.sorting = sorting;
+            this.sortingFunc = sortingFunc;
+            // by default it'll sort by rgRow store
+            // todo: support multiple stores
+            for (let type of types) {
+                const store = await this.revogrid.getSourceStore(type);
+                // row data
+                const source = store.get('source');
+                // row indexes
+                const proxyItems = store.get('proxyItems');
+                const data = this.sortIndexByItems([...proxyItems], source, sortingFunc);
+                setStore(store, {
+                    proxyItems: data,
+                    source: [...source],
+                });
+            }
+        }
+        this.emit('aftersortingapply');
+    }
+    defaultCellCompare(prop, a, b) {
+        var _a, _b;
+        const av = (_a = a[prop]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+        const bv = (_b = b[prop]) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase();
+        return av == bv ? 0 : av > bv ? 1 : -1;
+    }
+    descCellCompare(cmp) {
+        return (prop, a, b) => {
+            return -1 * cmp(prop, a, b);
+        };
+    }
+    sortIndexByItems(indexes, source, sortingFunc) {
+        // if no sorting - return unsorted indexes
+        if (Object.entries(sortingFunc).length === 0) {
+            // Unsort indexes
+            return [...Array(indexes.length).keys()];
+        }
+        //
+        /**
+         * go through all indexes and align in new order
+         * performs a multi-level sorting by applying multiple comparison functions to determine the order of the items based on different properties.
+         */
+        return indexes.sort((a, b) => {
+            for (const [prop, cmp] of Object.entries(sortingFunc)) {
+                const itemA = source[a];
+                const itemB = source[b];
+                /**
+                 * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
+                 * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
+                 */
+                const sorted = cmp(prop, itemA, itemB);
+                if (sorted) {
+                    return sorted;
+                }
+            }
+            return 0;
+        });
+    }
+    getNextOrder(currentOrder) {
+        switch (currentOrder) {
+            case undefined:
+                return 'asc';
+            case 'asc':
+                return 'desc';
+            case 'desc':
+                return undefined;
+        }
+    }
+}
+
+/**
+ * The base implementation of `_.clamp` which doesn't coerce arguments.
+ *
+ * @private
+ * @param {number} number The number to clamp.
+ * @param {number} [lower] The lower bound.
+ * @param {number} upper The upper bound.
+ * @returns {number} Returns the clamped number.
+ */
+
+function baseClamp$1(number, lower, upper) {
+  if (number === number) {
+    if (upper !== undefined) {
+      number = number <= upper ? number : upper;
+    }
+    if (lower !== undefined) {
+      number = number >= lower ? number : lower;
+    }
+  }
+  return number;
+}
+
+var _baseClamp = baseClamp$1;
+
+var baseClamp = _baseClamp,
+    toInteger$1 = toInteger_1;
+
+/** Used as references for the maximum length and index of an array. */
+var MAX_ARRAY_LENGTH = 4294967295;
+
+/**
+ * Converts `value` to an integer suitable for use as the length of an
+ * array-like object.
+ *
+ * **Note:** This method is based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {number} Returns the converted integer.
+ * @example
+ *
+ * _.toLength(3.2);
+ * // => 3
+ *
+ * _.toLength(Number.MIN_VALUE);
+ * // => 0
+ *
+ * _.toLength(Infinity);
+ * // => 4294967295
+ *
+ * _.toLength('3.2');
+ * // => 3
+ */
+function toLength$1(value) {
+  return value ? baseClamp(toInteger$1(value), 0, MAX_ARRAY_LENGTH) : 0;
+}
+
+var toLength_1 = toLength$1;
+
+var toInteger = toInteger_1,
+    toLength = toLength_1;
+
+/**
+ * The base implementation of `_.fill` without an iteratee call guard.
+ *
+ * @private
+ * @param {Array} array The array to fill.
+ * @param {*} value The value to fill `array` with.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns `array`.
+ */
+function baseFill$1(array, value, start, end) {
+  var length = array.length;
+
+  start = toInteger(start);
+  if (start < 0) {
+    start = -start > length ? 0 : (length + start);
+  }
+  end = (end === undefined || end > length) ? length : toInteger(end);
+  if (end < 0) {
+    end += length;
+  }
+  end = start > end ? 0 : toLength(end);
+  while (start < end) {
+    array[start++] = value;
+  }
+  return array;
+}
+
+var _baseFill = baseFill$1;
+
+var baseFill = _baseFill,
+    isIterateeCall = _isIterateeCall;
+
+/**
+ * Fills elements of `array` with `value` from `start` up to, but not
+ * including, `end`.
+ *
+ * **Note:** This method mutates `array`.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.2.0
+ * @category Array
+ * @param {Array} array The array to fill.
+ * @param {*} value The value to fill `array` with.
+ * @param {number} [start=0] The start position.
+ * @param {number} [end=array.length] The end position.
+ * @returns {Array} Returns `array`.
+ * @example
+ *
+ * var array = [1, 2, 3];
+ *
+ * _.fill(array, 'a');
+ * console.log(array);
+ * // => ['a', 'a', 'a']
+ *
+ * _.fill(Array(3), 2);
+ * // => [2, 2, 2]
+ *
+ * _.fill([4, 6, 8, 10], '*', 1, 3);
+ * // => [4, '*', '*', 10]
+ */
+function fill(array, value, start, end) {
+  var length = array == null ? 0 : array.length;
+  if (!length) {
+    return [];
+  }
+  if (start && typeof start != 'number' && isIterateeCall(array, value, start)) {
+    start = 0;
+    end = length;
+  }
+  return baseFill(array, value, start, end);
+}
+
+var fill_1 = fill;
+
+const INITIAL = {
+    mime: 'text/csv',
+    fileKind: 'csv',
+    // BOM signature
+    bom: true,
+    columnDelimiter: ',',
+    rowDelimiter: '\r\n',
+    encoding: '',
+};
+// The ASCII character code 13 is called a Carriage Return or CR.
+const CARRIAGE_RETURN = String.fromCharCode(13);
+// Chr(13) followed by a Chr(10) that compose a proper CRLF.
+const LINE_FEED = String.fromCharCode(10);
+const DOUBLE_QT = String.fromCharCode(34);
+const NO_BREAK_SPACE = String.fromCharCode(0xfeff);
+const escapeRegex = new RegExp('"', 'g');
+class ExportCsv {
+    constructor(options = {}) {
+        this.options = Object.assign(Object.assign({}, INITIAL), options);
+    }
+    doExport({ data, headers, props }) {
+        let result = this.options.bom ? NO_BREAK_SPACE : '';
+        // any header
+        if ((headers === null || headers === void 0 ? void 0 : headers.length) > 0) {
+            headers.forEach(header => {
+                // ignore empty
+                if (!header.length) {
+                    return;
+                }
+                result += this.prepareHeader(header, this.options.columnDelimiter);
+                result += this.options.rowDelimiter;
+            });
+        }
+        data.forEach((rgRow, index) => {
+            if (index > 0) {
+                result += this.options.rowDelimiter;
+            }
+            // support grouping
+            if (isGrouping(rgRow)) {
+                result += this.parseCell(getGroupingName(rgRow), this.options.columnDelimiter);
+                return;
+            }
+            result += props.map(p => this.parseCell(rgRow[p], this.options.columnDelimiter)).join(this.options.columnDelimiter);
+        });
+        return result;
+    }
+    prepareHeader(columnHeaders, columnDelimiter) {
+        let result = '';
+        const newColumnHeaders = columnHeaders.map(v => this.parseCell(v, columnDelimiter, true));
+        result += newColumnHeaders.join(columnDelimiter);
+        return result;
+    }
+    parseCell(value, columnDelimiter, force = false) {
+        let escape = value;
+        if (typeof value !== 'string') {
+            escape = JSON.stringify(value);
+        }
+        const toEscape = [CARRIAGE_RETURN, DOUBLE_QT, LINE_FEED, columnDelimiter];
+        if (typeof escape === 'undefined') {
+            return '';
+        }
+        if (escape !== '' && (force || toEscape.some(i => escape.indexOf(i) >= 0))) {
+            return `"${escape.replace(escapeRegex, '""')}"`;
+        }
+        return escape;
+    }
+}
+
+var ExportTypes;
+(function (ExportTypes) {
+    ExportTypes["csv"] = "csv";
+})(ExportTypes || (ExportTypes = {}));
+class ExportFilePlugin extends BasePlugin {
+    /** Exports string */
+    async exportString(options = {}, t = ExportTypes.csv) {
+        const data = await this.beforeexport();
+        if (!data) {
+            return null;
+        }
+        return this.formatter(t, options).doExport(data);
+    }
+    /** Exports Blob */
+    async exportBlob(options = {}, t = ExportTypes.csv) {
+        return await this.getBlob(this.formatter(t, options));
+    }
+    /** Export file */
+    async exportFile(options = {}, t = ExportTypes.csv) {
+        const formatter = this.formatter(t, options);
+        const blob = await this.getBlob(formatter);
+        // url
+        const URL = window.URL || window.webkitURL;
+        const a = document.createElement('a');
+        const { filename, fileKind } = formatter.options;
+        const name = `${filename}.${fileKind}`;
+        const url = URL.createObjectURL(blob);
+        a.style.display = 'none';
+        a.setAttribute('href', url);
+        a.setAttribute('download', name);
+        this.revogrid.appendChild(a);
+        a.dispatchEvent(new MouseEvent('click'));
+        this.revogrid.removeChild(a);
+        // delay for revoke, correct for some browsers
+        await timeout(120);
+        URL.revokeObjectURL(url);
+    }
+    /** Blob object */
+    async getBlob(formatter) {
+        const type = `${formatter.options.mime};charset=${formatter.options.encoding}`;
+        if (typeof Blob !== 'undefined') {
+            const data = await this.beforeexport();
+            if (!data) {
+                return null;
+            }
+            return new Blob([formatter.doExport(data)], { type });
+        }
+        return null;
+    }
+    // before event
+    async beforeexport() {
+        let data = await this.getData();
+        const event = this.emit('beforeexport', { data });
+        if (event.defaultPrevented) {
+            return null;
+        }
+        return event.detail.data;
+    }
+    async getData() {
+        const data = await this.getSource();
+        const colSource = [];
+        const colPromises = [];
+        columnTypes.forEach((t, i) => {
+            colPromises.push(this.getColPerSource(t).then(s => (colSource[i] = s)));
+        });
+        await Promise.all(colPromises);
+        const columns = {
+            headers: [],
+            props: [],
+        };
+        for (let source of colSource) {
+            source.headers.forEach((h, i) => {
+                if (!columns.headers[i]) {
+                    columns.headers[i] = [];
+                }
+                columns.headers[i].push(...h);
+            });
+            columns.props.push(...source.props);
+        }
+        return Object.assign({ data }, columns);
+    }
+    async getColPerSource(t) {
+        const store = await this.revogrid.getColumnStore(t);
+        const source = store.get('source');
+        const virtualIndexes = store.get('items');
+        const depth = store.get('groupingDepth');
+        const groups = store.get('groups');
+        const colNames = [];
+        const colProps = [];
+        const visibleItems = virtualIndexes.reduce((r, v, virtualIndex) => {
+            const prop = source[v].prop;
+            colNames.push(source[v].name || '');
+            colProps.push(prop);
+            r[prop] = virtualIndex;
+            return r;
+        }, {});
+        const rows = this.getGroupHeaders(depth, groups, virtualIndexes, visibleItems);
+        rows.push(colNames);
+        return {
+            headers: rows,
+            props: colProps,
+        };
+    }
+    getGroupHeaders(depth, groups, items, visibleItems) {
+        const rows = [];
+        const template = fill_1(new Array(items.length), '');
+        for (let d = 0; d < depth; d++) {
+            const rgRow = [...template];
+            rows.push(rgRow);
+            if (!groups[d]) {
+                continue;
+            }
+            const levelGroups = groups[d];
+            // add names of groups
+            levelGroups.forEach((group) => {
+                const minIndex = this.findGroupStartIndex(group.ids, visibleItems);
+                if (typeof minIndex === 'number') {
+                    rgRow[minIndex] = group.name;
+                }
+            });
+        }
+        return rows;
+    }
+    findGroupStartIndex(ids, visibleItems) {
+        let min;
+        ids.forEach(id => {
+            const current = visibleItems[id];
+            if (typeof current === 'number') {
+                if (typeof min !== 'number' || min > current) {
+                    min = current;
+                }
+            }
+        });
+        return min;
+    }
+    async getSource() {
+        const data = [];
+        const promisesData = [];
+        rowTypes.forEach(t => {
+            const dataPart = [];
+            data.push(dataPart);
+            const promise = this.revogrid.getVisibleSource(t).then((d) => dataPart.push(...d));
+            promisesData.push(promise);
+        });
+        await Promise.all(promisesData);
+        return data.reduce((r, v) => {
+            r.push(...v);
+            return r;
+        }, []);
+    }
+    // get correct class for future multiple types support
+    formatter(type, options = {}) {
+        switch (type) {
+            case ExportTypes.csv:
+                return new ExportCsv(options);
+            default:
+                throw new Error('Unknown format');
+        }
+    }
+}
+
+// provide collapse data
+function doCollapse(pIndex, source) {
+    const model = source[pIndex];
+    const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
+    const trimmed = {};
+    let i = pIndex + 1;
+    const total = source.length;
+    while (i < total) {
+        const currentModel = source[i];
+        if (isGrouping(currentModel)) {
+            const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
+            if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
+                break;
+            }
+            currentModel[GROUP_EXPANDED] = false;
+        }
+        trimmed[i++] = true;
+    }
+    model[GROUP_EXPANDED] = false;
+    return { trimmed };
+}
+/**
+ *
+ * @param pIndex - physical index
+ * @param vIndex - virtual index, need to update item collection
+ * @param source - data source
+ * @param rowItemsIndexes - rgRow indexes
+ */
+function doExpand(vIndex, source, rowItemsIndexes) {
+    const physicalIndex = rowItemsIndexes[vIndex];
+    const model = source[physicalIndex];
+    const currentGroup = getParsedGroup(model[PSEUDO_GROUP_ITEM_ID]);
+    const trimmed = {};
+    // no group found
+    if (!currentGroup) {
+        return { trimmed };
+    }
+    const groupItems = [];
+    model[GROUP_EXPANDED] = true;
+    let i = physicalIndex + 1;
+    const total = source.length;
+    let groupLevelOnly = 0;
+    // go through all rows
+    while (i < total) {
+        const currentModel = source[i];
+        const isGroup = isGrouping(currentModel);
+        // group found
+        if (isGroup) {
+            if (!isSameGroup(currentGroup, model, currentModel)) {
+                break;
+            }
+            else if (!groupLevelOnly) {
+                // if get group first it's group only level
+                groupLevelOnly = currentModel[GROUP_DEPTH];
+            }
+        }
+        // level 0 or same depth
+        if (!groupLevelOnly || (isGroup && groupLevelOnly === currentModel[GROUP_DEPTH])) {
+            trimmed[i] = false;
+            groupItems.push(i);
+        }
+        i++;
+    }
+    const result = {
+        trimmed,
+    };
+    if (groupItems.length) {
+        const items = [...rowItemsIndexes];
+        items.splice(vIndex + 1, 0, ...groupItems);
+        result.items = items;
+    }
+    return result;
+}
+
+const TRIMMED_GROUPING = 'grouping';
+/**
+ * Prepare trimming updated indexes for grouping
+ * @param initiallyTrimed
+ * @param firstLevelMap
+ * @param secondLevelMap
+ */
+function processDoubleConversionTrimmed(initiallyTrimed, firstLevelMap, secondLevelMap) {
+    const trimemedOptionsToUpgrade = {};
+    /**
+     * go through all groups except grouping
+     */
+    for (let type in initiallyTrimed) {
+        if (type === TRIMMED_GROUPING) {
+            continue;
+        }
+        const items = initiallyTrimed[type];
+        const newItems = {};
+        for (let initialIndex in items) {
+            /**
+             * if item exists we find it in collection
+             * we support 2 level of conversions
+             */
+            let newConversionIndex = firstLevelMap[initialIndex];
+            if (secondLevelMap) {
+                newConversionIndex = secondLevelMap[newConversionIndex];
+            }
+            /**
+             * if item was trimmed previously
+             * trimming makes sense to apply
+             */
+            if (items[initialIndex]) {
+                newItems[newConversionIndex] = true;
+                /**
+                 * If changes present apply changes to new source
+                 */
+                if (newConversionIndex !== parseInt(initialIndex, 10)) {
+                    trimemedOptionsToUpgrade[type] = newItems;
+                }
+            }
+        }
+    }
+    return trimemedOptionsToUpgrade;
+}
+
+class GroupingRowPlugin extends BasePlugin {
+    get hasProps() {
+        var _a, _b, _c;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) && ((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.length);
+    }
+    get store() {
+        return this.providers.data.stores[GROUPING_ROW_TYPE].store;
+    }
+    // proxy for items get
+    get rowItems() {
+        return this.store.get('items');
+    }
+    get trimmed() {
+        return this.store.get('trimmed');
+    }
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+    }
+    // befoce cell focus
+    onFocus(e) {
+        if (isGrouping(e.detail.model)) {
+            e.preventDefault();
+        }
+    }
+    // expand event triggered
+    onExpand({ virtualIndex }) {
+        const { source } = this.getSource();
+        let newTrimmed = this.trimmed[TRIMMED_GROUPING];
+        let i = getPhysical(this.store, virtualIndex);
+        const model = source[i];
+        const prevExpanded = model[GROUP_EXPANDED];
+        if (!prevExpanded) {
+            const { trimmed, items } = doExpand(virtualIndex, source, this.rowItems);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            if (items) {
+                setItems(this.store, items);
+            }
+        }
+        else {
+            const { trimmed } = doCollapse(i, source);
+            newTrimmed = Object.assign(Object.assign({}, newTrimmed), trimmed);
+            this.revogrid.clearFocus();
+        }
+        this.store.set('source', source);
+        this.revogrid.addTrimmed(newTrimmed, TRIMMED_GROUPING);
+    }
+    // get source based on proxy item collection to preserve rgRow order
+    getSource(withoutGrouping = false) {
+        const source = this.store.get('source');
+        const items = this.store.get('proxyItems');
+        let index = 0;
+        // order important here, expected parent is first, then others
+        return items.reduce((result, i) => {
+            const model = source[i];
+            if (!withoutGrouping) {
+                result.source.push(model);
+                return result;
+            }
+            // grouping filter
+            if (!isGrouping(model)) {
+                result.source.push(model);
+                result.oldNewIndexes[i] = index;
+                index++;
+            }
+            else {
+                if (model[GROUP_EXPANDED]) {
+                    result.prevExpanded[model[PSEUDO_GROUP_ITEM_VALUE]] = true;
+                }
+            }
+            return result;
+        }, {
+            source: [],
+            prevExpanded: {},
+            oldNewIndexes: {},
+        });
+    }
+    setColumnGrouping(cols) {
+        // if 0 column as holder
+        if (cols === null || cols === void 0 ? void 0 : cols.length) {
+            cols[0][PSEUDO_GROUP_COLUMN] = true;
+            return true;
+        }
+        return false;
+    }
+    setColumns({ columns }) {
+        for (let type of columnTypes) {
+            if (this.setColumnGrouping(columns[type])) {
+                break;
+            }
+        }
+    }
+    // evaluate drag between groups
+    onDrag(e) {
+        const { from, to } = e.detail;
+        const isDown = to - from >= 0;
+        const { source } = this.getSource();
+        const items = this.rowItems;
+        let i = isDown ? from : to;
+        const end = isDown ? to : from;
+        for (; i < end; i++) {
+            const model = source[items[i]];
+            const isGroup = isGrouping(model);
+            if (isGroup) {
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+    beforeTrimmedApply(trimmed, type) {
+        /** Before filter apply remove grouping filtering */
+        if (type === FILTER_TRIMMED_TYPE) {
+            const source = this.store.get('source');
+            for (let index in trimmed) {
+                if (trimmed[index] && isGrouping(source[index])) {
+                    trimmed[index] = false;
+                }
+            }
+        }
+    }
+    // subscribe to grid events to process them accordingly
+    subscribe() {
+        /** if grouping present and new data source arrived */
+        this.addEventListener('beforesourceset', ({ detail }) => this.onDataSet(detail));
+        this.addEventListener('beforecolumnsset', ({ detail }) => this.setColumns(detail));
+        /**
+         * filter applied need to clear grouping and apply again
+         * based on new results can be new grouping
+         */
+        this.addEventListener('beforetrimmed', ({ detail: { trimmed, trimmedType } }) => this.beforeTrimmedApply(trimmed, trimmedType));
+        /**
+         * sorting applied need to clear grouping and apply again
+         * based on new results whole grouping order will changed
+         */
+        this.addEventListener('aftersortingapply', () => this.doSourceUpdate(Object.assign({}, this.options)));
+        /**
+         * Apply logic for focus inside of grouping
+         * We can't focus on grouping rows, navigation only inside of groups for now
+         */
+        this.addEventListener('beforecellfocus', e => this.onFocus(e));
+        /**
+         * Prevent rgRow drag outside the group
+         */
+        this.addEventListener('roworderchanged', e => this.onDrag(e));
+        /**
+         * When grouping expand icon was clicked
+         */
+        this.addEventListener(GROUP_EXPAND_EVENT, ({ detail }) => this.onExpand(detail));
+    }
+    /**
+     * Starts global source update with group clearing and applying new one
+     * Initiated when need to reapply grouping
+     */
+    doSourceUpdate(options) {
+        var _a;
+        if (!this.hasProps) {
+            return;
+        }
+        /**
+         * Get source without grouping
+         * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
+         */
+        const { source, prevExpanded, oldNewIndexes } = this.getSource(true);
+        /**
+         * Group again
+         * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
+         */
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
+        // setup source
+        this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes, oldNewIndexMap);
+    }
+    /**
+     * Apply grouping on data set
+     * Clear grouping from source
+     * If source came from other plugin
+     */
+    onDataSet(data) {
+        var _a;
+        if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
+            return;
+        }
+        const source = data.source.filter(s => !isGrouping(s));
+        const expanded = this.revogrid.grouping || {};
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
+        data.source = sourceWithGroups;
+        this.providers.data.setGrouping({ depth });
+        this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
+    }
+    // apply grouping
+    setGrouping(options) {
+        // unsubscribe from all events when group applied
+        this.clearSubscriptions();
+        this.options = options;
+        // clear props, no grouping exists
+        if (!options.props || !Object.keys(options.props).length) {
+            this.clearGrouping();
+            return;
+        }
+        // props exist and source inited
+        const { source } = this.getSource();
+        if (source.length) {
+            this.doSourceUpdate(Object.assign({}, options));
+        }
+        // props exist and columns inited
+        for (let t of columnTypes) {
+            if (this.setColumnGrouping(this.providers.column.getColumns(t))) {
+                this.providers.column.refreshByType(t);
+                break;
+            }
+        }
+        // if has any grouping subscribe to events again
+        this.subscribe();
+    }
+    // clear grouping
+    clearGrouping() {
+        // clear columns
+        columnTypes.forEach(t => {
+            const cols = this.providers.column.getColumns(t);
+            let deleted = false;
+            cols.forEach(c => {
+                if (isGroupingColumn(c)) {
+                    delete c[PSEUDO_GROUP_COLUMN];
+                    deleted = true;
+                }
+            });
+            // if column store had grouping clear and refresh
+            if (deleted) {
+                this.providers.column.refreshByType(t);
+            }
+        });
+        // clear rows
+        const { source, oldNewIndexes } = this.getSource(true);
+        this.providers.data.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
+        this.updateTrimmed(undefined, undefined, oldNewIndexes);
+    }
+    updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap, secondLevelMap) {
+        // map previously trimmed data
+        const trimemedOptionsToUpgrade = processDoubleConversionTrimmed(this.trimmed, firstLevelMap, secondLevelMap);
+        for (let type in trimemedOptionsToUpgrade) {
+            this.revogrid.addTrimmed(trimemedOptionsToUpgrade[type], type);
+        }
+        // const emptyGroups = this.filterOutEmptyGroups(trimemedOptionsToUpgrade, childrenByGroup);
+        // setup trimmed data for grouping
+        this.revogrid.addTrimmed(Object.assign({}, trimmedGroup), TRIMMED_GROUPING);
+    }
+}
+
+/** Collect Column data */
+function gatherColumnData(data) {
+    const colDimension = data.dimensions[data.colType].store;
+    const realWidth = colDimension.get('realSize');
+    const prop = {
+        contentWidth: realWidth,
+        class: data.colType,
+        contentHeight: data.contentHeight,
+        key: data.colType,
+        colType: data.colType,
+        onResizeviewport: data.onResizeviewport,
+        // set viewport size to real size
+        style: data.fixWidth ? { minWidth: `${realWidth}px` } : undefined,
+    };
+    const headerProp = {
+        colData: getVisibleSourceItem(data.colStore),
+        dimensionCol: colDimension,
+        type: data.colType,
+        groups: data.colStore.get('groups'),
+        groupingDepth: data.colStore.get('groupingDepth'),
+        resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
+        onHeaderresize: data.onHeaderresize,
+    };
+    return {
+        prop,
+        type: data.colType,
+        position: data.position,
+        headerProp,
+        viewportCol: data.viewports[data.colType].store,
+    };
+}
+class ViewportService {
+    constructor(config, contentHeight) {
+        var _a, _b;
+        this.config = config;
+        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
+        // ----------- Handle columns ----------- //
+        // Transform data from stores and apply it to different components
+        const columns = [];
+        let x = 0; // we increase x only if column present
+        columnTypes.forEach(val => {
+            const colStore = config.columnProvider.stores[val].store;
+            // only columns that have data show
+            if (!colStore.get('items').length) {
+                return;
+            }
+            const column = {
+                colType: val,
+                position: { x, y: 1 },
+                contentHeight,
+                // only central column has dynamic width
+                fixWidth: val !== 'rgCol',
+                viewports: config.viewportProvider.stores,
+                dimensions: config.dimensionProvider.stores,
+                rowStores: config.dataProvider.stores,
+                colStore,
+                onHeaderresize: e => this.onColumnResize(val, e, colStore),
+            };
+            if (val === 'rgCol') {
+                column.onResizeviewport = (e) => {
+                    var _a;
+                    if (config.disableVirtualY && e.detail.dimension === 'rgRow') {
+                        return;
+                    }
+                    else if (config.disableVirtualX && e.detail.dimension === 'rgCol') {
+                        return;
+                    }
+                    (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, {
+                        virtualSize: e.detail.size,
+                    });
+                };
+            }
+            const colData = gatherColumnData(column);
+            const columnSelectionStore = this.registerCol(colData.position.x, val);
+            // render per each column data collections vertically
+            const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
+                // register selection store for Segment
+                const segmentSelection = this.registerSegment(rgRow.position);
+                segmentSelection.setLastCell(rgRow.lastCell);
+                // register selection store for Row
+                const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
+                const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                        segmentSelection.setRangeArea(e.detail);
+                    }, onSettemprange: e => {
+                        segmentSelection.setTempArea(e.detail);
+                    }, onFocuscell: e => {
+                        // todo: multi focus
+                        segmentSelection.clearFocus();
+                        config.selectionStoreConnector.focus(segmentSelection, e.detail);
+                    } });
+                r.push(rowDef);
+                return r;
+            }, []);
+            columns.push(Object.assign(Object.assign({}, colData), { columnSelectionStore,
+                dataPorts }));
+            x++;
+        });
+        this.columns = columns;
+        // ----------- Handle columns end ----------- //
+        (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+    }
+    onColumnResize(type, { detail }, store) {
+        var _a;
+        (_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
+        const changedItems = reduce_1(detail || {}, (r, size, i) => {
+            const index = parseInt(i, 10);
+            const item = getSourceItem(store, index);
+            if (item) {
+                r[index] = Object.assign(Object.assign({}, item), { size });
+            }
+            return r;
+        }, {});
+        this.config.resize(changedItems);
+    }
+    /** register selection store for Segment */
+    registerSegment(position) {
+        return this.config.selectionStoreConnector.register(position);
+    }
+    /** register selection store for Row */
+    registerRow(y, type) {
+        return this.config.selectionStoreConnector.registerRow(y, type).store;
+    }
+    /** register selection store for Column */
+    registerCol(x, type) {
+        return this.config.selectionStoreConnector.registerColumn(x, type).store;
+    }
+    /** Collect Row data */
+    dataViewPort(data) {
+        const slots = {
+            rowPinStart: HEADER_SLOT,
+            rgRow: CONTENT_SLOT,
+            rowPinEnd: FOOTER_SLOT,
+        };
+        // y position for selection
+        let y = 0;
+        return rowTypes.reduce((r, type) => {
+            // filter out empty sources, we still need to return source to keep slot working
+            const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+            r.push(this.dataPartition(rgCol, type, slots[type], type !== 'rgRow'));
+            if (isPresent) {
+                y++;
+            }
+            return r;
+        }, []);
+    }
+    dataPartition(data, type, slot, fixed) {
+        return {
+            colData: data.colStore,
+            viewportCol: data.viewports[data.colType].store,
+            viewportRow: data.viewports[type].store,
+            lastCell: getLastCell(data, type),
+            slot,
+            type,
+            canDrag: !fixed,
+            position: data.position,
+            dataStore: data.rowStores[type].store,
+            dimensionCol: data.dimensions[data.colType].store,
+            dimensionRow: data.dimensions[type].store,
+            style: fixed
+                ? { height: `${data.dimensions[type].store.get('realSize')}px` }
+                : undefined,
+        };
+    }
+    scrollToCell(cell) {
+        for (let key in cell) {
+            const coordinate = cell[key];
+            this.config.scrollingService.proxyScroll({
+                dimension: key === 'x' ? 'rgCol' : 'rgRow',
+                coordinate,
+            });
+        }
+    }
+    /**
+     * Clear current grid focus
+     */
+    clearFocused() {
+        this.config.selectionStoreConnector.clearAll();
+    }
+    clearEdit() {
+        this.config.selectionStoreConnector.setEdit(false);
+    }
+    /**
+     * Collect focused element data
+     */
+    getFocused() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
+        return {
+            column,
+            model,
+            cell: focused.cell,
+            colType,
+            rowType,
+        };
+    }
+    getStoreCoordinateByType(colType, rowType) {
+        const stores = this.config.selectionStoreConnector.storesByType;
+        const storeCoordinate = {
+            x: stores[colType],
+            y: stores[rowType],
+        };
+        return storeCoordinate;
+    }
+    setFocus(colType, rowType, start, end) {
+        var _a;
+        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(this.getStoreCoordinateByType(colType, rowType), start, end);
+    }
+    getSelectedRange() {
+        return this.config.selectionStoreConnector.selectedRange;
+    }
+    setEdit(rowIndex, colIndex, colType, rowType) {
+        var _a;
+        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(this.getStoreCoordinateByType(colType, rowType), { x: colIndex, y: rowIndex });
+    }
+}
+
+class GridScrollingService {
+    constructor(setViewport) {
+        this.setViewport = setViewport;
+        this.elements = {};
+    }
+    async proxyScroll(e, key) {
+        var _a;
+        let newEvent;
+        let event = e;
+        for (let elKey in this.elements) {
+            // skip
+            if (e.dimension === 'rgCol' && elKey === 'headerRow') {
+                continue;
+                // pinned column only
+            }
+            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+                if (elKey === key || !e.delta) {
+                    continue;
+                }
+                for (let el of this.elements[elKey]) {
+                    if (el.changeScroll) {
+                        newEvent = el.changeScroll(e);
+                    }
+                }
+            }
+            else {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
+                }
+            }
+        }
+        if (newEvent) {
+            event = await newEvent;
+        }
+        this.setViewport(event);
+    }
+    /**
+     * Silent scroll update for mobile devices when we have negative scroll top
+     */
+    async scrollSilentService(e, key) {
+        var _a;
+        for (let elKey in this.elements) {
+            // skip same element update
+            if (elKey === key) {
+                continue;
+            }
+            if (columnTypes.includes(key) && (elKey === 'headerRow' || columnTypes.includes(elKey))) {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+                }
+                continue;
+            }
+        }
+    }
+    isPinnedColumn(key) {
+        return ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+    }
+    registerElements(els) {
+        this.elements = els;
+    }
+    /**
+     * Register new element for farther scroll support
+     * @param el - can be null if holder removed
+     * @param key - element key
+     */
+    registerElement(el, key) {
+        if (!this.elements[key]) {
+            this.elements[key] = [];
+        }
+        // new element added
+        if (el) {
+            this.elements[key].push(el);
+        }
+        else if (this.elements[key]) {
+            // element removed
+            delete this.elements[key];
+        }
+    }
+    unregister() {
+        delete this.elements;
+        this.elements = {};
+    }
+}
+
+/**
+ * Draw drag
+ */
+class OrdererService {
+    constructor() {
+        this.parentY = 0;
+    }
+    start(parent, { pos, text, event }) {
+        var _a;
+        const { top } = parent.getBoundingClientRect();
+        this.parentY = top;
+        if (this.text) {
+            this.text.innerText = text;
+        }
+        this.move(pos);
+        this.moveTip({ x: event.x, y: event.y });
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove('hidden');
+    }
+    end() {
+        var _a;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
+    }
+    move(pos) {
+        this.moveElement(pos.end - this.parentY);
+    }
+    moveTip({ x, y }) {
+        if (!this.draggable) {
+            return;
+        }
+        this.draggable.style.left = `${x}px`;
+        this.draggable.style.top = `${y}px`;
+    }
+    moveElement(y) {
+        if (!this.rgRow) {
+            return;
+        }
+        this.rgRow.style.transform = `translateY(${y}px)`;
+    }
+}
+const OrderRenderer = ({ ref }) => {
+    const service = new OrdererService();
+    ref(service);
+    return (h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) },
+        h("div", { class: "draggable", ref: el => (service.draggable = el) },
+            h("span", { class: "revo-alt-icon" }),
+            h("span", { ref: e => (service.text = e) })),
+        h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
+};
+
+class StretchColumn extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.providers = providers;
+        this.stretchedColumn = null;
+        // calculate scroll bar size for current user session
+        this.scrollSize = getScrollbarSize(document);
+        // subscribe to column changes
+        const beforecolumnapplied = ({ detail: { columns }, }) => this.applyStretch(columns);
+        this.addEventListener('beforecolumnapplied', beforecolumnapplied);
+    }
+    setScroll({ type, hasScroll }) {
+        var _a;
+        if (type === 'rgRow' &&
+            this.stretchedColumn &&
+            ((_a = this.stretchedColumn) === null || _a === void 0 ? void 0 : _a.initialSize) === this.stretchedColumn.size) {
+            if (hasScroll) {
+                this.stretchedColumn.size -= this.scrollSize;
+                this.apply();
+                this.dropChanges();
+            }
+        }
+    }
+    activateChanges() {
+        const setScroll = ({ detail }) => this.setScroll(detail);
+        this.addEventListener('scrollchange', setScroll);
+    }
+    dropChanges() {
+        this.stretchedColumn = null;
+        this.removeEventListener('scrollchange');
+    }
+    apply() {
+        if (!this.stretchedColumn) {
+            return;
+        }
+        const type = 'rgCol';
+        const sizes = this.providers.dimension.stores[type].store.get('sizes');
+        this.providers.dimension.setCustomSizes(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }), true);
+    }
+    /**
+     * Apply stretch changes
+     */
+    applyStretch(columns) {
+        // unsubscribe from all events
+        this.dropChanges();
+        // calculate grid size
+        let sizeDifference = this.revogrid.clientWidth - 1;
+        each(columns, (_, type) => {
+            const realSize = this.providers.dimension.stores[type].store.get('realSize');
+            sizeDifference -= realSize;
+        });
+        if (this.revogrid.rowHeaders) {
+            const itemsLength = this.providers.data.stores.rgRow.store.get('source').length;
+            const header = this.revogrid.rowHeaders;
+            const rowHeaderSize = calculateRowHeaderSize(itemsLength, typeof header === 'object' ? header : undefined);
+            if (rowHeaderSize) {
+                sizeDifference -= rowHeaderSize;
+            }
+        }
+        if (sizeDifference > 0) {
+            // currently plugin accepts last column only
+            const index = columns.rgCol.length - 1;
+            const last = columns.rgCol[index];
+            /**
+             * has column
+             * no auto size applied
+             * size for column shouldn't be defined
+             */
+            const colSize = (last === null || last === void 0 ? void 0 : last.size) || this.revogrid.colSize || 0;
+            const size = sizeDifference + colSize - 1;
+            if (last && !last.autoSize && colSize < size) {
+                this.stretchedColumn = {
+                    initialSize: size,
+                    index,
+                    size,
+                };
+                this.apply();
+                this.activateChanges();
+            }
+        }
+    }
+}
+/**
+ * Check plugin type is Stretch
+ */
+function isStretchPlugin(plugin) {
+    return !!plugin.applyStretch;
+}
+
+const rowDefinitionByType = (newVal = []) => {
+    return reduce_1(newVal, (r, v) => {
+        if (!r[v.type]) {
+            r[v.type] = {};
+        }
+        if (v.size) {
+            if (!r[v.type].sizes) {
+                r[v.type].sizes = {};
+            }
+            r[v.type].sizes[v.index] = v.size;
+        }
+        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 COLUMN_DRAG_CLASS = 'column-drag-start';
+class ColumnOrderHandler {
+    constructor() {
+        this.offset = 0;
+    }
+    renderAutoscroll(_, parent) {
+        if (!parent) {
+            return;
+        }
+        this.autoscrollEl = document.createElement('div');
+        this.autoscrollEl.classList.add('drag-auto-scroll-y');
+        parent.appendChild(this.autoscrollEl);
+    }
+    autoscroll(pos, dataContainerSize, direction = 'translateX') {
+        if (!this.autoscrollEl) {
+            return;
+        }
+        const helperOffset = 10;
+        // calculate current y position inside of the grid active holder
+        // 3 - size of element + border
+        const maxScroll = Math.min(pos + helperOffset, dataContainerSize - 3);
+        this.autoscrollEl.style.transform = `${direction}(${maxScroll}px)`;
+        this.autoscrollEl.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    start(e, { dataEl, gridRect, scrollEl, gridEl }, dir = 'left') {
+        gridEl.classList.add(COLUMN_DRAG_CLASS);
+        const scrollContainerRect = scrollEl.getBoundingClientRect();
+        if (scrollContainerRect) {
+            this.offset = scrollContainerRect[dir] - gridRect[dir];
+        }
+        this.renderAutoscroll(e, dataEl);
+    }
+    stop(gridEl) {
+        var _a;
+        gridEl.classList.remove(COLUMN_DRAG_CLASS);
+        if (this.element) {
+            this.element.hidden = true;
+        }
+        this.offset = 0;
+        (_a = this.autoscrollEl) === null || _a === void 0 ? void 0 : _a.remove();
+        this.autoscrollEl = undefined;
+    }
+    showHandler(pos, size, direction = 'translateX') {
+        if (!this.element) {
+            return;
+        }
+        // do not allow overcross top of the scrollable area, header excluded
+        if (this.offset) {
+            pos = Math.max(pos, this.offset);
+        }
+        // can not be bigger then grid end
+        pos = Math.min(pos, size);
+        this.element.style.transform = `${direction}(${pos}px)`;
+        this.element.hidden = false;
+    }
+    render() {
+        const el = this.element = document.createElement('div');
+        el.classList.add('drag-position-y');
+        el.hidden = true;
+        return el;
+    }
+}
+
+/**
+ * Plugin for column manual move
+ */
+const COLUMN_CLICK = ON_COLUMN_CLICK;
+const MOVE = 'columndragmousemove';
+const DRAG_END = 'columndragend';
+const BEFORE_DRAG_END = 'beforecolumndragend';
+// use this event subscription to drop D&D for particular columns
+const DRAG_START = 'columndragstart';
+class ColumnPlugin extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.moveFunc = debounce_1((e) => this.doMove(e), 5);
+        this.staticDragData = null;
+        this.dragData = null;
+        this.localSubscriptions = {};
+        this.orderUi = new ColumnOrderHandler();
+        revogrid.appendChild(this.orderUi.render());
+        revogrid.classList.add('column-draggable');
+        // Register events
+        this.localSubscriptions['mouseleave'] = {
+            target: document,
+            callback: (e) => this.onMouseOut(e),
+        };
+        this.localSubscriptions['mouseup'] = {
+            target: document,
+            callback: (e) => this.onMouseUp(e),
+        };
+        this.localSubscriptions['mousemove'] = {
+            target: document,
+            callback: (e) => this.move(e),
+        };
+        this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
+    }
+    dragStart({ event, data }) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        // check if allowed to drag particulat column
+        if (defaultPrevented) {
+            return;
+        }
+        this.clearOrder();
+        const { mouseleave, mouseup, mousemove } = this.localSubscriptions;
+        mouseleave.target.addEventListener('mouseleave', mouseleave.callback);
+        mouseup.target.addEventListener('mouseup', mouseup.callback);
+        const dataEl = event.target.closest('revogr-header');
+        const scrollEl = event.target.closest('revogr-viewport-scroll');
+        if (!dataEl || !scrollEl) {
+            return;
+        }
+        // no grouping drag and no row header column drag
+        if (isColGrouping(data) || data.providers.type === 'rowHeaders') {
+            return;
+        }
+        const cols = this.getDimension(data.pin || 'rgCol');
+        const gridRect = this.revogrid.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left));
+        this.staticDragData = {
+            startPos: event.x,
+            startItem,
+            data,
+            dataEl,
+            scrollEl,
+            gridEl: this.revogrid,
+            cols,
+        };
+        this.dragData = this.getData(this.staticDragData);
+        mousemove.target.addEventListener('mousemove', mousemove.callback);
+        this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
+    }
+    doMove(e) {
+        if (!this.staticDragData) {
+            return;
+        }
+        const dragData = (this.dragData = this.getData(this.staticDragData));
+        if (!dragData) {
+            return;
+        }
+        const start = this.staticDragData.startPos;
+        if (Math.abs(start - e.x) > 10) {
+            const x = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            const rgCol = getItemByPosition(this.staticDragData.cols, x);
+            this.orderUi.autoscroll(x, dragData.elRect.width);
+            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+        }
+    }
+    move(e) {
+        dispatch(this.revogrid, MOVE, e);
+        // then do move
+        this.moveFunc(e);
+    }
+    onMouseOut(_) {
+        this.clearOrder();
+    }
+    onMouseUp(e) {
+        // apply new positions
+        if (this.dragData) {
+            let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
+            if (relativePos < 0) {
+                relativePos = 0;
+            }
+            const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
+            const store = this.providers.column.stores[this.dragData.type].store;
+            const items = [...store.get('items')];
+            // prevent position change if needed
+            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[items[this.staticDragData.startItem.itemIndex]] }));
+            if (!stopDrag) {
+                // todo: if move item out of group remove item from group
+                const toMove = items.splice(this.staticDragData.startItem.itemIndex, 1);
+                items.splice(newPosition.itemIndex, 0, ...toMove);
+                store.set('items', items);
+            }
+            dispatch(this.revogrid, DRAG_END, this.dragData);
+        }
+        this.clearOrder();
+    }
+    clearLocalSubscriptions() {
+        each(this.localSubscriptions, ({ target, callback }, key) => target.removeEventListener(key, callback));
+    }
+    clearOrder() {
+        this.staticDragData = null;
+        this.dragData = null;
+        this.clearLocalSubscriptions();
+        this.orderUi.stop(this.revogrid);
+    }
+    /**
+     * Clearing subscription
+     */
+    clearSubscriptions() {
+        super.clearSubscriptions();
+        this.clearLocalSubscriptions();
+    }
+    getData({ gridEl, dataEl, data, }) {
+        const gridRect = gridEl.getBoundingClientRect();
+        const elRect = dataEl.getBoundingClientRect();
+        const scrollOffset = elRect.left - gridRect.left;
+        return {
+            elRect,
+            gridRect,
+            type: data.pin || 'rgCol',
+            scrollOffset,
+        };
+    }
+    getDimension(type) {
+        return this.providers.dimension.stores[type].getCurrentState();
+    }
+}
+function getLeftRelative(absoluteX, gridPos, offset) {
+    return absoluteX - gridPos - offset;
+}
+
+function isMobileDevice() {
+    return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
+}
+
+const revoGridStyleCss = ".revo-drag-icon{width:11px}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#6200ee;height:34px;line-height:34px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037;border:1px solid #00772d}.revo-button.red{background-color:#E0662E;border:1px solid #d55920}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.light{border:1px solid #cedefa;line-height:32px;background:none;color:#000;box-shadow:none}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px;box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .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%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;top:0;left:0;right:0;z-index:100;width:0;height:0;border-left:6px solid #0049cf;border-top:6px solid #0049cf;border-bottom:6px solid transparent;border-right:6px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;top:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:6px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-height:100%;display:flex;flex-direction:row;align-items:flex-start;max-width:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
+const RevoGridStyle0 = revoGridStyleCss;
+
+const RevoGridComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.contentsizechanged = createEvent(this, "contentsizechanged", 7);
+        this.beforeedit = createEvent(this, "beforeedit", 7);
+        this.beforerangeedit = createEvent(this, "beforerangeedit", 7);
+        this.afteredit = createEvent(this, "afteredit", 7);
+        this.beforeautofill = createEvent(this, "beforeautofill", 7);
+        this.beforeange = createEvent(this, "beforeange", 7);
+        this.afterfocus = createEvent(this, "afterfocus", 7);
+        this.roworderchanged = createEvent(this, "roworderchanged", 7);
+        this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
+        this.beforesorting = createEvent(this, "beforesorting", 7);
+        this.rowdragstart = createEvent(this, "rowdragstart", 7);
+        this.headerclick = createEvent(this, "headerclick", 7);
+        this.beforecellfocus = createEvent(this, "beforecellfocus", 7);
+        this.beforefocuslost = createEvent(this, "beforefocuslost", 7);
+        this.beforesourceset = createEvent(this, "beforesourceset", 7);
+        this.beforeanysource = createEvent(this, "beforeanysource", 7);
+        this.aftersourceset = createEvent(this, "aftersourceset", 7);
+        this.afteranysource = createEvent(this, "afteranysource", 7);
+        this.beforecolumnsset = createEvent(this, "beforecolumnsset", 7);
+        this.beforecolumnapplied = createEvent(this, "beforecolumnapplied", 7);
+        this.aftercolumnsset = createEvent(this, "aftercolumnsset", 7);
+        this.beforefilterapply = createEvent(this, "beforefilterapply", 7);
+        this.beforefiltertrimmed = createEvent(this, "beforefiltertrimmed", 7);
+        this.beforetrimmed = createEvent(this, "beforetrimmed", 7);
+        this.aftertrimmed = createEvent(this, "aftertrimmed", 7);
+        this.viewportscroll = createEvent(this, "viewportscroll", 7);
+        this.beforeexport = createEvent(this, "beforeexport", 7);
+        this.beforeeditstart = createEvent(this, "beforeeditstart", 7);
+        this.aftercolumnresize = createEvent(this, "aftercolumnresize", 7);
+        this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
+        this.filterconfigchanged = createEvent(this, "filterconfigchanged", 7);
+        this.rowheaderschanged = createEvent(this, "rowheaderschanged", 7);
+        this.beforegridrender = createEvent(this, "beforegridrender", 7);
+        this.aftergridinit = createEvent(this, "aftergridinit", 7);
+        // #endregion
+        // #region Listeners outside scope
+        this.clickTrackForFocusClear = null;
+        this.extraElements = [];
+        // UUID required to support multiple grids in one page and avoid collision
+        this.uuid = null;
+        this.viewport = null;
+        /**
+         * Plugins
+         * Define plugins collection
+         */
+        this.internalPlugins = [];
+        this.rowHeaders = undefined;
+        this.frameSize = 1;
+        this.rowSize = 0;
+        this.colSize = 100;
+        this.range = false;
+        this.readonly = false;
+        this.resize = false;
+        this.canFocus = true;
+        this.useClipboard = true;
+        this.columns = [];
+        this.source = [];
+        this.pinnedTopSource = [];
+        this.pinnedBottomSource = [];
+        this.rowDefinitions = [];
+        this.editors = {};
+        this.applyOnClose = false;
+        this.plugins = undefined;
+        this.columnTypes = {};
+        this.theme = 'default';
+        this.rowClass = '';
+        this.autoSizeColumn = false;
+        this.filter = false;
+        this.focusTemplate = undefined;
+        this.canMoveColumns = false;
+        this.trimmedRows = {};
+        this.exporting = false;
+        this.grouping = undefined;
+        this.stretch = true;
+        this.additionalData = {};
+        this.disableVirtualX = false;
+        this.disableVirtualY = false;
+        this.hideAttribution = false;
+        this.jobsBeforeRender = [];
+        this.registerVNode = [];
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Refreshes data viewport.
+     * Can be specific part as rgRow or pinned rgRow or 'all' by default.
+     */
+    async refresh(type = 'all') {
+        this.dataProvider.refresh(type);
+    }
+    /**
+     * Sets data at specified cell.
+     * Useful for performance optimization.
+     * No viewport update will be triggered.
+     */
+    async setDataAt(data) {
+        const dataElement = this.element.querySelector(`revogr-data[type="${data.rowType}"][col-type="${data.colType}"]`);
+        return dataElement === null || dataElement === void 0 ? void 0 : dataElement.updateCell({
+            row: data.row,
+            col: data.col,
+        });
+    }
+    /**
+     * Scrolls viewport to specified row by index.
+     */
+    async scrollToRow(coordinate = 0) {
+        const y = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgRow',
+        });
+        await this.scrollToCoordinate({ y });
+    }
+    /**
+     * Scrolls viewport to specified column by index.
+     */
+    async scrollToColumnIndex(coordinate = 0) {
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgCol',
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /**
+     * Scrolls viewport to specified column by prop
+     */
+    async scrollToColumnProp(prop, dimension = 'rgCol') {
+        const coordinate = this.columnProvider.getColumnIndexByProp(prop, dimension);
+        if (coordinate < 0) {
+            // already on the screen
+            return;
+        }
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension,
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /** Update columns */
+    async updateColumns(cols) {
+        this.columnProvider.updateColumns(cols);
+    }
+    /** Add trimmed by type */
+    async addTrimmed(trimmed, trimmedType = 'external', type = 'rgRow') {
+        const event = this.beforetrimmed.emit({
+            trimmed,
+            trimmedType,
+            type,
+        });
+        if (event.defaultPrevented) {
+            return event;
+        }
+        this.dataProvider.setTrimmed({ [trimmedType]: event.detail.trimmed }, type);
+        this.aftertrimmed.emit();
+        return event;
+    }
+    /**  Scrolls view port to coordinate */
+    async scrollToCoordinate(cell) {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToCell(cell);
+    }
+    /**  Open editor for cell. */
+    async setCellEdit(rgRow, prop, rowSource = 'rgRow') {
+        var _a;
+        const rgCol = ColumnDataProvider.getColumnByProp(this.columns, prop);
+        if (!rgCol) {
+            return;
+        }
+        await timeout();
+        const colGroup = rgCol.pin || 'rgCol';
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
+    }
+    /**  Set focus range. */
+    async setCellsFocus(cellStart = { x: 0, y: 0 }, cellEnd = { x: 0, y: 0 }, colType = 'rgCol', rowType = 'rgRow') {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setFocus(colType, rowType, cellStart, cellEnd);
+    }
+    /**  Get data from source */
+    async getSource(type = 'rgRow') {
+        return this.dataProvider.stores[type].store.get('source');
+    }
+    /**
+     * Get data from visible part of source
+     * Trimmed/filtered rows will be excluded
+     * @param type - type of source
+     */
+    async getVisibleSource(type = 'rgRow') {
+        return getVisibleSourceItem(this.dataProvider.stores[type].store);
+    }
+    /**
+     * Provides access to rows internal store observer
+     * Can be used for plugin support
+     * @param type - type of source
+     */
+    async getSourceStore(type = 'rgRow') {
+        return this.dataProvider.stores[type].store;
+    }
+    /**
+     * Provides access to column internal store observer
+     * Can be used for plugin support
+     * @param type - type of column
+     */
+    async getColumnStore(type = 'rgCol') {
+        return this.columnProvider.stores[type].store;
+    }
+    /**
+     * Update column sorting
+     * @param column - full column details to update
+     * @param index - virtual column index
+     * @param order - order to apply
+     */
+    async updateColumnSorting(column, index, order, additive) {
+        return this.columnProvider.updateColumnSorting(column, index, order, additive);
+    }
+    /**
+     * Clears column sorting
+     */
+    async clearSorting() {
+        this.columnProvider.clearSorting();
+    }
+    /**
+     * Receive all columns in data source
+     */
+    async getColumns() {
+        return this.columnProvider.getColumns();
+    }
+    /**
+     * Clear current grid focus. Grid has no longer focus on it.
+     */
+    async clearFocus() {
+        var _a;
+        const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        const event = this.beforefocuslost.emit(focused);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this.selectionStoreConnector.clearAll();
+    }
+    /**
+     * Get all active plugins instances
+     */
+    async getPlugins() {
+        return [...this.internalPlugins];
+    }
+    /**
+     * Get the currently focused cell.
+     */
+    async getFocused() {
+        var _a;
+        return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+    }
+    /**
+     * Get size of content
+     * Including all pinned data
+     */
+    async getContentSize() {
+        var _a;
+        return (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.getFullSize();
+    }
+    /**
+     * Get the currently selected Range.
+     */
+    async getSelectedRange() {
+        var _a;
+        return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange();
+    }
+    mousedownHandle(event) {
+        const screenX = getFromEvent(event, 'screenX');
+        const screenY = getFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        this.clickTrackForFocusClear = screenX + screenY;
+    }
+    mouseupHandle(event) {
+        const screenX = getFromEvent(event, 'screenX');
+        const screenY = getFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        if (event.defaultPrevented) {
+            return;
+        }
+        const target = event.target;
+        const pos = screenX + screenY;
+        // detect if mousemove then do nothing
+        if (Math.abs(this.clickTrackForFocusClear - pos) > 10) {
+            return;
+        }
+        // check if action finished inside of the document
+        // clear data which is outside of grid
+        // if event prevented or it is current table don't clear focus
+        if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
+            return;
+        }
+        this.clearFocus();
+    }
+    // #endregion
+    // #region Listeners
+    /** Drag events */
+    onRowDragStarted(e) {
+        var _a;
+        const dragStart = this.rowdragstart.emit(e.detail);
+        if (dragStart.defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.start(this.element, Object.assign(Object.assign({}, e.detail), dragStart.detail));
+    }
+    onRowDragEnd() {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
+    }
+    onRowDrag({ detail }) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
+    }
+    onRowMouseMove(e) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
+    }
+    async onCellEdit(e) {
+        const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
+        await timeout();
+        // apply data
+        if (!defaultPrevented) {
+            this.dataProvider.setCellData(detail);
+            // @feature: incrimental update for cells
+            // this.dataProvider.setCellData(detail, false);
+            // await this.setDataAt({
+            //   row: detail.rowIndex,
+            //   col: detail.colIndex,
+            //   rowType: detail.type,
+            //   colType: detail.colType,
+            // });
+            this.afteredit.emit(detail);
+        }
+    }
+    onRangeEdit(e) {
+        const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        this.dataProvider.setRangeData(detail.data, detail.type);
+        this.afteredit.emit(detail);
+    }
+    onRangeChanged(e) {
+        const beforeange = this.beforeange.emit(e.detail);
+        if (beforeange.defaultPrevented) {
+            e.preventDefault();
+        }
+        const beforeFill = this.beforeautofill.emit(beforeange.detail);
+        if (beforeFill.defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onRowDropped(e) {
+        // e.cancelBubble = true;
+        const { defaultPrevented } = this.roworderchanged.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onHeaderClick(e) {
+        const { defaultPrevented } = this.headerclick.emit(Object.assign(Object.assign({}, e.detail.column), { originalEvent: e.detail.originalEvent }));
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onCellFocus(e) {
+        const { defaultPrevented } = this.beforecellfocus.emit(e.detail);
+        if (!this.canFocus || defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    // #endregion
+    // #region Watchers
+    columnTypesChanged() {
+        // Column format change will trigger column structure update
+        this.columnChanged(this.columns);
+    }
+    columnChanged(newVal = []) {
+        const columnGather = ColumnDataProvider.getColumns(newVal, 0, this.columnTypes);
+        this.beforecolumnsset.emit(columnGather);
+        this.dimensionProvider.applyNewColumns(columnGather.columns, this.disableVirtualX);
+        this.beforecolumnapplied.emit(columnGather);
+        const columns = this.columnProvider.setColumns(columnGather);
+        this.aftercolumnsset.emit({
+            columns,
+            order: this.columnProvider.order,
+        });
+    }
+    disableVirtualXChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.columnChanged(this.columns);
+    }
+    rowSizeChanged(s) {
+        // clear existing data
+        this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
+        this.rowDefChanged(this.rowDefinitions, this.rowDefinitions);
+    }
+    themeChanged(t, _, __ = 'theme', init = false) {
+        this.themeService.register(t);
+        this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+        this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
+        // if theme change we need to reapply row size and reset viewport
+        if (!init) {
+            this.rowSizeChanged(this.themeService.rowSize);
+        }
+    }
+    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;
+        }
+        const beforesourceset = this.beforeanysource.emit({
+            type,
+            source: newVal,
+        });
+        const newSource = [...beforesourceset.detail.source];
+        this.dataProvider.setData(newSource, type, this.disableVirtualY);
+        /** applied for source only for cross compatability between plugins */
+        if (watchName === 'source') {
+            this.aftersourceset.emit({
+                type,
+                source: newVal,
+            });
+        }
+        this.afteranysource.emit({
+            type,
+            source: newVal,
+        });
+    }
+    disableVirtualYChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.dataSourceChanged(this.source, this.source, 'source');
+    }
+    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) {
+            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;
+        }
+        each(newRows, (r, k) => this.dimensionProvider.setCustomSizes(k, r.sizes || {}));
+    }
+    trimmedRowsChanged(newVal = {}) {
+        this.addTrimmed(newVal);
+    }
+    /**
+     * Grouping
+     */
+    groupingChanged(newVal = {}) {
+        let grPlugin;
+        for (let p of this.internalPlugins) {
+            const isGrouping = p;
+            if (isGrouping.setGrouping) {
+                grPlugin = isGrouping;
+                break;
+            }
+        }
+        if (!grPlugin) {
+            return;
+        }
+        grPlugin.setGrouping(newVal || {});
+    }
+    /**
+     * Stretch Plugin Apply
+     */
+    applyStretch(isStretch) {
+        if (isStretch === 'false') {
+            isStretch = false;
+        }
+        let stretch = this.internalPlugins.filter(p => isStretchPlugin(p))[0];
+        if ((typeof isStretch === 'boolean' && isStretch) || isStretch === 'true') {
+            if (!stretch) {
+                const pluginData = {
+                    data: this.dataProvider,
+                    column: this.columnProvider,
+                    dimension: this.dimensionProvider,
+                    viewport: this.viewportProvider,
+                    selection: this.selectionStoreConnector,
+                };
+                this.internalPlugins.push(new StretchColumn(this.element, pluginData));
+            }
+            else if (isStretchPlugin(stretch)) {
+                stretch.applyStretch(this.columnProvider.getRawColumns());
+            }
+        }
+        else if (stretch) {
+            const index = this.internalPlugins.indexOf(stretch);
+            this.internalPlugins.splice(index, 1);
+        }
+    }
+    applyFilter(cfg) {
+        this.filterconfigchanged.emit(cfg);
+    }
+    rowHeadersChange(rowHeaders) {
+        this.rowheaderschanged.emit(rowHeaders);
+    }
+    /**
+     * Register external VNodes
+     */
+    registerOutsideVNodes(elements = []) {
+        this.extraElements = [...this.extraElements, ...elements];
+    }
+    // #endregion
+    componentWillRender() {
+        const event = this.beforegridrender.emit();
+        if (event.defaultPrevented) {
+            return false;
+        }
+        return Promise.all(this.jobsBeforeRender);
+    }
+    connectedCallback() {
+        // #region Setup Providers
+        this.viewportProvider = new ViewportProvider();
+        this.themeService = new ThemeService({
+            rowSize: this.rowSize,
+        });
+        this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
+            realSizeChanged: (k) => this.contentsizechanged.emit(k),
+        });
+        this.columnProvider = new ColumnDataProvider();
+        this.selectionStoreConnector = new SelectionStoreConnector();
+        this.dataProvider = new DataProvider(this.dimensionProvider);
+        // #endregion
+        // generate uuid for this grid
+        this.uuid = `${new Date().getTime()}-rvgrid`;
+        this.registerOutsideVNodes(this.registerVNode);
+        // #region Plugins
+        // pass data provider to plugins
+        const pluginData = {
+            data: this.dataProvider,
+            column: this.columnProvider,
+            dimension: this.dimensionProvider,
+            viewport: this.viewportProvider,
+            selection: this.selectionStoreConnector,
+        };
+        // register auto size plugin
+        if (this.autoSizeColumn) {
+            this.internalPlugins.push(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
+                ? this.autoSizeColumn
+                : undefined));
+        }
+        // register filter plugin
+        if (this.filter) {
+            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, this.uuid, typeof this.filter === 'object' ? this.filter : undefined));
+        }
+        // register export plugin
+        if (this.exporting) {
+            this.internalPlugins.push(new ExportFilePlugin(this.element, pluginData));
+        }
+        // register sorting plugin
+        this.internalPlugins.push(new SortingPlugin(this.element, pluginData));
+        // register grouping plugin
+        this.internalPlugins.push(new GroupingRowPlugin(this.element, pluginData));
+        if (this.canMoveColumns) {
+            this.internalPlugins.push(new ColumnPlugin(this.element, pluginData));
+        }
+        // register user plugins
+        if (this.plugins) {
+            this.plugins.forEach(p => {
+                this.internalPlugins.push(new p(this.element, pluginData));
+            });
+        }
+        // #endregion
+        // set data
+        this.applyStretch(this.stretch);
+        this.themeChanged(this.theme, undefined, undefined, true);
+        this.columnChanged(this.columns);
+        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);
+        // init scrolling service
+        this.scrollingService = new GridScrollingService((e) => {
+            this.dimensionProvider.setViewPortCoordinate({
+                coordinate: e.coordinate,
+                type: e.dimension,
+            });
+            this.viewportscroll.emit(e);
+        });
+        this.aftergridinit.emit();
+    }
+    disconnectedCallback() {
+        // destroy plugins on element disconnect
+        this.internalPlugins.forEach(p => p.destroy());
+        this.internalPlugins = [];
+    }
+    render() {
+        const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
+        // init viewport service helpers
+        this.viewport = new ViewportService({
+            columnProvider: this.columnProvider,
+            dataProvider: this.dataProvider,
+            dimensionProvider: this.dimensionProvider,
+            viewportProvider: this.viewportProvider,
+            scrollingService: this.scrollingService,
+            orderService: this.orderService,
+            selectionStoreConnector: this.selectionStoreConnector,
+            disableVirtualX: this.disableVirtualX,
+            disableVirtualY: this.disableVirtualY,
+            resize: c => this.aftercolumnresize.emit(c),
+        }, contentHeight);
+        // #region ViewportSections
+        /**
+         * The code renders a viewport divided into sections.
+         * It starts by rendering the pinned start, data, and pinned end sections.
+         * Within each section, it renders columns along with their headers, pinned top, center data, and pinned bottom.
+         * The code iterates over the columns and their data to generate the view port's HTML structure.
+         */
+        const viewportSections = [];
+        // Row headers setting
+        if (this.rowHeaders && this.viewport.columns.length) {
+            const anyView = this.viewport.columns[0];
+            viewportSections.push(h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, jobsBeforeRender: this.jobsBeforeRender, rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollview: ({ detail: e }) => this.scrollingService.proxyScroll(e, 'headerRow'), onRef: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
+        }
+        // Viewport section render
+        const isMobile = isMobileDevice();
+        const viewPortHtml = [];
+        // Render viewports column(horizontal sections)
+        for (let view of this.viewport.columns) {
+            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 = [
+                h("revogr-header", Object.assign({ key: '419c5eb752e8d8b9f84ad39db7192bf452ec26fd' }, headerProperties, { slot: HEADER_SLOT })),
+            ];
+            // Render viewport data (vertical sections)
+            view.dataPorts.forEach((data) => {
+                const key = `${data.type}_${view.type}`;
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => this.selectionStoreConnector.selectAll(), editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onCanceledit: () => this.selectionStoreConnector.setEdit(false), onSetedit: ({ detail }) => {
+                        const event = this.beforeeditstart.emit(detail);
+                        if (!event.defaultPrevented) {
+                            this.selectionStoreConnector.setEdit(detail.val);
+                        }
+                    } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
+                dataViews.push(dataView);
+            });
+            // Add viewport scroll in the end
+            viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => this.scrollingService.registerElement(el, `${view.prop.key}`), onScrollviewport: e => this.scrollingService.proxyScroll(e.detail, `${view.prop.key}`), onScrollviewportsilent: e => this.scrollingService.scrollSilentService(e.detail, `${view.prop.key}`) }), dataViews));
+        }
+        viewportSections.push(viewPortHtml);
+        // #endregion
+        const typeRow = 'rgRow';
+        const typeCol = 'rgCol';
+        const viewports = this.viewportProvider.stores;
+        const dimensions = this.dimensionProvider.stores;
+        return (h(Host, { key: '71caea92f25bd3afdf30783c0bfc469a4a20beda', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : h("revogr-attribution", { class: "attribution" }), h("div", { key: '6ea98110dd76dfcadfac32705b84706b0b2b81b8', class: "main-viewport", onClick: (e) => {
+                if (e.currentTarget === e.target) {
+                    this.viewport.clearEdit();
+                }
+            } }, h("div", { key: '4c633ee30609833648c6e2362bae615e854b93ff', class: "viewports" }, h("slot", { key: '93000f290acfa202d8074b5794a5a6d4e040d624', name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { key: '554d3026c130dedf73778e4e21cb861befd4b981', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { key: '79e6383066cc86910f783b03f7f97ec69ad736b7', ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { key: '906847181f0b5d2a9466be95104911ad08be185f', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "columnTypes": ["columnTypesChanged"],
+        "columns": ["columnChanged"],
+        "disableVirtualX": ["disableVirtualXChanged"],
+        "rowSize": ["rowSizeChanged"],
+        "theme": ["themeChanged"],
+        "source": ["dataSourceChanged"],
+        "pinnedBottomSource": ["dataSourceChanged"],
+        "pinnedTopSource": ["dataSourceChanged"],
+        "disableVirtualY": ["disableVirtualYChanged"],
+        "rowDefinitions": ["rowDefChanged"],
+        "trimmedRows": ["trimmedRowsChanged"],
+        "grouping": ["groupingChanged"],
+        "stretch": ["applyStretch"],
+        "filter": ["applyFilter"],
+        "rowHeaders": ["rowHeadersChange"],
+        "registerVNode": ["registerOutsideVNodes"]
+    }; }
+};
+RevoGridComponent.style = RevoGridStyle0;
+
+export { RevoGridComponent as revo_grid };
+
+//# sourceMappingURL=revo-grid.entry.js.map