balala-revogrid 1.0.0

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

@@ -0,0 +1,3215 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+'use strict';
+
+var index = require('./index-BF1c1pO3.js');
+var headerCellRenderer = require('./header-cell-renderer-D-RjAVfe.js');
+var dimension_helpers = require('./dimension.helpers-DA9-xqPT.js');
+var debounce = require('./debounce-CcpHiH2p.js');
+var viewport_store = require('./viewport.store-BTbPlyF-.js');
+var grouping_row_expand_service = require('./tree-data.plugin-BRjwZtxI.js');
+var viewport_helpers = require('./viewport.helpers-BAovztDd.js');
+var events = require('./events-DeLDyZlb.js');
+require('./filter.button-DSsWNs23.js');
+
+class ThemeCompact {
+    constructor() {
+        this.defaultRowSize = 32;
+    }
+}
+
+class ThemeDefault {
+    constructor() {
+        this.defaultRowSize = 27;
+    }
+}
+
+class ThemeMaterial {
+    constructor() {
+        this.defaultRowSize = 42;
+    }
+}
+
+const DEFAULT_THEME = 'default';
+const allowedThemes = [
+    DEFAULT_THEME,
+    'material',
+    'compact',
+    'darkMaterial',
+    'darkCompact',
+];
+class ThemeService {
+    get theme() {
+        return this.currentTheme;
+    }
+    get rowSize() {
+        return this.customRowSize || this.currentTheme.defaultRowSize;
+    }
+    set rowSize(size) {
+        this.customRowSize = size;
+    }
+    constructor(cfg) {
+        this.customRowSize = 0;
+        this.customRowSize = cfg.rowSize;
+        this.register('default');
+    }
+    register(theme) {
+        const parsedTheme = getTheme(theme);
+        switch (parsedTheme) {
+            case 'material':
+            case 'darkMaterial':
+                this.currentTheme = new ThemeMaterial();
+                break;
+            case 'compact':
+            case 'darkCompact':
+                this.currentTheme = new ThemeCompact();
+                break;
+            default:
+                this.currentTheme = new ThemeDefault();
+                break;
+        }
+    }
+}
+function getTheme(theme) {
+    if (theme && allowedThemes.indexOf(theme) > -1) {
+        return theme;
+    }
+    return DEFAULT_THEME;
+}
+
+class ColumnDataProvider {
+    get stores() {
+        return this.dataSources;
+    }
+    constructor() {
+        this.collection = null;
+        this.dataSources = headerCellRenderer.columnTypes.reduce((sources, k) => {
+            sources[k] = new dimension_helpers.DataStore(k);
+            return sources;
+        }, {});
+    }
+    column(c, type = 'rgCol') {
+        return this.getColumn(c, type);
+    }
+    getColumn(virtualIndex, type) {
+        return dimension_helpers.getSourceItem(this.dataSources[type].store, virtualIndex);
+    }
+    getRawColumns() {
+        return headerCellRenderer.reduce(this.dataSources, (result, item, type) => {
+            result[type] = item.store.get('source');
+            return result;
+        }, {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        });
+    }
+    getColumns(type = 'all') {
+        const columnsByType = this.getRawColumns();
+        if (type !== 'all') {
+            return columnsByType[type];
+        }
+        return headerCellRenderer.columnTypes.reduce((r, t) => [...r, ...columnsByType[t]], []);
+    }
+    getColumnIndexByProp(prop, type) {
+        return dimension_helpers.getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
+    }
+    getColumnByProp(prop) {
+        var _a;
+        return (_a = this.collection) === null || _a === void 0 ? void 0 : _a.columnByProp[prop];
+    }
+    refreshByType(type) {
+        this.dataSources[type].refresh();
+    }
+    /**
+     * Main method to set columns
+     */
+    setColumns(data, version) {
+        headerCellRenderer.columnTypes.forEach(k => {
+            // set columns data
+            this.dataSources[k].updateData(data.columns[k], {
+                // max depth level
+                depth: data.maxLevel,
+                // groups
+                groups: data.columnGrouping[k].reduce((res, g) => {
+                    if (!res[g.level]) {
+                        res[g.level] = [];
+                    }
+                    res[g.level].push(g);
+                    return res;
+                }, {}),
+            }, false, { preserveItems: true });
+            if (version !== undefined) {
+                this.dataSources[k].setData({ version });
+            }
+        });
+        this.collection = data;
+        return data;
+    }
+    /**
+     * Used in plugins
+     * Modify columns in store
+     */
+    updateColumns(updatedColumns) {
+        // collect column by type and propert
+        const columnByKey = updatedColumns.reduce((res, c) => {
+            const type = headerCellRenderer.getColumnType(c);
+            if (!res[type]) {
+                res[type] = {};
+            }
+            res[type][c.prop] = c;
+            return res;
+        }, {});
+        // find indexes in source
+        const colByIndex = {};
+        for (const t in columnByKey) {
+            if (!columnByKey.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            const colsToUpdate = columnByKey[type];
+            const sourceItems = this.dataSources[type].store.get('source');
+            colByIndex[type] = {};
+            for (let i = 0; i < sourceItems.length; i++) {
+                const column = sourceItems[i];
+                const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[column.prop];
+                // update column if exists in source
+                if (colToUpdateIfExists) {
+                    colByIndex[type][i] = colToUpdateIfExists;
+                }
+            }
+        }
+        for (const t in colByIndex) {
+            if (!colByIndex.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            dimension_helpers.setSourceByPhysicalIndex(this.dataSources[type].store, colByIndex[type] || {});
+        }
+    }
+    updateColumn(column, index) {
+        const type = headerCellRenderer.getColumnType(column);
+        dimension_helpers.setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
+    }
+}
+
+/**
+ * Data source provider
+ *
+ * @dependsOn DimensionProvider
+ */
+class DataProvider {
+    constructor(dimensionProvider) {
+        this.dimensionProvider = dimensionProvider;
+        this.stores = headerCellRenderer.reduce(headerCellRenderer.rowTypes, (sources, k) => {
+            sources[k] = new dimension_helpers.DataStore(k);
+            return sources;
+        }, {});
+    }
+    setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
+        // set rgRow data
+        this.stores[type].updateData([...data], grouping, silent);
+        // for pinned row no need virtual data
+        const noVirtual = type !== 'rgRow' || disableVirtualRows;
+        this.dimensionProvider.setData(data.length, type, noVirtual);
+        return data;
+    }
+    getModel(virtualIndex, type = 'rgRow') {
+        const store = this.stores[type].store;
+        return dimension_helpers.getSourceItem(store, virtualIndex);
+    }
+    changeOrder({ rowType = 'rgRow', from, to }) {
+        const storeService = this.stores[rowType];
+        // take currently visible row indexes
+        const newItemsOrder = [...storeService.store.get('proxyItems')];
+        const prevItems = storeService.store.get('items');
+        // take out
+        const toMove = newItemsOrder.splice(newItemsOrder.indexOf(prevItems[from]), // get index in proxy
+        1);
+        // insert before
+        newItemsOrder.splice(newItemsOrder.indexOf(prevItems[to]), // get index in proxy
+        0, ...toMove);
+        storeService.setData({
+            proxyItems: newItemsOrder,
+        });
+        // take currently visible row indexes
+        const newItems = storeService.store.get('items');
+        this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, newItems, prevItems);
+    }
+    setCellData({ type, rowIndex, prop, val }, mutate = true) {
+        const model = this.getModel(rowIndex, type);
+        model[prop] = val;
+        this.stores[type].setSourceData({ [rowIndex]: model }, mutate);
+    }
+    setRangeData(data, type) {
+        const items = {};
+        for (let rowIndex in data) {
+            const oldModel = (items[rowIndex] = dimension_helpers.getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
+            if (!oldModel) {
+                continue;
+            }
+            for (let prop in data[rowIndex]) {
+                oldModel[prop] = data[rowIndex][prop];
+            }
+        }
+        this.stores[type].setSourceData(items);
+    }
+    refresh(type = 'all') {
+        if (headerCellRenderer.isRowType(type)) {
+            this.refreshItems(type);
+        }
+        headerCellRenderer.rowTypes.forEach((t) => this.refreshItems(t));
+    }
+    refreshItems(type = 'rgRow') {
+        const items = this.stores[type].store.get('items');
+        this.stores[type].setData({ items: [...items] });
+    }
+    setGrouping({ depth }, type = 'rgRow') {
+        this.stores[type].setData({ groupingDepth: depth });
+    }
+    setTrimmed(trimmed, type = 'rgRow') {
+        const store = this.stores[type];
+        store.addTrimmed(trimmed);
+        this.dimensionProvider.setTrimmed(trimmed, type);
+        if (type === 'rgRow') {
+            this.dimensionProvider.setData(dimension_helpers.getVisibleSourceItem(store.store).length, type);
+        }
+    }
+}
+
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ *
+ * @dependsOn ViewportProvider
+ */
+class DimensionProvider {
+    constructor(viewports, config) {
+        this.viewports = viewports;
+        this.gridTotalWidth = 0;
+        const sizeChanged = debounce.debounce((k) => config.realSizeChanged(k), dimension_helpers.RESIZE_INTERVAL);
+        this.stores = headerCellRenderer.reduce([...headerCellRenderer.rowTypes, ...headerCellRenderer.columnTypes], (sources, t) => {
+            sources[t] = new grouping_row_expand_service.DimensionStore(t);
+            sources[t].store.onChange('realSize', () => sizeChanged(t));
+            return sources;
+        }, {});
+        // 为 rgCol 设置获取其他列类型 realSize 的函数
+        this.stores.rgCol.setOtherColumnRealSizesGetter(() => {
+            var _a, _b;
+            return ({
+                colPinStart: ((_a = this.stores.colPinStart) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0,
+                colPinEnd: ((_b = this.stores.colPinEnd) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0,
+            });
+        });
+        // 为 rgCol 设置获取表格总宽度的函数
+        this.stores.rgCol.setGridTotalWidthGetter(() => this.gridTotalWidth);
+    }
+    /**
+     * 设置表格总宽度（由 revo-grid 组件调用）
+     */
+    setGridTotalWidth(width) {
+        this.gridTotalWidth = width;
+    }
+    /**
+     * Clear old sizes from dimension and viewports
+     * @param type - dimension type
+     * @param count - count of items
+     */
+    clearSize(t, count) {
+        this.stores[t].drop();
+        // after we done with drop trigger viewport recalculaction
+        this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
+        this.setItemCount(count, t);
+    }
+    /**
+     * Apply new custom sizes to dimension and view port
+     * @param type - dimension type
+     * @param sizes - new custom sizes
+     * @param keepOld - keep old sizes merge new with old
+     */
+    setCustomSizes(type, sizes, keepOld = false) {
+        let newSizes = sizes;
+        if (keepOld) {
+            const oldSizes = this.stores[type].store.get('sizes');
+            newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
+        }
+        this.stores[type].setDimensionSize(newSizes);
+        // 对于冻结列（非rgCol/rgRow），需要同步更新virtualSize
+        // 因为冻结列不使用虚拟滚动，virtualSize应该等于realSize
+        const isVirtualDisabled = (type === 'colPinStart' || type === 'colPinEnd') ||
+            (type === 'rowPinStart' || type === 'rowPinEnd');
+        if (isVirtualDisabled) {
+            const newRealSize = this.stores[type].getCurrentState().realSize;
+            this.viewports.stores[type].setViewport({
+                virtualSize: newRealSize
+            }, { preserveItems: true });
+        }
+        // 对于 rgCol 和 rgRow 类型，列宽变化时只更新现有项的位置
+        // 不重新计算哪些项应该可见，避免触发重新渲染
+        const shouldUpdatePositionsOnly = type === 'rgCol' || type === 'rgRow';
+        if (shouldUpdatePositionsOnly) {
+            // 立即更新现有项的位置信息
+            const dimension = this.stores[type].getCurrentState();
+            const viewportStore = this.viewports.stores[type];
+            this.viewports.stores[type].updateItemPositions(dimension);
+            // 列宽变化后，即使当前位置未变，也需要按最新尺寸重算可见项窗口。
+            // 否则在“先调整列宽再快速横向滚动”场景下，可能出现 viewport items 过期导致空白。
+            this.setViewPortCoordinate({
+                type,
+                coordinate: viewportStore.lastCoordinate,
+                force: true,
+            });
+        }
+        else {
+            // 对于其他类型，使用原来的逻辑
+            this.setViewPortCoordinate({
+                type,
+                force: true,
+            });
+        }
+    }
+    setItemCount(realCount, type) {
+        this.viewports.stores[type].setViewport({ realCount });
+        this.stores[type].setStore({ count: realCount });
+    }
+    /**
+     * Apply trimmed items
+     * @param trimmed - trimmed items
+     * @param type
+     */
+    setTrimmed(trimmed, type) {
+        const allTrimmed = dimension_helpers.gatherTrimmedItems(trimmed);
+        const dimStoreType = this.stores[type];
+        dimStoreType.setStore({ trimmed: allTrimmed });
+        this.setViewPortCoordinate({
+            type,
+            force: true,
+        });
+    }
+    /**
+     * Sets dimension data and viewport coordinate
+     * @param itemCount
+     * @param type - dimension type
+     * @param noVirtual - disable virtual data
+     */
+    setData(itemCount, type, noVirtual = false) {
+        this.setItemCount(itemCount, type);
+        // Virtualization will get disabled
+        if (noVirtual) {
+            const dimension = this.stores[type].getCurrentState();
+            this.viewports.stores[type].setViewport({
+                virtualSize: dimension.realSize,
+            });
+        }
+        this.setViewPortCoordinate({
+            type,
+        });
+    }
+    /**
+     * Applies new columns to the dimension provider
+     * @param columns - new columns data
+     * @param disableVirtualX - disable virtual data for X axis
+     */
+    applyNewColumns(columns, disableVirtualX, keepOld = false, version) {
+        // 第一阶段：先更新所有冻结列的维度数据
+        const pinnedTypes = ['colPinStart', 'colPinEnd'];
+        for (let type of pinnedTypes) {
+            if (!keepOld) {
+                this.stores[type].drop();
+            }
+            const items = columns[type];
+            this.stores[type].setStore({ count: items.length });
+            const newSizes = headerCellRenderer.getColumnSizes(items);
+            this.stores[type].setDimensionSize(newSizes);
+        }
+        // 第二阶段：更新 rgCol 的维度数据
+        const rgColType = 'rgCol';
+        if (!keepOld) {
+            this.stores[rgColType].drop();
+        }
+        const rgColItems = columns[rgColType];
+        this.stores[rgColType].setStore({ count: rgColItems.length });
+        const rgColSizes = headerCellRenderer.getColumnSizes(rgColItems);
+        this.stores[rgColType].setDimensionSize(rgColSizes);
+        // 第三阶段：更新所有列类型的 viewport
+        for (let type of headerCellRenderer.columnTypes) {
+            const items = columns[type];
+            const noVirtual = type !== 'rgCol' || disableVirtualX;
+            const vpUpdate = {
+                realCount: items.length,
+            };
+            if (noVirtual) {
+                vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
+            }
+            if (version !== undefined) {
+                vpUpdate.version = version;
+            }
+            const preserveItems = items.length > 0;
+            const viewportStore = this.viewports.stores[type];
+            const dimensionState = this.stores[type].getCurrentState();
+            const fallbackClientSize = viewportStore.store.get('clientSize');
+            const virtualSizeRaw = typeof vpUpdate.virtualSize === 'number'
+                ? vpUpdate.virtualSize
+                : viewportStore.store.get('virtualSize');
+            let virtualSize = virtualSizeRaw || fallbackClientSize;
+            if (!virtualSize && items.length > 0) {
+                const originItemSize = dimensionState.originItemSize || 1;
+                virtualSize = originItemSize;
+                if (!virtualSizeRaw) {
+                    vpUpdate.virtualSize = virtualSize;
+                }
+            }
+            if (items.length > 0 && virtualSize > 0) {
+                const toUpdate = viewport_store.getUpdatedItemsByPosition(viewportStore.lastCoordinate, viewportStore.getItems(), items.length, virtualSize, dimensionState);
+                vpUpdate.items = toUpdate.items;
+                vpUpdate.start = toUpdate.start;
+                vpUpdate.end = toUpdate.end;
+            }
+            else if (items.length === 0) {
+                vpUpdate.items = [];
+                vpUpdate.start = 0;
+                vpUpdate.end = 0;
+            }
+            viewportStore.setViewport(vpUpdate, { preserveItems });
+            this.setViewPortCoordinate({
+                type,
+                force: true,
+            });
+        }
+    }
+    /**
+     * Gets the full size of the grid by summing up the sizes of all dimensions
+     * Goes through all dimensions columnTypes (x) and rowTypes (y) and sums up their sizes
+     */
+    getFullSize() {
+        var _a, _b;
+        let x = 0;
+        let y = 0;
+        for (let type of headerCellRenderer.columnTypes) {
+            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
+        }
+        for (let type of headerCellRenderer.rowTypes) {
+            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
+        }
+        return { y, x };
+    }
+    setViewPortCoordinate({ type, coordinate = this.viewports.stores[type].lastCoordinate, force = false, }) {
+        const dimension = this.stores[type].getCurrentState();
+        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
+    }
+    getViewPortPos(e) {
+        const dimension = this.stores[e.dimension].getCurrentState();
+        const item = dimension_helpers.getItemByIndex(dimension, e.coordinate);
+        return item.start;
+    }
+    setSettings(data, dimensionType) {
+        let stores = [];
+        switch (dimensionType) {
+            case 'rgCol':
+                stores = headerCellRenderer.columnTypes;
+                break;
+            case 'rgRow':
+                stores = headerCellRenderer.rowTypes;
+                break;
+        }
+        for (let s of stores) {
+            this.stores[s].setStore(data);
+        }
+    }
+    updateSizesPositionByNewDataIndexes(type, newItemsOrder, prevItemsOrder = []) {
+        // Move custom sizes to new order
+        this.stores[type].updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder);
+        this.setViewPortCoordinate({
+            type,
+            force: true,
+        });
+    }
+}
+
+class ViewportProvider {
+    constructor() {
+        this.stores = headerCellRenderer.reduce([...headerCellRenderer.rowTypes, ...headerCellRenderer.columnTypes], (sources, k) => {
+            sources[k] = new viewport_store.ViewportStore(k);
+            return sources;
+        }, {});
+    }
+    setViewport(type, data, options) {
+        this.stores[type].setViewport(data, options);
+    }
+}
+
+/** Collect Column data */
+function gatherColumnData(data) {
+    const colDimension = data.dimensions[data.colType].store;
+    const realWidth = colDimension.get('realSize');
+    const prop = {
+        contentWidth: realWidth,
+        class: data.colType,
+        contentHeight: data.contentHeight,
+        key: data.colType,
+        colType: data.colType,
+        onResizeviewport: data.onResizeviewport,
+        // 为所有列类型设置明确的宽度，避免flex布局导致的渲染不同步
+        // 冻结列和非冻结列都使用 contentWidth 作为明确宽度
+        style: {
+            width: `${realWidth}px`,
+            flexShrink: data.colType === 'rgCol' ? '1' : '0',
+            flexGrow: '0',
+        },
+    };
+    const headerProp = {
+        colData: dimension_helpers.getVisibleSourceItem(data.colStore),
+        dimensionCol: colDimension,
+        type: data.colType,
+        groups: data.colStore.get('groups'),
+        groupingDepth: data.colStore.get('groupingDepth'),
+        resizeHandler: undefined,
+        onHeaderresize: data.onHeaderresize,
+    };
+    return {
+        prop,
+        type: data.colType,
+        position: data.position,
+        headerProp,
+        viewportCol: data.viewports[data.colType].store,
+    };
+}
+class ViewportService {
+    constructor(config, contentHeight) {
+        // ----------- Handle columns ----------- //
+        var _a;
+        this.config = config;
+        // Transform data from stores and apply it to different components
+        const columns = [];
+        let x = 0; // we increase x only if column present
+        headerCellRenderer.columnTypes.forEach(val => {
+            const colStore = config.columnProvider.stores[val].store;
+            // rgCol 必须始终渲染，即使没有列，否则行数据无法显示
+            // 同时保持冻结区域始终存在（宽度为 0），避免 pin/unpin 时 DOM 结构抖动
+            const column = {
+                colType: val,
+                position: { x, y: 1 },
+                contentHeight,
+                // only central column has dynamic width
+                fixWidth: val !== 'rgCol',
+                viewports: config.viewportProvider.stores,
+                dimensions: config.dimensionProvider.stores,
+                rowStores: config.dataProvider.stores,
+                colStore,
+                onHeaderresize: e => this.onColumnResize(val, e, colStore),
+            };
+            if (val === 'rgCol') {
+                column.onResizeviewport = (e) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    const vpState = {
+                        clientSize: e.detail.size,
+                    };
+                    // virtual size will be handled by dimension provider if disabled
+                    if ((e.detail.dimension === 'rgRow' && !config.disableVirtualY)
+                        || (e.detail.dimension === 'rgCol' && !config.disableVirtualX)) {
+                        vpState.virtualSize = e.detail.size;
+                    }
+                    const dimensionStore = (_b = (_a = config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.stores) === null || _b === void 0 ? void 0 : _b[e.detail.dimension];
+                    const viewportStore = (_d = (_c = config.viewportProvider) === null || _c === void 0 ? void 0 : _c.stores) === null || _d === void 0 ? void 0 : _d[e.detail.dimension];
+                    if (dimensionStore && viewportStore) {
+                        const dimensionState = dimensionStore.getCurrentState();
+                        const realCount = viewportStore.store.get('realCount');
+                        const virtualSize = typeof vpState.virtualSize === 'number'
+                            ? vpState.virtualSize
+                            : viewportStore.store.get('virtualSize');
+                        if (realCount > 0 && virtualSize > 0) {
+                            const toUpdate = viewport_store.getUpdatedItemsByPosition(viewportStore.lastCoordinate, viewportStore.getItems(), realCount, virtualSize, dimensionState);
+                            viewportStore.setViewport(Object.assign(Object.assign({}, vpState), toUpdate), { preserveItems: true });
+                            return;
+                        }
+                    }
+                    (_e = config.viewportProvider) === null || _e === void 0 ? void 0 : _e.setViewport(e.detail.dimension, vpState, { preserveItems: true });
+                    (_f = config.dimensionProvider) === null || _f === void 0 ? void 0 : _f.setViewPortCoordinate({
+                        type: e.detail.dimension,
+                        force: true,
+                    });
+                };
+            }
+            const colData = gatherColumnData(column);
+            const columnSelectionStore = this.registerCol(colData.position.x, val);
+            // render per each column data collections vertically
+            const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
+                // register selection store for Segment
+                const segmentSelection = this.registerSegment(rgRow.position, rgRow.lastCell);
+                // register selection store for Row
+                const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, onSetrange: e => {
+                        segmentSelection.setRangeArea(e.detail);
+                    }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
+                        // todo: multi focus
+                        segmentSelection.clearFocus();
+                        config.selectionStoreConnector.focus(segmentSelection, e.detail);
+                    } });
+                r.push(rowDef);
+                return r;
+            }, []);
+            columns.push(Object.assign(Object.assign({}, colData), { columnSelectionStore,
+                dataPorts }));
+            x++;
+        });
+        this.columns = columns;
+        // ----------- Handle columns end ----------- //
+        (_a = this.config.scrollingService) === null || _a === void 0 ? void 0 : _a.unregister();
+    }
+    onColumnResize(type, { detail }, store) {
+        var _a;
+        // apply to dimension provider
+        (_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
+        // set resize event
+        const changedItems = {};
+        for (const [i, size] of Object.entries(detail || {})) {
+            const virtualIndex = parseInt(i, 10);
+            const item = dimension_helpers.getSourceItem(store, virtualIndex);
+            if (item) {
+                changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });
+            }
+        }
+        this.config.resize(changedItems);
+    }
+    /** register selection store for Segment */
+    registerSegment(position, lastCell) {
+        const store = this.config.selectionStoreConnector.register(position);
+        store.setLastCell(lastCell);
+        return store;
+    }
+    /** register selection store for Row */
+    registerRow(y, type) {
+        return this.config.selectionStoreConnector.registerRow(y, type).store;
+    }
+    /** register selection store for Column */
+    registerCol(x, type) {
+        return this.config.selectionStoreConnector.registerColumn(x, type).store;
+    }
+    /** Collect Row data */
+    dataViewPort(data) {
+        const slots = {
+            rowPinStart: viewport_helpers.HEADER_SLOT,
+            rgRow: viewport_helpers.CONTENT_SLOT,
+            rowPinEnd: viewport_helpers.FOOTER_SLOT,
+        };
+        // y position for selection
+        let y = 0;
+        return headerCellRenderer.rowTypes.reduce((result, type) => {
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y }) });
+            const partition = viewport_helpers.viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
+            result.push(partition);
+            y++;
+            return result;
+        }, []);
+    }
+    scrollToCell(cell) {
+        for (let key in cell) {
+            const coordinate = cell[key];
+            if (typeof coordinate === 'number') {
+                this.config.scrollingService.proxyScroll({
+                    dimension: key === 'x' ? 'rgCol' : 'rgRow',
+                    coordinate,
+                });
+            }
+        }
+    }
+    /**
+     * Clear current grid focus
+     */
+    clearFocused() {
+        this.config.selectionStoreConnector.clearAll();
+    }
+    clearEdit() {
+        this.config.selectionStoreConnector.setEdit(false);
+    }
+    /**
+     * Collect focused element data
+     */
+    getFocused() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
+        return {
+            column,
+            model,
+            cell: focused.cell,
+            colType,
+            rowType,
+        };
+    }
+    getStoreCoordinateByType(colType, rowType) {
+        const stores = this.config.selectionStoreConnector.storesByType;
+        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+            return;
+        }
+        return {
+            x: stores[colType],
+            y: stores[rowType],
+        };
+    }
+    setFocus(colType, rowType, start, end) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
+        }
+    }
+    getSelectedRange() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const range = focused.entity.store.get('range');
+        if (!range) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, range), { colType,
+            rowType });
+    }
+    setEdit(rowIndex, colIndex, colType, rowType) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
+        }
+    }
+}
+
+class GridScrollingService {
+    constructor(setViewport, isScrollDisabled) {
+        this.setViewport = setViewport;
+        this.isScrollDisabled = isScrollDisabled;
+        this.elements = {};
+        this.requestIds = {
+            rgCol: 0,
+            rgRow: 0,
+        };
+        this.lastCoordinates = {};
+    }
+    async proxyScroll(e, key) {
+        var _a, _b;
+        // Check if scroll is disabled
+        if ((_a = this.isScrollDisabled) === null || _a === void 0 ? void 0 : _a.call(this)) {
+            return;
+        }
+        const shouldGuardHorizontalRace = e.dimension === 'rgCol';
+        const requestId = shouldGuardHorizontalRace
+            ? ++this.requestIds[e.dimension]
+            : this.requestIds[e.dimension];
+        let newEventPromise;
+        let event = e;
+        for (let elKey in this.elements) {
+            // 仅在横向滚动时跳过 source 视口，避免快速滚动重复回写；
+            // 纵向链路保留 source 回写以保证多视口同步稳定（防止错位/空白）。
+            if (shouldGuardHorizontalRace && key && elKey === key) {
+                continue;
+            }
+            // 如果已有更新的同维度滚动请求，丢弃当前旧请求
+            if (shouldGuardHorizontalRace && requestId !== this.requestIds[e.dimension]) {
+                return;
+            }
+            // skip
+            if (e.dimension === 'rgCol' && elKey === 'headerRow') {
+                continue;
+                // pinned column only
+            }
+            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+                if (elKey === key || !e.delta) {
+                    continue;
+                }
+                for (let el of this.elements[elKey]) {
+                    if (el.changeScroll) {
+                        newEventPromise = el.changeScroll(e);
+                    }
+                }
+            }
+            else {
+                for (let el of this.elements[elKey]) {
+                    await ((_b = el.setScroll) === null || _b === void 0 ? void 0 : _b.call(el, e));
+                    // await 后再次校验，避免旧请求在异步边界后继续执行
+                    if (shouldGuardHorizontalRace && requestId !== this.requestIds[e.dimension]) {
+                        return;
+                    }
+                }
+            }
+        }
+        const newEvent = await newEventPromise;
+        if (shouldGuardHorizontalRace && requestId !== this.requestIds[e.dimension]) {
+            return;
+        }
+        if (newEvent) {
+            event = newEvent;
+        }
+        this.lastCoordinates[event.dimension] = event.coordinate;
+        this.setViewport(event);
+    }
+    /**
+     * Silent scroll update for mobile devices when we have negative scroll top
+     */
+    async scrollSilentService(e, key) {
+        var _a;
+        for (let elKey in this.elements) {
+            // skip same element update
+            if (elKey === key) {
+                continue;
+            }
+            if (headerCellRenderer.columnTypes.includes(key) &&
+                (elKey === 'headerRow' ||
+                    headerCellRenderer.columnTypes.includes(elKey))) {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+                }
+                continue;
+            }
+        }
+    }
+    isPinnedColumn(key) {
+        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+    }
+    registerElements(els) {
+        this.elements = els;
+    }
+    /**
+     * Register new element for farther scroll support
+     * @param el - can be null if holder removed
+     * @param key - element key
+     */
+    registerElement(el, key) {
+        if (!this.elements[key]) {
+            this.elements[key] = [];
+        }
+        // new element added
+        if (el) {
+            const exists = this.elements[key].includes(el);
+            if (!exists) {
+                this.elements[key].push(el);
+            }
+            this.replayLastCoordinates(el);
+        }
+        else if (this.elements[key]) {
+            // element removed
+            delete this.elements[key];
+        }
+    }
+    replayLastCoordinates(el) {
+        var _a;
+        const dimensions = ['rgRow', 'rgCol'];
+        for (const dimension of dimensions) {
+            const coordinate = this.lastCoordinates[dimension];
+            if (typeof coordinate === 'number') {
+                void ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, {
+                    dimension,
+                    coordinate,
+                    outside: true,
+                }));
+            }
+        }
+    }
+    unregister() {
+        this.elements = {};
+    }
+}
+
+class SelectionStoreConnector {
+    constructor() {
+        this.stores = {};
+        this.columnStores = {};
+        this.rowStores = {};
+        /**
+         * Helpers for data conversion
+         */
+        this.storesByType = {};
+        this.storesXToType = {};
+        this.storesYToType = {};
+    }
+    get focusedStore() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get('focus');
+                if (focused) {
+                    return {
+                        entity: this.stores[y][x],
+                        cell: focused,
+                        position: {
+                            x: parseInt(x, 10),
+                            y: parseInt(y, 10),
+                        },
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    get edit() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('edit');
+    }
+    get focused() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('focus');
+    }
+    get selectedRange() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
+    }
+    registerColumn(x, type) {
+        if (this.columnStores[x]) {
+            return this.columnStores[x];
+        }
+        this.columnStores[x] = new grouping_row_expand_service.SelectionStore();
+        // build cross-linking type to position
+        this.storesByType[type] = x;
+        this.storesXToType[x] = type;
+        return this.columnStores[x];
+    }
+    registerRow(y, type) {
+        if (this.rowStores[y]) {
+            return this.rowStores[y];
+        }
+        this.rowStores[y] = new grouping_row_expand_service.SelectionStore();
+        // build cross linking type to position
+        this.storesByType[type] = y;
+        this.storesYToType[y] = type;
+        return this.rowStores[y];
+    }
+    /**
+     * Cross store proxy, based on multiple dimensions
+     */
+    register({ x, y }) {
+        if (!this.stores[y]) {
+            this.stores[y] = {};
+        }
+        let store = this.stores[y][x];
+        if (store) {
+            // Store already registered. Do not register twice
+            return store;
+        }
+        this.stores[y][x] = store = new grouping_row_expand_service.SelectionStore();
+        // proxy update, column store trigger only range area
+        store.onChange('range', c => {
+            this.columnStores[x].setRangeArea(c);
+            this.rowStores[y].setRangeArea(c);
+        });
+        // clean up on remove
+        store.store.on('dispose', () => this.destroy(x, y));
+        return store;
+    }
+    destroy(x, y) {
+        var _a, _b;
+        (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
+        delete this.rowStores[y];
+        delete this.columnStores[x];
+        // clear x cross-link
+        if (this.storesXToType[x]) {
+            const type = this.storesXToType[x];
+            delete this.storesXToType[x];
+            delete this.storesByType[type];
+        }
+        // clear y cross-link
+        if (this.storesYToType[y]) {
+            const type = this.storesYToType[y];
+            delete this.storesYToType[y];
+            delete this.storesByType[type];
+        }
+        if (this.stores[y]) {
+            delete this.stores[y][x];
+        }
+        // clear empty rows
+        if (!Object.keys(this.stores[y] || {}).length) {
+            delete this.stores[y];
+        }
+    }
+    setEditByCell(storePos, editCell) {
+        this.focusByCell(storePos, editCell, editCell);
+        this.setEdit('');
+    }
+    /**
+     * Sets the next focus cell before the current one.
+     *
+     * @param focus - The cell to set as the next focus.
+     */
+    beforeNextFocusCell(focus) {
+        var _a;
+        // If there is no focused store, return early.
+        if (!this.focusedStore) {
+            return;
+        }
+        // Get the next store based on the current focus and the last cell.
+        const lastCell = this.focusedStore.entity.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, this.focusedStore.position, lastCell);
+        // Set the next focus cell in the store.
+        (_a = next === null || next === void 0 ? void 0 : next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+    }
+    focusByCell(storePos, start, end) {
+        const store = this.stores[storePos.y][storePos.x];
+        this.focus(store, { focus: start, end });
+    }
+    focus(store, { focus, end }) {
+        const currentStorePointer = this.getCurrentStorePointer(store);
+        if (!currentStorePointer) {
+            return null;
+        }
+        // check for the focus in nearby store/viewport
+        const lastCell = store.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, currentStorePointer, lastCell);
+        // if next store present - update
+        if (next === null || next === void 0 ? void 0 : next.store) {
+            const item = Object.assign(Object.assign({}, focus), next.item);
+            this.focus(next.store, { focus: item, end: item });
+            return null;
+        }
+        if (lastCell) {
+            focus = headerCellRenderer.cropCellToMax(focus, lastCell);
+            end = headerCellRenderer.cropCellToMax(end, lastCell);
+        }
+        store.setFocus(focus, end);
+        return focus;
+    }
+    /**
+     * Retrieves the current store pointer based on the active store.
+     * Clears focus from all stores except the active one.
+     */
+    getCurrentStorePointer(store) {
+        let currentStorePointer;
+        // Iterate through all stores
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const s = this.stores[y][x];
+                // Clear focus from stores other than the active one
+                if (s !== store) {
+                    s.clearFocus();
+                }
+                else {
+                    // Update the current store pointer with the active store coordinates
+                    currentStorePointer = {
+                        x: parseInt(x, 10),
+                        y: parseInt(y, 10)
+                    };
+                }
+            }
+        }
+        return currentStorePointer;
+    }
+    /**
+     * Retrieves the next store based on the focus cell and current store pointer.
+     * If the next store exists, returns an object with the next store and the item in the new store.
+     * If the next store does not exist, returns null.
+     */
+    getNextStore(focus, currentStorePointer, lastCell) {
+        // item in new store
+        const nextItem = headerCellRenderer.nextCell(focus, lastCell);
+        let nextStore;
+        if (nextItem) {
+            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
+                let stores;
+                switch (type) {
+                    case 'x':
+                        // Get the X stores for the current Y coordinate of the current store pointer
+                        stores = this.getXStores(currentStorePointer.y);
+                        break;
+                    case 'y':
+                        // Get the Y stores for the current X coordinate of the current store pointer
+                        stores = this.getYStores(currentStorePointer.x);
+                        break;
+                }
+                // Get the next store based on the item in the new store
+                if (nextItemCoord >= 0) {
+                    nextStore = stores[++currentStorePointer[type]];
+                }
+                else {
+                    nextStore = stores[--currentStorePointer[type]];
+                    const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+                    if (nextLastCell) {
+                        nextItem[type] = nextLastCell[type] + nextItemCoord;
+                    }
+                }
+            });
+        }
+        // if last cell is empty store is empty, no next store
+        const lastCellNext = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+        if (!(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.x) || !(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.y)) {
+            nextStore = undefined;
+        }
+        return {
+            store: nextStore,
+            item: nextItem,
+        };
+    }
+    clearAll() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
+            }
+        }
+    }
+    setEdit(val) {
+        if (!this.focusedStore) {
+            return;
+        }
+        this.focusedStore.entity.setEdit(val);
+    }
+    /**
+     * Select all cells across all stores
+     */
+    selectAll() {
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const store = this.stores[y][x];
+                if (!store) {
+                    continue;
+                }
+                const lastCell = store.store.get('lastCell');
+                if (lastCell) {
+                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                }
+            }
+        }
+    }
+    getXStores(y) {
+        return this.stores[y];
+    }
+    getYStores(x) {
+        const stores = {};
+        for (let i in this.stores) {
+            stores[i] = this.stores[i][x];
+        }
+        return stores;
+    }
+}
+
+/**
+ * Draw drag
+ */
+class OrdererService {
+    constructor() {
+        this.parentY = 0;
+    }
+    start(parent, { pos, text, event }) {
+        var _a;
+        const { top } = parent.getBoundingClientRect();
+        this.parentY = top;
+        if (this.text) {
+            this.text.innerText = text;
+        }
+        this.move(pos);
+        this.moveTip({ x: event.x, y: event.y });
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove('hidden');
+    }
+    end() {
+        var _a;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
+    }
+    move(pos) {
+        this.moveElement(pos.end - this.parentY);
+    }
+    moveTip({ x, y }) {
+        if (!this.draggable) {
+            return;
+        }
+        this.draggable.style.left = `${x}px`;
+        this.draggable.style.top = `${y}px`;
+    }
+    moveElement(y) {
+        if (!this.rgRow) {
+            return;
+        }
+        this.rgRow.style.transform = `translateY(${y}px)`;
+    }
+}
+const OrderRenderer = ({ ref }) => {
+    const service = new OrdererService();
+    ref(service);
+    return (index.h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) },
+        index.h("div", { class: "draggable", ref: el => (service.draggable = el) },
+            index.h("span", { class: "revo-alt-icon" }),
+            index.h("span", { ref: e => (service.text = e) })),
+        index.h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
+};
+
+const rowDefinitionByType = (newVal = []) => {
+    const result = {};
+    for (const v of newVal) {
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = {};
+        }
+        if (v.size) {
+            if (!rowDefs.sizes) {
+                rowDefs.sizes = {};
+            }
+            rowDefs.sizes[v.index] = v.size;
+        }
+    }
+    return result;
+};
+const rowDefinitionRemoveByType = (oldVal = []) => {
+    const result = {};
+    for (const v of oldVal) {
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = [];
+        }
+        if (v.size) {
+            rowDefs.push(v.index);
+        }
+    }
+    return result;
+};
+
+function isMobileDevice() {
+    return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
+}
+
+/**
+ * WCAG Plugin is responsible for enhancing the accessibility features of the RevoGrid component.
+ * It ensures that the grid is fully compliant with Web Content Accessibility Guidelines (WCAG) 2.1.
+ * This plugin should be the last plugin you add, as it modifies the grid's default behavior.
+ *
+ * The WCAG Plugin performs the following tasks:
+ * - Sets the 'dir' attribute to 'ltr' for left-to-right text direction.
+ * - Sets the 'role' attribute to 'treegrid' for treelike hierarchical structure.
+ * - Sets the 'aria-keyshortcuts' attribute to 'Enter' and 'Esc' for keyboard shortcuts.
+ * - Adds event listeners for keyboard navigation and editing.
+ *
+ * By default, the plugin adds ARIA roles and properties to the grid elements, providing semantic information
+ * for assistive technologies. These roles include 'grid', 'row', and 'gridcell'. The plugin also sets
+ * ARIA attributes such as 'aria-rowindex', 'aria-colindex', and 'aria-selected'.
+ *
+ * The WCAG Plugin ensures that the grid is fully functional and usable for users with various disabilities,
+ * including visual impairments, deaf-blindness, and cognitive disabilities.
+ *
+ * Note: The WCAG Plugin should be added as the last plugin in the list of plugins, as it modifies the grid's
+ * default behavior and may conflict with other plugins if added earlier.
+ */
+class WCAGPlugin extends grouping_row_expand_service.BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        revogrid.setAttribute('role', 'treegrid');
+        revogrid.setAttribute('aria-keyshortcuts', 'Enter');
+        revogrid.setAttribute('aria-multiselectable', 'true');
+        revogrid.setAttribute('tabindex', '0');
+        /**
+         * Before Columns Set Event
+         */
+        this.addEventListener('beforecolumnsset', ({ detail }) => {
+            const columns = [
+                ...detail.columns.colPinStart,
+                ...detail.columns.rgCol,
+                ...detail.columns.colPinEnd,
+            ];
+            revogrid.setAttribute('aria-colcount', `${columns.length}`);
+            columns.forEach((column, index) => {
+                const { columnProperties, cellProperties } = column;
+                column.columnProperties = (...args) => {
+                    const result = (columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties(...args)) || {};
+                    result.role = 'columnheader';
+                    result['aria-colindex'] = `${index}`;
+                    return result;
+                };
+                column.cellProperties = (...args) => {
+                    const wcagProps = {
+                        ['role']: 'gridcell',
+                        ['aria-colindex']: `${index}`,
+                        ['aria-rowindex']: `${args[0].rowIndex}`,
+                        ['tabindex']: -1,
+                    };
+                    const columnProps = (cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties(...args)) || {};
+                    return Object.assign(Object.assign({}, wcagProps), columnProps);
+                };
+            });
+        });
+        /**
+         * Before Row Set Event
+         */
+        this.addEventListener('beforesourceset', ({ detail, }) => {
+            revogrid.setAttribute('aria-rowcount', `${detail.source.length}`);
+        });
+        this.addEventListener('beforerowrender', ({ detail, }) => {
+            detail.node.$attrs$ = Object.assign(Object.assign({}, detail.node.$attrs$), { role: 'row', ['aria-rowindex']: detail.item.itemIndex });
+        });
+        // focuscell
+        this.addEventListener('afterfocus', async (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            const el = this.revogrid.querySelector(`revogr-data[type="${e.detail.rowType}"][col-type="${e.detail.colType}"] [data-rgrow="${e.detail.rowIndex}"][data-rgcol="${e.detail.colIndex}"]`);
+            if (el instanceof HTMLElement) {
+                el.focus();
+            }
+        });
+    }
+}
+
+/**
+ * Plugin service
+ * Manages plugins
+ */
+class PluginService {
+    constructor() {
+        /**
+         * Plugins
+         * Define plugins collection
+         */
+        this.internalPlugins = [];
+    }
+    /**
+     * Get all plugins
+     */
+    get() {
+        return [...this.internalPlugins];
+    }
+    /**
+     * Add plugin to collection
+     */
+    add(plugin) {
+        this.internalPlugins.push(plugin);
+    }
+    /**
+     * Add user plugins and create
+     */
+    addUserPluginsAndCreate(element, plugins = [], prevPlugins, pluginData) {
+        if (!pluginData) {
+            return;
+        }
+        // Step 1: Identify plugins to remove, compare new and old plugins
+        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.some(userPlugin => userPlugin === prevPlugin))) || [];
+        // Step 2: Remove old plugins
+        pluginsToRemove.forEach(plugin => {
+            var _a, _b;
+            const index = this.internalPlugins.findIndex(createdPlugin => createdPlugin instanceof plugin);
+            if (index !== -1) {
+                (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.internalPlugins.splice(index, 1); // Remove the plugin
+            }
+        });
+        // Step 3: Register user plugins
+        plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
+            // check if plugin already exists, if so, skip
+            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
+            if (existingPlugin) {
+                return;
+            }
+            this.add(new userPlugin(element, pluginData));
+        });
+    }
+    /**
+     * Get plugin by class
+     */
+    getByClass(pluginClass) {
+        return this.internalPlugins.find(p => p instanceof pluginClass);
+    }
+    /**
+     * Remove plugin
+     */
+    remove(plugin) {
+        var _a, _b;
+        const index = this.internalPlugins.indexOf(plugin);
+        if (index > -1) {
+            (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.internalPlugins.splice(index, 1);
+        }
+    }
+    /**
+     * Remove all plugins
+     */
+    destroy() {
+        this.internalPlugins.forEach(p => { var _a; return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p); });
+        this.internalPlugins = [];
+    }
+}
+
+/**
+ * RTL (Right-to-Left) Plugin for RevoGrid
+ *
+ * This plugin handles RTL transformation by subscribing to the beforecolumnsset event
+ * and applying column order reversal when RTL mode is enabled.
+ */
+class RTLPlugin extends grouping_row_expand_service.BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        this.isRTLEnabled = false;
+        this.init();
+    }
+    init() {
+        // Subscribe to beforecolumnsset event to apply RTL transformation
+        this.addEventListener('beforecolumnsset', (event) => {
+            this.handleBeforeColumnsSet(event);
+        });
+        // Listen for RTL property changes
+        this.addEventListener('aftergridinit', () => {
+            this.updateRTLState();
+        });
+        // Watch for RTL property changes
+        this.watch('rtl', (value) => {
+            this.isRTLEnabled = value;
+            this.emit('rtlstatechanged', { rtl: this.isRTLEnabled });
+        }, { immediate: true });
+    }
+    /**
+     * Handle the beforecolumnsset event to apply RTL transformation
+     */
+    handleBeforeColumnsSet(event) {
+        if (!this.isRTLEnabled) {
+            return; // No transformation needed if RTL is disabled
+        }
+        const columnCollection = event.detail;
+        // Apply RTL transformation to all column types
+        const transformedColumns = this.applyRTLTransformationToCollection(columnCollection);
+        // Update the event detail with transformed columns
+        event.detail.columns = transformedColumns.columns;
+        event.detail.columnByProp = transformedColumns.columnByProp;
+        event.detail.columnGrouping = transformedColumns.columnGrouping;
+    }
+    /**
+     * Apply RTL transformation to the entire column collection
+     */
+    applyRTLTransformationToCollection(collection) {
+        const transformedCollection = {
+            columns: {
+                rgCol: [],
+                colPinStart: [],
+                colPinEnd: [],
+            },
+            columnByProp: Object.assign({}, collection.columnByProp),
+            columnGrouping: {
+                rgCol: [],
+                colPinStart: [],
+                colPinEnd: [],
+            },
+            maxLevel: collection.maxLevel,
+            sort: Object.assign({}, collection.sort),
+        };
+        // Transform each column type
+        Object.keys(collection.columns).forEach((type) => {
+            const columnType = type;
+            const columns = collection.columns[columnType];
+            // Apply RTL transformation to columns - create new reversed array
+            const reversedColumns = [...columns].reverse();
+            transformedCollection.columns[columnType] = reversedColumns;
+            // Transform column grouping for this type
+            transformedCollection.columnGrouping[columnType] = this.applyRTLTransformationToGroups(collection.columnGrouping[columnType], columns.length);
+        });
+        return transformedCollection;
+    }
+    /**
+     * Apply RTL transformation to column groups
+     */
+    applyRTLTransformationToGroups(groups, totalColumns) {
+        return groups.map(group => {
+            // Reverse the indexes for RTL
+            const reversedIndexes = group.indexes.map((index) => totalColumns - 1 - index).reverse();
+            return Object.assign(Object.assign({}, group), { indexes: reversedIndexes });
+        }).reverse(); // Reverse the group order
+    }
+    /**
+     * Update RTL state based on the grid's rtl property
+     */
+    updateRTLState() {
+        const grid = this.revogrid;
+        if (grid && typeof grid.rtl === 'boolean') {
+            this.isRTLEnabled = grid.rtl;
+        }
+    }
+    /**
+     * Get current RTL state
+     */
+    getRTLState() {
+        return this.isRTLEnabled;
+    }
+    /**
+     * Clean up the plugin
+     */
+    destroy() {
+        super.destroy();
+    }
+}
+
+const revoGridStyleCss = "@charset \"UTF-8\";revo-grid[theme=default],revo-grid:not([theme]){font-size:12px}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:var(--revo-grid-header-bg)}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .group-rgRow .rgHeaderCell,revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell{box-shadow:-1px 0 0 0 var(--revo-grid-header-border), -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:var(--revo-grid-header-color)}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:var(--revo-grid-header-bg)}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--revo-grid-header-color)}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid var(--revo-grid-header-border)}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--revo-grid-header-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:none}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset, 0 -1px 0 0 var(--revo-grid-cell-border) inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset}revo-grid[theme=default] revogr-grouping-overlay .rgRow,revo-grid:not([theme]) revogr-grouping-overlay .rgRow{line-height:27px}revo-grid[theme=material]{--rg-header-row-height:50px;font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] revogr-grouping-overlay .rgRow{line-height:42px}revo-grid[theme=darkMaterial]{--rg-header-row-height:50px;font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] revogr-grouping-overlay .rgRow{line-height:42px}revo-grid[theme=darkCompact]{--rg-header-row-height:45px;font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] revogr-grouping-overlay .rgRow{line-height:32px}revo-grid[theme=compact]{--rg-header-row-height:45px;font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] revogr-grouping-overlay .rgRow{line-height:32px}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid[dir=rtl] .viewports{flex-direction:row-reverse}revo-grid[dir=rtl] revogr-header .rgHeaderCell{text-align:right}revo-grid[dir=rtl] revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] .rowHeaders revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] revogr-filter-panel{direction:rtl}revo-grid[dir=rtl] revo-dropdown .rv-dr-root{text-align:right}revo-grid[dir=rtl] .drag-position{right:0;left:auto}revo-grid[dir=rtl] .drag-auto-scroll-y{right:0;left:auto}revo-grid[dir=rtl] .clipboard{right:0;left:auto}revo-grid[dir=rtl] .draggable{margin-left:-20px;margin-right:0;padding-right:20px;padding-left:5px}revo-grid[dir=rtl] .draggable .revo-alt-icon{right:5px;left:auto}revo-grid[dir=rtl] .focused-cell{border-right:2px solid var(--revo-grid-primary);border-left:none}revo-grid[dir=rtl] .selection-range{border-right:2px solid var(--revo-grid-primary);border-left:none}revo-grid[dir=rtl] .resize-handle{right:0;left:auto}revo-grid[dir=rtl] .sort-indicator{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .filter-button{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .group-expand{margin-right:0;margin-left:2px;padding-right:5px;padding-left:0}revo-grid[dir=rtl] .rgCell,revo-grid[dir=rtl] .rgHeaderCell{padding-left:5px;padding-right:5px}revo-grid[dir=rtl] revogr-edit{direction:rtl}revo-grid[dir=rtl] .rgHeaderCell{direction:rtl}revo-grid[dir=rtl][theme=material] revogr-header,revo-grid[dir=rtl][theme=darkMaterial] revogr-header{text-align:right}revo-grid[dir=rtl][theme=material] revogr-data,revo-grid[dir=rtl][theme=darkMaterial] revogr-data{text-align:right}revo-grid[dir=rtl][theme=default] .rowHeaders,revo-grid[dir=rtl]:not([theme]) .rowHeaders{background-color:var(--revo-grid-header-bg)}revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--revo-grid-header-color)}revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-left:1px solid var(--revo-grid-header-border);border-right:none}revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data revogr-header,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[dir=rtl][theme=default] revogr-header,revo-grid[dir=rtl]:not([theme]) revogr-header{text-align:right}revo-grid[dir=rtl][theme=default] revogr-data,revo-grid[dir=rtl]:not([theme]) revogr-data{text-align:right}revo-grid[dir=rtl][theme=compact] revogr-header,revo-grid[dir=rtl][theme=darkCompact] revogr-header{text-align:right}revo-grid[dir=rtl][theme=compact] revogr-data,revo-grid[dir=rtl][theme=darkCompact] revogr-data{text-align:right}.revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:\"::\";display:inline-block}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}revo-grid.custom-column-draggable .rgHeaderCell{cursor:grab;transition:background-color 0.2s ease}revo-grid.custom-column-draggable .rgHeaderCell[data-draggable=false]{cursor:default}revo-grid.custom-column-draggable.custom-column-drag-active{cursor:grabbing !important;user-select:none}revo-grid.custom-column-draggable.custom-column-drag-active *{cursor:grabbing !important}revo-grid.custom-column-draggable .custom-drag-indicator{position:fixed;width:2px;background-color:#0f87ff;pointer-events:none;z-index:99999;box-shadow:0 0 4px rgba(15, 135, 255, 0.5)}revo-grid.custom-column-draggable.column-drag-start *,revo-grid.custom-column-draggable.column-drag-start *::before,revo-grid.custom-column-draggable.column-drag-start *::after{animation-duration:0s !important;animation-delay:0s !important;transition-duration:0s !important;transition-delay:0s !important}revo-grid{--revo-grid-row-selected-bg:rgba(38, 106, 232, 0.1);--revo-grid-row-selected-hover-bg:rgba(38, 106, 232, 0.15);--revo-grid-wheel-capture-row-border:0 -1px 0 0 var(\n      --revo-grid-wheel-capture-row-border-color,\n      var(--revo-grid-cell-border)\n    ) inset}.cell-checkbox{display:flex;align-items:center;justify-content:center}.cell-checkbox input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:var(--revo-grid-primary, #266ae8)}.cell-header-checkbox-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.cell-header-checkbox-container input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:var(--revo-grid-primary, #266ae8)}revo-grid[theme*=dark]{--revo-grid-row-selected-bg:rgba(38, 106, 232, 0.2);--revo-grid-row-selected-hover-bg:rgba(38, 106, 232, 0.25)}revo-grid .rgHeaderCell:has(.resize-handle-hover){z-index:92 !important}revo-grid revogr-header-unified .header-area-rgCol:has(.resize-handle-hover){z-index:14 !important}revo-grid revogr-header-unified .header-rgRow.actual-rgRow:has(.resize-handle-hover){z-index:3 !important}revo-grid revogr-viewport-scroll.rgCol:has(.resize-handle-hover){z-index:94 !important}revo-grid revogr-viewport-scroll.colPinStart:has(.resize-handle-hover),revo-grid revogr-viewport-scroll.colPinEnd:has(.resize-handle-hover){z-index:93 !important}revo-grid .rgHeaderCell>.resizable-r::after,revo-grid .rgHeaderCell>.resizable-l::after,revo-grid .rgHeaderCell>.resizable-r:hover::after,revo-grid .rgHeaderCell>.resizable-l:hover::after{background-color:transparent !important}revo-grid .rgHeaderCell>.resizable-r.resize-handle-hover::after,revo-grid .rgHeaderCell>.resizable-l.resize-handle-hover::after{background-color:var(--revo-grid-resize-indicator-color, #0f87ff) !important;display:block !important}revo-grid .rgHeaderCell.last-column>.resizable-r.resize-handle-hover::after{left:auto !important;right:50% !important;transform:none !important}revo-grid revogr-header-unified .header-area-colPinStart .rgHeaderCell:last-child>.resizable-r.resize-handle-hover::after,revo-grid revogr-header-unified .header-area-rgCol .rgHeaderCell:last-child>.resizable-r.resize-handle-hover::after{left:auto !important;right:50% !important;transform:none !important}revo-grid revogr-header-unified .header-area-rgCol .rgHeaderCell:first-child>.resizable-l.resize-handle-hover::after,revo-grid revogr-header-unified .header-area-colPinEnd .rgHeaderCell:first-child>.resizable-l.resize-handle-hover::after{left:50% !important;transform:none !important}revo-grid .rgHeaderCell.active{z-index:9998 !important}revo-grid.resize-indicator-active{cursor:col-resize !important}revo-grid.resize-indicator-active .header-area,revo-grid.resize-indicator-active .header-area *,revo-grid.resize-indicator-active .rgHeaderCell,revo-grid.resize-indicator-active .rgHeaderCell *{cursor:col-resize !important}revo-grid.resize-indicator-active revogr-data,revo-grid.resize-indicator-active revogr-overlay-selection{pointer-events:none}revo-grid.resize-indicator-active .resizable-r::after,revo-grid.resize-indicator-active .resizable-l::after{display:none !important}revo-grid.resize-indicator-active .resizable-r.resize-handle-hover::after,revo-grid.resize-indicator-active .resizable-l.resize-handle-hover::after{display:none !important;background-color:transparent !important}revo-grid.resize-indicator-active .rgHeaderCell:hover{background-color:initial !important;background-image:none !important}revo-grid .resizable-r,revo-grid .resizable-l{cursor:col-resize !important}.revo-grid-resize-indicator{border:none !important;outline:none !important;padding:0 !important;margin:0 !important}.resizable-r.resizable-hover-active::after,.resizable-l.resizable-hover-active::after{display:none !important}body.resize-indicator-global-cursor,body.resize-indicator-global-cursor *{cursor:col-resize !important}revo-grid{--revo-grid-primary:#266ae8;--revo-grid-primary-transparent:rgba(38, 106, 232, 0.9);--revo-grid-background:#fff;--revo-grid-foreground:black;--revo-grid-divider:gray;--revo-grid-shadow:rgba(0, 0, 0, 0.15);--revo-grid-text:black;--revo-grid-border:rgba(0, 0, 0, 0.2);--revo-grid-filter-panel-bg:#fff;--revo-grid-filter-panel-border:#d9d9d9;--revo-grid-filter-panel-shadow:rgba(0, 0, 0, 0.15);--revo-grid-filter-panel-input-bg:#eaeaeb;--revo-grid-filter-panel-divider:#d9d9d9;--revo-grid-filter-panel-select-border:transparent;--revo-grid-filter-panel-select-border-hover:transparent;--revo-grid-header-bg:#f8f9fa;--revo-grid-header-color:#000;--revo-grid-header-border:#cecece;--revo-grid-cell-border:#e2e3e3;--revo-grid-focused-bg:rgba(233, 234, 237, 0.5);--revo-grid-row-hover:#f1f1f1;--revo-grid-row-headers-bg:#f7faff;--revo-grid-row-headers-color:#757a82;--revo-grid-cell-disabled-bg:rgba(0, 0, 0, 0.07);direction:ltr !important;position:relative;display:flex !important;height:100%;position:relative;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;color:var(--revo-grid-text);display:flex;flex-direction:column;width:100%;height:100%}revo-grid[theme*=dark]{--revo-grid-background:#212529;--revo-grid-foreground:#fff;--revo-grid-text:rgba(255, 255, 255, 0.9);--revo-grid-divider:#505050;--revo-grid-border:rgba(255, 255, 255, 0.2);--revo-grid-filter-panel-bg:#212529;--revo-grid-filter-panel-border:#505050;--revo-grid-filter-panel-input-bg:#343a40;--revo-grid-filter-panel-divider:#505050;--revo-grid-header-bg:#343a40;--revo-grid-header-color:#fff;--revo-grid-header-border:#505050;--revo-grid-cell-border:#424242;--revo-grid-focused-bg:rgba(52, 58, 64, 0.5);--revo-grid-row-hover:rgba(80, 80, 80, 0.5);--revo-grid-row-headers-bg:rgba(52, 58, 64, 0.8);--revo-grid-row-headers-color:rgba(255, 255, 255, 0.8);--revo-grid-cell-disabled-bg:rgba(255, 255, 255, 0.07)}revo-grid::before{content:\"\";position:absolute;left:0;top:0;width:100%;height:16px;background:var(--rv-grid-fixed-top-shadow, linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%));pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:100;transform:translateY(var(--header-shadow-offset, 0))}revo-grid.header-shadow::before{opacity:1}revo-grid revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid revogr-header .rgHeaderCell.sortable:hover{background-color:var(--revo-grid-row-hover)}revo-grid revogr-header .rgHeaderCell.focused-cell{background:var(--revo-grid-focused-bg)}revo-grid .footer-wrapper revogr-data{box-shadow:0 -1px 0 var(--revo-grid-cell-border)}revo-grid revogr-viewport-scroll.colPinStart,revo-grid revogr-viewport-scroll.colPinEnd{box-shadow:none}revo-grid revogr-data .rgRow{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset}revo-grid revogr-data .rgCell{color:var(--revo-grid-text)}revo-grid revogr-data .rgCell.disabled{background-color:var(--revo-grid-cell-disabled-bg)}revo-grid .revo-grid-border-line{position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid var(--revo-grid-cell-border);border-radius:inherit;pointer-events:none;z-index:100}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid var(--revo-grid-primary-transparent);border-bottom:4px solid var(--revo-grid-primary-transparent);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:var(--revo-grid-background);padding:4px;border-radius:4px;box-shadow:0 1px 10px var(--revo-grid-border);white-space:nowrap;text-decoration:none;color:var(--revo-grid-text);letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%;flex-shrink:0}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{position:relative;max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid .viewports .header-placeholder{visibility:hidden;height:var(--rg-header-row-height, 45px)}revo-grid .viewports::before{content:\"\";position:absolute;top:0;left:0;width:16px;height:100%;background:linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%);background:var(--rv-grid-fixed-left-shadow);pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10;transform:translateX(var(--pin-start-shadow-offset, 0))}revo-grid .viewports::after{content:\"\";position:absolute;top:0;right:0;width:16px;height:100%;background:linear-gradient(270deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%);background:var(--rv-grid-fixed-right-shadow);pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10;transform:translateX(var(--pin-end-shadow-offset, 0))}revo-grid .viewports.pin-start-shadow::before{opacity:1}revo-grid .viewports.pin-end-shadow::after{opacity:1}revo-grid .viewports revogr-viewport-scroll.colPinStart,revo-grid .viewports revogr-viewport-scroll.colPinEnd{flex:0 0 auto}revo-grid .viewports revogr-viewport-scroll.rgCol{flex:0 1 auto;min-width:0}revo-grid .viewports revogr-viewport-scroll:not(.grouping-overlay-viewport){pointer-events:none}revo-grid .viewports revogr-viewport-scroll:not(.grouping-overlay-viewport) .header-wrapper{pointer-events:auto}revo-grid .viewports revogr-viewport-scroll:not(.grouping-overlay-viewport) .content-wrapper .rgRow{pointer-events:auto}revo-grid .viewports revogr-viewport-scroll:not(.grouping-overlay-viewport) .content-wrapper .rgRow.groupingRow{pointer-events:none}revo-grid .viewports revogr-viewport-scroll.grouping-overlay-viewport{position:absolute;top:0;left:0;right:0;bottom:0}revo-grid .viewports revogr-viewport-scroll.grouping-overlay-viewport .grouping-header-placeholder{visibility:hidden}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:var(--revo-grid-background);border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 var(--revo-grid-shadow);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:var(--revo-grid-foreground);position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:var(--revo-grid-divider);pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:var(--revo-grid-divider);pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}revo-grid .empty-placeholder{position:absolute;top:var(--rg-empty-top, var(--rg-header-row-height, 45px));left:0;right:0;bottom:var(--rg-empty-bottom, 0);display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none;background:var(--rg-empty-background, #fff)}revo-grid .empty-placeholder [slot=empty]{display:block !important}";
+
+const RevoGridComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.contentsizechanged = index.createEvent(this, "contentsizechanged", 7);
+        this.beforeedit = index.createEvent(this, "beforeedit", 7);
+        this.beforerangeedit = index.createEvent(this, "beforerangeedit", 7);
+        this.afteredit = index.createEvent(this, "afteredit", 7);
+        this.beforeautofill = index.createEvent(this, "beforeautofill", 7);
+        this.beforerange = index.createEvent(this, "beforerange", 7);
+        this.afterfocus = index.createEvent(this, "afterfocus", 7);
+        this.roworderchanged = index.createEvent(this, "roworderchanged", 7);
+        this.beforesorting = index.createEvent(this, "beforesorting", 7);
+        this.beforesourcesortingapply = index.createEvent(this, "beforesourcesortingapply", 7);
+        this.beforesortingapply = index.createEvent(this, "beforesortingapply", 7);
+        this.rowdragstart = index.createEvent(this, "rowdragstart", 7);
+        this.headerclick = index.createEvent(this, "headerclick", 7);
+        this.beforecellfocus = index.createEvent(this, "beforecellfocus", 7);
+        this.cellclick = index.createEvent(this, "cellclick", 7);
+        this.beforefocuslost = index.createEvent(this, "beforefocuslost", 7);
+        this.beforesourceset = index.createEvent(this, "beforesourceset", 7);
+        this.beforeanysource = index.createEvent(this, "beforeanysource", 7);
+        this.aftersourceset = index.createEvent(this, "aftersourceset", 7);
+        this.afteranysource = index.createEvent(this, "afteranysource", 7);
+        this.beforecolumnsset = index.createEvent(this, "beforecolumnsset", 7);
+        this.beforecolumnapplied = index.createEvent(this, "beforecolumnapplied", 7);
+        this.aftercolumnsset = index.createEvent(this, "aftercolumnsset", 7);
+        this.beforefilterapply = index.createEvent(this, "beforefilterapply", 7);
+        this.beforefiltertrimmed = index.createEvent(this, "beforefiltertrimmed", 7);
+        this.beforetrimmed = index.createEvent(this, "beforetrimmed", 7);
+        this.aftertrimmed = index.createEvent(this, "aftertrimmed", 7);
+        this.viewportscroll = index.createEvent(this, "viewportscroll", 7);
+        this.beforeexport = index.createEvent(this, "beforeexport", 7);
+        this.beforeeditstart = index.createEvent(this, "beforeeditstart", 7);
+        this.aftercolumnresize = index.createEvent(this, "aftercolumnresize", 7);
+        this.beforerowdefinition = index.createEvent(this, "beforerowdefinition", 7);
+        this.filterconfigchanged = index.createEvent(this, "filterconfigchanged", 7);
+        this.sortingconfigchanged = index.createEvent(this, "sortingconfigchanged", 7);
+        this.rowheaderschanged = index.createEvent(this, "rowheaderschanged", 7);
+        this.beforegridrender = index.createEvent(this, "beforegridrender", 7);
+        this.aftergridrender = index.createEvent(this, "aftergridrender", 7);
+        this.afterdatarendered = index.createEvent(this, "afterdatarendered", 7);
+        this.aftergridinit = index.createEvent(this, "aftergridinit", 7);
+        this.additionaldatachanged = index.createEvent(this, "additionaldatachanged", 7);
+        this.afterthemechanged = index.createEvent(this, "afterthemechanged", 7);
+        this.created = index.createEvent(this, "created", 7);
+        /**
+         * Defines how many rows/columns should be rendered outside visible area.
+         */
+        this.frameSize = 1;
+        /**
+         * Indicates default rgRow size.
+         * By default 0, means theme package size will be applied
+         *
+         * Alternatively you can use `rowSize` to reset viewport
+         */
+        this.rowSize = 0;
+        /** Indicates default column size. */
+        this.colSize = 100;
+        /** When true, user can range selection. */
+        this.range = false;
+        /** When true, grid in read only mode. */
+        this.readonly = false;
+        /** When true, columns are resizable. */
+        this.resize = false;
+        /** When true cell focus appear. */
+        this.canFocus = true;
+        /** When true enable clipboard. */
+        this.useClipboard = true;
+        /**
+         * Columns - defines an array of grid columns.
+         * Can be column or grouped column.
+         */
+        this.columns = [];
+        /**
+         * Source - defines main data source.
+         * Can be an Object or 2 dimensional array([][]);
+         * Keys/indexes referenced from columns Prop.
+         */
+        this.source = [];
+        /** Internal state to track if source is empty for triggering re-render */
+        this.isSourceEmpty = true;
+        /** Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. */
+        this.pinnedTopSource = [];
+        /** Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. */
+        this.pinnedBottomSource = [];
+        /** Custom row properies to be applied. See `RowDefinition` for more info. */
+        this.rowDefinitions = [];
+        /** Custom editors register. */
+        this.editors = {};
+        /**
+         * Apply changes in editor when closed except 'Escape' cases.
+         * If custom editor in use method getValue required.
+         * Check interfaces.d.ts `EditorBase` for more info.
+         */
+        this.applyOnClose = false;
+        /**
+         * Custom grid plugins. Can be added or removed at runtime.
+         * Every plugin should be inherited from BasePlugin class.
+         *
+         * For more details check [Plugin guide](https://rv-grid.com/guide/plugin/)
+         */
+        this.plugins = [];
+        /**
+         * Column Types Format.
+         * Every type represent multiple column properties.
+         * Types will be merged but can be replaced with column properties.
+         * Types were made as separate objects to be reusable per multiple columns.
+         */
+        this.columnTypes = {};
+        /** Theme name. */
+        this.theme = 'default';
+        /**
+         * Row class property mapping.
+         * Map custom classes to rows from row object data.
+         * Define this property in rgRow object and this will be mapped as rgRow class.
+         */
+        this.rowClass = '';
+        /**
+         * Autosize config.
+         * Enables columns autoSize.
+         * For more details check `autoSizeColumn` plugin.
+         * By default disabled, hence operation is not performance efficient.
+         * `true` to enable with default params (double header separator click for autosize).
+         * Or define config. See `AutoSizeColumnConfig` for more details.
+         */
+        this.autoSizeColumn = false;
+        /**
+         * Enables filter plugin.
+         * Can be boolean.
+         * Or can be filter collection See `FilterCollection` for more info.
+         */
+        this.filter = false;
+        /**
+         * Enable column move plugin.
+         */
+        this.canMoveColumns = false;
+        /**
+         * Trimmed rows.
+         * Functionality which allows to hide rows from main data set.
+         * `trimmedRows` are physical `rgRow` indexes to hide.
+         */
+        this.trimmedRows = {};
+        /**
+         * Enable export plugin.
+         */
+        this.exporting = false;
+        /**
+         * Stretch strategy for columns by `StretchColumn` plugin.
+         * For example if there are more space on the right last column size would be increased.
+         */
+        this.stretch = false;
+        /**
+         * Additional data to be passed to plugins, renders or editors.
+         * For example if you need to pass Vue component instance.
+         */
+        this.additionalData = {};
+        /**
+         * Disable lazy rendering mode for the `X axis`.
+         * Use when not many columns present and you don't need rerenader cells during scroll.
+         * Can be used for initial rendering performance improvement.
+         */
+        this.disableVirtualX = false;
+        /**
+         * Disable lazy rendering mode for the `Y axis`.
+         * Use when not many rows present and you don't need rerenader cells during scroll.
+         * Can be used for initial rendering performance improvement.
+         */
+        this.disableVirtualY = false;
+        /**
+         * Please only hide the attribution if you are subscribed to Pro version
+         */
+        this.hideAttribution = false;
+        /**
+         * Prevent rendering until job is done.
+         * Can be used for initial rendering performance improvement.
+         * When several plugins require initial rendering this will prevent double initial rendering.
+         */
+        this.jobsBeforeRender = [];
+        /**
+         * Register new virtual node inside of grid.
+         * Used for additional items creation such as plugin elements.
+         * Should be set before grid render inside of plugins.
+         * Can return VNode result of h() function or a function that returns VNode.
+         * Function can be used for performance improvement and additional renders.
+         */
+        this.registerVNode = [];
+        /**
+         * Enable accessibility. If disabled, the grid will not be accessible.
+         * @default true
+         */
+        this.accessible = true;
+        /**
+         * Enable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left.
+         * @default false
+         */
+        this.rtl = false;
+        /**
+         * Disable native drag&drop plugin.
+         */
+        this.canDrag = true;
+        /**
+         * Show scrollbars. When false, scrollbars will be hidden.
+         * @default true
+         */
+        this.showScrollbar = true;
+        /**
+         * Hide empty placeholder during initial loading.
+         * Set to true when loading data asynchronously.
+         * @default false
+         */
+        this.hideEmpty = false;
+        /**
+         * Disable scrolling. When true, the grid will not respond to scroll events.
+         * @default false
+         */
+        this.disableScroll = false;
+        /**
+         * Auto scroll to focused cell. When true, the grid will automatically scroll to make the focused cell visible.
+         * @default false
+         */
+        this.autoScrollToFocus = false;
+        this.columnsUpdateNonce = 0;
+        this.extraElements = [];
+        this.pluginService = new PluginService();
+        this.viewport = null;
+        this.isInited = false;
+        this.columnsVersion = 0;
+        this.columnsUpdateToken = 0;
+        this.dataUpdateToken = 0;
+        // 暂时保留，后续可能使用
+        this._hasGroupingValue = false;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Refreshes data viewport.
+     * Can be specific part as rgRow or pinned rgRow or 'all' by default.
+     */
+    async refresh(type = 'all') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        this.dataProvider.refresh(type);
+    }
+    /**
+     * Refreshes data at specified cell.
+     * Useful for performance optimization.
+     * No viewport update will be triggered.
+     *
+     * @example
+     * const grid = document.querySelector('revo-grid');
+     * grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
+     */
+    async setDataAt({ row, col, colType = 'rgCol', rowType = 'rgRow', val, skipDataUpdate = false }) {
+        var _a;
+        if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
+            const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
+            if (typeof columnProp !== 'undefined') {
+                this.dataProvider.setCellData({
+                    type: rowType,
+                    rowIndex: row,
+                    prop: columnProp,
+                    val,
+                }, false);
+            }
+        }
+        const dataElement = this.element.querySelector(`revogr-data[type="${rowType}"][col-type="${colType}"]`);
+        return dataElement === null || dataElement === void 0 ? void 0 : dataElement.updateCell({
+            row,
+            col,
+        });
+    }
+    /**
+     * Scrolls viewport to specified row by index.
+     */
+    async scrollToRow(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        const y = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgRow',
+        });
+        await this.scrollToCoordinate({ y });
+    }
+    /**
+     * Scrolls viewport to specified column by index.
+     */
+    async scrollToColumnIndex(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgCol',
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /**
+     * Scrolls viewport to specified column by prop
+     */
+    async scrollToColumnProp(prop, dimension = 'rgCol') {
+        if (!this.dimensionProvider || !this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        const coordinate = this.columnProvider.getColumnIndexByProp(prop, dimension);
+        if (coordinate < 0) {
+            // already on the screen
+            return;
+        }
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension,
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /**
+     * Scrolls viewport to row by property value
+     * @param propName - Property name to search for (e.g., 'id', 'name')
+     * @param value - Value to match
+     * @param type - Row type, default 'rgRow'
+     * @returns true if row found and scrolled, false otherwise
+     */
+    async scrollToRowByProp(propName, value, type = 'rgRow') {
+        if (!this.dimensionProvider || !this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const dataStore = this.dataProvider.stores[type];
+        if (!dataStore) {
+            return false;
+        }
+        const source = dataStore.store.get('source');
+        // 查找目标行的物理索引
+        const physicalIndex = source.findIndex((row) => row[propName] === value);
+        if (physicalIndex < 0) {
+            return false;
+        }
+        // 检查行是否可见
+        let items = dataStore.store.get('items');
+        let virtualIndex = items.indexOf(physicalIndex);
+        // 如果不可见，尝试展开父节点
+        if (virtualIndex < 0) {
+            const targetRow = source[physicalIndex];
+            // 先展开分组父节点（分组在外层）
+            await this.expandGroupAncestors(physicalIndex, source, dataStore);
+            // 重新检查
+            items = dataStore.store.get('items');
+            virtualIndex = items.indexOf(physicalIndex);
+            // 再展开树形父节点
+            if (virtualIndex < 0) {
+                await this.expandTreeAncestors(targetRow, source);
+                // 最后检查
+                items = dataStore.store.get('items');
+                virtualIndex = items.indexOf(physicalIndex);
+            }
+        }
+        if (virtualIndex < 0) {
+            console.warn(`Row with ${propName}=${value} is hidden and cannot be expanded.`);
+            return false;
+        }
+        await this.scrollToRow(virtualIndex);
+        return true;
+    }
+    /**
+     * 展开树形结构的所有祖先节点
+     */
+    async expandTreeAncestors(targetRow, source) {
+        var _a, _b, _c;
+        const treePlugin = this.pluginService.getByClass(grouping_row_expand_service.TreeDataPlugin);
+        if (!treePlugin || !((_a = this.additionalData) === null || _a === void 0 ? void 0 : _a.tree)) {
+            return;
+        }
+        const { idField = 'id', parentIdField = 'parentId', rootParentId = '' } = this.additionalData.tree;
+        // 收集所有祖先节点
+        const ancestors = [];
+        let currentParentId = targetRow[parentIdField];
+        while (currentParentId !== undefined && currentParentId !== rootParentId) {
+            const parentRow = source.find((row) => row[idField] === currentParentId);
+            if (!parentRow)
+                break;
+            ancestors.unshift(parentRow);
+            currentParentId = parentRow[parentIdField];
+        }
+        if (ancestors.length === 0) {
+            return;
+        }
+        // 展开所有祖先
+        const expandedRowIds = treePlugin.expandedRowIds;
+        for (const ancestor of ancestors) {
+            const ancestorId = ancestor[idField];
+            if (!(expandedRowIds === null || expandedRowIds === void 0 ? void 0 : expandedRowIds.has(ancestorId))) {
+                expandedRowIds === null || expandedRowIds === void 0 ? void 0 : expandedRowIds.add(ancestorId);
+            }
+        }
+        // 更新树形结构
+        (_c = (_b = treePlugin).updateTree) === null || _c === void 0 ? void 0 : _c.call(_b);
+        await new Promise(resolve => setTimeout(resolve, 50));
+    }
+    /**
+     * 展开分组的所有父分组
+     */
+    async expandGroupAncestors(physicalIndex, source, dataStore) {
+        var _a, _b, _c;
+        const groupingPlugin = this.pluginService.getByClass(grouping_row_expand_service.GroupingRowPlugin);
+        if (!groupingPlugin || !((_a = this.grouping) === null || _a === void 0 ? void 0 : _a.props)) {
+            return;
+        }
+        const GROUP_EXPANDED = '__rvgr-group-expanded';
+        const PSEUDO_GROUP_ITEM_VALUE = '__rvgr-group-value';
+        const GROUP_CHILDREN_INDICES = '__rvgr-children';
+        const TRIMMED_GROUPING = 'grouping';
+        const isGroupRow = (row) => row && row['__rvgr-depth'] !== undefined;
+        // 查找所有包含目标行的折叠分组
+        const allContainingGroups = [];
+        const groupsToExpand = [];
+        for (let i = physicalIndex - 1; i >= 0; i--) {
+            const row = source[i];
+            if (!isGroupRow(row)) {
+                continue;
+            }
+            // 检查此分组是否包含目标行
+            if (this.isRowInGroup(i, physicalIndex, source, row[PSEUDO_GROUP_ITEM_VALUE], row[GROUP_CHILDREN_INDICES])) {
+                allContainingGroups.unshift(i);
+                if (!row[GROUP_EXPANDED]) {
+                    groupsToExpand.unshift(i);
+                }
+            }
+        }
+        const targetGroupingTrimmed = !!((_c = (_b = dataStore.store.get('trimmed')) === null || _b === void 0 ? void 0 : _b[TRIMMED_GROUPING]) === null || _c === void 0 ? void 0 : _c[physicalIndex]);
+        // 修复场景：目标行仍被 grouping trimmed，但路径分组都标记为已展开。
+        // 这种情况下重放一次 doExpand，强制同步 grouping trimmed 状态。
+        if (groupsToExpand.length === 0 && targetGroupingTrimmed && allContainingGroups.length > 0) {
+            groupsToExpand.push(...allContainingGroups);
+        }
+        if (groupsToExpand.length === 0) {
+            return;
+        }
+        // 动态导入展开服务
+        const { doExpand } = await Promise.resolve().then(function () { return require('./tree-data.plugin-BRjwZtxI.js'); }).then(function (n) { return n.grouping_row_expand_service; });
+        // 按层级从外到内展开
+        for (const groupPhysicalIndex of groupsToExpand) {
+            const currentSource = dataStore.store.get('source');
+            const currentItems = dataStore.store.get('items');
+            const vIndex = currentItems.indexOf(groupPhysicalIndex);
+            if (vIndex < 0) {
+                continue;
+            }
+            // 标记为展开
+            currentSource[groupPhysicalIndex][GROUP_EXPANDED] = true;
+            // 计算展开后的状态
+            const result = doExpand(vIndex, currentSource, currentItems);
+            if (result.items) {
+                dataStore.store.set('items', result.items);
+            }
+            // 更新 trimmed
+            const currentTrimmed = dataStore.store.get('trimmed');
+            const newTrimmed = Object.assign(Object.assign({}, currentTrimmed[TRIMMED_GROUPING]), result.trimmed);
+            await this.addTrimmed(newTrimmed, TRIMMED_GROUPING);
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+    }
+    /**
+     * 检查目标行是否在指定分组内
+     */
+    isRowInGroup(groupIndex, targetIndex, source, groupValue, groupChildrenIndices) {
+        if (Array.isArray(groupChildrenIndices)) {
+            return groupChildrenIndices.includes(targetIndex);
+        }
+        const isGroupRow = (row) => row && row['__rvgr-depth'] !== undefined;
+        const PSEUDO_GROUP_ITEM_VALUE = '__rvgr-group-value';
+        for (let j = groupIndex + 1; j < source.length; j++) {
+            if (j === targetIndex) {
+                return true;
+            }
+            const nextRow = source[j];
+            if (isGroupRow(nextRow)) {
+                const nextValue = nextRow[PSEUDO_GROUP_ITEM_VALUE];
+                if (!nextValue || !nextValue.startsWith(groupValue + ',')) {
+                    break;
+                }
+            }
+        }
+        return false;
+    }
+    /** Update columns */
+    async updateColumns(cols) {
+        var _a;
+        (_a = this.columnProvider) === null || _a === void 0 ? void 0 : _a.updateColumns(cols);
+    }
+    /** Add trimmed by type */
+    async addTrimmed(trimmed, trimmedType = 'external', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const event = this.beforetrimmed.emit({
+            trimmed,
+            trimmedType,
+            type,
+        });
+        if (event.defaultPrevented) {
+            return event;
+        }
+        this.dataProvider.setTrimmed({ [trimmedType]: event.detail.trimmed }, type);
+        this.aftertrimmed.emit();
+        return event;
+    }
+    /**  Scrolls view port to coordinate */
+    async scrollToCoordinate(cell) {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToCell(cell);
+    }
+    /**  Open editor for cell. */
+    async setCellEdit(rgRow, prop, rowSource = 'rgRow') {
+        var _a;
+        const rgCol = headerCellRenderer.getColumnByProp(this.columns, prop);
+        if (!rgCol) {
+            return;
+        }
+        await dimension_helpers.timeout();
+        const colGroup = rgCol.pin || 'rgCol';
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
+    }
+    /**  Set focus range. */
+    async setCellsFocus(cellStart = { x: 0, y: 0 }, cellEnd = { x: 0, y: 0 }, colType = 'rgCol', rowType = 'rgRow') {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setFocus(colType, rowType, cellStart, cellEnd);
+    }
+    /**  Get data from source */
+    async getSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return this.dataProvider.stores[type].store.get('source');
+    }
+    /**
+     * Get data from visible part of source
+     * Trimmed/filtered rows will be excluded
+     * @param type - type of source
+     */
+    async getVisibleSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return dimension_helpers.getVisibleSourceItem(this.dataProvider.stores[type].store);
+    }
+    /**
+     * Provides access to rows internal store observer
+     * Can be used for plugin support
+     * @param type - type of source
+     */
+    async getSourceStore(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return this.dataProvider.stores[type].store;
+    }
+    /**
+     * Provides access to column internal store observer
+     * Can be used for plugin support
+     * @param type - type of column
+     */
+    async getColumnStore(type = 'rgCol') {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        return this.columnProvider.stores[type].store;
+    }
+    /**
+     * Update column sorting
+     * @param column - column prop and cellCompare
+     * @param order - order to apply
+     * @param additive - if false will replace current order
+     *
+     * later passed to SortingPlugin
+     */
+    async updateColumnSorting(column, order, additive) {
+        this.sortingconfigchanged.emit({
+            columns: [{
+                    prop: column.prop,
+                    order,
+                    cellCompare: column.cellCompare,
+                }],
+            additive,
+        });
+    }
+    /**
+     * Clears column sorting
+     */
+    async clearSorting() {
+        this.sortingconfigchanged.emit({
+            columns: [],
+        });
+    }
+    /**
+     * Receive all columns in data source
+     */
+    async getColumns() {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        return this.columnProvider.getColumns();
+    }
+    /**
+     * Clear current grid focus. Grid has no longer focus on it.
+     */
+    async clearFocus() {
+        var _a, _b;
+        const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        const event = this.beforefocuslost.emit(focused);
+        if (event.defaultPrevented) {
+            return;
+        }
+        (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.clearAll();
+    }
+    /**
+     * Get all active plugins instances
+     */
+    async getPlugins() {
+        return this.pluginService.get();
+    }
+    /**
+     * Get the currently focused cell.
+     */
+    async getFocused() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused()) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Get size of content
+     * Including all pinned data
+     */
+    async getContentSize() {
+        var _a;
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        return (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.getFullSize();
+    }
+    /**
+     * Get the currently selected Range.
+     */
+    async getSelectedRange() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange()) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Refresh extra elements. Triggers re-rendering of extra elements and functions.
+     * Part of extraElements and registerVNode methods.
+     * Useful for plugins.
+     */
+    async refreshExtraElements() {
+        var _a;
+        (_a = this.extraService) === null || _a === void 0 ? void 0 : _a.refresh();
+    }
+    /**
+     * Get all providers for grid
+     * Useful for external grid integration
+     */
+    async getProviders() {
+        return this.getPluginData();
+    }
+    /**
+     * Lock scrolling. Prevents the grid from responding to scroll events.
+     */
+    async lockScroll() {
+        this.disableScroll = true;
+    }
+    /**
+     * Unlock scrolling. Allows the grid to respond to scroll events.
+     */
+    async unlockScroll() {
+        this.disableScroll = false;
+    }
+    /**
+     * Get current scroll lock state.
+     */
+    async isScrollLocked() {
+        return this.disableScroll;
+    }
+    /**
+     * Hide rows by ID field value
+     * @param ids - Array of ID values to hide
+     * @param idField - ID field name, default 'id'
+     * @param trimmedType - Trimmed type identifier, default 'byId'
+     * @param type - Row type, default 'rgRow'
+     * @returns Event with trimmed row indexes
+     */
+    async hideRowsById(ids, idField = 'id', trimmedType = 'byId', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const source = await this.getSource(type);
+        const trimmed = {};
+        // Find physical indexes by ID
+        source.forEach((row, index) => {
+            if (ids.includes(row[idField])) {
+                trimmed[index] = true;
+            }
+        });
+        return this.addTrimmed(trimmed, trimmedType, type);
+    }
+    /**
+     * Show rows by ID field value (remove from trimmed)
+     * @param ids - Array of ID values to show, if empty will show all rows
+     * @param idField - ID field name, default 'id'
+     * @param trimmedType - Trimmed type identifier, default 'byId'
+     * @param type - Row type, default 'rgRow'
+     */
+    async showRowsById(ids = [], idField = 'id', trimmedType = 'byId', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        if (ids.length === 0) {
+            // Clear all trimmed rows of this type
+            return this.addTrimmed({}, trimmedType, type);
+        }
+        const source = await this.getSource(type);
+        const currentTrimmed = this.dataProvider.stores[type].store.get('trimmed');
+        const typeTrimmed = currentTrimmed[trimmedType] || {};
+        const newTrimmed = Object.assign({}, typeTrimmed);
+        // Remove specified IDs from trimmed
+        source.forEach((row, index) => {
+            if (ids.includes(row[idField]) && newTrimmed[index]) {
+                delete newTrimmed[index];
+            }
+        });
+        return this.addTrimmed(newTrimmed, trimmedType, type);
+    }
+    /**
+     * Delete rows by ID field value (physically remove from source)
+     * @param ids - Array of ID values to delete
+     * @param idField - ID field name, default 'id'
+     * @param type - Row type, default 'rgRow'
+     * @returns New source array after deletion
+     */
+    async deleteRowsById(ids, idField = 'id', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const source = await this.getSource(type);
+        const newSource = source.filter((row) => !ids.includes(row[idField]));
+        // Update the appropriate source property
+        switch (type) {
+            case 'rgRow':
+                this.source = newSource;
+                break;
+            case 'rowPinStart':
+                this.pinnedTopSource = newSource;
+                break;
+            case 'rowPinEnd':
+                this.pinnedBottomSource = newSource;
+                break;
+        }
+        return newSource;
+    }
+    /**
+     * Delete rows by physical indexes
+     * @param indexes - Array of physical row indexes to delete
+     * @param type - Row type, default 'rgRow'
+     * @returns New source array after deletion
+     */
+    async deleteRowsByIndexes(indexes, type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const source = await this.getSource(type);
+        const indexSet = new Set(indexes);
+        const newSource = source.filter((_, index) => !indexSet.has(index));
+        // Update the appropriate source property
+        switch (type) {
+            case 'rgRow':
+                this.source = newSource;
+                break;
+            case 'rowPinStart':
+                this.pinnedTopSource = newSource;
+                break;
+            case 'rowPinEnd':
+                this.pinnedBottomSource = newSource;
+                break;
+        }
+        return newSource;
+    }
+    mousedownHandle(event) {
+        const screenX = events.getPropertyFromEvent(event, 'screenX');
+        const screenY = events.getPropertyFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        this.clickTrackForFocusClear = screenX + screenY;
+    }
+    /**
+     * To keep your elements from losing focus use mouseup/touchend e.preventDefault();
+     */
+    async mouseupHandle(event) {
+        var _a;
+        const screenX = events.getPropertyFromEvent(event, 'screenX');
+        const screenY = events.getPropertyFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        if (event.defaultPrevented) {
+            return;
+        }
+        const pos = screenX + screenY;
+        // detect if mousemove then do nothing
+        if (Math.abs(((_a = this.clickTrackForFocusClear) !== null && _a !== void 0 ? _a : 0) - pos) > 10) {
+            return;
+        }
+        // Check if action finished inside the document
+        // if event prevented, or it is current table don't clear focus
+        const path = event.composedPath();
+        if (!path.includes(this.element) &&
+            !(this.element.shadowRoot && path.includes(this.element.shadowRoot))) {
+            // Perform actions if the click is outside the component
+            await this.clearFocus();
+        }
+    }
+    // #endregion
+    // #region Listeners
+    /** Drag events */
+    onRowDragStarted(e) {
+        var _a;
+        const dragStart = this.rowdragstart.emit(e.detail);
+        if (dragStart.defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.start(this.element, Object.assign(Object.assign({}, e.detail), dragStart.detail));
+    }
+    onRowDragEnd() {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
+    }
+    onRowOrderChange(e) {
+        var _a;
+        (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.changeOrder(e.detail);
+    }
+    onRowDrag({ detail }) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
+    }
+    onRowMouseMove(e) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
+    }
+    async onCellEdit(e) {
+        var _a;
+        const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
+        await dimension_helpers.timeout();
+        // apply data
+        if (!defaultPrevented) {
+            (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.setCellData(detail);
+            // @feature: incrimental update for cells
+            // this.dataProvider.setCellData(detail, false);
+            // await this.setDataAt({
+            //   row: detail.rowIndex,
+            //   col: detail.colIndex,
+            //   rowType: detail.type,
+            //   colType: detail.colType,
+            // });
+            this.afteredit.emit(detail);
+        }
+    }
+    onRangeEdit(e) {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        this.dataProvider.setRangeData(detail.data, detail.type);
+        this.afteredit.emit(detail);
+    }
+    onRangeChanged(e) {
+        const beforeange = this.beforerange.emit(e.detail);
+        if (beforeange.defaultPrevented) {
+            e.preventDefault();
+        }
+        const beforeFill = this.beforeautofill.emit(beforeange.detail);
+        if (beforeFill.defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onRowDropped(e) {
+        // e.cancelBubble = true;
+        const { defaultPrevented } = this.roworderchanged.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onHeaderClick(e) {
+        const { defaultPrevented } = this.headerclick.emit(Object.assign(Object.assign({}, e.detail.column), { originalEvent: e.detail.originalEvent }));
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onCellFocus(e) {
+        const { defaultPrevented } = this.beforecellfocus.emit(e.detail);
+        if (!this.canFocus || defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onCellClick(e) {
+        this.cellclick.emit(e.detail);
+    }
+    // #endregion
+    // #region Watchers
+    columnTypesChanged() {
+        // Column format change will trigger column structure update
+        this.columnChanged(this.columns);
+    }
+    columnChanged(newVal = [], _prevVal = undefined, __watchName = 'columns', init = false) {
+        if (!this.dimensionProvider || !this.columnProvider || (newVal === null || newVal === void 0 ? void 0 : newVal.length) < 1) {
+            return;
+        }
+        const updateToken = ++this.columnsUpdateToken;
+        this.element.setAttribute('data-columns-updating', String(updateToken));
+        // console.log('[columns] update start', {
+        //   token: updateToken,
+        //   init,
+        //   time: performance.now(),
+        // });
+        const columnGather = headerCellRenderer.getColumns(newVal, 0, this.columnTypes);
+        // console.log('[columns] update snapshot', {
+        //   token: updateToken,
+        //   init,
+        //   counts: {
+        //     colPinStart: columnGather.columns.colPinStart.length,
+        //     rgCol: columnGather.columns.rgCol.length,
+        //     colPinEnd: columnGather.columns.colPinEnd.length,
+        //   },
+        //   time: performance.now(),
+        // });
+        const beforeSetEvent = this.beforecolumnsset.emit(columnGather);
+        if (beforeSetEvent.defaultPrevented) {
+            console.log('[columns] update prevented beforeSet', {
+                token: updateToken,
+                time: performance.now(),
+            });
+            this.finishColumnsUpdate(updateToken);
+            return;
+        }
+        const version = ++this.columnsVersion;
+        // 在应用新列之前，先设置表格总宽度
+        this.dimensionProvider.setGridTotalWidth(this.element.clientWidth);
+        // 同步更新所有 viewport 的数据
+        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX, init, version);
+        const beforeApplyEvent = this.beforecolumnapplied.emit(columnGather);
+        if (beforeApplyEvent.defaultPrevented) {
+            console.log('[columns] update prevented beforeApply', {
+                token: updateToken,
+                time: performance.now(),
+            });
+            this.finishColumnsUpdate(updateToken);
+            return;
+        }
+        const columns = this.columnProvider.setColumns(beforeApplyEvent.detail, version);
+        this.finishColumnsUpdate(updateToken);
+        this.aftercolumnsset.emit({
+            columns,
+            order: Object.entries(beforeApplyEvent.detail.sort).reduce((acc, [prop, column]) => {
+                acc[prop] = column.order;
+                return acc;
+            }, {}),
+        });
+    }
+    finishColumnsUpdate(token) {
+        requestAnimationFrame(() => {
+            const current = this.element.getAttribute('data-columns-updating');
+            if (current === String(token)) {
+                this.syncMainViewportWidthAfterColumnsUpdate();
+                this.element.removeAttribute('data-columns-updating');
+                this.element.dispatchEvent(new CustomEvent('columnsupdateend', { detail: { token } }));
+                this.columnsUpdateNonce++;
+                console.log('[columns] update end', {
+                    token,
+                    time: performance.now(),
+                });
+            }
+        });
+    }
+    /**
+     * Column updates can change pin area width and shrink/grow main viewport.
+     * Re-sync rgCol client/virtual size before releasing columns update lock
+     * to avoid one-frame stale visible-column range.
+     */
+    syncMainViewportWidthAfterColumnsUpdate() {
+        if (!this.viewportProvider || !this.dimensionProvider) {
+            return;
+        }
+        const mainViewport = this.element.querySelector('revogr-viewport-scroll.rgCol');
+        if (!(mainViewport instanceof HTMLElement)) {
+            return;
+        }
+        const nextClientSize = mainViewport.clientWidth;
+        if (!nextClientSize) {
+            return;
+        }
+        const rgColViewport = this.viewportProvider.stores.rgCol.store;
+        const patch = {};
+        const currentClientSize = rgColViewport.get('clientSize');
+        if (currentClientSize !== nextClientSize) {
+            patch.clientSize = nextClientSize;
+        }
+        if (!this.disableVirtualX) {
+            const currentVirtualSize = rgColViewport.get('virtualSize');
+            if (currentVirtualSize !== nextClientSize) {
+                patch.virtualSize = nextClientSize;
+            }
+        }
+        if (Object.keys(patch).length > 0) {
+            this.viewportProvider.setViewport('rgCol', patch, { preserveItems: true });
+        }
+        this.dimensionProvider.setViewPortCoordinate({
+            type: 'rgCol',
+            force: true,
+        });
+    }
+    finishDataUpdate(token) {
+        requestAnimationFrame(() => {
+            const current = this.element.getAttribute('data-rows-updating');
+            if (current === String(token)) {
+                this.element.removeAttribute('data-rows-updating');
+                this.element.dispatchEvent(new CustomEvent('dataupdateend', { detail: { token } }));
+            }
+        });
+    }
+    disableVirtualXChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.columnChanged(this.columns);
+    }
+    rowSizeChanged(s) {
+        if (!this.dimensionProvider) {
+            return;
+        }
+        // clear existing data
+        this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
+        this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, 'rowSize', true);
+    }
+    themeChanged(t, _, __ = 'theme', init = false) {
+        if (!this.dimensionProvider) {
+            return;
+        }
+        this.themeService.register(t);
+        this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+        this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
+        // if theme change we need to reapply row size and reset viewport
+        if (!init) {
+            // clear existing data
+            this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+            this.rowDefChanged(
+            // for cases when some custom size present and not
+            this.rowDefinitions, this.rowDefinitions, 'theme', true);
+        }
+        this.afterthemechanged.emit(t);
+    }
+    dataSourceChanged(newVal = [], _, watchName) {
+        if (!this.dataProvider) {
+            return;
+        }
+        const dataToken = ++this.dataUpdateToken;
+        this.element.setAttribute('data-rows-updating', String(dataToken));
+        // 标记正在进行外部数据源更新（用于 grouping-overlay 区分更新来源）
+        if (watchName === 'source') {
+            this.element.setAttribute('data-source-updating', '');
+            // 收集所有区域的渲染完成事件
+            const renderedAreas = new Set();
+            const checkAllRendered = (e) => {
+                var _a, _b, _c;
+                const detail = e.detail;
+                const { type, colType } = detail;
+                // 收集所有区域的渲染（包括不同的 colType）
+                const areaKey = `${type}-${colType}`;
+                renderedAreas.add(areaKey);
+                // 检查是否所有主要区域都已渲染
+                // 至少需要主数据区域的 rgRow 渲染完成（任意 colType）
+                const hasMainData = renderedAreas.has('rgRow-rgCol') ||
+                    renderedAreas.has('rgRow-colPinStart') ||
+                    renderedAreas.has('rgRow-colPinEnd');
+                // 如果有固定列，也需要等待它们渲染完成
+                const hasLeftPin = renderedAreas.has('rgRow-colPinStart') ||
+                    renderedAreas.has('rowPinStart-colPinStart');
+                const hasRightPin = renderedAreas.has('rgRow-colPinEnd') ||
+                    renderedAreas.has('rowPinStart-colPinEnd');
+                // 判断是否所有区域都已渲染完成
+                // 主数据区必须渲染，固定列如果存在也必须渲染
+                if (hasMainData) {
+                    // 检查是否有固定列配置
+                    const hasLeftPinConfig = (_a = this.columns) === null || _a === void 0 ? void 0 : _a.some((col) => col.pin === 'colPinStart');
+                    const hasRightPinConfig = (_b = this.columns) === null || _b === void 0 ? void 0 : _b.some((col) => col.pin === 'colPinEnd');
+                    const hasNormalCol = (_c = this.columns) === null || _c === void 0 ? void 0 : _c.some((col) => !col.pin);
+                    // 如果配置了固定列，必须等待固定列也渲染完成
+                    const leftPinReady = !hasLeftPinConfig || hasLeftPin;
+                    const rightPinReady = !hasRightPinConfig || hasRightPin;
+                    const normalColReady = !hasNormalCol || renderedAreas.has('rgRow-rgCol');
+                    if (leftPinReady && rightPinReady && normalColReady) {
+                        // 移除标记和监听器
+                        this.element.removeAttribute('data-source-updating');
+                        this.element.removeEventListener('afterrender', checkAllRendered);
+                        /**
+                         * 每一帧检查 数据是否渲染
+                         * 1. 先检查是否有非冻结列，如果没有就检查左侧冻结，再如果检查右侧冻结；通过 this.columnProvider?.collection?.columns 下的 rgCol|colPinStart|colPinEnd 长度
+                         * 2. 如果有非冻结表格，就只检查 this.viewportProvider.stores?.rgCol?.store 的 items 长度
+                         * 3. 如果没有非冻结表格，就检查 colPinStart或colPinEnd 的items 长度
+                         * 4. itemsCount > 0 就表示已经渲染
+                         */
+                        const checkColumns = () => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+                            let visibleItemsCount = 0;
+                            // 检查是否有非冻结列
+                            const hasRgCol = (((_d = (_c = (_b = (_a = this.columnProvider) === null || _a === void 0 ? void 0 : _a.collection) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.rgCol) === null || _d === void 0 ? void 0 : _d.length) || 0) > 0;
+                            const hasColPinStart = (((_h = (_g = (_f = (_e = this.columnProvider) === null || _e === void 0 ? void 0 : _e.collection) === null || _f === void 0 ? void 0 : _f.columns) === null || _g === void 0 ? void 0 : _g.colPinStart) === null || _h === void 0 ? void 0 : _h.length) || 0) > 0;
+                            const hasColPinEnd = (((_m = (_l = (_k = (_j = this.columnProvider) === null || _j === void 0 ? void 0 : _j.collection) === null || _k === void 0 ? void 0 : _k.columns) === null || _l === void 0 ? void 0 : _l.colPinEnd) === null || _m === void 0 ? void 0 : _m.length) || 0) > 0;
+                            if (this.viewportProvider) {
+                                if (hasRgCol) {
+                                    // 如果有非冻结列，只检查 rgCol 的 items
+                                    const rgColVpStore = (_p = (_o = this.viewportProvider.stores) === null || _o === void 0 ? void 0 : _o.rgCol) === null || _p === void 0 ? void 0 : _p.store;
+                                    if (rgColVpStore) {
+                                        visibleItemsCount = ((_q = rgColVpStore.get('items')) === null || _q === void 0 ? void 0 : _q.length) || 0;
+                                        // 如果为0，从DOM中获取子元素数量
+                                        if (visibleItemsCount === 0) {
+                                            const revogrData = this.element.querySelector('.revogr-viewport-scroll.rgCol .vertical-inner revogr-data');
+                                            if (revogrData) {
+                                                visibleItemsCount = revogrData.children.length;
+                                            }
+                                        }
+                                    }
+                                }
+                                else {
+                                    // 如果没有非冻结列，检查冻结列：优先 colPinStart，然后 colPinEnd
+                                    if (hasColPinStart) {
+                                        const colPinStartVpStore = (_s = (_r = this.viewportProvider.stores) === null || _r === void 0 ? void 0 : _r.colPinStart) === null || _s === void 0 ? void 0 : _s.store;
+                                        if (colPinStartVpStore) {
+                                            visibleItemsCount = ((_t = colPinStartVpStore.get('items')) === null || _t === void 0 ? void 0 : _t.length) || 0;
+                                        }
+                                    }
+                                    // 如果 colPinStart 没有数据，继续检查 colPinEnd
+                                    if (visibleItemsCount === 0 && hasColPinEnd) {
+                                        const colPinEndVpStore = (_v = (_u = this.viewportProvider.stores) === null || _u === void 0 ? void 0 : _u.colPinEnd) === null || _v === void 0 ? void 0 : _v.store;
+                                        if (colPinEndVpStore) {
+                                            visibleItemsCount = ((_w = colPinEndVpStore.get('items')) === null || _w === void 0 ? void 0 : _w.length) || 0;
+                                        }
+                                    }
+                                }
+                            }
+                            if (visibleItemsCount > 0) {
+                                requestAnimationFrame(this.afterdatarendered.emit);
+                            }
+                            else {
+                                requestAnimationFrame(checkColumns);
+                            }
+                        };
+                        // 在这里
+                        requestAnimationFrame(checkColumns);
+                        // 设置1秒超时，如果1秒后还没有完成渲染，直接emit
+                        setTimeout(() => {
+                            this.afterdatarendered.emit();
+                        }, 1000);
+                    }
+                }
+            };
+            this.element.addEventListener('afterrender', checkAllRendered);
+        }
+        let type = 'rgRow';
+        switch (watchName) {
+            case 'pinnedBottomSource':
+                type = 'rowPinEnd';
+                break;
+            case 'pinnedTopSource':
+                type = 'rowPinStart';
+                break;
+            case 'source':
+                type = 'rgRow';
+                // Update isSourceEmpty state to trigger re-render
+                this.isSourceEmpty = !newVal || newVal.length === 0;
+                /**
+                 * Applied for source only for cross compatability between plugins
+                 */
+                const beforesourceset = this.beforesourceset.emit({
+                    type,
+                    source: newVal,
+                });
+                newVal = beforesourceset.detail.source;
+                break;
+        }
+        const beforesourceset = this.beforeanysource.emit({
+            type,
+            source: newVal,
+        });
+        const newSource = [...beforesourceset.detail.source];
+        this.dataProvider.setData(newSource, type, this.disableVirtualY);
+        /**
+         * Applied for source only for cross compatability between plugins
+         */
+        if (watchName === 'source') {
+            this.aftersourceset.emit({
+                type,
+                source: newVal,
+            });
+        }
+        this.afteranysource.emit({
+            type,
+            source: newVal,
+        });
+        this.finishDataUpdate(dataToken);
+    }
+    disableVirtualYChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.dataSourceChanged(this.source, this.source, 'source');
+    }
+    rowDefChanged(after, before, _watchName, forceUpdate = true) {
+        // in firefox it's triggered before init
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
+        const { detail: { vals: newVal, oldVals: oldVal }, } = this.beforerowdefinition.emit({
+            vals: after,
+            oldVals: before,
+        });
+        // apply new values
+        const newRows = rowDefinitionByType(newVal);
+        // clear current defs
+        if (oldVal) {
+            const remove = rowDefinitionRemoveByType(oldVal);
+            // clear all old data and drop sizes
+            for (const t in remove) {
+                if (remove.hasOwnProperty(t)) {
+                    const type = t;
+                    const store = this.dataProvider.stores[type];
+                    const sourceLength = store.store.get('source').length;
+                    this.dimensionProvider.clearSize(type, sourceLength);
+                }
+            }
+        }
+        // set new sizes
+        headerCellRenderer.rowTypes.forEach((t) => {
+            var _a;
+            const newSizes = newRows[t];
+            // apply new sizes or force update
+            if (newSizes || forceUpdate) {
+                (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(t, (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {});
+            }
+        });
+    }
+    trimmedRowsChanged(newVal = {}) {
+        this.addTrimmed(newVal);
+    }
+    /**
+     * Grouping
+     */
+    groupingChanged(newVal = {}) {
+        var _a;
+        (_a = this.pluginService.getByClass(grouping_row_expand_service.GroupingRowPlugin)) === null || _a === void 0 ? void 0 : _a.setGrouping(newVal || {});
+        this._hasGrouping = !!(newVal && Object.keys(newVal).length > 0);
+    }
+    get _hasGrouping() { return this._hasGroupingValue; }
+    set _hasGrouping(val) { this._hasGroupingValue = val; }
+    /**
+     * Stretch Plugin Apply
+     */
+    applyStretch(isStretch) {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider) {
+            return;
+        }
+        if (isStretch === 'false') {
+            isStretch = false;
+        }
+        const pluginData = this.getPluginData();
+        if (!pluginData) {
+            return;
+        }
+        const stretch = this.pluginService.getByClass(grouping_row_expand_service.StretchColumn);
+        if ((typeof isStretch === 'boolean' && isStretch) || isStretch === 'true') {
+            if (!stretch) {
+                this.pluginService.add(new grouping_row_expand_service.StretchColumn(this.element, pluginData));
+            }
+            else if (grouping_row_expand_service.isStretchPlugin(stretch)) {
+                stretch.applyStretch(this.columnProvider.getRawColumns());
+            }
+        }
+        else if (stretch) {
+            this.pluginService.remove(stretch);
+        }
+    }
+    applyFilter(cfg) {
+        this.filterconfigchanged.emit(cfg);
+    }
+    applySorting(cfg) {
+        this.sortingconfigchanged.emit(cfg);
+    }
+    rowHeadersChange(rowHeaders) {
+        this.rowheaderschanged.emit(rowHeaders);
+    }
+    /**
+     * Register external VNodes
+     */
+    registerOutsideVNodes(elements = []) {
+        this.extraElements = elements;
+    }
+    additionalDataChanged(data) {
+        this.additionaldatachanged.emit(data);
+    }
+    /**
+     * Watch for RTL changes and reapply column ordering
+     */
+    rtlChanged() {
+        // The RTL plugin will handle the transformation automatically
+        // Just trigger a column refresh to ensure the plugin processes the change
+        this.columnChanged(this.columns);
+    }
+    /**
+     * User can add plugins via plugins property
+     */
+    pluginsChanged(plugins = [], prevPlugins) {
+        this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
+    }
+    // #endregion
+    // #region Plugins
+    setPlugins() {
+        // remove old plugins if any
+        this.removePlugins();
+        // pass data provider to plugins
+        const pluginData = this.getPluginData();
+        if (!pluginData) {
+            return;
+        }
+        // register system plugins
+        this.setCorePlugins(pluginData);
+        // register user plugins
+        this.pluginsChanged(this.plugins);
+    }
+    setCorePlugins(pluginData) {
+        if (this.accessible) {
+            this.pluginService.add(new WCAGPlugin(this.element, pluginData));
+        }
+        // register RTL plugin
+        this.pluginService.add(new RTLPlugin(this.element, pluginData));
+        // register auto size plugin
+        // 延迟创建：在 aftergridrender 事件中创建，确保所有属性都已设置
+        const createAutoSizePlugin = () => {
+            var _a;
+            const config = ((_a = this.additionalData) === null || _a === void 0 ? void 0 : _a.autoSizeColumn) || this.autoSizeColumn;
+            if (config && !this.pluginService.getByClass(grouping_row_expand_service.AutoSizeColumnPlugin)) {
+                this.pluginService.add(new grouping_row_expand_service.AutoSizeColumnPlugin(this.element, pluginData, typeof config === 'object' ? config : undefined));
+            }
+        };
+        this.element.addEventListener('aftergridrender', createAutoSizePlugin, { once: true });
+        // register filter plugin
+        if (this.filter) {
+            this.pluginService.add(new grouping_row_expand_service.FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
+        }
+        // register export plugin
+        if (this.exporting) {
+            this.pluginService.add(new grouping_row_expand_service.ExportFilePlugin(this.element, pluginData));
+        }
+        // register sorting plugin
+        this.pluginService.add(new grouping_row_expand_service.SortingPlugin(this.element, pluginData));
+        // register grouping plugin
+        this.pluginService.add(new grouping_row_expand_service.GroupingRowPlugin(this.element, pluginData));
+        if (this.canMoveColumns) {
+            this.pluginService.add(new grouping_row_expand_service.ColumnMovePlugin(this.element, pluginData));
+        }
+    }
+    getPluginData() {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
+            return;
+        }
+        // pass data provider to plugins
+        const pluginData = {
+            data: this.dataProvider,
+            column: this.columnProvider,
+            dimension: this.dimensionProvider,
+            viewport: this.viewportProvider,
+            selection: this.selectionStoreConnector,
+            plugins: this.pluginService,
+        };
+        return pluginData;
+    }
+    removePlugins() {
+        this.pluginService.destroy();
+    }
+    // #endregion
+    // if reconnect to dom we need to set up plugins
+    connectedCallback() {
+        if (this.isInited) {
+            this.setPlugins();
+        }
+        this.created.emit();
+    }
+    /**
+     * Called once just after the component is first connected to the DOM.
+     * Since this method is only called once, it's a good place to load data asynchronously and to setup the state
+     * without triggering extra re-renders.
+     * A promise can be returned, that can be used to wait for the first render().
+     */
+    componentWillLoad() {
+        var _a;
+        // Initialize isSourceEmpty state
+        this.isSourceEmpty = !this.source || this.source.length === 0;
+        // #region Setup Providers
+        this.viewportProvider = new ViewportProvider();
+        this.themeService = new ThemeService({
+            rowSize: this.rowSize,
+        });
+        this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
+            realSizeChanged: (k) => this.contentsizechanged.emit(k),
+        });
+        this.columnProvider = new ColumnDataProvider();
+        this.selectionStoreConnector = new SelectionStoreConnector();
+        this.dataProvider = new DataProvider(this.dimensionProvider);
+        // #endregion
+        this.registerOutsideVNodes(this.registerVNode);
+        // init plugins
+        this.setPlugins();
+        // set data
+        this.applyStretch(this.stretch);
+        this.themeChanged(this.theme, undefined, undefined, true);
+        this.columnChanged(this.columns, undefined, undefined, true);
+        this.dataSourceChanged(this.source, undefined, 'source');
+        this.dataSourceChanged(this.pinnedTopSource, undefined, 'pinnedTopSource');
+        this.dataSourceChanged(this.pinnedBottomSource, undefined, 'pinnedBottomSource');
+        if (Object.keys((_a = this.trimmedRows) !== null && _a !== void 0 ? _a : {}).length > 0) {
+            this.trimmedRowsChanged(this.trimmedRows);
+        }
+        this.rowDefChanged(this.rowDefinitions);
+        // init grouping
+        if (this.grouping && Object.keys(this.grouping).length > 0) {
+            this.groupingChanged(this.grouping);
+        }
+        // init scrolling service
+        this.scrollingService = new GridScrollingService((e) => {
+            var _a, _b, _c;
+            // Check if scroll is disabled
+            if (this.disableScroll) {
+                return;
+            }
+            if (e.dimension === 'rgCol' && this.disableVirtualX) {
+                (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setViewPortCoordinate({
+                    coordinate: 0,
+                    type: e.dimension,
+                });
+            }
+            else if (e.dimension === 'rgRow' && this.disableVirtualY) {
+                (_b = this.dimensionProvider) === null || _b === void 0 ? void 0 : _b.setViewPortCoordinate({
+                    coordinate: 0,
+                    type: e.dimension,
+                });
+            }
+            else {
+                (_c = this.dimensionProvider) === null || _c === void 0 ? void 0 : _c.setViewPortCoordinate({
+                    coordinate: e.coordinate,
+                    type: e.dimension,
+                });
+            }
+            this.viewportscroll.emit(e);
+        }, () => this.disableScroll);
+        this.aftergridinit.emit();
+        // set inited flag for connectedCallback
+        this.isInited = true;
+    }
+    componentWillRender() {
+        const event = this.beforegridrender.emit();
+        if (event.defaultPrevented) {
+            return false;
+        }
+        return Promise.all(this.jobsBeforeRender);
+    }
+    componentDidRender() {
+        this.aftergridrender.emit();
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        // Use the state variable isSourceEmpty for reactivity
+        const isSourceEmpty = this.isSourceEmpty;
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
+            return;
+        }
+        const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
+        // init viewport service helpers only when needed to avoid layout flash on column updates
+        const shouldRecreateViewport = !this.viewport ||
+            this.viewportContentHeight !== contentHeight ||
+            this.viewportDisableVirtualX !== this.disableVirtualX ||
+            this.viewportDisableVirtualY !== this.disableVirtualY;
+        if (shouldRecreateViewport) {
+            this.viewport = new ViewportService({
+                columnProvider: this.columnProvider,
+                dataProvider: this.dataProvider,
+                dimensionProvider: this.dimensionProvider,
+                viewportProvider: this.viewportProvider,
+                scrollingService: this.scrollingService,
+                orderService: this.orderService,
+                selectionStoreConnector: this.selectionStoreConnector,
+                disableVirtualX: this.disableVirtualX,
+                disableVirtualY: this.disableVirtualY,
+                resize: c => this.aftercolumnresize.emit(c),
+            }, contentHeight);
+            this.viewportContentHeight = contentHeight;
+            this.viewportDisableVirtualX = this.disableVirtualX;
+            this.viewportDisableVirtualY = this.disableVirtualY;
+        }
+        const viewport = this.viewport;
+        if (!viewport) {
+            return;
+        }
+        // #region ViewportSections
+        /**
+         * The code renders a viewport divided into sections.
+         * It starts by rendering the pinned start, data, and pinned end sections.
+         * Within each section, it renders columns along with their headers, pinned top, center data, and pinned bottom.
+         * The code iterates over the columns and their data to generate the view port's HTML structure.
+         */
+        const viewportSections = [];
+        // Row headers setting
+        if (this.rowHeaders && viewport.columns.length) {
+            const anyView = viewport.columns[0];
+            viewportSections.push(index.h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, jobsBeforeRender: this.jobsBeforeRender, rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollview: ({ detail: e }) => this.scrollingService.proxyScroll(e, 'headerRow'), onRef: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
+        }
+        // Viewport section render
+        const isMobile = isMobileDevice();
+        const viewPortHtml = [];
+        // 检查是否有 colPinEnd 列
+        const hasColPinEnd = ((_a = this.columnProvider) === null || _a === void 0 ? void 0 : _a.getColumns('colPinEnd').length) > 0;
+        // 检查是否有主区域列
+        const hasRgCol = ((_b = this.columnProvider) === null || _b === void 0 ? void 0 : _b.getColumns('rgCol').length) > 0;
+        // 一次性读取所有区域的数据并构建 headerAreas，确保数据同步
+        const headerAreas = [];
+        for (let view of viewport.columns) {
+            const colStore = (_e = (_d = (_c = this.columnProvider) === null || _c === void 0 ? void 0 : _c.stores) === null || _d === void 0 ? void 0 : _d[view.type]) === null || _e === void 0 ? void 0 : _e.store;
+            const viewportItems = view.viewportCol.get('items');
+            const colData = this.columnProvider.getColumns(view.type);
+            const dimensionState = (_f = view.headerProp.dimensionCol) === null || _f === void 0 ? void 0 : _f.state;
+            const groups = (_g = colStore === null || colStore === void 0 ? void 0 : colStore.get('groups')) !== null && _g !== void 0 ? _g : view.headerProp.groups;
+            const groupingDepth = (_h = colStore === null || colStore === void 0 ? void 0 : colStore.get('groupingDepth')) !== null && _h !== void 0 ? _h : view.headerProp.groupingDepth;
+            const selectionRange = (_k = (_j = view.columnSelectionStore) === null || _j === void 0 ? void 0 : _j.get('range')) !== null && _k !== void 0 ? _k : null;
+            // 构建表头区域数据
+            headerAreas.push({
+                type: view.type,
+                viewportCol: view.viewportCol,
+                dimensionCol: view.headerProp.dimensionCol,
+                selectionStore: view.columnSelectionStore,
+                viewportItems,
+                dimensionState,
+                selectionRange,
+                groups,
+                groupingDepth,
+                readonly: this.readonly,
+                canResize: this.resize,
+                resizeHandler: view.headerProp.resizeHandler,
+                colData,
+                colVersion: (_m = (_l = this.columnProvider.stores) === null || _l === void 0 ? void 0 : _l[view.type]) === null || _m === void 0 ? void 0 : _m.store.get('version'),
+                columnFilter: !!this.filter,
+                additionalData: this.additionalData,
+                hasColPinEnd,
+                hasRgCol,
+                disableVirtualX: this.disableVirtualX,
+                onHeaderresize: view.headerProp.onHeaderresize,
+            });
+        }
+        // Render viewports column(horizontal sections)
+        for (let view of viewport.columns) {
+            const dimensionState = (_o = view.headerProp.dimensionCol) === null || _o === void 0 ? void 0 : _o.state;
+            const realWidth = (_p = dimensionState === null || dimensionState === void 0 ? void 0 : dimensionState.realSize) !== null && _p !== void 0 ? _p : view.prop.contentWidth;
+            const viewProp = Object.assign(Object.assign({}, view.prop), { contentWidth: realWidth, style: Object.assign(Object.assign({}, view.prop.style), { width: `${realWidth}px` }) });
+            // Column headers - 使用空占位符，实际表头由统一组件渲染
+            const dataViews = [
+                index.h("div", { class: "header-placeholder", slot: viewport_helpers.HEADER_SLOT }),
+            ];
+            // Render viewport data (vertical sections)
+            view.dataPorts.forEach(data => {
+                var _a, _b;
+                const key = `${data.type}_${view.type}`;
+                const lastCell = {
+                    x: view.viewportCol.get('realCount'),
+                    y: data.viewportRow.get('realCount'),
+                };
+                const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { lastCell: lastCell, canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                        var _a;
+                        const event = this.beforeeditstart.emit(detail);
+                        if (!event.defaultPrevented) {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        }
+                    } }), index.h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, paddingDepth: (_a = this.grouping) === null || _a === void 0 ? void 0 : _a.depthPadding, uniqueId: view.type === 'rgCol' ? (_b = this.pluginService.getByClass(grouping_row_expand_service.ColumnManagePlugin)) === null || _b === void 0 ? void 0 : _b.getUniqueId() : undefined, hasColPinEnd: hasColPinEnd, hasRgCol: hasRgCol, slot: viewport_helpers.DATA_SLOT }), index.h("slot", { name: `data-${view.type}-${data.type}` })), index.h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), index.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol, autoScrollToFocus: this.autoScrollToFocus }, index.h("slot", { name: `focus-${view.type}-${data.type}` }))));
+                dataViews.push(dataView);
+            });
+            // Add viewport scroll in the end
+            viewPortHtml.push(index.h("revogr-viewport-scroll", Object.assign({}, viewProp, { ref: el => this.scrollingService.registerElement(el, `${view.prop.key}`), onScrollviewport: e => this.scrollingService.proxyScroll(e.detail, `${view.prop.key}`), onScrollviewportsilent: e => this.scrollingService.scrollSilentService(e.detail, `${view.prop.key}`) }), dataViews));
+        }
+        viewportSections.push(viewPortHtml);
+        // 添加统一表头组件，放在所有 viewport 之外作为独立层
+        // 这样可以确保所有区域的表头在同一个渲染周期内更新
+        viewportSections.push(index.h("revogr-header-unified", { areas: headerAreas, onBeforeheaderclick: (e) => this.headerclick.emit(e.detail) }));
+        // Add grouping overlay viewport
+        if (this.viewport) {
+            const rgColView = this.viewport.columns.find(v => v.type === 'rgCol');
+            const mainDataPort = rgColView === null || rgColView === void 0 ? void 0 : rgColView.dataPorts.find(d => d.type === 'rgRow');
+            if (mainDataPort && rgColView) {
+                const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
+                // Get header row count (1 base row + grouping depth)
+                const groupingDepth = rgColView.headerProp.groupingDepth || 0;
+                const headerRowCount = 1 + groupingDepth;
+                // Create header placeholders for each row
+                const headerPlaceholders = [];
+                // 如果只有一行，使用完整表头高度；如果超过一行，每行高度是表头高度 / 2
+                const heightCalc = headerRowCount === 1
+                    ? 'var(--rg-header-row-height, 45px)'
+                    : 'calc(var(--rg-header-row-height, 45px) / 2)';
+                for (let i = 0; i < headerRowCount; i++) {
+                    headerPlaceholders.push(index.h("div", { class: "grouping-header-placeholder", key: `header-${i}`, style: { height: heightCalc } }, `header row ${i + 1}`));
+                }
+                viewportSections.unshift(index.h("revogr-viewport-scroll", { class: "grouping-overlay-viewport", contentWidth: 0, contentHeight: contentHeight, colType: "rgCol", key: "grouping-viewport", ref: el => this.scrollingService.registerElement(el, 'groupingOverlay'), onScrollviewport: e => this.scrollingService.proxyScroll(e.detail, 'groupingOverlay') }, index.h("div", { slot: viewport_helpers.HEADER_SLOT }, headerPlaceholders), index.h("revogr-grouping-overlay", { dataStore: mainDataPort.dataStore, colData: mainDataPort.colData, viewportRow: mainDataPort.viewportRow, viewportCol: mainDataPort.viewportCol, dimensionRow: mainDataPort.dimensionRow, type: "rgRow", colType: "rgCol", additionalData: this.additionalData, rowClass: this.rowClass, getGroupSelection: (_q = this.grouping) === null || _q === void 0 ? void 0 : _q.getGroupSelection, paddingDepth: (_r = this.grouping) === null || _r === void 0 ? void 0 : _r.depthPadding, slot: viewport_helpers.CONTENT_SLOT })));
+            }
+        }
+        // #endregion
+        const typeRow = 'rgRow';
+        const typeCol = 'rgCol';
+        const viewports = this.viewportProvider.stores;
+        const dimensions = this.dimensionProvider.stores;
+        const verticalScroll = this.showScrollbar ? (index.h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get('clientSize'), virtualSize: viewports[typeRow].store.get('virtualSize'), realSize: dimensions[typeRow].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) })) : null;
+        const horizontalScroll = this.showScrollbar ? (index.h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get('clientSize'), virtualSize: viewports[typeCol].store.get('virtualSize'), realSize: dimensions[typeCol].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) })) : null;
+        // Use the isSourceEmpty variable declared at the beginning of render
+        const emptyPlaceholderEl = (isSourceEmpty && !this.hideEmpty) ? (index.h("div", { class: "empty-placeholder" }, this.emptyTemplate ? this.emptyTemplate(index.h) : index.h("slot", { name: "empty" }))) : null;
+        return (index.h(index.Host, { dir: this.rtl ? 'rtl' : 'ltr' }, index.h("div", { class: "revo-grid-border-line" }), this.hideAttribution ? null : (index.h("revogr-attribution", { class: "attribution" })), index.h("slot", { name: "header" }), index.h("div", { class: "main-viewport", onClick: (e) => {
+                var _a;
+                if (e.currentTarget === e.target) {
+                    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
+                }
+            } }, index.h("div", { class: "viewports" }, index.h("slot", { name: "viewport" }), viewportSections, emptyPlaceholderEl, verticalScroll, index.h(OrderRenderer, { ref: e => (this.orderService = e) }))), horizontalScroll, index.h("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), index.h("slot", { name: "footer" })));
+    }
+    disconnectedCallback() {
+        // Remove all plugins, to avoid memory leaks
+        // and unexpected behaviour when the component is removed
+        this.removePlugins();
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "columnTypes": ["columnTypesChanged"],
+        "columns": ["columnChanged"],
+        "disableVirtualX": ["disableVirtualXChanged"],
+        "rowSize": ["rowSizeChanged"],
+        "theme": ["themeChanged"],
+        "source": ["dataSourceChanged"],
+        "pinnedBottomSource": ["dataSourceChanged"],
+        "pinnedTopSource": ["dataSourceChanged"],
+        "disableVirtualY": ["disableVirtualYChanged"],
+        "rowDefinitions": ["rowDefChanged"],
+        "trimmedRows": ["trimmedRowsChanged"],
+        "grouping": ["groupingChanged"],
+        "stretch": ["applyStretch"],
+        "filter": ["applyFilter"],
+        "sorting": ["applySorting"],
+        "rowHeaders": ["rowHeadersChange"],
+        "registerVNode": ["registerOutsideVNodes"],
+        "additionalData": ["additionalDataChanged"],
+        "rtl": ["rtlChanged"],
+        "plugins": ["pluginsChanged"]
+    }; }
+};
+RevoGridComponent.style = revoGridStyleCss;
+
+exports.revo_grid = RevoGridComponent;
+//# sourceMappingURL=revo-grid.entry.cjs.js.map
+
+//# sourceMappingURL=revo-grid.cjs.entry.js.map