@revolist/revogrid 4.9.9 → 4.9.11

package/dist/esm/column.drag.plugin-30dc4e24.js

@@ -0,0 +1,1665 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { V as createStore, W as reduce_1, v as setStore, h as calculateDimensionData, X as isArray_1, Y as each, b as getSourceItem, n as getScrollbarSize, Z as toInteger_1, _ as _isIterateeCall, q as timeout, i as getItemByPosition } from './index-74b9801b.js';
+import { f as calculateRowHeaderSize } from './row-header-utils-c7e3e2d5.js';
+import { d as debounce_1 } from './debounce-e8e9464a.js';
+import { h } from './index-a61f225b.js';
+import { b as isGrouping, d as getGroupingName } from './column.service-414e9cba.js';
+import { F as FILTER_PROP, i as isFilterBtn } from './filter.button-37373672.js';
+import { d as dispatch, O as ON_COLUMN_CLICK } from './header-cell-renderer-ca570fcf.js';
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
+const trimmedPlugin = (store) => {
+    let trimmedSize = {};
+    const setTrimmed = (sizes, trimmed) => {
+        const newSize = Object.assign({}, sizes);
+        trimmedSize = {};
+        for (const [index, v] of Object.entries(trimmed)) {
+            const i = index;
+            if (v && newSize[i]) {
+                trimmedSize[i] = newSize[i];
+                delete newSize[i];
+            }
+        }
+        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);
+    }
+}
+
+const rowTypes = ['rowPinStart', 'rgRow', 'rowPinEnd'];
+const columnTypes = [
+    'colPinStart',
+    'rgCol',
+    'colPinEnd',
+];
+function isRowType(type) {
+    return rowTypes.indexOf(type) > -1;
+}
+
+/**
+ * Base layer for plugins
+ * Provide minimal starting core for plugins to work
+ * Extend this class to create plugin
+ */
+class BasePlugin {
+    constructor(revogrid, providers) {
+        this.revogrid = revogrid;
+        this.providers = providers;
+        this.h = h;
+        this.subscriptions = {};
+    }
+    /**
+     *
+     * @param eventName - event name to subscribe to in revo-grid component (e.g. 'beforeheaderclick')
+     * @param callback - callback function for event
+     */
+    addEventListener(eventName, callback) {
+        this.revogrid.addEventListener(eventName, callback);
+        this.subscriptions[eventName] = callback;
+    }
+    /**
+     * Subscribe to property change in revo-grid component
+     * You can return false in callback to prevent default value set
+     *
+     * @param prop - property name
+     * @param callback - callback function
+     * @param immediate - trigger callback immediately with current value
+     */
+    watch(prop, callback, { immediate } = { immediate: false }) {
+        const nativeValueDesc = Object.getOwnPropertyDescriptor(this.revogrid, prop) ||
+            Object.getOwnPropertyDescriptor(this.revogrid.constructor.prototype, prop);
+        // Overwrite property descriptor for this instance
+        Object.defineProperty(this.revogrid, prop, {
+            set(val) {
+                var _a;
+                const keepDefault = callback(val);
+                if (keepDefault === false) {
+                    return;
+                }
+                // Continue with native behavior
+                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.set) === null || _a === void 0 ? void 0 : _a.call(this, val);
+            },
+            get() {
+                var _a;
+                // Continue with native behavior
+                return (_a = nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.get) === null || _a === void 0 ? void 0 : _a.call(this);
+            },
+        });
+        if (immediate) {
+            callback(nativeValueDesc === null || nativeValueDesc === void 0 ? void 0 : nativeValueDesc.value);
+        }
+    }
+    /**
+     * Remove event listener
+     * @param eventName
+     */
+    removeEventListener(eventName) {
+        this.revogrid.removeEventListener(eventName, this.subscriptions[eventName]);
+        delete this.subscriptions[eventName];
+    }
+    /**
+     * Emit event from revo-grid component
+     * Event can be cancelled by calling event.preventDefault() in callback
+     */
+    emit(eventName, detail) {
+        const event = new CustomEvent(eventName, { detail, cancelable: true });
+        this.revogrid.dispatchEvent(event);
+        return event;
+    }
+    /**
+     * Clear all subscriptions
+     */
+    clearSubscriptions() {
+        for (let type in this.subscriptions) {
+            this.removeEventListener(type);
+        }
+    }
+    /**
+     * Destroy plugin and clear all subscriptions
+     */
+    destroy() {
+        this.clearSubscriptions();
+    }
+}
+
+function getColumnType(rgCol) {
+    if (rgCol.pin) {
+        return rgCol.pin;
+    }
+    return 'rgCol';
+}
+function getColumnSizes(cols) {
+    const res = {};
+    for (const [i, c] of cols.entries()) {
+        if (c.size) {
+            res[i] = c.size;
+        }
+    }
+    return res;
+}
+/**
+ * Check if column is grouping column
+ */
+function isColGrouping(colData) {
+    return !!colData.children;
+}
+/**
+ * This function is used to create a collection of columns.
+ */
+function getColumns(columns, level = 0, types) {
+    const collection = {
+        // columns as they are in stores per type
+        columns: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // columns indexed by prop for quick access
+        columnByProp: {},
+        // column grouping
+        columnGrouping: {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        },
+        // max depth level for column grouping
+        maxLevel: level,
+        // sorting
+        sort: {},
+    };
+    return reduce_1(columns, (res, colData) => {
+        // Grouped column
+        if (isColGrouping(colData)) {
+            return gatherGroup(res, colData, getColumns(colData.children, level + 1, types), level);
+        }
+        // Regular column
+        const regularColumn = Object.assign(Object.assign({}, (colData.columnType && types && types[colData.columnType])), colData);
+        // Regular column, no Pin
+        if (!regularColumn.pin) {
+            res.columns.rgCol.push(regularColumn);
+            // Pin
+        }
+        else {
+            res.columns[regularColumn.pin].push(regularColumn);
+        }
+        if (regularColumn.order) {
+            res.sort[regularColumn.prop] = regularColumn;
+        }
+        // it's possible that some columns have same prop, but better to avoid it
+        if (!res.columnByProp[regularColumn.prop]) {
+            res.columnByProp[regularColumn.prop] = [];
+        }
+        res.columnByProp[regularColumn.prop].push(regularColumn);
+        // trigger setup hook if present
+        regularColumn.beforeSetup && regularColumn.beforeSetup(regularColumn);
+        return res;
+    }, collection);
+}
+function gatherGroup(res, colData, collection, level = 0) {
+    // group template
+    const group = Object.assign(Object.assign({}, colData), { level, ids: [] });
+    // check columns for update
+    for (let k in collection.columns) {
+        const key = k;
+        const resultItem = res.columns[key];
+        const collectionItem = collection.columns[key];
+        // if column data
+        if (isArray_1(resultItem) && isArray_1(collectionItem)) {
+            // fill columns
+            resultItem.push(...collectionItem);
+            // fill grouping
+            if (collectionItem.length) {
+                res.columnGrouping[key].push(Object.assign(Object.assign({}, group), { ids: collectionItem.map(item => item.prop) }));
+            }
+        }
+    }
+    // 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;
+}
+function findColumn(columns, prop) {
+    for (const c of columns) {
+        if (isColGrouping(c)) {
+            const found = findColumn(c.children, prop);
+            if (found) {
+                return found;
+            }
+        }
+        else if (c.prop === prop) {
+            return c;
+        }
+    }
+    return undefined;
+}
+function getColumnByProp(columns, prop) {
+    return findColumn(columns, prop);
+}
+
+/**
+ * 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 = 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 => {
+                var _a;
+                // 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 && ((_a = rgCol.size) !== null && _a !== void 0 ? _a : 0) < 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) {
+        var _a, _b;
+        const rgCol = (_b = (_a = this.autoSizeColumns) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b[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 === null || item === void 0 ? void 0 : 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() {
+        var _a;
+        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] = (_a = styleForFontTest[s]) !== null && _a !== void 0 ? _a : '';
+        }
+        el.classList.add('revo-test-container');
+        return el;
+    }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.precsizeCalculationArea) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+}
+
+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;
+}
+
+/**
+ * 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);
+        // url
+        const URL = window.URL || window.webkitURL;
+        const a = document.createElement('a');
+        const { filename, fileKind } = formatter.options;
+        const name = `${filename}.${fileKind}`;
+        const blob = await this.getBlob(formatter);
+        const url = blob ? 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');
+        }
+    }
+}
+
+const eq = (value, extra) => {
+    if (typeof value === 'undefined' || (value === null && !extra)) {
+        return true;
+    }
+    if (typeof value !== 'string') {
+        value = JSON.stringify(value);
+    }
+    const filterVal = extra === null || extra === void 0 ? void 0 : extra.toString().toLocaleLowerCase();
+    if ((filterVal === null || filterVal === void 0 ? void 0 : 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' && typeof extra !== 'undefined' && extra !== null) {
+        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' && typeof extra !== 'undefined' && extra !== null) {
+        conditionValue = parseFloat(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, 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", { 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
+         */
+        const cfgInlcude = config.include;
+        if (cfgInlcude) {
+            const filters = {};
+            for (let t in this.possibleFilters) {
+                // validate filters, if appropriate function present
+                const newTypes = this.possibleFilters[t].filter(f => cfgInlcude.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, _b, _c;
+        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 ((_b = this.pop) === null || _b === void 0 ? void 0 : _b.getChanges());
+        if (changes && (changes === null || changes === void 0 ? void 0 : changes.prop) === e.detail.prop) {
+            (_c = this.pop) === null || _c === void 0 ? void 0 : _c.show();
+            return;
+        }
+        if (!this.pop) {
+            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, autoCorrect: true, 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;
+    }
+}
+
+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 && this.staticDragData) {
+            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;
+}
+
+export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnPlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, StretchColumn as S, isStretchPlugin as a, FILTER_CONFIG_CHANGED_EVENT as b, columnTypes as c, FilterPlugin as d, getColumnType as e, getColumnSizes as f, getLeftRelative as g, isColGrouping as h, isRowType as i, getColumns as j, gatherGroup as k, getColumnByProp as l, rowTypes as r };
+
+//# sourceMappingURL=column.drag.plugin-30dc4e24.js.map