@revolist/revogrid 4.9.10 → 4.9.12

package/dist/cjs/column.drag.plugin-e636b5af.js

@@ -0,0 +1,1686 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+'use strict';
+
+const index = require('./index-28b6fdfb.js');
+const rowHeaderUtils = require('./row-header-utils-22ffee54.js');
+const debounce = require('./debounce-cb5f4e35.js');
+const index$1 = require('./index-10d10c55.js');
+const column_service = require('./column.service-15c8352d.js');
+const filter_button = require('./filter.button-afb16244.js');
+const headerCellRenderer = require('./header-cell-renderer-375a879f.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 = index.createStore(initialState());
+        this.store.use(trimmedPlugin(this));
+        this.store.use(realSizePlugin(this));
+    }
+    getCurrentState() {
+        const state = initialState();
+        const keys = Object.keys(state);
+        return index.reduce_1(keys, (r, k) => {
+            const data = this.store.get(k);
+            r[k] = data;
+            return r;
+        }, state);
+    }
+    dispose() {
+        index.setStore(this.store, initialState());
+    }
+    setStore(data) {
+        index.setStore(this.store, data);
+    }
+    drop() {
+        index.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 = index.calculateDimensionData(this.store.get('originItemSize'), sizes);
+        index.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 = index$1.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 index.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 (index.isArray_1(resultItem) && index.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
+        index.each(autoSize, (_v, type) => {
+            const sizes = {};
+            index.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 } };
+        }
+        index.each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            index.each(columns, rgCol => {
+                var _a;
+                // calculate size
+                const size = index.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)) {
+            index.each(e.data, r => index.each(r, (_v, p) => (props[p] = true)));
+        }
+        else {
+            props[e.prop] = true;
+        }
+        index.each(this.autoSizeColumns, (columns, type) => {
+            const sizes = {};
+            index.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$1, 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$1];
+        if (!rgCol) {
+            return 0;
+        }
+        return index.reduce_1(this.providers.data.stores, (r, s) => {
+            const perStore = index.reduce_1(s.store.get('items'), (prev, _row, i) => {
+                const item = index.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 = index.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;
+        index.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 = rowHeaderUtils.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 = index.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 = index.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 = index._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 (column_service.isGrouping(rgRow)) {
+                result += this.parseCell(column_service.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 index.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_button.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,
+            index$1.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 = index.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 (!filter_button.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 = headerCellRenderer.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.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 } = headerCellRenderer.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 = index.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 = index.getItemByPosition(this.staticDragData.cols, x);
+            this.orderUi.autoscroll(x, dragData.elRect.width);
+            this.orderUi.showHandler(rgCol.end + dragData.scrollOffset, dragData.gridRect.width);
+        }
+    }
+    move(e) {
+        headerCellRenderer.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 = index.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 } = headerCellRenderer.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);
+            }
+            headerCellRenderer.dispatch(this.revogrid, DRAG_END, this.dragData);
+        }
+        this.clearOrder();
+    }
+    clearLocalSubscriptions() {
+        index.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;
+}
+
+exports.AutoSizeColumnPlugin = AutoSizeColumnPlugin;
+exports.BasePlugin = BasePlugin;
+exports.ColumnPlugin = ColumnPlugin;
+exports.DimensionStore = DimensionStore;
+exports.ExportFilePlugin = ExportFilePlugin;
+exports.FILTER_CONFIG_CHANGED_EVENT = FILTER_CONFIG_CHANGED_EVENT;
+exports.FILTER_TRIMMED_TYPE = FILTER_TRIMMED_TYPE;
+exports.FilterPlugin = FilterPlugin;
+exports.StretchColumn = StretchColumn;
+exports.columnTypes = columnTypes;
+exports.gatherGroup = gatherGroup;
+exports.getColumnByProp = getColumnByProp;
+exports.getColumnSizes = getColumnSizes;
+exports.getColumnType = getColumnType;
+exports.getColumns = getColumns;
+exports.getLeftRelative = getLeftRelative;
+exports.isColGrouping = isColGrouping;
+exports.isRowType = isRowType;
+exports.isStretchPlugin = isStretchPlugin;
+exports.rowTypes = rowTypes;
+
+//# sourceMappingURL=column.drag.plugin-e636b5af.js.map