balala-revogrid 1.0.0

package/dist/esm/revogr-attribution_9.entry.js

@@ -0,0 +1,2619 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-Dyptvvxf.js';
+import { k as getItemByIndex, b as getSourceItem, j as getItemByPosition, J as FOCUS_CLASS, E as HEADER_ROW_CLASS, F as HEADER_ACTUAL_ROW_CLASS, U as codesLetter, u as timeout, R as RESIZE_INTERVAL, K as MOBILE_CLASS, L as CELL_HANDLER_CLASS, S as SELECTION_BORDER_CLASS, D as DataStore, A as ROW_HEADER_TYPE, o as getScrollbarSize, T as TMP_SELECTION_BG_CLASS } from './dimension.helpers-DDil7Dg0.js';
+import { g as getPropertyFromEvent, v as verifyTouchTarget } from './events-BvSmBueA.js';
+import { A as isGrouping, P as PSEUDO_GROUP_ITEM, e as getRange, U as ColumnService, F as getCellData, V as getCellEditor, f as isRangeSingleCell } from './header-cell-renderer-BVHTuFGE.js';
+import { G as GroupingRowRenderer } from './grouping.row.renderer-6NYszUJA.js';
+import { H as HeaderRenderer, a as HeaderGroupRenderer, k as keyBy, L as LocalScrollTimer, b as LocalScrollService, g as getContentSize, t as throttle } from './throttle-DXYrmEeb.js';
+import { c as isClear, d as isTab, f as isEnterKeyValue, h as isCopy, g as isCut, j as isPaste, k as isAll, l as isEditInput } from './edit.utils-ClxXX_x9.js';
+import { d as debounce } from './debounce-BfO9dz9v.js';
+import { V as ViewportStore, f as calculateRowHeaderSize } from './viewport.store-C-GnV31k.js';
+import { H as HEADER_SLOT } from './viewport.helpers-VXhsJZtn.js';
+import './row-renderer-sb6QTqH-.js';
+import './filter.button-DmOE7VCJ.js';
+
+const Attribution = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '3d66475a019010c24b6c610ccc047e01c35178f9' }, h("a", { key: '777afddffef0309a697b9c14ee73c0001ac22b71', href: "https://rv-grid.com/guide/attribution", target: "_blank", rel: "noopener noreferrer", title: "Made with \u2764\uFE0F by Revolist OU Team", class: "value" }, "RevoGrid")));
+    }
+};
+
+const RevoGridExtra = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Nodes to render
+         */
+        this.nodes = [];
+        /**
+         * Force component to re-render
+         */
+        this.update = 1;
+    }
+    /**
+     * Refreshes the extra component. Useful if you want to manually
+     * force the component to re-render.
+     */
+    async refresh() {
+        this.update *= -1;
+    }
+    render() {
+        var _a;
+        return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map(node => {
+            // Check if node is a function or a stencil component
+            // If function wrap it in a stencil component with the refresh function
+            if (typeof node === 'function') {
+                const config = {};
+                const getNodes = () => [node({ refresh: () => { var _a; return (_a = config.refresh) === null || _a === void 0 ? void 0 : _a.call(config); } })];
+                return (h("revogr-extra", { nodes: getNodes(), ref: (el) => {
+                        if (el) {
+                            // Update exclusively for current node
+                            config.refresh = () => {
+                                el.nodes = getNodes();
+                            };
+                        }
+                    } }));
+            }
+            return node;
+        });
+    }
+};
+
+function collectModelsOfRange(data, store) {
+    const models = {};
+    for (let i in data) {
+        const rowIndex = parseInt(i, 10);
+        models[rowIndex] = getSourceItem(store, rowIndex);
+    }
+    return models;
+}
+function getFocusCellBasedOnEvent(e, data) {
+    // If event default is prevented, return
+    if (e.defaultPrevented) {
+        return null;
+    }
+    // Get coordinates from event object
+    const x = getPropertyFromEvent(e, 'clientX');
+    const y = getPropertyFromEvent(e, 'clientY');
+    // If coordinates are not available, return
+    if (x === null || y === null) {
+        return null;
+    }
+    // Get current cell based on coordinates and data
+    const focusCell = getCurrentCell({ x, y }, data);
+    // If current cell is not available, return
+    if (isAfterLast(focusCell, data.lastCell)) {
+        return null;
+    }
+    return focusCell;
+}
+/**
+ * Calculate cell based on x, y position
+ */
+function getCurrentCell({ x, y }, { el, rows, cols }) {
+    // Get the bounding rectangle of the element
+    const { top, left, height, width } = el.getBoundingClientRect();
+    // Calculate the cell position relative to the element
+    let cellY = y - top;
+    let cellX = x - left;
+    // Limit the cell position to the element height
+    if (cellY >= height) {
+        cellY = height - 1;
+    }
+    // Limit the cell position to the element width
+    if (cellX >= width) {
+        cellX = width - 1;
+    }
+    // Get the row and column items based on the cell position
+    const rgRow = getItemByPosition(rows, cellY);
+    const rgCol = getItemByPosition(cols, cellX);
+    // Set the row and column index to 0 if they are before the first item
+    if (rgCol.itemIndex < 0) {
+        rgCol.itemIndex = 0;
+    }
+    if (rgRow.itemIndex < 0) {
+        rgRow.itemIndex = 0;
+    }
+    return { x: rgCol.itemIndex, y: rgRow.itemIndex };
+}
+function getCoordinate(range, focus, changes, isMulti = false) {
+    const updateCoordinate = (c, pos = 0) => {
+        const start = { x: range.x, y: range.y };
+        const end = isMulti ? { x: range.x1, y: range.y1 } : start;
+        const point = end[c] > focus[c] ? end : start;
+        point[c] += pos;
+        return { start, end };
+    };
+    if (changes.x) {
+        return updateCoordinate('x', changes['x']);
+    }
+    if (changes.y) {
+        return updateCoordinate('y', changes['y']);
+    }
+    return null;
+}
+/**
+ * Check if the x coordinate of the cell position is after or equal to the x coordinate of the last cell position
+ * or if the y coordinate of the cell position is after or equal to the y coordinate of the last cell position
+ */
+function isAfterLast({ x, y }, lastCell) {
+    return x >= lastCell.x || y >= lastCell.y;
+}
+/** check if out of range */
+function isBeforeFirst({ x, y }) {
+    return x < 0 || y < 0;
+}
+/** Compare cells, only 1 coordinate difference is possible */
+// export function getDirectionCoordinate(initial: Cell, last: Cell): Partial<Cell> | null {
+//   const c: (keyof Cell)[] = ['x', 'y'];
+//   for (let k of c) {
+//     if (initial[k] !== last[k]) {
+//       return { [k]: 1 };
+//     }
+//   }
+//   return null;
+// }
+// export function getLargestAxis(initial: Cell, last: Cell): Partial<Cell> | null {
+//   const cell: Partial<Cell> = {};
+//   const c: (keyof Cell)[] = ['x', 'y'];
+//   for (let k of c) {
+//     cell[k] = Math.abs(initial[k] - last[k]);
+//   }
+//   if (cell.x > cell.y) {
+//     return { x: 1 };
+//   }
+//   if (cell.y > cell.x) {
+//     return { y: 1 };
+//   }
+//   return null;
+// }
+function styleByCellProps(styles) {
+    return {
+        left: `${styles.left}px`,
+        top: `${styles.top}px`,
+        width: `${styles.width}px`,
+        height: `${styles.height}px`,
+    };
+}
+function getCell({ x, y, x1, y1 }, dimensionRow, dimensionCol) {
+    const top = getItemByIndex(dimensionRow, y).start;
+    const left = getItemByIndex(dimensionCol, x).start;
+    const bottom = getItemByIndex(dimensionRow, y1).end;
+    const right = getItemByIndex(dimensionCol, x1).end;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+
+const revogrFocusStyleCss = "revogr-focus.focused-cell{box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset;position:absolute;pointer-events:none;z-index:9;display:block !important}";
+
+const RevogrFocus$1 = class RevogrFocus {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.beforeFocusRender = createEvent(this, "beforefocusrender", 7);
+        this.beforeScrollIntoView = createEvent(this, "beforescrollintoview", 7);
+        this.afterFocus = createEvent(this, "afterfocus", 7);
+        /**
+         * Auto scroll to focused cell. When true, the grid will automatically scroll to make the focused cell visible.
+         * @default false
+         */
+        this.autoScrollToFocus = false;
+        /**
+         * Focus template custom function. Can be used to render custom focus layer.
+         */
+        this.focusTemplate = null;
+        this.activeFocus = null;
+    }
+    componentDidRender() {
+        var _a, _b;
+        const currentFocus = this.selectionStore.get('focus');
+        if (((_a = this.activeFocus) === null || _a === void 0 ? void 0 : _a.x) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.x) &&
+            ((_b = this.activeFocus) === null || _b === void 0 ? void 0 : _b.y) === (currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.y)) {
+            return;
+        }
+        this.activeFocus = currentFocus;
+        if (currentFocus && this.el) {
+            const beforeScrollIn = this.beforeScrollIntoView.emit({ el: this.el });
+            // 只有在 autoScrollToFocus 为 true 时才执行自动滚动
+            if (this.autoScrollToFocus && !beforeScrollIn.defaultPrevented) {
+                this.el.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                });
+            }
+            const model = getSourceItem(this.dataStore, currentFocus.y);
+            const column = getSourceItem(this.colData, currentFocus.x);
+            this.afterFocus.emit({
+                model,
+                column,
+                rowType: this.rowType,
+                colType: this.colType,
+                rowIndex: currentFocus.y,
+                colIndex: currentFocus.x,
+            });
+        }
+    }
+    render() {
+        var _a;
+        const editCell = this.selectionStore.get('edit');
+        if (editCell) {
+            return;
+        }
+        const focusCell = this.selectionStore.get('focus');
+        if (!focusCell) {
+            return;
+        }
+        const event = this.beforeFocusRender.emit({
+            range: Object.assign(Object.assign({}, focusCell), { x1: focusCell.x, y1: focusCell.y }),
+            rowType: this.rowType,
+            colType: this.colType,
+            rowDimension: Object.assign({}, this.dimensionRow.state),
+            colDimension: Object.assign({}, this.dimensionCol.state),
+        });
+        if (event.defaultPrevented) {
+            return h("slot", null);
+        }
+        const { detail } = event;
+        const cell = getCell(detail.range, event.detail.rowDimension, event.detail.colDimension);
+        const styles = styleByCellProps(cell);
+        const extra = (_a = this.focusTemplate) === null || _a === void 0 ? void 0 : _a.call(this, h, detail);
+        const props = {
+            class: { [FOCUS_CLASS]: true },
+            style: styles,
+        };
+        return (h(Host, Object.assign({}, props), h("slot", null), extra));
+    }
+    get el() { return getElement(this); }
+};
+RevogrFocus$1.style = revogrFocusStyleCss;
+
+const revogrGroupingOverlayCss = ":host{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}.grouping-overlay-viewport .header-wrapper>div{box-shadow:0 -1px 0 var(--rg-cell-border-color, #e0e0e0) inset}.grouping-rows-container{position:absolute;top:0;left:0;width:100%;height:100%}.grouping-rows-container .groupingRow{position:absolute;pointer-events:auto;width:100%;font-weight:600;text-align:left;mix-blend-mode:normal;z-index:1;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.grouping-rows-container .groupingRow .group-expand{width:25px;height:100%;max-height:25px;margin-right:2px;background-color:transparent;border-color:transparent;vertical-align:middle;padding-left:5px;display:inline-flex;cursor:pointer}.grouping-rows-container .groupingRow .group-expand svg{width:7px}.grouping-rows-container .rgRow{border-bottom:1px solid var(--rg-cell-border-color, #e0e0e0)}.grouping-rows-container .dataRow{position:absolute;width:100%;box-sizing:border-box;background-color:transparent !important;pointer-events:auto;z-index:0;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}";
+
+const RevogrGroupingOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.type = 'rgRow';
+        this.colType = 'rgCol';
+        this.groupRows = [];
+        this.dataRows = [];
+        this.unsubscribers = [];
+        // ==================== 性能优化：缓存和节流 ====================
+        /** 缓存的选中行索引 */
+        this.cachedSelectedIndices = new Set();
+        /** 上次解析的选中行属性值 */
+        this.lastSelectedRowsAttr = null;
+        /** 上次的 viewport items 引用（用于变化检测） */
+        this.lastRowItems = null;
+        /** 上次的 col items 引用 */
+        this.lastColItems = null;
+        /** RAF 节流标记 */
+        this.updateScheduled = false;
+        /** MutationObserver 用于监听选中状态变化 */
+        this.selectionObserver = null;
+        // ==================== Resize 优化 ====================
+        /** ResizeObserver 用于监听表格宽度变化 */
+        this.resizeObserver = null;
+    }
+    onDataChange() {
+        this.scheduleUpdate();
+    }
+    /**
+     * 刷新分组行显示，用于选中状态变化后更新选中数量
+     */
+    async refresh() {
+        // 强制刷新时清除缓存
+        this.lastSelectedRowsAttr = null;
+        this.updateGroupRowsImmediate(true);
+    }
+    connectedCallback() {
+        this.providers = {
+            type: this.type,
+            colType: this.colType,
+            readonly: true,
+            data: this.dataStore,
+            columns: this.colData,
+            viewport: this.viewportCol,
+            dimension: this.dimensionRow,
+            selection: null,
+        };
+        // 数据变化时的处理函数
+        const onDataUpdate = () => {
+            this.scheduleUpdate();
+        };
+        if (this.viewportRow) {
+            this.unsubscribers.push(this.viewportRow.onChange('items', onDataUpdate));
+        }
+        if (this.dataStore) {
+            this.unsubscribers.push(this.dataStore.onChange('source', () => {
+                // 数据源变化时清除缓存
+                this.lastRowItems = null;
+                this.scheduleUpdate();
+            }));
+        }
+        if (this.viewportCol) {
+            this.unsubscribers.push(this.viewportCol.onChange('items', onDataUpdate));
+        }
+        // 监听选中状态变化
+        this.setupSelectionObserver();
+        // 监听表格宽度变化
+        this.setupResizeObserver();
+        this.updateGroupRowsImmediate(false);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.unsubscribers.forEach(unsub => unsub());
+        (_a = this.selectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.selectionObserver = null;
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.resizeObserver = null;
+    }
+    /**
+     * 设置 ResizeObserver 监听表格宽度变化
+     */
+    setupResizeObserver() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            // 立即更新，不使用防抖
+            this.scheduleUpdate();
+        });
+        this.resizeObserver.observe(revogrid);
+    }
+    /**
+     * 设置 MutationObserver 监听选中状态变化
+     */
+    setupSelectionObserver() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid)
+            return;
+        this.selectionObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.attributeName === 'data-selected-rows' ||
+                    mutation.attributeName === 'data-selected-rg-rows') {
+                    // 选中状态变化，更新缓存并刷新
+                    this.updateSelectedIndicesCache();
+                    this.scheduleUpdate();
+                    break;
+                }
+            }
+        });
+        this.selectionObserver.observe(revogrid, {
+            attributes: true,
+            attributeFilter: ['data-selected-rows', 'data-selected-rg-rows'],
+        });
+    }
+    /**
+     * 使用 RAF 节流的更新调度
+     */
+    scheduleUpdate() {
+        if (this.updateScheduled)
+            return;
+        this.updateScheduled = true;
+        requestAnimationFrame(() => {
+            this.updateScheduled = false;
+            this.updateGroupRowsImmediate(false);
+        });
+    }
+    /**
+     * 更新选中行索引缓存
+     */
+    updateSelectedIndicesCache() {
+        const revogrid = this.element.closest('revo-grid');
+        if (!revogrid) {
+            this.cachedSelectedIndices.clear();
+            this.lastSelectedRowsAttr = null;
+            return;
+        }
+        const selectedRowsAttr = revogrid.getAttribute('data-selected-rg-rows') ||
+            revogrid.getAttribute('data-selected-rows');
+        // 如果属性值没变，直接返回
+        if (selectedRowsAttr === this.lastSelectedRowsAttr) {
+            return;
+        }
+        this.lastSelectedRowsAttr = selectedRowsAttr;
+        this.cachedSelectedIndices.clear();
+        if (selectedRowsAttr) {
+            try {
+                const indices = JSON.parse(selectedRowsAttr);
+                if (Array.isArray(indices)) {
+                    for (let i = 0; i < indices.length; i++) {
+                        this.cachedSelectedIndices.add(indices[i]);
+                    }
+                }
+            }
+            catch (e) {
+                // 忽略解析错误
+            }
+        }
+    }
+    /**
+     * 获取选中行索引（使用缓存）
+     */
+    getSelectedRowIndices() {
+        // 首次调用或缓存失效时更新
+        if (this.lastSelectedRowsAttr === null) {
+            this.updateSelectedIndicesCache();
+        }
+        return this.cachedSelectedIndices;
+    }
+    /**
+     * 立即更新分组行（带变化检测）
+     * @param forceUpdate 是否强制更新，忽略变化检测
+     */
+    async updateGroupRowsImmediate(forceUpdate = false) {
+        if (!this.dataStore || !this.viewportRow || !this.viewportCol) {
+            if (this.groupRows.length || this.dataRows.length) {
+                this.groupRows = [];
+                this.dataRows = [];
+            }
+            return;
+        }
+        const rows = this.viewportRow.get('items');
+        const cols = this.viewportCol.get('items');
+        // 变化检测：如果 items 引用没变且不是强制更新，跳过更新
+        if (!forceUpdate && rows === this.lastRowItems && cols === this.lastColItems) {
+            return;
+        }
+        this.lastRowItems = rows;
+        this.lastColItems = cols;
+        if (!rows.length) {
+            if (this.groupRows.length || this.dataRows.length) {
+                this.groupRows = [];
+                this.dataRows = [];
+            }
+            return;
+        }
+        const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
+        // 即使 cols 为空（所有列都冻结），也要渲染分组行
+        const firstCol = cols[0] || { start: 0, end: 0, size: 0, itemIndex: 0 };
+        // 使用缓存的选中行索引
+        const selectedRowIndices = this.getSelectedRowIndices();
+        // 获取当前可见的物理索引数组
+        const dataItems = this.dataStore.get('items');
+        const groupRowsData = [];
+        const dataRowsData = [];
+        for (let i = 0; i < rows.length; i++) {
+            const rgRow = rows[i];
+            const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);
+            if (!dataItem) {
+                continue;
+            }
+            const physicalIndex = dataItems[rgRow.itemIndex];
+            if (isGrouping(dataItem)) {
+                const groupName = dataItem[PSEUDO_GROUP_ITEM];
+                if (!groupName) {
+                    this.groupRows = [];
+                    this.dataRows = [];
+                    return;
+                }
+                groupRowsData.push(Object.assign(Object.assign({}, rgRow), { index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer, hasExpand: true, columnItems: [firstCol], providers: this.providers, getGroupSelection: this.getGroupSelection, paddingDepth: this.paddingDepth }));
+            }
+            else {
+                const isSelected = physicalIndex !== undefined && selectedRowIndices.has(physicalIndex);
+                dataRowsData.push(Object.assign(Object.assign({}, rgRow), { selected: isSelected }));
+            }
+        }
+        this.groupRows = groupRowsData;
+        this.dataRows = dataRowsData;
+    }
+    render() {
+        // 只有当既没有分组行也没有数据行时才不渲染
+        if (!this.groupRows.length && !this.dataRows.length) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "grouping-rows-container" }, this.groupRows.map(rowProps => (h(GroupingRowRenderer, Object.assign({}, rowProps, { key: `group-${rowProps.itemIndex}` })))), this.dataRows.map(row => {
+            const attrs = {
+                class: 'rgRow dataRow',
+                key: `data-${row.itemIndex}`,
+                style: {
+                    height: `${row.size}px`,
+                    transform: `translateY(${row.start}px)`,
+                },
+                'data-rgRow': row.itemIndex,
+            };
+            if (row.selected) {
+                attrs.selected = '';
+            }
+            return h("div", Object.assign({}, attrs));
+        }))));
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "dataStore": ["onDataChange"],
+        "viewportRow": ["onDataChange"],
+        "viewportCol": ["onDataChange"]
+    }; }
+};
+RevogrGroupingOverlay.style = revogrGroupingOverlayCss;
+
+const revogrHeaderUnifiedStyleCss = "@charset \"UTF-8\";revogr-header-unified{display:flex;flex-direction:row;width:100%;position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none;background:transparent}revogr-header-unified .header-area{position:relative;display:block;pointer-events:auto;background:var(--revo-grid-header-bg, #f8f9fa);z-index:5;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) inset, 0 -1px 0 0 var(--revo-grid-header-border)}revogr-header-unified .header-area .group-rgRow,revogr-header-unified .header-area .header-rgRow{display:block;position:relative}revogr-header-unified .header-area .group-rgRow{z-index:2;overflow:visible}revogr-header-unified .header-area .group-rgRow .rgHeaderCell.merged-header{z-index:5;top:0;align-items:center}revogr-header-unified .header-area .group-rgRow.header-rgRow.group{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revogr-header-unified .header-area .header-rgRow.group{z-index:0}revogr-header-unified .header-area .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}revogr-header-unified .header-area .header-rgRow.actual-rgRow{z-index:1}revogr-header-unified .header-area .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex;user-select:text}revogr-header-unified .header-area .rgHeaderCell:has(.resizable-r:hover),revogr-header-unified .header-area .rgHeaderCell:has(.resizable-l:hover){z-index:92}revogr-header-unified .header-area .rgHeaderCell.group-header{text-align:center}revogr-header-unified .header-area .rgHeaderCell.align-center{text-align:center}revogr-header-unified .header-area .rgHeaderCell.align-left{text-align:left}revogr-header-unified .header-area .rgHeaderCell.align-right{text-align:right}revogr-header-unified .header-area .rgHeaderCell.sortable{cursor:pointer}revogr-header-unified .header-area .rgHeaderCell i.asc:after,revogr-header-unified .header-area .rgHeaderCell i.desc:after{font-size:13px}revogr-header-unified .header-area .rgHeaderCell i.asc:after{content:\"↑\"}revogr-header-unified .header-area .rgHeaderCell i.desc:after{content:\"↓\"}revogr-header-unified .header-area .rgHeaderCell.active{z-index:10}revogr-header-unified .header-area .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header-unified .header-area .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header-unified .header-area .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none;pointer-events:auto}revogr-header-unified .header-area .rgHeaderCell .resizable:not(.resizable-r):not(.resizable-l):hover{background-color:deepskyblue}revogr-header-unified .header-area .rgHeaderCell>.resizable-r{cursor:col-resize;width:14px;right:-7px;top:0;height:100%;background-color:transparent !important}revogr-header-unified .header-area .rgHeaderCell>.resizable-r::after{content:\"\";position:absolute;left:50%;transform:translateX(-50%);top:0;width:2px;min-width:2px;max-width:2px;height:100%;background-color:transparent;z-index:100}revogr-header-unified .header-area .rgHeaderCell>.resizable-l{cursor:col-resize;width:14px;left:-7px;height:100%;top:0;background-color:transparent !important}revogr-header-unified .header-area .rgHeaderCell>.resizable-l::after{content:\"\";position:absolute;left:50%;transform:translateX(-50%);top:0;width:2px;height:100%;background-color:transparent;z-index:100}revogr-header-unified .header-area .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header-unified .header-area .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header-unified .header-area .rv-filter{visibility:hidden}revogr-header-unified .header-area-colPinStart{flex:0 0 auto;z-index:13}revogr-header-unified .header-area-rgCol{flex:0 1 auto;min-width:0;z-index:12;overflow-x:hidden;overflow-y:visible}revogr-header-unified .header-area-colPinEnd{flex:0 0 auto;z-index:13}";
+
+const RevogrHeaderUnifiedComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.initialHeaderClick = createEvent(this, "beforeheaderclick", 7);
+        this.headerresize = createEvent(this, "headerresize", 7);
+        this.beforeResize = createEvent(this, "beforeheaderresize", 7);
+        this.headerdblClick = createEvent(this, "headerdblclick", 7);
+        this.beforeHeaderRender = createEvent(this, "beforeheaderrender", 7);
+        this.beforeGroupHeaderRender = createEvent(this, "beforegroupheaderrender", 7);
+        this.afterHeaderRender = createEvent(this, "afterheaderrender", 7);
+        /**
+         * 强制刷新计数器，用于触发重新渲染
+         */
+        this.refreshCounter = 0;
+        this.rafScrollSyncId = null;
+        this.pendingScrollLeft = null;
+        this.lastAppliedScrollLeft = null;
+        this.scrollEndTimer = null;
+        this.mainViewportEl = null;
+        this.mainViewportResizeObserver = null;
+        this.rgColHeaderAreaEl = null;
+        this.rgColHeaderRows = [];
+        this.headerRowsNeedRefresh = true;
+        this.hasCachedBaseHeaderRowHeight = false;
+        this.cachedBaseHeaderRowHeight = null;
+        this.windowResizeHandler = null;
+        // 缓存扩展后的viewport items，用于在调整大小期间保持DOM稳定
+        this.cachedExpandedItems = new Map();
+        // 标记是否正在调整大小（不使用@State，避免触发重新渲染）
+        this.isResizingFlag = false;
+        // 缓存调整大小期间的areas，避免使用新的areas导致跳动
+        this.cachedAreas = null;
+        this.lastStableAreas = null;
+        // 定时器延迟时间（毫秒）
+        this.RESIZE_DEBOUNCE_TIME = 300;
+    }
+    setHeaderResizingState(active) {
+        const grid = this.gridElement || this.element.closest('revo-grid');
+        if (!grid) {
+            return;
+        }
+        const isActive = grid.hasAttribute('data-header-resizing');
+        if (active) {
+            if (!isActive) {
+                grid.setAttribute('data-header-resizing', '1');
+            }
+            return;
+        }
+        if (isActive) {
+            grid.removeAttribute('data-header-resizing');
+            grid.dispatchEvent(new CustomEvent('headerresizeend', {
+                bubbles: true,
+            }));
+        }
+    }
+    componentDidLoad() {
+        this.windowResizeHandler = () => {
+            this.hasCachedBaseHeaderRowHeight = false;
+            this.cachedBaseHeaderRowHeight = null;
+            this.scheduleHeaderScroll();
+        };
+        window.addEventListener('resize', this.windowResizeHandler, { passive: true });
+        // 延迟设置滚动同步，确保 viewport 元素已经渲染
+        setTimeout(() => {
+            this.setupScrollSync();
+        }, 100);
+    }
+    componentWillRender() {
+        var _a;
+        const grid = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('revo-grid');
+        if (!grid || !grid.hasAttribute('data-columns-updating')) {
+            return;
+        }
+        // console.log('[header] wait columns update', {
+        //   time: performance.now(),
+        // });
+        return new Promise(resolve => {
+            grid.addEventListener('columnsupdateend', () => {
+                // console.log('[header] columns update end', {
+                //   time: performance.now(),
+                // });
+                resolve();
+            }, { once: true });
+        });
+    }
+    /**
+     * 公开方法：开始调整大小（用于自动列宽）
+     */
+    async startResizingForAutoSize(type) {
+        if (type === 'rgCol') {
+            const area = this.areas.find(area => area.type === type);
+            if (area) {
+                this.startResizing(area);
+            }
+        }
+    }
+    /**
+     * 公开方法：结束调整大小（用于自动列宽）
+     */
+    async endResizingForAutoSize() {
+        this.resetResizeTimer();
+    }
+    /**
+     * 公开方法：强制刷新表头（用于跨区域列宽同步）
+     * 当一个区域的列宽变化影响到另一个区域时调用
+     */
+    async forceRefresh() {
+        // 通过修改 @State 变量触发组件重新渲染
+        this.refreshCounter++;
+    }
+    disconnectedCallback() {
+        // 清理滚动监听器
+        if (this.gridElement && this.gridScrollHandler) {
+            this.gridElement.removeEventListener('viewportscroll', this.gridScrollHandler);
+        }
+        if (this.gridElement && this.enhancedScrollHandler) {
+            this.gridElement.removeEventListener('enhancedscrollsync', this.enhancedScrollHandler);
+        }
+        if (this.scrollHandler) {
+            const viewports = document.querySelectorAll('revogr-viewport-scroll.rgCol');
+            viewports.forEach(viewport => {
+                viewport.removeEventListener('scroll', this.scrollHandler);
+            });
+        }
+        if (this.rafScrollSyncId !== null) {
+            cancelAnimationFrame(this.rafScrollSyncId);
+            this.rafScrollSyncId = null;
+        }
+        if (this.scrollEndTimer !== null) {
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = null;
+        }
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+            this.resizeTimer = undefined;
+        }
+        if (this.windowResizeHandler) {
+            window.removeEventListener('resize', this.windowResizeHandler);
+            this.windowResizeHandler = null;
+        }
+        if (this.mainViewportResizeObserver) {
+            this.mainViewportResizeObserver.disconnect();
+            this.mainViewportResizeObserver = null;
+        }
+        this.setHeaderResizingState(false);
+    }
+    /**
+     * 设置滚动同步
+     */
+    setupScrollSync() {
+        var _a;
+        if (!this.gridElement) {
+            this.gridElement =
+                this.element.closest('revo-grid') || undefined;
+        }
+        if (this.gridElement && !this.gridScrollHandler) {
+            this.gridScrollHandler = (e) => {
+                const detail = e.detail;
+                if (!detail || detail.dimension !== 'rgCol')
+                    return;
+                this.scheduleHeaderScroll();
+                this.scheduleScrollEndSync();
+            };
+            this.gridElement.addEventListener('viewportscroll', this.gridScrollHandler);
+        }
+        if (this.gridElement && !this.enhancedScrollHandler) {
+            this.enhancedScrollHandler = (e) => {
+                const detail = e.detail;
+                if (!detail)
+                    return;
+                this.scheduleHeaderScroll(detail.scrollLeft);
+                this.scheduleScrollEndSync();
+            };
+            this.gridElement.addEventListener('enhancedscrollsync', this.enhancedScrollHandler);
+        }
+        // 回退方案：直接监听 viewport 的 scroll 事件
+        this.scrollHandler = this.onViewportScroll.bind(this);
+        const viewports = document.querySelectorAll('revogr-viewport-scroll.rgCol');
+        this.mainViewportEl = (_a = this.gridElement) === null || _a === void 0 ? void 0 : _a.querySelector('revogr-viewport-scroll.rgCol:not(.grouping-overlay-viewport)');
+        if (this.mainViewportResizeObserver) {
+            this.mainViewportResizeObserver.disconnect();
+            this.mainViewportResizeObserver = null;
+        }
+        if (this.mainViewportEl) {
+            this.mainViewportResizeObserver = new ResizeObserver(() => {
+                this.syncHeaderTransformNow();
+            });
+            this.mainViewportResizeObserver.observe(this.mainViewportEl);
+        }
+        if (viewports.length === 0) {
+            // 如果还没找到，再延迟一次
+            setTimeout(() => this.setupScrollSync(), 200);
+            return;
+        }
+        viewports.forEach(viewport => {
+            viewport.addEventListener('scroll', this.scrollHandler);
+        });
+        // 初始化时同步一次，避免首次渲染有偏移
+        this.scheduleHeaderScroll();
+    }
+    /**
+     * Sync header translate with current rgCol scrollLeft immediately.
+     * Used during live resize to avoid one-frame lag between width update and transform update.
+     */
+    syncHeaderTransformNow() {
+        const scrollLeft = this.getMainViewportScrollLeft();
+        if (scrollLeft === null) {
+            return;
+        }
+        this.applyHeaderScroll(scrollLeft);
+        requestAnimationFrame(() => {
+            const latest = this.getMainViewportScrollLeft();
+            if (latest !== null) {
+                this.applyHeaderScroll(latest);
+            }
+        });
+    }
+    /**
+     * 处理 viewport 滚动事件
+     */
+    onViewportScroll(e) {
+        const viewport = e.target;
+        this.scheduleHeaderScroll(viewport.scrollLeft);
+        this.scheduleScrollEndSync();
+    }
+    scheduleHeaderScroll(scrollLeft) {
+        if (typeof scrollLeft === 'number') {
+            this.pendingScrollLeft = scrollLeft;
+            // 立即同步，减少快速滚动时的可见延迟
+            this.applyHeaderScroll(scrollLeft);
+            return;
+        }
+        if (this.rafScrollSyncId !== null) {
+            return;
+        }
+        this.rafScrollSyncId = requestAnimationFrame(() => {
+            var _a;
+            this.rafScrollSyncId = null;
+            let nextScrollLeft = (_a = this.pendingScrollLeft) !== null && _a !== void 0 ? _a : this.getMainViewportScrollLeft();
+            if (nextScrollLeft === null) {
+                nextScrollLeft = this.lastAppliedScrollLeft;
+            }
+            this.pendingScrollLeft = null;
+            if (nextScrollLeft === null) {
+                return;
+            }
+            this.applyHeaderScroll(nextScrollLeft);
+        });
+    }
+    scheduleScrollEndSync() {
+        if (this.scrollEndTimer !== null) {
+            clearTimeout(this.scrollEndTimer);
+        }
+        this.scrollEndTimer = window.setTimeout(() => {
+            this.scrollEndTimer = null;
+            // 滚动结束后再读取一次真实 scrollLeft，确保归位
+            this.scheduleHeaderScroll();
+        }, 80);
+    }
+    getMainViewportScrollLeft() {
+        var _a, _b;
+        if ((_a = this.mainViewportEl) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            return this.mainViewportEl.scrollLeft;
+        }
+        const grid = this.gridElement || this.element.closest('revo-grid');
+        this.mainViewportEl = (_b = grid === null || grid === void 0 ? void 0 : grid.querySelector('revogr-viewport-scroll.rgCol:not(.grouping-overlay-viewport)')) !== null && _b !== void 0 ? _b : null;
+        return this.mainViewportEl ? this.mainViewportEl.scrollLeft : null;
+    }
+    ensureHeaderDomRefs() {
+        var _a;
+        if (!this.headerRowsNeedRefresh &&
+            ((_a = this.rgColHeaderAreaEl) === null || _a === void 0 ? void 0 : _a.isConnected) &&
+            this.rgColHeaderRows.length) {
+            return false;
+        }
+        this.rgColHeaderAreaEl = this.element.querySelector('.header-area-rgCol');
+        this.rgColHeaderRows = this.rgColHeaderAreaEl
+            ? Array.from(this.rgColHeaderAreaEl.querySelectorAll('.group-rgRow, .actual-rgRow'))
+            : [];
+        this.headerRowsNeedRefresh = false;
+        return true;
+    }
+    applyHeaderScroll(scrollLeft) {
+        const didRefreshRows = this.ensureHeaderDomRefs();
+        if (!this.rgColHeaderAreaEl || this.rgColHeaderRows.length === 0) {
+            return;
+        }
+        if (!didRefreshRows && this.lastAppliedScrollLeft === scrollLeft) {
+            return;
+        }
+        // 使用 transform 来移动表头内容
+        const transform = `translateX(${-scrollLeft}px)`;
+        this.rgColHeaderRows.forEach(row => {
+            if (row.style.transform !== transform) {
+                row.style.transform = transform;
+            }
+        });
+        this.lastAppliedScrollLeft = scrollLeft;
+    }
+    componentDidRender() {
+        var _a;
+        this.headerRowsNeedRefresh = true;
+        // 每次渲染后同步一次滚动位置，避免滚动后渲染导致的错位/消失
+        this.scheduleHeaderScroll();
+        // 触发每个区域的 afterHeaderRender 事件
+        (_a = this.areas) === null || _a === void 0 ? void 0 : _a.forEach(area => {
+            this.afterHeaderRender.emit({
+                type: area.type,
+                readonly: area.readonly,
+                data: area.colData,
+                viewport: area.viewportCol,
+                dimension: area.dimensionCol,
+                selection: area.selectionStore,
+            });
+        });
+    }
+    /**
+     * 处理表头区域的滚轮事件
+     */
+    onHeaderWheel(e) {
+        const viewportScroll = this.element.closest('revogr-viewport-scroll');
+        if (!viewportScroll) {
+            return;
+        }
+        const scrollWidth = viewportScroll.scrollWidth || 0;
+        const clientWidth = viewportScroll.clientWidth || 0;
+        const maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
+        const SCROLL_THRESHOLD = 10;
+        const absX = Math.abs(e.deltaX);
+        const absY = Math.abs(e.deltaY);
+        const isHorizontalScroll = (absX > absY && absX > 0) || (e.shiftKey && absY > 0);
+        if (isHorizontalScroll && maxScrollLeft <= SCROLL_THRESHOLD) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (isHorizontalScroll) {
+            e.stopPropagation();
+            const customEvent = new CustomEvent('mousewheel-horizontal', {
+                bubbles: true,
+                detail: {
+                    deltaX: e.deltaX,
+                    deltaY: e.deltaY,
+                    shiftKey: e.shiftKey,
+                    preventDefault: () => e.preventDefault(),
+                },
+            });
+            this.element.dispatchEvent(customEvent);
+        }
+    }
+    render() {
+        // 在调整大小期间使用缓存的areas，避免使用新的areas导致跳动
+        let areasToRender = this.isResizingFlag && this.cachedAreas ? this.cachedAreas : this.areas;
+        if (!areasToRender || areasToRender.length === 0) {
+            return h(Host, null);
+        }
+        const isSynced = areasToRender.every(area => {
+            var _a;
+            const viewportVersion = (_a = area.viewportCol) === null || _a === void 0 ? void 0 : _a.get('version');
+            const colVersion = area.colVersion;
+            if (viewportVersion === undefined || colVersion === undefined) {
+                return true;
+            }
+            return viewportVersion === colVersion;
+        });
+        if (!isSynced && this.lastStableAreas) {
+            areasToRender = this.lastStableAreas;
+        }
+        else if (isSynced && !this.isResizingFlag) {
+            this.lastStableAreas = areasToRender;
+        }
+        // 渲染所有区域的表头
+        const areaHeaders = areasToRender.map(area => this.renderArea(area));
+        return (h(Host, { onWheel: (e) => this.onHeaderWheel(e) }, areaHeaders));
+    }
+    /**
+     * 创建包含所有列的扩展viewport items
+     * 用于在调整大小期间防止虚拟滚动移除DOM
+     */
+    createExpandedItems(area) {
+        const allCols = area.colData;
+        const expandedCols = [];
+        let currentStart = 0;
+        for (let i = 0; i < allCols.length; i++) {
+            const col = allCols[i];
+            const size = (col === null || col === void 0 ? void 0 : col.size) || 100;
+            expandedCols.push({
+                itemIndex: i,
+                start: currentStart,
+                end: currentStart + size,
+                size: size,
+            });
+            currentStart += size;
+        }
+        this.cachedExpandedItems.set(area.type, expandedCols);
+    }
+    buildFullItems(area, sizes) {
+        var _a, _b, _c, _d, _e;
+        const total = area.colData.length;
+        const defaultSize = ((_b = (_a = area.dimensionCol) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.originItemSize) || 100;
+        const items = [];
+        let currentStart = 0;
+        for (let i = 0; i < total; i++) {
+            const size = (_e = (_c = sizes[i]) !== null && _c !== void 0 ? _c : (_d = area.colData[i]) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : defaultSize;
+            const end = currentStart + size;
+            items.push({
+                itemIndex: i,
+                start: currentStart,
+                end,
+                size,
+            });
+            currentStart = end;
+        }
+        return items;
+    }
+    /**
+     * 更新缓存中指定列的尺寸，并调整后续列的位置
+     */
+    updateCachedItemSize(type, index, newSize) {
+        const cached = this.cachedExpandedItems.get(type);
+        if (!cached)
+            return;
+        // 直接通过索引访问（假设itemIndex和数组索引一致）
+        const item = cached[index];
+        if (!item || item.itemIndex !== index) {
+            // 如果索引不匹配，回退到查找
+            const foundItem = cached.find(i => i.itemIndex === index);
+            if (!foundItem)
+                return;
+            const oldSize = foundItem.size;
+            const sizeDiff = newSize - oldSize;
+            foundItem.size = newSize;
+            foundItem.end = foundItem.start + newSize;
+            // 更新后续所有列的位置
+            for (const item of cached) {
+                if (item.itemIndex > index) {
+                    item.start += sizeDiff;
+                    item.end += sizeDiff;
+                }
+            }
+            return;
+        }
+        // 快速路径：直接通过索引更新
+        const oldSize = item.size;
+        const sizeDiff = newSize - oldSize;
+        item.size = newSize;
+        item.end = item.start + newSize;
+        // 更新后续所有列的位置
+        for (let i = index + 1; i < cached.length; i++) {
+            cached[i].start += sizeDiff;
+            cached[i].end += sizeDiff;
+        }
+    }
+    renderArea(area) {
+        var _a, _b, _c, _d, _e, _f;
+        // 直接从 Observable 读取最新数据，而不是使用 prop 中的缓存数据
+        // 这样即使 revo-grid 没有重新渲染，我们也能获取到最新的列宽度
+        const viewportItems = area.viewportCol.get('items');
+        const dimensionState = area.dimensionCol.state;
+        let cols = viewportItems;
+        // 无论是否在调整大小，都需要使用最新的 dimensionState.sizes 更新列宽度
+        // 因为 viewportItems 中的 size 可能是旧的
+        const sizes = (dimensionState === null || dimensionState === void 0 ? void 0 : dimensionState.sizes) || {};
+        const viewportStart = (_b = (_a = viewportItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        let currentStart = 0;
+        // 统一表头不依赖虚拟列列表，避免滚动时列缺失导致空白
+        // rgCol 类型始终使用完整列表，避免虚拟滚动导致的重新渲染
+        const useFullColumns = area.type === 'rgCol';
+        // 如果正在调整大小，使用缓存的扩展列（包含所有列）
+        if (this.isResizingFlag) {
+            const cached = this.cachedExpandedItems.get(area.type);
+            if (cached) {
+                currentStart = (_d = (_c = cached[0]) === null || _c === void 0 ? void 0 : _c.start) !== null && _d !== void 0 ? _d : 0;
+                // 使用最新尺寸重新计算位置
+                cols = cached.map(item => {
+                    var _a;
+                    const size = (_a = sizes[item.itemIndex]) !== null && _a !== void 0 ? _a : item.size;
+                    const result = Object.assign(Object.assign({}, item), { size, start: currentStart, end: currentStart + size });
+                    currentStart += size;
+                    return result;
+                });
+            }
+        }
+        else if (useFullColumns || viewportItems.length === 0) {
+            // rgCol 类型始终构建完整列表，避免虚拟滚动导致列重新渲染
+            cols = this.buildFullItems(area, sizes);
+            currentStart = (_f = (_e = cols[0]) === null || _e === void 0 ? void 0 : _e.start) !== null && _f !== void 0 ? _f : 0;
+        }
+        else {
+            // 不在调整大小时，也需要使用最新的 sizes 更新 viewportItems
+            currentStart = viewportStart;
+            cols = viewportItems.map(item => {
+                var _a;
+                const size = (_a = sizes[item.itemIndex]) !== null && _a !== void 0 ? _a : item.size;
+                const result = Object.assign(Object.assign({}, item), { size, start: currentStart, end: currentStart + size });
+                currentStart += size;
+                return result;
+            });
+        }
+        const range = area.selectionRange;
+        const groupedIndexes = this.getGroupedColumnIndexes(area);
+        const { groupedCells, ungroupedCells } = this.renderHeaderColumns(area, cols, range, groupedIndexes);
+        const groupRow = this.renderGroupingColumns(area, cols);
+        const multiRowHeight = this.getMultiHeaderRowHeight(area);
+        const rowStyle = multiRowHeight !== undefined
+            ? { height: `${multiRowHeight}px`, lineHeight: `${multiRowHeight}px` }
+            : undefined;
+        // 计算区域宽度
+        // 非冻结区域（rgCol）应该始终使用 realSize（所有列的总宽度）
+        // 冻结区域使用视口列的宽度
+        let areaWidth = 0;
+        if (area.type === 'rgCol') {
+            // 非冻结区域：使用 dimensionState.realSize（所有列的总宽度）
+            areaWidth = (dimensionState === null || dimensionState === void 0 ? void 0 : dimensionState.realSize) || 0;
+            if (!areaWidth && cols.length > 0) {
+                areaWidth = cols[cols.length - 1].end - cols[0].start;
+            }
+        }
+        else if (cols.length > 0) {
+            // 冻结区域：使用视口列的宽度
+            areaWidth = cols[cols.length - 1].end - cols[0].start;
+        }
+        const areaStyle = {
+            width: areaWidth > 0 ? `${areaWidth}px` : undefined,
+        };
+        // 统一使用分组结构：
+        // - 如果没有分组（groupingDepth === 0），所有列都放在 group-rgRow 中，actual-rgRow 为空
+        // - 如果有分组（groupingDepth > 0），未分组的列放在 group-rgRow 中，分组的子列放在 actual-rgRow 中
+        return (h("div", { class: `header-area header-area-${area.type}`, style: areaStyle, key: area.type }, h("div", { class: "group-rgRow", style: rowStyle }, groupRow, area.groupingDepth === 0 ? groupedCells : ungroupedCells), area.groupingDepth > 0 && (h("div", { class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}`, style: rowStyle }, groupedCells))));
+    }
+    getGroupedColumnIndexes(area) {
+        const groupedIndexes = new Set();
+        if (area.groupingDepth > 0 && area.groups) {
+            for (let i = 0; i < area.groupingDepth; i++) {
+                if (area.groups[i]) {
+                    for (const group of area.groups[i]) {
+                        for (const idx of group.indexes) {
+                            groupedIndexes.add(idx);
+                        }
+                    }
+                }
+            }
+        }
+        return groupedIndexes;
+    }
+    renderHeaderColumns(area, cols, range, groupedIndexes) {
+        const groupedCells = [];
+        const ungroupedCells = [];
+        const lastColIndex = cols.length > 0 ? cols[cols.length - 1].itemIndex : -1;
+        for (let i = 0; i < cols.length; i++) {
+            const rgCol = cols[i];
+            const colData = area.colData[rgCol.itemIndex];
+            const isGrouped = area.groupingDepth > 0 && groupedIndexes.has(rgCol.itemIndex);
+            const isLastColumn = rgCol.itemIndex === lastColIndex && ((area.hasColPinEnd && area.type === 'colPinEnd') ||
+                (!area.hasColPinEnd && area.hasRgCol && area.type === 'rgCol') ||
+                (!area.hasColPinEnd && !area.hasRgCol && area.type === 'colPinStart'));
+            const props = {
+                range,
+                column: rgCol,
+                data: Object.assign(Object.assign({}, colData), { index: rgCol.itemIndex, providers: {
+                        type: area.type,
+                        readonly: area.readonly,
+                        data: area.colData,
+                        viewport: area.viewportCol,
+                        dimension: area.dimensionCol,
+                        selection: area.selectionStore,
+                    } }),
+                canFilter: !!area.columnFilter,
+                canResize: (colData === null || colData === void 0 ? void 0 : colData.resizable) !== false && area.canResize,
+                active: area.resizeHandler || ['r'],
+                additionalData: area.additionalData,
+                onResize: e => this.onResize(area, e, rgCol.itemIndex),
+                onDblClick: e => this.headerdblClick.emit(e),
+                onClick: e => this.initialHeaderClick.emit(e),
+                merged: area.groupingDepth > 0 && !isGrouped,
+                groupingDepth: area.groupingDepth,
+                isGrouped,
+                isLastColumn,
+            };
+            const event = this.beforeHeaderRender.emit(props);
+            if (!event.defaultPrevented) {
+                const columnKey = (colData === null || colData === void 0 ? void 0 : colData.prop)
+                    ? `header-${area.type}-${colData.prop}`
+                    : `header-${area.type}-idx-${rgCol.itemIndex}`;
+                const cell = h(HeaderRenderer, Object.assign({ key: columnKey }, event.detail));
+                if (isGrouped) {
+                    groupedCells.push(cell);
+                }
+                else if (area.groupingDepth > 0) {
+                    ungroupedCells.push(cell);
+                }
+                else {
+                    groupedCells.push(cell);
+                }
+            }
+        }
+        return { groupedCells, ungroupedCells };
+    }
+    renderGroupingColumns(area, cols) {
+        var _a, _b, _c;
+        const groupRow = [];
+        const lastColIndex = cols.length > 0 ? cols[cols.length - 1].itemIndex : -1;
+        const multiRowHeight = this.getMultiHeaderRowHeight(area);
+        const groupDivStyle = multiRowHeight !== undefined ? { height: `${multiRowHeight}px` } : undefined;
+        const dimensionState = (_b = (_a = area.dimensionCol) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : area.dimensionState;
+        for (let i = 0; i < area.groupingDepth; i++) {
+            if (area.groups[i]) {
+                for (let group of area.groups[i]) {
+                    const groupStartIndex = (_c = group.indexes[0]) !== null && _c !== void 0 ? _c : -1;
+                    if (groupStartIndex > -1) {
+                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
+                        // 使用维度数据的绝对坐标计算分组区间，避免受 viewport 裁剪影响导致分组标题丢失
+                        const startItem = getItemByIndex(dimensionState, groupStartIndex);
+                        const endItem = getItemByIndex(dimensionState, groupEndIndex);
+                        const groupStart = startItem.start;
+                        const groupEnd = endItem.end;
+                        const isLastColumn = groupEndIndex === lastColIndex && ((area.hasColPinEnd && area.type === 'colPinEnd') ||
+                            (!area.hasColPinEnd && area.hasRgCol && area.type === 'rgCol') ||
+                            (!area.hasColPinEnd && !area.hasRgCol && area.type === 'colPinStart'));
+                        const props = {
+                            providers: {
+                                type: area.type,
+                                readonly: area.readonly,
+                                data: area.colData,
+                                viewport: area.viewportCol,
+                                dimension: area.dimensionCol,
+                                selection: area.selectionStore,
+                            },
+                            start: groupStart,
+                            end: groupEnd,
+                            group,
+                            active: area.resizeHandler,
+                            canResize: false,
+                            additionalData: area.additionalData,
+                            onResize: e => { var _a; return this.onResizeGroup(area, (_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex); },
+                            isLastColumn,
+                        };
+                        const event = this.beforeGroupHeaderRender.emit(props);
+                        if (!event.defaultPrevented) {
+                            const groupKey = `group-header-${area.type}-${i}-${groupStartIndex}`;
+                            groupRow.push(h(HeaderGroupRenderer, Object.assign({ key: groupKey }, event.detail)));
+                        }
+                    }
+                }
+            }
+            groupRow.push(h("div", { class: `${HEADER_ROW_CLASS} group`, style: groupDivStyle }));
+        }
+        return groupRow;
+    }
+    /**
+     * 开始调整大小（第一次拖动时调用）
+     */
+    startResizing(area) {
+        if (!this.isResizingFlag) {
+            this.isResizingFlag = true;
+            this.setHeaderResizingState(true);
+            // 缓存当前的areas，避免在调整大小期间使用新的areas
+            this.cachedAreas = this.areas;
+            // 为所有区域创建扩展列缓存（包含所有列）
+            this.createExpandedItems(area);
+        }
+    }
+    /**
+     * 重置调整大小的定时器
+     */
+    resetResizeTimer() {
+        if (this.resizeTimer) {
+            clearTimeout(this.resizeTimer);
+        }
+        this.resizeTimer = window.setTimeout(() => {
+            this.isResizingFlag = false;
+            this.cachedExpandedItems.clear();
+            this.cachedAreas = null;
+            this.setHeaderResizingState(false);
+        }, this.RESIZE_DEBOUNCE_TIME);
+    }
+    onResize(area, { width }, index) {
+        this.startResizing(area);
+        const col = area.colData[index];
+        const event = this.beforeResize.emit([
+            Object.assign(Object.assign({}, col), { size: width || undefined }),
+        ]);
+        if (event.defaultPrevented) {
+            return;
+        }
+        const sizes = { [index]: width || 0 };
+        this.emitResize(area, sizes);
+        this.syncHeaderTransformNow();
+        // 更新缓存中的列尺寸
+        if (area.type === 'rgCol' && this.cachedExpandedItems.has(area.type)) {
+            this.updateCachedItemSize(area.type, index, width || 0);
+        }
+        this.resetResizeTimer();
+    }
+    onResizeGroup(area, changedX, startIndex, endIndex) {
+        this.startResizing(area);
+        const sizes = {};
+        const items = area.viewportItems;
+        const cols = keyBy(items, 'itemIndex');
+        const change = changedX / (endIndex - startIndex + 1);
+        for (let i = startIndex; i <= endIndex; i++) {
+            const item = cols[i];
+            if (item) {
+                sizes[i] = item.size + change;
+            }
+        }
+        this.emitResize(area, sizes);
+        this.syncHeaderTransformNow();
+        // 批量更新缓存中的列尺寸
+        if (area.type === 'rgCol' && this.cachedExpandedItems.has(area.type)) {
+            for (const [idx, size] of Object.entries(sizes)) {
+                this.updateCachedItemSize(area.type, parseInt(idx), size);
+            }
+        }
+        this.resetResizeTimer();
+    }
+    /**
+     * 触发 resize 事件
+     */
+    emitResize(area, sizes) {
+        this.headerresize.emit(sizes);
+        // 调用区域的 onHeaderresize 回调
+        if (area.onHeaderresize) {
+            area.onHeaderresize(new CustomEvent('headerresize', { detail: sizes }));
+        }
+    }
+    getMultiHeaderRowHeight(area) {
+        if (!this.hasCachedBaseHeaderRowHeight) {
+            const computedStyle = getComputedStyle(this.element);
+            const cssHeight = computedStyle.getPropertyValue('--rg-header-row-height').trim();
+            const heightValue = cssHeight ? parseFloat(cssHeight) : NaN;
+            this.cachedBaseHeaderRowHeight = !isNaN(heightValue) ? heightValue : null;
+            this.hasCachedBaseHeaderRowHeight = true;
+        }
+        const baseHeight = this.cachedBaseHeaderRowHeight;
+        if (baseHeight !== null) {
+            // 如果有分组，每行高度为总高度的一半
+            // 如果没有分组，使用完整高度
+            return area.groupingDepth > 0 ? baseHeight / 2 : baseHeight;
+        }
+        return undefined;
+    }
+    get element() { return getElement(this); }
+};
+RevogrHeaderUnifiedComponent.style = revogrHeaderUnifiedStyleCss;
+
+const DIRECTION_CODES = [
+    codesLetter.TAB,
+    codesLetter.ARROW_UP,
+    codesLetter.ARROW_DOWN,
+    codesLetter.ARROW_LEFT,
+    codesLetter.ARROW_RIGHT,
+];
+class KeyboardService {
+    constructor(sv) {
+        this.sv = sv;
+    }
+    async keyDown(e, canRange, isEditMode, { range, focus }) {
+        // IF EDIT MODE
+        if (isEditMode) {
+            switch (e.code) {
+                case codesLetter.ESCAPE:
+                    this.sv.cancel();
+                    break;
+                case codesLetter.TAB:
+                    this.keyChangeSelection(e, canRange);
+                    break;
+            }
+            return;
+        }
+        // IF NOT EDIT MODE
+        if (this.isEventFromEditable(e)) {
+            return;
+        }
+        // pressed clear key
+        if (range && isClear(e.code)) {
+            this.sv.clearCell();
+            return;
+        }
+        // below works with focus only
+        if (!focus) {
+            return;
+        }
+        // tab key means same as arrow right
+        if (isTab(e.code)) {
+            this.keyChangeSelection(e, canRange);
+            return;
+        }
+        // pressed enter
+        if (isEnterKeyValue(e.key)) {
+            this.sv.change();
+            return;
+        }
+        // copy operation
+        if (isCopy(e)) {
+            return;
+        }
+        // cut operation
+        if (isCut(e)) {
+            return;
+        }
+        // paste operation
+        if (isPaste(e)) {
+            this.sv.internalPaste();
+            return;
+        }
+        // select all
+        if (isAll(e)) {
+            if (canRange) {
+                this.selectAll(e);
+            }
+            return;
+        }
+        // pressed letter key
+        if (e.key.length === 1) {
+            this.sv.change(e.key);
+            return;
+        }
+        // pressed arrow, change selection position
+        if (await this.keyChangeSelection(e, canRange)) {
+            return;
+        }
+    }
+    selectAll(e) {
+        const range = this.sv.selectionStore.get('range');
+        const focus = this.sv.selectionStore.get('focus');
+        // if no range or focus - do nothing
+        if (!range || !focus) {
+            return;
+        }
+        e.preventDefault();
+        this.sv.selectAll();
+    }
+    async keyChangeSelection(e, canRange) {
+        const data = this.changeDirectionKey(e, canRange);
+        if (!data) {
+            return false;
+        }
+        // this interval needed for several cases
+        // grid could be resized before next click
+        // at this case to avoid screen jump we use this interval
+        await timeout(RESIZE_INTERVAL + 30);
+        const range = this.sv.selectionStore.get('range');
+        const focus = this.sv.selectionStore.get('focus');
+        return this.keyPositionChange(data.changes, range, focus, data.isMulti);
+    }
+    keyPositionChange(changes, range, focus, isMulti = false) {
+        if (!range || !focus) {
+            return false;
+        }
+        const data = getCoordinate(range, focus, changes, isMulti);
+        if (!data) {
+            return false;
+        }
+        const eData = this.sv.getData();
+        if (isMulti) {
+            if (isAfterLast(data.end, eData.lastCell) || isBeforeFirst(data.start)) {
+                return false;
+            }
+            const range = getRange(data.start, data.end);
+            return this.sv.range(range);
+        }
+        return this.sv.focus(data.start, changes, isAfterLast(data.start, eData.lastCell)
+            ? 1
+            : isBeforeFirst(data.start)
+                ? -1
+                : 0);
+    }
+    /** Monitor key direction changes */
+    changeDirectionKey(e, canRange) {
+        const isMulti = canRange && e.shiftKey;
+        // If event comes from editable element, do not hijack browser key behavior.
+        if (this.isEventFromEditable(e) && DIRECTION_CODES.includes(e.code)) {
+            return;
+        }
+        if (DIRECTION_CODES.includes(e.code)) {
+            e.preventDefault();
+        }
+        if (e.shiftKey) {
+            switch (e.code) {
+                case codesLetter.TAB:
+                    return { changes: { x: -1 }, isMulti: false };
+            }
+        }
+        switch (e.code) {
+            case codesLetter.ARROW_UP:
+                return { changes: { y: -1 }, isMulti };
+            case codesLetter.ARROW_DOWN:
+                return { changes: { y: 1 }, isMulti };
+            case codesLetter.ARROW_LEFT:
+                return { changes: { x: -1 }, isMulti };
+            case codesLetter.TAB:
+            case codesLetter.ARROW_RIGHT:
+                return { changes: { x: 1 }, isMulti };
+        }
+    }
+    isEventFromEditable(e) {
+        const target = e.target;
+        if (target) {
+            const tagName = target.tagName;
+            if (tagName === 'INPUT' ||
+                tagName === 'TEXTAREA' ||
+                tagName === 'SELECT' ||
+                target.isContentEditable) {
+                return true;
+            }
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement) {
+            return false;
+        }
+        return (activeElement.tagName === 'INPUT' ||
+            activeElement.tagName === 'TEXTAREA' ||
+            activeElement.tagName === 'SELECT' ||
+            activeElement.isContentEditable);
+    }
+}
+
+class AutoFillService {
+    constructor(sv) {
+        this.sv = sv;
+        this.autoFillType = null;
+        this.autoFillInitial = null;
+        this.autoFillStart = null;
+        this.autoFillLast = null;
+    }
+    /**
+     * Render autofill box
+     * @param range
+     * @param selectionFocus
+     */
+    renderAutofill(range, selectionFocus, isMobile = false) {
+        let handlerStyle;
+        if (range) {
+            handlerStyle = getCell(range, this.sv.dimensionRow.state, this.sv.dimensionCol.state);
+        }
+        else {
+            handlerStyle = getCell(Object.assign(Object.assign({}, selectionFocus), { x1: selectionFocus.x, y1: selectionFocus.y }), this.sv.dimensionRow.state, this.sv.dimensionCol.state);
+        }
+        return (h("div", { class: {
+                [CELL_HANDLER_CLASS]: true,
+                [MOBILE_CLASS]: isMobile,
+            }, style: {
+                left: `${handlerStyle.right}px`,
+                top: `${handlerStyle.bottom}px`,
+            }, onMouseDown: (e) => this.autoFillHandler(e), onTouchStart: (e) => this.autoFillHandler(e) }));
+    }
+    autoFillHandler(e, type = "AutoFill" /* AutoFillType.autoFill */) {
+        let target = null;
+        if (e.target instanceof Element) {
+            target = e.target;
+        }
+        if (!target) {
+            return;
+        }
+        this.selectionStart(target, this.sv.getData(), type);
+        e.preventDefault();
+    }
+    get isAutoFill() {
+        return !!this.autoFillType;
+    }
+    /**
+     * Process mouse move events
+     */
+    selectionMouseMove(e) {
+        // initiate mouse move debounce if not present
+        if (!this.onMouseMoveAutofill) {
+            this.onMouseMoveAutofill = debounce((e, data) => this.doAutofillMouseMove(e, data), 5);
+        }
+        if (this.isAutoFill) {
+            this.onMouseMoveAutofill(e, this.sv.getData());
+        }
+    }
+    getFocus(focus, range) {
+        // there was an issue that it was taking last cell from range but focus was out
+        if (!focus && range) {
+            focus = { x: range.x, y: range.y };
+        }
+        return focus || null;
+    }
+    /**
+     * Autofill logic:
+     * on mouse move apply based on previous direction (if present)
+     */
+    doAutofillMouseMove(event, data) {
+        // if no initial - not started
+        if (!this.autoFillInitial) {
+            return;
+        }
+        const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);
+        const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);
+        // skip touch
+        if (x === null || y === null) {
+            return;
+        }
+        const current = getCurrentCell({ x, y }, data);
+        // first time or direction equal to start(same as first time)
+        if (!this.autoFillLast) {
+            if (!this.autoFillLast) {
+                this.autoFillLast = this.autoFillStart;
+            }
+        }
+        // check if not the latest, if latest - do nothing
+        if (isAfterLast(current, data.lastCell)) {
+            return;
+        }
+        this.autoFillLast = current;
+        const isSame = current.x === this.autoFillInitial.x &&
+            current.y === this.autoFillInitial.y;
+        // if same as initial - clear
+        if (isSame) {
+            this.sv.setTempRange(null);
+        }
+        else {
+            const area = getRange(this.autoFillInitial, this.autoFillLast);
+            this.sv.setTempRange({
+                area,
+                type: this.autoFillType,
+            });
+        }
+    }
+    /**
+     * Range selection started
+     * Mode @param type:
+     * Can be triggered from MouseDown selection on element
+     * Or can be triggered on corner square drag
+     */
+    selectionStart(target, data, type = "Selection" /* AutoFillType.selection */) {
+        /** Get cell by autofill element */
+        const { top, left } = target.getBoundingClientRect();
+        this.autoFillInitial = this.getFocus(data.focus, data.range);
+        this.autoFillType = type;
+        this.autoFillStart = getCurrentCell({ x: left, y: top }, data);
+    }
+    /**
+     * Clear current range selection on mouse up and mouse leave events
+     */
+    clearAutoFillSelection(focus, oldRange) {
+        // If autofill was active, apply autofill values
+        if (this.autoFillInitial) {
+            // Fetch latest focus
+            this.autoFillInitial = this.getFocus(focus, oldRange);
+            // Apply range data if autofill mode is active
+            if (this.autoFillType === "AutoFill" /* AutoFillType.autoFill */) {
+                const range = getRange(this.autoFillInitial, this.autoFillLast);
+                // If range is present, apply data
+                if (range) {
+                    const { defaultPrevented: stopApply, detail: { range: newRange }, } = this.sv.clearRangeDataApply({
+                        range,
+                    });
+                    // If data apply was not prevented, apply new range
+                    if (!stopApply && oldRange) {
+                        this.applyRangeWithData(newRange, oldRange);
+                    }
+                    else {
+                        // If data apply was prevented, clear temporary range
+                        this.sv.setTempRange(null);
+                    }
+                }
+            }
+            else {
+                // If not autofill mode, apply range only
+                this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);
+            }
+        }
+        // Reset autofill state
+        this.resetAutoFillState();
+    }
+    /**
+     * Reset autofill state
+     */
+    resetAutoFillState() {
+        this.autoFillType = null;
+        this.autoFillInitial = null;
+        this.autoFillLast = null;
+        this.autoFillStart = null;
+    }
+    /**
+     * Trigger range apply events and handle responses
+     */
+    onRangeApply(newData, newRange, oldRange) {
+        this.sv.rangeDataApply({
+            data: newData,
+            models: collectModelsOfRange(newData, this.sv.dataStore),
+            type: this.sv.dataStore.get('type'),
+            oldRange,
+            newRange
+        });
+        this.sv.setRange(newRange);
+    }
+    /** Apply range and copy data during range application */
+    applyRangeWithData(newRange, rangeToCopy) {
+        const rangeData = {
+            type: this.sv.dataStore.get('type'),
+            colType: this.sv.columnService.type,
+            newData: {},
+            mapping: {},
+            newRange,
+            oldRange: rangeToCopy,
+        };
+        const { mapping, changed } = this.sv.columnService.getRangeData(rangeData, this.sv.columnService.columns);
+        rangeData.newData = changed;
+        rangeData.mapping = mapping;
+        let e = this.sv.selectionChanged(rangeData);
+        // if default prevented - clear range
+        if (e.defaultPrevented) {
+            this.sv.setTempRange(null);
+            return;
+        }
+        e = this.sv.rangeCopy(rangeData);
+        if (e.defaultPrevented) {
+            this.sv.setRange(newRange);
+            return;
+        }
+        this.onRangeApply(rangeData.newData, newRange, rangeToCopy);
+    }
+    /**
+     * Update range selection only,
+     * no data change (mouse selection)
+     */
+    applyRangeOnly(start, end) {
+        // no changes to apply
+        if (!start || !end) {
+            return;
+        }
+        const newRange = getRange(start, end);
+        this.sv.setRange(newRange);
+    }
+}
+
+const revogrOverlayStyleCss = "revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:\"\";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:\"\";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:\"\";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:\"\";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}";
+
+const OverlaySelection = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.beforeCopyRegion = createEvent(this, "beforecopyregion", 7);
+        this.beforeRegionPaste = createEvent(this, "beforepasteregion", 7);
+        this.cellEditApply = createEvent(this, "celleditapply", 7);
+        this.beforeFocusCell = createEvent(this, "beforecellfocusinit", 7);
+        this.cellClick = createEvent(this, "cellclickinit", 7);
+        this.beforeNextViewportFocus = createEvent(this, "beforenextvpfocus", 7);
+        this.setEdit = createEvent(this, "setedit", 7);
+        this.beforeApplyRange = createEvent(this, "beforeapplyrange", 7);
+        this.beforeSetRange = createEvent(this, "beforesetrange", 7);
+        this.setRange = createEvent(this, "setrange", 7);
+        this.beforeEditRender = createEvent(this, "beforeeditrender", 7);
+        this.selectAll = createEvent(this, "selectall", 7);
+        this.cancelEdit = createEvent(this, "canceledit", 7);
+        this.setTempRange = createEvent(this, "settemprange", 7);
+        this.beforeSetTempRange = createEvent(this, "beforesettemprange", 7);
+        this.applyFocus = createEvent(this, "applyfocus", 7);
+        this.focusCell = createEvent(this, "focuscell", 7);
+        this.beforeRangeDataApply = createEvent(this, "beforerangedataapply", 7);
+        this.selectionChange = createEvent(this, "selectionchangeinit", 7);
+        this.beforeRangeCopyApply = createEvent(this, "beforerangecopyapply", 7);
+        this.rangeEditApply = createEvent(this, "rangeeditapply", 7);
+        this.rangeClipboardCopy = createEvent(this, "clipboardrangecopy", 7);
+        this.rangeClipboardPaste = createEvent(this, "clipboardrangepaste", 7);
+        this.beforeKeyDown = createEvent(this, "beforekeydown", 7);
+        this.beforeKeyUp = createEvent(this, "beforekeyup", 7);
+        this.beforeCellSave = createEvent(this, "beforecellsave", 7);
+        this.cellEditDone = createEvent(this, "celledit", 7);
+        /**
+         * If true applys changes when cell closes if not Escape.
+         */
+        this.applyChangesOnClose = false;
+        this.keyboardService = null;
+        this.autoFillService = null;
+        this.unsubscribeSelectionStore = [];
+        /** Long press detection for cell click */
+        this.mouseDownTimestamp = 0;
+        this.mouseDownCell = null;
+        /** Long press threshold in milliseconds */
+        this.LONG_PRESS_THRESHOLD = 300;
+    }
+    // #endregion
+    // #region Listeners
+    onMouseMove(e) {
+        var _a;
+        if (this.selectionStore.get('focus')) {
+            (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionMouseMove(e);
+        }
+    }
+    /**
+     * Action finished inside the document.
+     * Pointer left document, clear any active operation.
+     */
+    onMouseUp() {
+        var _a;
+        // Clear autofill selection
+        // when pointer left document,
+        // clear any active operation.
+        (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.clearAutoFillSelection(this.selectionStore.get('focus'), this.selectionStore.get('range'));
+    }
+    /**
+     * Row drag started.
+     * This event is fired when drag action started on cell.
+     */
+    onCellDrag(e) {
+        var _a;
+        // Invoke drag start on order editor.
+        (_a = this.orderEditor) === null || _a === void 0 ? void 0 : _a.dragStart(e.detail);
+    }
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is released.
+     */
+    onKeyUp(e) {
+        // Emit before key up event.
+        this.beforeKeyUp.emit(Object.assign({ original: e }, this.getData()));
+    }
+    /**
+     * Get keyboard down from element.
+     * This event is fired when keyboard key is pressed.
+     */
+    onKeyDown(e) {
+        var _a;
+        // Emit before key down event and check if default prevention is set.
+        const proxy = this.beforeKeyDown.emit(Object.assign({ original: e }, this.getData()));
+        if (e.defaultPrevented || proxy.defaultPrevented) {
+            return;
+        }
+        // Invoke key down on keyboard service.
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyDown(e, this.range, !!this.selectionStore.get('edit'), {
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
+        });
+    }
+    // #endregion
+    /**
+     * Selection & Keyboard
+     */
+    selectionServiceSet(selectionStore) {
+        // clear subscriptions
+        this.unsubscribeSelectionStore.forEach(v => v());
+        this.unsubscribeSelectionStore.length = 0;
+        this.unsubscribeSelectionStore.push(selectionStore.onChange('nextFocus', v => v && this.doFocus(v, v)));
+        this.keyboardService = new KeyboardService({
+            selectionStore,
+            range: r => !!r && this.triggerRangeEvent(r),
+            focus: (f, changes, focusNextViewport) => {
+                if (focusNextViewport) {
+                    this.beforeNextViewportFocus.emit(f);
+                    return false;
+                }
+                else {
+                    return this.doFocus(f, f, changes);
+                }
+            },
+            change: val => {
+                if (this.readonly) {
+                    return;
+                }
+                this.doEdit(val);
+            },
+            cancel: async () => {
+                var _a;
+                await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
+                this.closeEdit();
+            },
+            clearCell: () => !this.readonly && this.clearCell(),
+            internalPaste: () => !this.readonly && this.beforeRegionPaste.emit(),
+            getData: () => this.getData(),
+            selectAll: () => this.selectAll.emit(),
+        });
+        this.createAutoFillService();
+    }
+    /** Autofill */
+    createAutoFillService() {
+        this.autoFillService = new AutoFillService({
+            dimensionRow: this.dimensionRow,
+            dimensionCol: this.dimensionCol,
+            columnService: this.columnService,
+            dataStore: this.dataStore,
+            clearRangeDataApply: e => this.beforeRangeDataApply.emit(Object.assign(Object.assign(Object.assign({}, e), this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) })),
+            setTempRange: e => {
+                const tempRangeEvent = this.beforeSetTempRange.emit(Object.assign(Object.assign({ tempRange: e }, this.getData()), this.types));
+                if (tempRangeEvent.defaultPrevented) {
+                    return null;
+                }
+                return this.setTempRange.emit(tempRangeEvent.detail.tempRange);
+            },
+            selectionChanged: e => this.selectionChange.emit(e),
+            rangeCopy: e => this.beforeRangeCopyApply.emit(e),
+            rangeDataApply: e => this.rangeEditApply.emit(e),
+            setRange: e => !!e && this.triggerRangeEvent(e),
+            getData: () => this.getData(),
+        });
+    }
+    /** Columns */
+    columnServiceSet() {
+        var _a;
+        (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.columnService = new ColumnService(this.dataStore, this.colData);
+        this.createAutoFillService();
+    }
+    connectedCallback() {
+        this.columnServiceSet();
+        this.selectionServiceSet(this.selectionStore);
+    }
+    disconnectedCallback() {
+        var _a;
+        // clear subscriptions
+        this.unsubscribeSelectionStore.forEach(v => v());
+        this.unsubscribeSelectionStore.length = 0;
+        (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    async componentWillRender() {
+        var _a, _b;
+        const editCell = this.selectionStore.get('edit');
+        if (!editCell) {
+            await ((_b = (_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.beforeDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a));
+        }
+    }
+    renderRange(range) {
+        const cell = getCell(range, this.dimensionRow.state, this.dimensionCol.state);
+        const styles = styleByCellProps(cell);
+        return [
+            h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && (h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))),
+        ];
+    }
+    renderEditor() {
+        // Check if edit access
+        const editCell = this.selectionStore.get('edit');
+        // Readonly or Editor closed
+        if (this.readonly || !editCell) {
+            return null;
+        }
+        const enteredOrModelValue = editCell.val ||
+            getCellData(this.columnService.rowDataModel(editCell.y, editCell.x).value);
+        const editable = Object.assign(Object.assign({}, editCell), this.columnService.getSaveData(editCell.y, editCell.x, enteredOrModelValue));
+        const renderEvent = this.beforeEditRender.emit(Object.assign(Object.assign({ range: Object.assign(Object.assign({}, editCell), { x1: editCell.x, y1: editCell.y }) }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) }));
+        // Render prevented
+        if (renderEvent.defaultPrevented) {
+            return null;
+        }
+        const cell = getCell(renderEvent.detail.range, renderEvent.detail.rowDimension, renderEvent.detail.colDimension);
+        const styles = styleByCellProps(cell);
+        return (h("revogr-edit", { style: styles, ref: el => (this.revogrEdit = el), additionalData: this.additionalData, editCell: editable, saveOnClose: this.applyChangesOnClose, onCelleditinit: (e) => {
+                this.cellEditDone.emit(e.detail);
+            }, column: this.columnService.rowDataModel(editCell.y, editCell.x), editor: getCellEditor(this.columnService.columns[editCell.x], this.editors) }));
+    }
+    onEditCell(e) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        const saveEv = this.beforeCellSave.emit(e.detail);
+        if (!saveEv.defaultPrevented) {
+            this.cellEdit(saveEv.detail);
+        }
+        // if not clear navigate to next cell after edit
+        if (!saveEv.detail.preventFocus) {
+            this.focusNext();
+        }
+    }
+    render() {
+        var _a;
+        const nodes = [];
+        const editCell = this.renderEditor();
+        // Editor
+        if (editCell) {
+            nodes.push(editCell);
+        }
+        else {
+            const range = this.selectionStore.get('range');
+            const focus = this.selectionStore.get('focus');
+            // Clipboard
+            if ((range || focus) && this.useClipboard) {
+                nodes.push(h("revogr-clipboard", { readonly: this.readonly, onCopyregion: e => this.onCopy(e.detail), onClearregion: () => !this.readonly && this.clearCell(), ref: e => (this.clipboard = e), onPasteregion: e => this.onPaste(e.detail) }));
+            }
+            // Range
+            if (range) {
+                nodes.push(...this.renderRange(range));
+            }
+            // Autofill
+            if (focus && !this.readonly && this.range) {
+                nodes.push((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.renderAutofill(range, focus, this.isMobileDevice));
+            }
+            // Order
+            if (this.canDrag) {
+                nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
+            }
+        }
+        return (h(Host, { key: 'df967dd624daf8a7bbe5659dbb4b3de3607de9dc', class: { mobile: this.isMobileDevice }, onClick: (e) => this.onElementClick(e), onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+            // it's done to be able to throw events from different levels, not just from editor
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '08683c584d712c1482ec37c86d151e45a27ef2bb', name: "data" })));
+    }
+    /**
+     * Executes the focus operation on the specified range of cells.
+     */
+    doFocus(focus, end, changes) {
+        var _a;
+        // 0. Check if column allows focus
+        const cellData = this.columnService.getSaveData(focus.y, focus.x);
+        if (((_a = cellData.column) === null || _a === void 0 ? void 0 : _a.canFocus) === false) {
+            return false;
+        }
+        // 1. Trigger beforeFocus event
+        const { defaultPrevented } = this.beforeFocusCell.emit(cellData);
+        if (defaultPrevented) {
+            return false;
+        }
+        const evData = Object.assign(Object.assign({ range: Object.assign(Object.assign({}, focus), { x1: end.x, y1: end.y }), next: changes }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) });
+        // 2. Trigger apply focus event
+        const applyEvent = this.applyFocus.emit(evData);
+        if (applyEvent.defaultPrevented) {
+            return false;
+        }
+        const { range } = applyEvent.detail;
+        // 3. Trigger focus event
+        return !this.focusCell.emit(Object.assign({ focus: {
+                x: range.x,
+                y: range.y,
+            }, end: {
+                x: range.x1,
+                y: range.y1,
+            } }, applyEvent.detail)).defaultPrevented;
+    }
+    triggerRangeEvent(range) {
+        const type = this.types.rowType;
+        // 1. Apply range
+        const applyEvent = this.beforeApplyRange.emit(Object.assign(Object.assign({ range: Object.assign({}, range) }, this.types), { rowDimension: Object.assign({}, this.dimensionRow.state), colDimension: Object.assign({}, this.dimensionCol.state) }));
+        if (applyEvent.defaultPrevented) {
+            return false;
+        }
+        const data = this.columnService.getRangeTransformedToProps(applyEvent.detail.range, this.dataStore);
+        // 2. Before set range
+        let e = this.beforeSetRange.emit(data);
+        if (e.defaultPrevented) {
+            return false;
+        }
+        // 3. Set range
+        e = this.setRange.emit(Object.assign(Object.assign({}, applyEvent.detail.range), { type }));
+        if (e.defaultPrevented) {
+            return false;
+        }
+        return !e.defaultPrevented;
+    }
+    /**
+     * Open Editor on DblClick
+     */
+    onElementDblClick(e) {
+        // DblClick prevented outside - Editor will not open
+        if (e.defaultPrevented) {
+            return;
+        }
+        // Allow native text selection flow, do not open editor.
+        if (this.hasNativeTextSelection()) {
+            return;
+        }
+        // Get data from the component
+        const data = this.getData();
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
+            return;
+        }
+        this.doEdit();
+    }
+    /**
+     * Handle mouse down event on Host element
+     */
+    onElementMouseDown(e, touch = false) {
+        var _a;
+        // Get the target element from the event object
+        const targetElement = e.target;
+        // Ignore focus if clicked input
+        if (isEditInput(targetElement) || e.defaultPrevented) {
+            return;
+        }
+        // Ignore focus if clicked checkbox
+        const isCheckboxClick = (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('.rv-checkbox')) ||
+            (targetElement === null || targetElement === void 0 ? void 0 : targetElement.closest('.row-checkbox')) ||
+            (targetElement === null || targetElement === void 0 ? void 0 : targetElement.classList.contains('rv-checkbox')) ||
+            (targetElement === null || targetElement === void 0 ? void 0 : targetElement.classList.contains('row-checkbox'));
+        if (isCheckboxClick) {
+            return;
+        }
+        // Ignore right click (button 2) and middle click (button 1)
+        if (!touch && e.button !== 0) {
+            return;
+        }
+        // Get data from the component
+        const data = this.getData();
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
+            return;
+        }
+        // Record mousedown timestamp and cell for long press detection
+        this.mouseDownTimestamp = Date.now();
+        this.mouseDownCell = focusCell;
+        // Set focus on the current cell
+        this.focus(focusCell, this.range && e.shiftKey);
+        // Initiate autofill selection
+        if (this.range) {
+            targetElement &&
+                ((_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.selectionStart(targetElement, this.getData()));
+            // Prevent default behavior for mouse events,
+            // but only if target element is not a mobile input
+            if (!touch) {
+                e.preventDefault();
+            }
+            else if (verifyTouchTarget(e.touches[0], MOBILE_CLASS)) {
+                // Prevent default behavior for touch events
+                // if target element is a mobile input
+                e.preventDefault();
+            }
+        }
+    }
+    /**
+     * Handle click event on Host element
+     * This is triggered by native click event, which naturally handles long press
+     * (long press won't trigger click event)
+     */
+    onElementClick(e) {
+        var _a;
+        // Get the target element from the event object
+        const targetElement = e.target;
+        // Ignore if clicked input or default prevented
+        if (isEditInput(targetElement) || e.defaultPrevented) {
+            return;
+        }
+        // Only handle left click
+        if (e.button !== 0) {
+            return;
+        }
+        // Get data from the component
+        const data = this.getData();
+        const focusCell = getFocusCellBasedOnEvent(e, data);
+        if (!focusCell) {
+            return;
+        }
+        const clickDuration = this.mouseDownTimestamp > 0
+            ? Date.now() - this.mouseDownTimestamp
+            : 0;
+        // Allow native text selection flow, do not emit cell click.
+        // But if this is a quick re-click on the same cell, keep cellclick behavior stable.
+        if (this.hasNativeTextSelection()) {
+            const sameCellQuickClick = !!this.mouseDownCell &&
+                this.mouseDownCell.x === focusCell.x &&
+                this.mouseDownCell.y === focusCell.y &&
+                clickDuration < this.LONG_PRESS_THRESHOLD;
+            if (!sameCellQuickClick) {
+                this.mouseDownTimestamp = 0;
+                this.mouseDownCell = null;
+                return;
+            }
+            (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+        }
+        // Check if this is a long press
+        if (this.mouseDownTimestamp > 0 && this.mouseDownCell) {
+            if (clickDuration >= this.LONG_PRESS_THRESHOLD) {
+                // This is a long press, don't emit cellclick
+                this.mouseDownTimestamp = 0;
+                this.mouseDownCell = null;
+                return;
+            }
+        }
+        // Reset long press detection
+        this.mouseDownTimestamp = 0;
+        this.mouseDownCell = null;
+        // Emit cell click event
+        const cellData = this.columnService.getSaveData(focusCell.y, focusCell.x);
+        this.cellClick.emit(Object.assign(Object.assign({}, cellData), { originalEvent: e }));
+    }
+    hasNativeTextSelection() {
+        const selection = window.getSelection();
+        if (!selection || selection.type !== 'Range' || selection.toString().length === 0) {
+            return false;
+        }
+        if (!selection.rangeCount) {
+            return false;
+        }
+        const range = selection.getRangeAt(0);
+        const container = range.commonAncestorContainer;
+        const selectionRoot = container.nodeType === Node.TEXT_NODE ? container.parentNode : container;
+        return !!selectionRoot && this.element.contains(selectionRoot);
+    }
+    /**
+     * Start cell editing
+     */
+    doEdit(val = '') {
+        var _a;
+        if (this.canEdit()) {
+            const focus = this.selectionStore.get('focus');
+            if (!focus) {
+                return;
+            }
+            const data = this.columnService.getSaveData(focus.y, focus.x);
+            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        }
+    }
+    /**
+     * Close editor event triggered
+     * @param details - if it requires focus next
+     */
+    async closeEdit(e) {
+        this.cancelEdit.emit();
+        if (e === null || e === void 0 ? void 0 : e.detail) {
+            await this.focusNext();
+        }
+    }
+    /**
+     * Edit finished.
+     * Close Editor and save.
+     */
+    cellEdit(e) {
+        const dataToSave = this.columnService.getSaveData(e.rgRow, e.rgCol, e.val);
+        this.cellEditApply.emit(dataToSave);
+    }
+    getRegion() {
+        const focus = this.selectionStore.get('focus');
+        let range = this.selectionStore.get('range');
+        if (!range) {
+            range = getRange(focus, focus);
+        }
+        return range;
+    }
+    onCopy(e) {
+        var _a;
+        const range = this.getRegion();
+        const canCopyEvent = this.beforeCopyRegion.emit(range);
+        if (canCopyEvent.defaultPrevented) {
+            return false;
+        }
+        let rangeData;
+        if (range) {
+            const { data, mapping } = this.columnService.copyRangeArray(range, this.dataStore);
+            const event = this.rangeClipboardCopy.emit(Object.assign({ range,
+                data,
+                mapping }, this.types));
+            if (!event.defaultPrevented) {
+                rangeData = event.detail.data;
+            }
+        }
+        (_a = this.clipboard) === null || _a === void 0 ? void 0 : _a.doCopy(e, rangeData);
+        return true;
+    }
+    onPaste(data) {
+        var _a;
+        const focus = this.selectionStore.get('focus');
+        const isEditing = this.selectionStore.get('edit') !== null;
+        if (!focus || isEditing) {
+            return;
+        }
+        let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
+        const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
+        if (canPaste) {
+            return;
+        }
+        (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
+    }
+    async focusNext() {
+        var _a;
+        const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
+            code: codesLetter.ARROW_DOWN,
+        }), this.range));
+        if (!canFocus) {
+            this.closeEdit();
+        }
+    }
+    clearCell() {
+        var _a;
+        const range = this.selectionStore.get('range');
+        if (range && !isRangeSingleCell(range)) {
+            const data = this.columnService.getRangeStaticData(range, '');
+            (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(data, range, range);
+        }
+        else if (this.canEdit()) {
+            const focused = this.selectionStore.get('focus');
+            if (!focused) {
+                return;
+            }
+            const cell = this.columnService.getSaveData(focused.y, focused.x);
+            this.cellEdit({
+                rgRow: focused.y,
+                rgCol: focused.x,
+                val: '',
+                type: cell.type,
+                prop: cell.prop,
+            });
+        }
+    }
+    rowDragStart({ detail }) {
+        detail.text = getCellData(this.columnService.rowDataModel(detail.cell.y, detail.cell.x).value);
+    }
+    /**
+     * Verify if edit allowed.
+     */
+    canEdit() {
+        var _a;
+        if (this.readonly) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        return focus && !((_a = this.columnService) === null || _a === void 0 ? void 0 : _a.isReadOnly(focus.y, focus.x));
+    }
+    get edited() {
+        return this.selectionStore.get('edit');
+    }
+    /**
+     * Sets the focus on a cell and optionally edits a range.
+     */
+    focus(cell, isRangeEdit = false) {
+        if (!cell)
+            return false;
+        const end = cell;
+        const start = this.selectionStore.get('focus');
+        if (isRangeEdit && start) {
+            const range = getRange(start, end);
+            if (range) {
+                return this.triggerRangeEvent(range);
+            }
+        }
+        return this.doFocus(cell, end);
+    }
+    get types() {
+        return {
+            rowType: this.dataStore.get('type'),
+            colType: this.columnService.type,
+        };
+    }
+    /**
+     * Collect data
+     */
+    getData() {
+        return {
+            el: this.element,
+            rows: this.dimensionRow.state,
+            cols: this.dimensionCol.state,
+            lastCell: this.lastCell,
+            focus: this.selectionStore.get('focus'),
+            range: this.selectionStore.get('range'),
+            edit: this.selectionStore.get('edit'),
+        };
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "selectionStore": ["selectionServiceSet"],
+        "dimensionRow": ["createAutoFillService"],
+        "dimensionCol": ["createAutoFillService"],
+        "dataStore": ["columnServiceSet"],
+        "colData": ["columnServiceSet"]
+    }; }
+};
+OverlaySelection.style = revogrOverlayStyleCss;
+
+const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;
+
+const RevogrRowHeaders = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scrollViewport = createEvent(this, "scrollview", 3);
+        this.elementToScroll = createEvent(this, "ref", 3);
+        /**
+         * 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 = [];
+    }
+    render() {
+        const dataViews = [];
+        const viewport = new ViewportStore('colPinStart');
+        /** render viewports rows */
+        let totalLength = 1;
+        // todo: this part could be optimized to avoid to often re-render dataPorts can be cached
+        for (let data of this.dataPorts) {
+            const itemCount = data.dataStore.get('items').length;
+            // initiate row data
+            const dataStore = new DataStore(data.type, Object.assign({}, data.dataStore.state));
+            // initiate column data
+            const colData = new DataStore('colPinStart');
+            const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
+            colData.updateData([column]);
+            dataViews.push(h("revogr-data", Object.assign({}, data, { colType: "rowHeaders", jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
+            totalLength += itemCount;
+        }
+        const colSize = calculateRowHeaderSize(totalLength, this.rowHeaderColumn);
+        viewport.setViewport({
+            realCount: 1,
+            virtualSize: 0,
+            items: [
+                {
+                    size: colSize,
+                    start: 0,
+                    end: colSize,
+                    itemIndex: 0,
+                },
+            ],
+        });
+        const viewportScroll = {
+            contentHeight: this.height,
+            contentWidth: 0,
+            style: { minWidth: `${colSize}px` },
+            colType: 'rowHeaders',
+            ref: (el) => this.elementToScroll.emit(el),
+            onScrollviewport: (e) => this.scrollViewport.emit(e.detail),
+        };
+        const viewportHeader = Object.assign(Object.assign({}, this.headerProp), {
+            // groups not present on row headers
+            groups: [], colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE,
+            // parent,
+            slot: HEADER_SLOT
+        });
+        return (h(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, h("revogr-viewport-scroll", Object.assign({ key: '7f9783c740a051771d58dca3313900b2fa48b531' }, viewportScroll, { "row-header": true }), h("revogr-header", Object.assign({ key: '0aa96a4867349e473ef1a387d09919527e221a6b' }, viewportHeader)), dataViews)));
+    }
+};
+
+/**
+ * Autohide scroll for MacOS when scroll is visible only for 1 sec
+ */
+class AutohideScrollPlugin {
+    constructor(element) {
+        this.element = element;
+        this.autohideScrollTimeout = 0;
+    }
+    /**
+     * When scroll size updates set it up for autohide
+     */
+    setScrollSize(s) {
+        if (!s) {
+            this.element.setAttribute('autohide', 'true');
+        }
+        else {
+            this.element.removeAttribute('autohide');
+        }
+    }
+    /**
+     * On each scroll check if it's time to show
+     */
+    checkScroll({ scrollSize, contentSize, virtualSize, }) {
+        const hasScroll = contentSize > virtualSize;
+        const isHidden = !scrollSize && hasScroll;
+        if (isHidden) {
+            this.element.setAttribute('visible', 'true');
+            this.autohideScrollTimeout = this.show(this.element, this.autohideScrollTimeout);
+        }
+    }
+    show(element, timeout) {
+        clearTimeout(timeout);
+        return Number(setTimeout(() => {
+            element === null || element === void 0 ? void 0 : element.removeAttribute('visible');
+        }, 1000));
+    }
+    clear() {
+        clearTimeout(this.autohideScrollTimeout);
+    }
+}
+
+const revogrScrollStyleCss = "revogr-scroll-virtual[autohide]{position:absolute;z-index:100 !important}revogr-scroll-virtual[autohide].vertical{top:0;right:0}revogr-scroll-virtual[autohide].vertical[visible]{min-width:20px !important}revogr-scroll-virtual[autohide].horizontal{bottom:0;left:0}revogr-scroll-virtual[autohide].horizontal[visible]{min-height:20px !important}revogr-scroll-virtual.vertical{overflow-y:auto;overflow-x:hidden;height:100%}revogr-scroll-virtual.vertical>div{width:1px}revogr-scroll-virtual.horizontal{overflow-x:auto;overflow-y:hidden;width:100%}revogr-scroll-virtual.horizontal>div{height:1px}";
+
+const RevogrScrollVirtual = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scrollVirtual = createEvent(this, "scrollvirtual", 7);
+        /**
+         * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
+         */
+        this.dimension = 'rgRow';
+        this.scrollSize = 0;
+        // 防抖定时器
+        this.scrollSizeUpdateTimer = null;
+    }
+    async setScroll(e) {
+        var _a;
+        if (this.dimension !== e.dimension) {
+            return;
+        }
+        this.localScrollTimer.latestScrollUpdate(e.dimension);
+        (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.setScroll(e);
+        if (e.coordinate) {
+            this.autohideScrollPlugin.checkScroll({
+                scrollSize: this.scrollSize,
+                contentSize: this.realSize,
+                virtualSize: this.virtualSize,
+            });
+        }
+    }
+    /**
+     * Update if `delta` exists in case we don't know current position or if it's external change
+     */
+    async changeScroll(e) {
+        if (e.delta) {
+            // 滚动阈值：小于此值认为没有实际滚动空间
+            const SCROLL_THRESHOLD = 10;
+            const clientSize = this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth;
+            const diff = this.realSize - clientSize;
+            // 如果没有滚动空间，不处理滚动
+            if (diff <= SCROLL_THRESHOLD) {
+                e.coordinate = 0;
+                return e;
+            }
+            switch (e.dimension) {
+                case 'rgCol':
+                    e.coordinate = this.element.scrollLeft + e.delta;
+                    break;
+                case 'rgRow':
+                    e.coordinate = this.element.scrollTop + e.delta;
+                    break;
+            }
+            this.setScroll(e);
+        }
+        return e;
+    }
+    connectedCallback() {
+        this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);
+        this.localScrollTimer = new LocalScrollTimer('ontouchstart' in document.documentElement ? 0 : 10);
+        this.localScrollService = new LocalScrollService({
+            runScroll: e => this.scrollVirtual.emit(e),
+            applyScroll: e => {
+                this.localScrollTimer.setCoordinate(e);
+                const type = e.dimension === 'rgRow' ? 'scrollTop' : 'scrollLeft';
+                // this will trigger on scroll event
+                this.element[type] = e.coordinate;
+            },
+        });
+    }
+    disconnectedCallback() {
+        this.autohideScrollPlugin.clear();
+        if (this.scrollSizeUpdateTimer) {
+            clearTimeout(this.scrollSizeUpdateTimer);
+        }
+    }
+    componentWillLoad() {
+        this.scrollSize = getScrollbarSize(document);
+    }
+    componentDidRender() {
+        // 使用防抖来更新滚动条尺寸，避免 resize 过程中的闪烁
+        if (this.scrollSizeUpdateTimer) {
+            clearTimeout(this.scrollSizeUpdateTimer);
+        }
+        this.scrollSizeUpdateTimer = setTimeout(() => {
+            this.scrollSizeUpdateTimer = null;
+            this.updateScrollSize();
+        }, RevogrScrollVirtual.SCROLL_SIZE_UPDATE_DELAY);
+        this.localScrollService.setParams({
+            contentSize: this.realSize,
+            clientSize: this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth,
+            virtualSize: this.clientSize,
+        }, this.dimension);
+    }
+    /**
+     * 更新滚动条尺寸
+     */
+    updateScrollSize() {
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        let scrollSize = 0;
+        if (this.dimension === 'rgRow') {
+            // 使用 realSize（内容实际高度）和 clientHeight（可见区域高度）来判断
+            const diff = this.realSize - this.element.clientHeight;
+            scrollSize = diff > SCROLL_THRESHOLD ? this.scrollSize : 0;
+            this.element.style.minWidth = `${scrollSize}px`;
+        }
+        else {
+            // 使用 realSize（内容实际宽度）和 clientWidth（可见区域宽度）来判断
+            const diff = this.realSize - this.element.clientWidth;
+            scrollSize = diff > SCROLL_THRESHOLD ? this.scrollSize : 0;
+            this.element.style.minHeight = `${scrollSize}px`;
+        }
+        this.autohideScrollPlugin.setScrollSize(scrollSize);
+    }
+    onScroll(e) {
+        if (!(e.target instanceof Element)) {
+            return;
+        }
+        const target = e.target;
+        let type = 'scrollLeft';
+        if (this.dimension === 'rgRow') {
+            type = 'scrollTop';
+        }
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        const clientSize = this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth;
+        const diff = this.realSize - clientSize;
+        // 如果没有滚动空间，不处理滚动事件
+        if (diff <= SCROLL_THRESHOLD) {
+            return;
+        }
+        const setScroll = () => {
+            var _a;
+            (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(target[type] || 0, this.dimension);
+        };
+        // apply after throttling
+        if (this.localScrollTimer.isReady(this.dimension, target[type])) {
+            setScroll();
+        }
+        else {
+            this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());
+        }
+    }
+    render() {
+        // 滚动阈值：小于此值认为没有实际滚动空间
+        const SCROLL_THRESHOLD = 10;
+        const clientSize = this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth;
+        const diff = this.realSize - clientSize;
+        // 如果差值小于阈值，不显示滚动内容（避免闪烁）
+        if (diff <= SCROLL_THRESHOLD) {
+            return (h(Host, { onScroll: (e) => this.onScroll(e) }, h("div", { style: { [this.dimension === 'rgRow' ? 'height' : 'width']: '0px' } })));
+        }
+        const size = getContentSize(this.realSize, clientSize, this.clientSize);
+        return (h(Host, { onScroll: (e) => this.onScroll(e) }, h("div", { style: {
+                [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
+            } })));
+    }
+    get element() { return getElement(this); }
+};
+// 防抖延迟时间
+RevogrScrollVirtual.SCROLL_SIZE_UPDATE_DELAY = 200;
+RevogrScrollVirtual.style = revogrScrollStyleCss;
+
+const revogrTempRangeStyleCss = ".temp-bg-range{display:block !important;position:absolute;pointer-events:none;z-index:9;border:1px solid rgb(255, 94, 0);box-sizing:border-box}.temp-bg-range.Selection{border:1px dashed gray}.temp-bg-range>div{width:1px;height:1px;position:absolute}.temp-bg-range>div.top{top:-1px}.temp-bg-range>div.bottom{bottom:-1px}.temp-bg-range>div.left{left:-1px}.temp-bg-range>div.right{right:-1px}";
+
+const RevogrFocus = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onChange = throttle((e) => this.doChange(e), 300);
+    }
+    doChange(e) {
+        e === null || e === void 0 ? void 0 : e.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    componentDidRender() {
+        if (this.el) {
+            this.onChange(this.el);
+        }
+    }
+    render() {
+        const data = this.selectionStore.get('tempRange');
+        const type = this.selectionStore.get('tempRangeType');
+        if (!data) {
+            return;
+        }
+        let directionY = 'bottom';
+        let derectionX = 'right';
+        const range = this.getRange();
+        if (!range) {
+            return;
+        }
+        if (data.y < range.y) {
+            directionY = 'top';
+        }
+        if (data.x < range.x) {
+            derectionX = 'left';
+        }
+        const directionClass = `${derectionX} ${directionY}`;
+        const cell = getCell(data, this.dimensionRow.state, this.dimensionCol.state);
+        const styles = styleByCellProps(cell);
+        const props = {
+            class: {
+                [TMP_SELECTION_BG_CLASS]: true,
+                [type || '']: true,
+            },
+            style: styles,
+            hidden: false
+        };
+        return (h(Host, Object.assign({}, props), h("div", { class: directionClass, ref: (e) => (this.el = e) })));
+    }
+    getRange() {
+        const range = this.selectionStore.get('range');
+        if (range) {
+            return range;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, focus), { x1: focus.x, y1: focus.y });
+    }
+};
+RevogrFocus.style = revogrTempRangeStyleCss;
+
+export { Attribution as revogr_attribution, RevoGridExtra as revogr_extra, RevogrFocus$1 as revogr_focus, RevogrGroupingOverlay as revogr_grouping_overlay, RevogrHeaderUnifiedComponent as revogr_header_unified, OverlaySelection as revogr_overlay_selection, RevogrRowHeaders as revogr_row_headers, RevogrScrollVirtual as revogr_scroll_virtual, RevogrFocus as revogr_temp_range };
+//# sourceMappingURL=revogr-attribution.revogr-extra.revogr-focus.revogr-grouping-overlay.revogr-header-unified.revogr-overlay-selection.revogr-row-headers.revogr-scroll-virtual.revogr-temp-range.entry.js.map
+
+//# sourceMappingURL=revogr-attribution_9.entry.js.map