@ai-table/grid 0.1.41 → 0.1.43

package/fesm2022/ai-table-grid.mjs

@@ -53,7 +53,7 @@ import { isArray, TinyDate, helpers, hexToRgb } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
 import GraphemeSplitter from 'grapheme-splitter';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { NgClass, CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
@@ -546,6 +546,7 @@ var AITableGridI18nKey;
     AITableGridI18nKey["selectedRecordsCount"] = "selectedRecordsCount";
     AITableGridI18nKey["selectedCellsCount"] = "selectedCellsCount";
     AITableGridI18nKey["stat"] = "stat";
+    AITableGridI18nKey["emptyGroup"] = "emptyGroup";
 })(AITableGridI18nKey || (AITableGridI18nKey = {}));
 const AITableGridI18nText = {
     [AITableGridI18nKey.dataPickerPlaceholder]: '选择日期',
@@ -598,7 +599,8 @@ const AITableGridI18nText = {
     [AITableGridI18nKey.dateRangeOfMonthsResult]: '时间范围 {{statValue}} 月',
     [AITableGridI18nKey.selectedRecordsCount]: '已经选择 {count} 条记录',
     [AITableGridI18nKey.selectedCellsCount]: '已经选择 {count} 个单元格',
-    [AITableGridI18nKey.stat]: '统计'
+    [AITableGridI18nKey.stat]: '统计',
+    [AITableGridI18nKey.emptyGroup]: '(空)'
 };
 const getDefaultI18nTextByKey = (key) => {
     return AITableGridI18nText[key] || key;
@@ -919,10 +921,11 @@ const AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 const AI_TABLE_FIELD_STAT_INNER_HEIGHT = 47; // 字段统计内部高度
 const AI_TABLE_TEXT_LINE_HEIGHT = 1.84; // 默认文本行高
-const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_OFFSET * 2; // 统计容器高度
+const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT + AI_TABLE_CELL_LINE_BORDER * 2; // 统计容器高度
 const AI_TABLE_GROUP_MAX_LEVEL = 3;
 const AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON = 'AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON';
 const AI_TABLE_ROW_GROUP_OFFSET = 16;
+const AI_TABLE_SHADOW_DEFAULT_WIDTH = 8;
 
 const MIN_COLUMN_WIDTH = 80;
 const DBL_CLICK_EDIT_TYPE = [
@@ -1971,13 +1974,15 @@ const buildGridLinearRows = (visibleRecords, isAddingVisible = true, aiTable, ai
             linearRows.push({
                 type: AITableRowType.record,
                 _id: row._id,
-                displayIndex: displayRowIndex
+                displayIndex: displayRowIndex,
+                depth: 0
             });
         }
         if (isAddingVisible && !row._id) {
             linearRows.push({
                 type: AITableRowType.add,
-                _id: ''
+                _id: '',
+                depth: 0
             });
         }
     });
@@ -2146,7 +2151,13 @@ function selectCells(aiTable, startCell, endCell, activeCell) {
         selectedCells.add(`${startRecordId}:${startFieldId}`);
     }
     else {
-        if (endCell && endCell.join(':') === aiTable.selection().selectedEndCell?.join(':')) {
+        const startCellPath = startCell.join(':');
+        const endCellPath = endCell.join(':');
+        const selectCells = Array.from(aiTable.selection().selectedCells);
+        const startSelectedCellPath = selectCells[0];
+        const endSelectedCellPath = selectCells[selectCells.length - 1];
+        if ((startCellPath === startSelectedCellPath || startCellPath === endSelectedCellPath) &&
+            (endCellPath === startSelectedCellPath || endCellPath === endSelectedCellPath)) {
             return;
         }
         const [endRecordId, endFieldId] = endCell;
@@ -2159,8 +2170,11 @@ function selectCells(aiTable, startCell, endCell, activeCell) {
         const minColIndex = Math.min(startColIndex, endColIndex);
         const maxColIndex = Math.max(startColIndex, endColIndex);
         for (let i = minRowIndex; i <= maxRowIndex; i++) {
-            for (let j = minColIndex; j <= maxColIndex; j++) {
-                selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
+            const row = records[i];
+            if (row && row.type === AITableRowType.record) {
+                for (let j = minColIndex; j <= maxColIndex; j++) {
+                    selectedCells.add(`${row._id}:${fields[j]._id}`);
+                }
             }
         }
     }
@@ -3526,6 +3540,20 @@ function buildClipboardContent(aiTable, fieldIds, recordIds) {
     return clipboardContent;
 }
 
+function getGroupLastRecordIndex(aiTable, startRowIndex) {
+    const linearRows = aiTable.context.linearRows();
+    if (startRowIndex + 1 >= linearRows.length) {
+        return startRowIndex;
+    }
+    for (let i = startRowIndex + 1; i < linearRows.length; i++) {
+        const row = linearRows[i];
+        if (row.type !== AITableRowType.record) {
+            return i - 1;
+        }
+    }
+    return linearRows.length - 1;
+}
+
 const aiTableAttributePattern = new RegExp(`${aiTableFragmentAttribute}="(.+?)"`, 'm');
 const decodeClipboardJsonData = (encoded) => {
     const decoded = decodeURIComponent(window.atob(encoded));
@@ -3671,14 +3699,20 @@ const writeToAITable = async (aiTable, actions) => {
     const maxFields = aiTable.context.maxFields();
     const maxRecords = aiTable.context.maxRecords();
     const startRowIndex = aiTable.context.visibleRowsIndexMap().get(startRecordId) ?? 0;
-    const lastRowIndex = aiTable.context.linearRows().length - 1;
+    const lastRowIndex = getGroupLastRecordIndex(aiTable, startRowIndex);
+    let appendRowCount = clipboardContent.length - (lastRowIndex - startRowIndex) - 1;
     const recordsCount = aiTable.records().length;
-    let appendRowCount = clipboardContent.length - (lastRowIndex - startRowIndex);
     if (maxRecords && recordsCount + appendRowCount > maxRecords) {
         appendRowCount = maxRecords - recordsCount;
         result.isPasteOverMaxRecords = true;
     }
-    actions.addRecord({ count: appendRowCount });
+    if (appendRowCount > 0) {
+        actions.addRecord({
+            count: appendRowCount,
+            afterRecordId: startRecordId,
+            forGroupId: startRecordId
+        });
+    }
     const startColIndex = aiTable.context.visibleColumnsIndexMap().get(startFieldId) ?? 0;
     const lastColIndex = aiTable.context.visibleColumnsIndexMap().size - 1;
     const copiedFieldLength = clipboardContent[0].length;
@@ -3702,12 +3736,12 @@ const writeToAITable = async (aiTable, actions) => {
         if (maxRecords && targetRowIndex >= maxRecords) {
             return;
         }
+        const targetRecord = linearRows[targetRowIndex];
         row.forEach((plainText, j) => {
             const targetColIndex = startColIndex + j;
             if (maxFields && targetColIndex >= maxFields) {
                 return;
             }
-            const targetRecord = linearRows[targetRowIndex];
             const targetField = visibleFields[targetColIndex];
             const recordIndex = i;
             const fieldIndex = j;
@@ -5480,9 +5514,10 @@ class Layout extends Drawer {
         this.hiddenIndexColumn = false;
         this.hiddenRowDrag = false;
         this.readonly = false;
+        this.xIsScroll = false;
     }
     // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, hiddenRowDrag, readonly, frozenColumnCount }) {
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, hiddenRowDrag, readonly, frozenColumnCount, xIsScroll }) {
         this.x = x;
         this.y = y;
         this.rowIndex = rowIndex;
@@ -5496,6 +5531,7 @@ class Layout extends Drawer {
         this.hiddenRowDrag = hiddenRowDrag;
         this.readonly = readonly;
         this.frozenColumnCount = frozenColumnCount;
+        this.xIsScroll = xIsScroll;
     }
     // 当前单元格是否是行的第一列
     get isFirst() {
@@ -5523,6 +5559,22 @@ class Layout extends Drawer {
             fill
         });
     }
+    renderFrozenShadow() {
+        if (this.isLastFrozenColumn && this.xIsScroll) {
+            const shadowWidth = AI_TABLE_SHADOW_DEFAULT_WIDTH;
+            const shadowGradient = this.ctx.createLinearGradient(this.x + this.columnWidth + 0, this.y, this.x + this.columnWidth + 0 + shadowWidth, this.y);
+            // 阴影从分割线处最深，逐渐变浅
+            shadowGradient.addColorStop(0, 'rgba(0,0,0,0.05)');
+            shadowGradient.addColorStop(1, this.colors.transparent);
+            this.rect({
+                x: this.x + this.columnWidth + 0,
+                y: this.y,
+                width: shadowWidth,
+                height: this.rowHeight,
+                fill: shadowGradient
+            });
+        }
+    }
 }
 
 class AddRowLayout extends Layout {
@@ -6890,6 +6942,7 @@ class RecordRowLayout extends Layout {
         this.renderFirstCell({ row, style, indexStyle, isCheckedRow, isHoverRow });
         this.renderCommonCell({ style });
         this.renderLastCell({ style, isCheckedRow, isHoverRow });
+        this.renderFrozenShadow();
     }
 }
 const recordRowLayout = new RecordRowLayout();
@@ -6933,7 +6986,7 @@ class GroupLayout extends Layout {
             // 第一列单元格
             this.rect({
                 x: AI_TABLE_CELL_PADDING + dragOccupyWidth + 2,
-                y: this.y + (this.rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2,
+                y: this.y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2,
                 width: AI_TABLE_ICON_COMMON_SIZE,
                 height: AI_TABLE_ICON_COMMON_SIZE,
                 fill: hexToRgb(this.colors.gray400, 0.2),
@@ -6950,6 +7003,14 @@ class GroupLayout extends Layout {
                 columnWidth: render.columnWidth - iconContainerWidth
             }, this.ctx, columnWidth);
         }
+        else {
+            const emptyGroupString = getI18nTextByKey(aiTable, AITableGridI18nKey.emptyGroup);
+            this.text({
+                x: render.x + iconContainerWidth + AI_TABLE_CELL_PADDING,
+                y: this.y + (rowHeight - AI_TABLE_COMMON_FONT_SIZE) / 2,
+                text: emptyGroupString
+            });
+        }
     }
     renderCommonCellBorder({ style }) {
         const { fill, stroke } = style || {};
@@ -6978,6 +7039,7 @@ class GroupLayout extends Layout {
         this.renderFirstCell(render, config);
         this.renderCommonCellBorder({ style });
         this.renderLastCell({ style, isHoverRow, isCheckedRow });
+        this.renderFrozenShadow();
     }
 }
 const groupLayout = new GroupLayout();
@@ -6993,7 +7055,7 @@ const createCells = (config) => {
     const { rowHeight, columnCount, rowCount } = coordinate;
     const colors = AITable.getColors();
     const visibleColumns = AITable.getVisibleFields(aiTable);
-    const linearRows = aiTable.context?.linearRows();
+    const xIsScroll = aiTable.context.scrollState().scrollLeft > 0;
     // 初始化绘图上下文, 为后续的绘制操作做准备
     cellDrawer.initCtx(ctx);
     addRowLayout.initCtx(ctx);
@@ -7069,7 +7131,8 @@ const createCells = (config) => {
                         hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn,
                         hiddenRowDrag: !!context.aiFieldConfig()?.hiddenRowDrag,
                         readonly: aiTable.context?.readonly?.(),
-                        frozenColumnCount
+                        frozenColumnCount,
+                        xIsScroll
                     });
                     recordRowLayout.render({
                         row,
@@ -7082,7 +7145,6 @@ const createCells = (config) => {
                     const { width, offset } = getCellHorizontalPosition({
                         columnIndex,
                         columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
-                        // columnWidth,
                         columnCount,
                         depth
                     });
@@ -7148,7 +7210,8 @@ const createCells = (config) => {
                         hiddenIndexColumn: !!context.aiFieldConfig()?.hiddenIndexColumn,
                         hiddenRowDrag: !!context.aiFieldConfig()?.hiddenRowDrag,
                         readonly: aiTable.context?.readonly?.(),
-                        frozenColumnCount
+                        frozenColumnCount,
+                        xIsScroll
                     });
                     const { width, offset } = getCellHorizontalPosition({
                         columnIndex,
@@ -8176,9 +8239,10 @@ class AITableOtherRows {
                     break;
                 if (maxRecords && aiTable.records().length >= maxRecords)
                     break;
-                const { _id, type } = aiTable.context.linearRows()[rowIndex];
-                if (type === AITableRowType.record)
+                const linearRow = aiTable.context.linearRows()[rowIndex];
+                if (linearRow.type === AITableRowType.record)
                     continue;
+                const { _id, type } = linearRow;
                 const y = coordinate.getRowOffset(rowIndex);
                 const curHeight = coordinate.getRowHeight(rowIndex);
                 otherRowConfigs.push({
@@ -8186,7 +8250,10 @@ class AITableOtherRows {
                     addBtnConfig: {
                         key: `row-add-${_id}`,
                         y: y + 1,
-                        name: AI_TABLE_ROW_ADD_BUTTON,
+                        name: generateTargetName({
+                            targetName: AI_TABLE_ROW_ADD_BUTTON,
+                            source: _id
+                        }),
                         width: coordinate.containerWidth,
                         height: curHeight - 1,
                         fill: 'transparent'
@@ -8335,14 +8402,17 @@ class AITableBackground {
             return { x, y };
         });
         this.bgConfig = computed(() => {
-            const { name, width, height, fill = Colors.transparent, cornerRadius, opacity, hoverFill, hoverOpacity, listening } = this.config();
+            const { name, width, height, fill = Colors.transparent, opacity, hoverFill, hoverOpacity, listening, borders } = this.config();
+            const [top, right, bottom, left] = borders || [false, false, false, false];
             const active = this.isHover() || this.isActive();
+            const strokeWidth = this.strokeWidth() || AI_TABLE_OFFSET;
             const result = {
+                x: left ? 0 : strokeWidth,
+                y: top ? 0 : strokeWidth,
+                width: width - (left ? 0 : strokeWidth) - (right ? 0 : strokeWidth),
+                height: height - (top ? 0 : strokeWidth) - (bottom ? 0 : strokeWidth),
                 name,
-                width,
-                height,
                 fill: active ? hoverFill || fill : fill,
-                cornerRadius,
                 opacity: active ? hoverOpacity || opacity : opacity,
                 listening
             };
@@ -8420,46 +8490,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableFrozenFieldShadow {
+class AITableShadow {
     constructor() {
         this.config = input.required();
-        this.position = input('table');
-        this.coordinate = computed(() => {
-            return this.config().coordinate;
-        });
-        this.scrollState = computed(() => {
-            return this.config().aiTable.context.scrollState();
-        });
-        this.frozenAreaWidth = computed(() => {
-            return this.config().aiTable.context.rowHeadWidth() + this.config().coordinate.frozenColumnWidth;
-        });
-        this.frozenShadowConfig = computed(() => {
-            const { aiTable } = this.config();
-            const coordinate = this.coordinate();
-            const rowCount = aiTable.gridData().records.length;
-            const height = this.position() !== 'fieldStats'
-                ? rowCount * coordinate.rowHeight + AI_TABLE_FIELD_HEAD_HEIGHT
-                : this.config().height;
+        this.shadowConfig = computed(() => {
+            const { visible, x, y, width = AI_TABLE_SHADOW_DEFAULT_WIDTH, height } = this.config();
             return {
-                visible: this.scrollState().scrollLeft > 0,
-                x: this.frozenAreaWidth() + 1, // 偏移1，避免和边框重叠导致颜色太深
-                y: 0,
-                width: 8,
+                visible,
+                x,
+                y,
+                width,
                 height,
                 fillLinearGradientStartPoint: { x: 0, y: 0 },
-                fillLinearGradientEndPoint: { x: 8, y: 0 },
+                fillLinearGradientEndPoint: { x: width, y: 0 },
                 fillLinearGradientColorStops: [0, 'rgba(0,0,0,0.05)', 1, Colors.transparent]
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenFieldShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableFrozenFieldShadow, isStandalone: true, selector: "ai-table-frozen-field-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="frozenShadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenFieldShadow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-frozen-field-shadow',
-                    template: `<ko-rect [config]="frozenShadowConfig()"></ko-rect>`,
+                    selector: 'ai-table-shadow',
+                    template: `<ko-rect [config]="shadowConfig()"></ko-rect>`,
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -8911,177 +8966,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 args: ['rootGroup']
             }] } });
 
-class AITableFillHandle {
-    constructor() {
-        this.config = input.required();
-        this.showFillHandle = computed(() => {
-            const { aiTable, readonly } = this.config();
-            const selection = aiTable.selection();
-            const hasSelectedCells = selection.selectedCells.size > 0;
-            const isEditingCell = !!aiTable.editingCell()?.path;
-            return hasSelectedCells && !readonly && !isEditingCell;
-        });
-        this.handleConfig = computed(() => {
-            const { aiTable, coordinate } = this.config();
-            const selectedCells = Array.from(aiTable.selection().selectedCells);
-            const lastCell = selectedCells[selectedCells.length - 1];
-            const [recordId, fieldId] = lastCell.split(':');
-            const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
-            const columnOffset = coordinate.getColumnOffset(columnIndex);
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const rowIndex = aiTable.context.visibleRowsIndexMap().get(recordId);
-            const rowOffset = coordinate.getRowOffset(rowIndex);
-            const width = 6;
-            const height = 6;
-            const [expandRecordId, expandFieldId] = aiTable.expendCell()?.path || [null, null];
-            const cellHeight = expandRecordId === recordId && expandFieldId === fieldId && aiTable.expendCell()?.height
-                ? aiTable.expendCell()?.height
-                    ? aiTable.expendCell().height + AI_TABLE_CELL_LINE_BORDER
-                    : AI_TABLE_ROW_HEIGHT
-                : AI_TABLE_ROW_HEIGHT;
-            return {
-                x: columnOffset + columnWidth - width / 2 + AI_TABLE_OFFSET,
-                y: rowOffset + cellHeight - height + AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET,
-                width,
-                height,
-                fill: Colors.primary,
-                stroke: Colors.white,
-                strokeWidth: 2,
-                zIndex: 20,
-                name: generateTargetName({
-                    targetName: AI_TABLE_FILL_HANDLE,
-                    fieldId,
-                    recordId
-                })
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @if (showFillHandle()) {
-            <ko-rect [config]="handleConfig()"></ko-rect>
-        }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-fill-handle',
-                    template: `
-        @if (showFillHandle()) {
-            <ko-rect [config]="handleConfig()"></ko-rect>
-        }
-    `,
-                    imports: [KoShape]
-                }]
-        }] });
-
-class AITableCoverCellEntry {
-    constructor() {
-        this.config = input.required();
-        this.onlyDisplayBorder = input(false);
-        this.componentMap = {};
-        this.groupConfig = computed(() => {
-            return {
-                x: this.coverCellConfig()?.x,
-                y: this.coverCellConfig()?.y,
-                listening: true
-            };
-        });
-        this.coverCellConfig = computed(() => {
-            const { aiTable, coordinate, references, readonly, actions } = this.config();
-            const coverCell = this.coverCell();
-            if (!coverCell) {
-                return;
-            }
-            const { field, recordId, isExpand } = coverCell;
-            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
-            const fieldModel = FieldModelMap[field.type];
-            const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
-            const { rowHeight, columnCount, rowCount } = coordinate;
-            const columnIndex = aiTable.context?.visibleColumnsIndexMap().get(field._id) ?? 0;
-            const rowIndex = aiTable.context?.visibleRowsIndexMap().get(recordId) ?? 0;
-            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-            const { width } = getCellHorizontalPosition({
-                columnWidth,
-                columnIndex,
-                columnCount
-            });
-            const style = {
-                textAlign: DEFAULT_TEXT_ALIGN_LEFT
-            };
-            const textAlign = style.textAlign;
-            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
-                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
-                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
-            const renderY = 0 - AI_TABLE_OFFSET * 2;
-            const result = {
-                field,
-                recordId,
-                aiTable,
-                coordinate,
-                x,
-                y,
-                readonly,
-                actions,
-                isExpand,
-                render: {
-                    aiTable,
-                    recordId,
-                    field,
-                    isActive: isSelectedField(field._id, aiTable),
-                    x: renderX,
-                    y: renderY,
-                    columnWidth: width,
-                    rowHeight,
-                    cellValue,
-                    transformValue,
-                    style,
-                    references
-                }
-            };
-            return result;
+const createGroupCells = (config) => {
+    const { coordinate, rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex, aiTable, actions, readonly } = config;
+    const linearRows = aiTable.context?.linearRows();
+    const { columnCount } = coordinate;
+    const groups = [];
+    for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+        if (rowIndex > columnCount - 1)
+            break;
+        if (rowIndex < 0)
+            continue;
+        const row = linearRows[rowIndex];
+        const { depth } = row;
+        if (row == null)
+            continue;
+        if (row.type !== AITableRowType.group)
+            continue;
+        const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
+        const rowHeight = coordinate.getRowHeight(rowIndex);
+        const columnWidth = coordinate.getColumnWidth(columnStartIndex);
+        const { offset } = getCellHorizontalPosition({
+            columnIndex: columnStartIndex,
+            columnWidth,
+            columnCount,
+            depth
         });
-        this.coverCell = computed(() => getCoverCell(this.config().aiTable));
+        const x = coordinate.getColumnOffset(columnStartIndex);
+        const group = {
+            aiTable,
+            coordinate,
+            rowIndex,
+            x: x + offset + AI_TABLE_CELL_PADDING,
+            y,
+            height: rowHeight,
+            row: {
+                ...row,
+                rowIndex
+            },
+            readonly
+        };
+        groups.push(group);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-        @if (coverCell()) {
-            <ko-group #rootGroup [config]="groupConfig()">
-                <ng-container
-                    *ngComponentOutlet="
-                        coverCell()!.renderComponentDefinition;
-                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
-                    "
-                >
-                </ng-container>
-            </ko-group>
-        }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-cover-cell-entry',
-                    template: `
-        @if (coverCell()) {
-            <ko-group #rootGroup [config]="groupConfig()">
-                <ng-container
-                    *ngComponentOutlet="
-                        coverCell()!.renderComponentDefinition;
-                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
-                    "
-                >
-                </ng-container>
-            </ko-group>
-        }
-    `,
-                    imports: [KoContainer, CommonModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
+    return groups;
+};
 
 const createFieldStats = (config) => {
     const { coordinate, columnStartIndex, columnStopIndex, aiTable, actions, y, isHoverStatContainer, readonly } = config;
@@ -9097,7 +9024,7 @@ const createFieldStats = (config) => {
         const field = fields[columnIndex];
         if (field == null)
             continue;
-        const x = coordinate.getColumnOffset(columnIndex);
+        const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
         const columnWidth = coordinate.getColumnWidth(columnIndex);
         const fieldStat = {
             aiTable,
@@ -9107,7 +9034,7 @@ const createFieldStats = (config) => {
             x,
             y,
             width: columnWidth,
-            height: AI_TABLE_FIELD_STAT_INNER_HEIGHT,
+            height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
             field,
             stroke: columnIndex === 0 ? colors.transparent : undefined,
             isHoverStatContainer: isHoverStatContainer,
@@ -9117,27 +9044,62 @@ const createFieldStats = (config) => {
     }
     return fieldStats;
 };
-
-class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
-    constructor() {
-        super(...arguments);
-        this.field = input.required();
-        this.aiTable = input.required();
-        this.statMenus = input.required();
-        this.menuClick = output();
-        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None);
-    }
-    execute(menu) {
-        this.menuClick.emit({
-            menu,
-            field: this.field()
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
-            type: Component,
+const createGroupFieldStats = (config) => {
+    const { coordinate, columnStartIndex, columnStopIndex, aiTable, actions, y, height, isHoverStatContainer, readonly, groupRow } = config;
+    const colors = Colors;
+    const { columnCount, rowInitSize: fieldHeadHeight } = coordinate;
+    const fields = aiTable.gridData().fields;
+    const fieldStats = [];
+    for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+        if (columnIndex > columnCount - 1)
+            break;
+        if (columnIndex < 0)
+            continue;
+        const field = fields[columnIndex];
+        if (field == null)
+            continue;
+        const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
+        const columnWidth = coordinate.getColumnWidth(columnIndex);
+        const fieldStat = {
+            aiTable,
+            coordinate,
+            actions,
+            columnIndex,
+            x,
+            y: y,
+            width: columnWidth,
+            height: height ?? AI_TABLE_FIELD_HEAD_HEIGHT,
+            field,
+            isHoverStatContainer: isHoverStatContainer,
+            readonly,
+            isGroupStat: true,
+            groupRow: groupRow
+        };
+        fieldStats.push(fieldStat);
+    }
+    return fieldStats;
+};
+
+class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
+    constructor() {
+        super(...arguments);
+        this.field = input.required();
+        this.aiTable = input.required();
+        this.statMenus = input.required();
+        this.menuClick = output();
+        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None);
+    }
+    execute(menu) {
+        this.menuClick.emit({
+            menu,
+            field: this.field()
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
+            type: Component,
             args: [{ selector: 'ai-table-stat-type-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'stat-type-menu'
                     }, imports: [ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n" }]
@@ -9161,8 +9123,11 @@ class AITableFieldStat {
                 y: this.config().y
             };
         });
+        this.isGroupStat = computed(() => {
+            return this.config().isGroupStat;
+        });
         this.bgConfig = computed(() => {
-            const { field, width, height, coordinate, readonly, aiTable } = this.config();
+            const { field, width, height, coordinate, readonly, aiTable, isGroupStat, columnIndex } = this.config();
             const rowHeadWidth = aiTable.context.rowHeadWidth();
             const config = {
                 coordinate,
@@ -9173,27 +9138,50 @@ class AITableFieldStat {
                     fieldId: field._id,
                     mouseStyle: 'pointer'
                 }),
-                width: this.isFirstColumn() ? width + AI_TABLE_OFFSET : width,
+                width: width,
                 height: height,
                 fill: Colors.white,
                 hoverFill: Colors.gray100,
                 opacity: 1,
                 listening: !readonly
             };
-            if (this.renderTexts()) {
-                config.borders = [false, true, false, true];
-                config.stroke = Colors.gray200;
-                config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
+            if (isGroupStat) {
+                if (columnIndex === 0) {
+                    const textsConfig = this.textsConfig();
+                    if (textsConfig) {
+                        config.x = textsConfig[0].x - AI_TABLE_CELL_PADDING;
+                        config.width = config.width - config.x;
+                    }
+                    else {
+                        config.width = this.noneStatWidth();
+                        config.x = width - this.noneStatWidth();
+                        config.fill = Colors.transparent;
+                    }
+                }
             }
-            if (this.isFirstColumn()) {
-                if (rowHeadWidth === 0) {
+            else {
+                if (this.renderTexts()) {
+                    config.borders = [false, true, false, true];
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
+                }
+                else if (this.isLastFrozenColumn()) {
                     config.borders = [false, true, false, false];
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
                 }
-                else {
-                    config.borders = [false, true, false, true];
+                if (this.isFirstColumn()) {
+                    if (rowHeadWidth === 0) {
+                        config.borders = [false, true, false, false];
+                    }
+                    else {
+                        config.x = -AI_TABLE_OFFSET;
+                        config.width = config.width + AI_TABLE_OFFSET;
+                        config.borders = [false, true, false, true];
+                    }
+                    config.stroke = Colors.gray200;
+                    config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
                 }
-                config.stroke = Colors.gray200;
-                config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
             }
             return config;
         });
@@ -9201,9 +9189,28 @@ class AITableFieldStat {
             const { field } = this.config();
             return field;
         });
-        this.records = computed(() => {
+        this.linearRows = computed(() => {
             const { aiTable } = this.config();
-            return aiTable.gridData().records;
+            return aiTable.context?.linearRows();
+        });
+        this.recordsMap = computed(() => {
+            const { aiTable } = this.config();
+            return aiTable.recordsMap();
+        });
+        this.groupRow = computed(() => this.config().groupRow);
+        this.gridData = computed(() => this.config().aiTable.gridData());
+        this.records = computed(() => {
+            let records = [];
+            const groupRow = this.groupRow();
+            if (this.isGroupStat()) {
+                if (groupRow.range?.length === 2) {
+                    records = this.gridData().records.slice(groupRow.range[0], groupRow.range[1] + 1);
+                }
+            }
+            else {
+                records = this.gridData().records;
+            }
+            return records;
         });
         this.aiFieldConfig = computed(() => {
             const { aiTable } = this.config();
@@ -9236,6 +9243,15 @@ class AITableFieldStat {
             const { width } = this.config();
             return width;
         });
+        this.noneStatWidth = computed(() => {
+            const noneStatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+            const { text, textWidth } = drawer.textEllipsis({
+                text: noneStatString,
+                fontSize: DEFAULT_FONT_SIZE,
+                fontWeight: DEFAULT_FONT_WEIGHT
+            });
+            return textWidth + AI_TABLE_ACTION_COMMON_SIZE + AI_TABLE_OFFSET;
+        });
         this.renderTexts = computed(() => {
             const width = this.containerBoxWidth();
             const field = this.field();
@@ -9245,7 +9261,7 @@ class AITableFieldStat {
             let resultString = null;
             let formatString = null;
             let statValue = '';
-            if (this.isFirstColumn() && selectedInfo.isSelected) {
+            if (this.isFirstColumn() && selectedInfo.isSelected && !this.isGroupStat()) {
                 if (selectedInfo.selectedType === 'records') {
                     formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
                 }
@@ -9373,6 +9389,10 @@ class AITableFieldStat {
             const { columnIndex } = this.config();
             return columnIndex === 0;
         });
+        this.isLastFrozenColumn = computed(() => {
+            const { columnIndex, coordinate } = this.config();
+            return columnIndex === coordinate.frozenColumnCount - 1;
+        });
         this.iconConfig = computed(() => {
             const { field, width, height } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -9489,140 +9509,361 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableFieldStats {
+class AITableGroups {
     constructor() {
         this.config = input.required();
-        this.hover = output();
-        this.isHover = signal(false);
-        this.statConfigs = computed(() => createFieldStats(this.config()));
-    }
-    onMouseenter(e) {
-        this.isHover.set(true);
-    }
-    onMouseleave(e) {
-        this.isHover.set(false);
+        this.frozenColumnCount = computed(() => {
+            const { coordinate } = this.config();
+            return coordinate.frozenColumnCount ?? 0;
+        });
+        this.columnStartIndex = computed(() => {
+            const { columnStartIndex } = this.config();
+            return Math.max(columnStartIndex, this.frozenColumnCount());
+        });
+        this.groups = computed(() => {
+            return createGroupCells({
+                ...this.config(),
+                columnStartIndex: this.columnStartIndex()
+            });
+        });
+        this.groupCells = computed(() => {
+            const groups = this.groups();
+            const groupCells = [];
+            groups.forEach((group) => {
+                const { row, x = 0, y = 0 } = group;
+                const groupStats = createGroupFieldStats({
+                    ...this.config(),
+                    groupRow: row,
+                    x,
+                    y,
+                    columnStartIndex: this.columnStartIndex()
+                });
+                groupStats.forEach((groupStat) => {
+                    groupCells.push({ groupStat: groupStat });
+                });
+            });
+            return groupCells;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
-        <ko-group>
-            @for (config of statConfigs(); track $index) {
-                <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
-            }
-        </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @for (groupCell of groupCells(); track $index) {
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-column-stats',
+                    selector: 'ai-table-groups',
                     template: `
-        <ko-group>
-            @for (config of statConfigs(); track $index) {
-                <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
-            }
-        </ko-group>
+        @for (groupCell of groupCells(); track $index) {
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
+        }
     `,
-                    imports: [AITableFieldStat, KoContainer],
+                    imports: [CommonModule, AITableFieldStat],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
-const createGroupCells = (config) => {
-    const { coordinate, rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex, aiTable, actions, readonly } = config;
-    const linearRows = aiTable.context?.linearRows();
-    const { columnCount } = coordinate;
-    const groups = [];
-    for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
-        if (rowIndex > columnCount - 1)
-            break;
-        if (rowIndex < 0)
-            continue;
-        const row = linearRows[rowIndex];
-        const { depth } = row;
-        if (row == null)
-            continue;
-        if (row.type !== AITableRowType.group)
-            continue;
-        const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-        const rowHeight = coordinate.getRowHeight(rowIndex);
-        for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const { width, offset } = getCellHorizontalPosition({
-                columnIndex,
-                columnWidth,
-                columnCount,
-                depth
-            });
-            const x = coordinate.getColumnOffset(columnIndex);
-            const group = {
-                aiTable,
-                coordinate,
-                columnIndex,
-                x: x + offset + AI_TABLE_CELL_PADDING,
-                y,
-                width,
-                height: rowHeight,
-                row,
-                readonly
-            };
-            groups.push(group);
-        }
-    }
-    return groups;
-};
-
 class AITableFrozenGroups {
     constructor() {
         this.config = input.required();
-        this.groupOptions = computed(() => {
+        this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
-            const { frozenColumnCount } = coordinate;
+            return coordinate.frozenColumnCount ?? 0;
+        });
+        this.columnStopIndex = computed(() => {
+            return this.frozenColumnCount() - 1;
+        });
+        this.groups = computed(() => {
             return createGroupCells({
                 ...this.config(),
                 columnStartIndex: 0,
-                columnStopIndex: frozenColumnCount - 1
+                columnStopIndex: this.columnStopIndex()
             });
         });
-        this.groupFirstColumnCollapsedIcons = computed(() => {
-            const groupOptions = this.groupOptions();
-            const collapsedIcons = [];
-            groupOptions.forEach((groupOption) => {
-                const { row, x, y, height, columnIndex, readonly } = groupOption;
-                if (columnIndex === 0) {
-                    const { isCollapsed, fieldId, groupId } = row;
-                    collapsedIcons.push({
-                        name: generateTargetName({
-                            targetName: AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON,
-                            fieldId: fieldId,
-                            source: groupId,
-                            mouseStyle: readonly ? 'default' : 'pointer'
-                        }),
-                        x,
-                        y: y + (height - AI_TABLE_ICON_COMMON_SIZE) / 2,
-                        data: isCollapsed ? AngleRightPath : AngleDownPath
-                    });
-                }
+        this.groupCells = computed(() => {
+            const groups = this.groups();
+            const groupCells = [];
+            groups.forEach((group) => {
+                const { row, x = 0, y = 0, height, readonly } = group;
+                const { isCollapsed, fieldId, groupId } = row;
+                const collapsedIcon = {
+                    name: generateTargetName({
+                        targetName: AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON,
+                        fieldId: fieldId,
+                        source: groupId,
+                        mouseStyle: readonly ? 'default' : 'pointer'
+                    }),
+                    x,
+                    y: y + (height - AI_TABLE_ICON_COMMON_SIZE) / 2,
+                    data: isCollapsed ? AngleRightPath : AngleDownPath
+                };
+                const groupStats = createGroupFieldStats({
+                    ...this.config(),
+                    groupRow: row,
+                    x,
+                    y,
+                    columnStartIndex: 0,
+                    columnStopIndex: this.columnStopIndex()
+                });
+                groupStats.forEach((groupStat) => {
+                    const groupCell = {
+                        collapsedIcon: undefined,
+                        groupStat: undefined
+                    };
+                    if (groupStat.columnIndex === 0) {
+                        groupCell.collapsedIcon = collapsedIcon;
+                    }
+                    groupCell.groupStat = groupStat;
+                    groupCells.push(groupCell);
+                });
             });
-            return collapsedIcons;
+            return groupCells;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @for (collapsedIcon of groupFirstColumnCollapsedIcons(); track $index) {
-            <ai-table-icon [config]="collapsedIcon"></ai-table-icon>
+        @for (groupCell of groupCells(); track $index) {
+            @if (groupCell.collapsedIcon) {
+                <ai-table-icon [config]="groupCell.collapsedIcon"></ai-table-icon>
+            }
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-groups',
                     template: `
-        @for (collapsedIcon of groupFirstColumnCollapsedIcons(); track $index) {
-            <ai-table-icon [config]="collapsedIcon"></ai-table-icon>
+        @for (groupCell of groupCells(); track $index) {
+            @if (groupCell.collapsedIcon) {
+                <ai-table-icon [config]="groupCell.collapsedIcon"></ai-table-icon>
+            }
+            <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `,
-                    imports: [CommonModule, AITableIcon],
+                    imports: [CommonModule, AITableIcon, AITableFieldStat],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableFillHandle {
+    constructor() {
+        this.config = input.required();
+        this.showFillHandle = computed(() => {
+            const { aiTable, readonly } = this.config();
+            const selection = aiTable.selection();
+            const hasSelectedCells = selection.selectedCells.size > 0;
+            const isEditingCell = !!aiTable.editingCell()?.path;
+            return hasSelectedCells && !readonly && !isEditingCell;
+        });
+        this.handleConfig = computed(() => {
+            const { aiTable, coordinate } = this.config();
+            const selectedCells = Array.from(aiTable.selection().selectedCells);
+            const lastCell = selectedCells[selectedCells.length - 1];
+            const [recordId, fieldId] = lastCell.split(':');
+            const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
+            const columnOffset = coordinate.getColumnOffset(columnIndex);
+            const columnWidth = coordinate.getColumnWidth(columnIndex);
+            const rowIndex = aiTable.context.visibleRowsIndexMap().get(recordId);
+            const rowOffset = coordinate.getRowOffset(rowIndex);
+            const width = 6;
+            const height = 6;
+            const [expandRecordId, expandFieldId] = aiTable.expendCell()?.path || [null, null];
+            const cellHeight = expandRecordId === recordId && expandFieldId === fieldId && aiTable.expendCell()?.height
+                ? aiTable.expendCell()?.height
+                    ? aiTable.expendCell().height + AI_TABLE_CELL_LINE_BORDER
+                    : AI_TABLE_ROW_HEIGHT
+                : AI_TABLE_ROW_HEIGHT;
+            return {
+                x: columnOffset + columnWidth - width / 2 + AI_TABLE_OFFSET,
+                y: rowOffset + cellHeight - height + AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET,
+                width,
+                height,
+                fill: Colors.primary,
+                stroke: Colors.white,
+                strokeWidth: 2,
+                zIndex: 20,
+                name: generateTargetName({
+                    targetName: AI_TABLE_FILL_HANDLE,
+                    fieldId,
+                    recordId
+                })
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @if (showFillHandle()) {
+            <ko-rect [config]="handleConfig()"></ko-rect>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-fill-handle',
+                    template: `
+        @if (showFillHandle()) {
+            <ko-rect [config]="handleConfig()"></ko-rect>
+        }
+    `,
+                    imports: [KoShape]
+                }]
+        }] });
+
+class AITableCoverCellEntry {
+    constructor() {
+        this.config = input.required();
+        this.onlyDisplayBorder = input(false);
+        this.componentMap = {};
+        this.groupConfig = computed(() => {
+            return {
+                x: this.coverCellConfig()?.x,
+                y: this.coverCellConfig()?.y,
+                listening: true
+            };
+        });
+        this.coverCellConfig = computed(() => {
+            const { aiTable, coordinate, references, readonly, actions } = this.config();
+            const coverCell = this.coverCell();
+            if (!coverCell) {
+                return;
+            }
+            const { field, recordId, isExpand } = coverCell;
+            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
+            const fieldModel = FieldModelMap[field.type];
+            const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
+            const { rowHeight, columnCount, rowCount } = coordinate;
+            const columnIndex = aiTable.context?.visibleColumnsIndexMap().get(field._id) ?? 0;
+            const rowIndex = aiTable.context?.visibleRowsIndexMap().get(recordId) ?? 0;
+            const row = aiTable.context?.linearRows()[rowIndex];
+            const depth = row?.depth ?? 0;
+            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
+            const columnWidth = coordinate.getColumnWidth(columnIndex);
+            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
+            const isGroupAndFirstColumn = depth > 0 && columnIndex === 0;
+            const { width, offset } = getCellHorizontalPosition({
+                columnIndex,
+                columnWidth: isGroupAndFirstColumn ? columnWidth - AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE : columnWidth,
+                columnCount,
+                depth
+            });
+            let realX = x + offset;
+            if (isGroupAndFirstColumn) {
+                realX += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
+            }
+            const style = {
+                textAlign: DEFAULT_TEXT_ALIGN_LEFT
+            };
+            const textAlign = style.textAlign;
+            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
+                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
+                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
+            const renderY = 0 - AI_TABLE_OFFSET * 2;
+            const result = {
+                field,
+                recordId,
+                aiTable,
+                coordinate,
+                x: realX,
+                y,
+                readonly,
+                actions,
+                isExpand,
+                render: {
+                    aiTable,
+                    recordId,
+                    field,
+                    isActive: isSelectedField(field._id, aiTable),
+                    x: renderX,
+                    y: renderY,
+                    columnWidth: width,
+                    rowHeight,
+                    cellValue,
+                    transformValue,
+                    style,
+                    references
+                }
+            };
+            return result;
+        });
+        this.coverCell = computed(() => getCoverCell(this.config().aiTable));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (coverCell()) {
+            <ko-group #rootGroup [config]="groupConfig()">
+                <ng-container
+                    *ngComponentOutlet="
+                        coverCell()!.renderComponentDefinition;
+                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
+                </ng-container>
+            </ko-group>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-cover-cell-entry',
+                    template: `
+        @if (coverCell()) {
+            <ko-group #rootGroup [config]="groupConfig()">
+                <ng-container
+                    *ngComponentOutlet="
+                        coverCell()!.renderComponentDefinition;
+                        inputs: { config: coverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
+                </ng-container>
+            </ko-group>
+        }
+    `,
+                    imports: [KoContainer, CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableFieldStats {
+    constructor() {
+        this.config = input.required();
+        this.hover = output();
+        this.isHover = signal(false);
+        this.statConfigs = computed(() => createFieldStats(this.config()));
+    }
+    onMouseenter(e) {
+        this.isHover.set(true);
+    }
+    onMouseleave(e) {
+        this.isHover.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
+        <ko-group>
+            @for (config of statConfigs(); track $index) {
+                <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
+            }
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-column-stats',
+                    template: `
+        <ko-group>
+            @for (config of statConfigs(); track $index) {
+                <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
+            }
+        </ko-group>
+    `,
+                    imports: [AITableFieldStat, KoContainer],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -9710,6 +9951,14 @@ class AITableRenderer {
         this.scrollTotalWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         });
+        this.frozenCommonGroupConfig = computed(() => {
+            return {
+                clipX: 0,
+                clipY: AI_TABLE_FIELD_HEAD_HEIGHT,
+                clipWidth: this.frozenAreaWidth() + AI_TABLE_SHADOW_DEFAULT_WIDTH,
+                clipHeight: this.gridContainerHeight()
+            };
+        });
         this.commonGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() + 1,
@@ -9809,11 +10058,32 @@ class AITableRenderer {
                 ...this.columnHeadFieldConfig(),
                 width: this.cellGroupClipWidth(),
                 x: this.frozenAreaWidth(),
-                y: AI_TABLE_OFFSET,
+                y: 0,
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
         });
+        this.xIsScroll = computed(() => {
+            return this.scrollState().scrollLeft > 0;
+        });
+        this.statShadowConfig = computed(() => {
+            return {
+                width: 8,
+                x: this.frozenAreaWidth() + 1,
+                y: AI_TABLE_OFFSET,
+                height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
+                visible: this.xIsScroll()
+            };
+        });
+        this.fieldHeadShadowConfig = computed(() => {
+            return {
+                width: AI_TABLE_SHADOW_DEFAULT_WIDTH,
+                x: this.frozenAreaWidth() + 1,
+                y: AI_TABLE_OFFSET,
+                height: AI_TABLE_FIELD_HEAD_HEIGHT,
+                visible: this.xIsScroll()
+            };
+        });
         this.columnFieldStatsBgConfig = computed(() => {
             return {
                 x: 0,
@@ -9834,7 +10104,7 @@ class AITableRenderer {
                 ...this.columnHeadFieldConfig(),
                 width: this.frozenAreaWidth(),
                 x: 0,
-                y: AI_TABLE_OFFSET,
+                y: 0,
                 columnStartIndex: 0,
                 columnStopIndex: this.coordinate().frozenColumnCount - 1,
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
@@ -9883,13 +10153,16 @@ class AITableRenderer {
             const { aiTable } = this.config();
             const expandCellPath = aiTable.expendCell()?.path;
             if (expandCellPath) {
-                const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, expandCellPath);
-                const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
-                if (isFrozenColumn) {
-                    frozenExpandCellBorder = true;
-                }
-                else {
-                    expandCellBorder = true;
+                const cellIndex = AITable.getCellIndex(aiTable, expandCellPath);
+                if (cellIndex) {
+                    const { columnIndex } = cellIndex;
+                    const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
+                    if (isFrozenColumn) {
+                        frozenExpandCellBorder = true;
+                    }
+                    else {
+                        expandCellBorder = true;
+                    }
                 }
             }
             return {
@@ -9926,7 +10199,7 @@ class AITableRenderer {
         this.isHoverStatContainer.set(isHover);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                @if (!hiddenIndexColumn()) {\n                    <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                }\n                <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-field-shadow [config]=\"config()\"></ai-table-frozen-field-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-frozen-field-shadow [config]=\"columnFieldStatsConfig()\" position=\"fieldStats\"></ai-table-frozen-field-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenFieldShadow, selector: "ai-table-frozen-field-shadow", inputs: ["config", "position"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -9947,9 +10220,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFillHandle,
                         AITableFieldStats,
                         AITableBackground,
-                        AITableFrozenFieldShadow,
+                        AITableFrozenGroups,
+                        AITableGroups,
+                        AITableShadow,
                         AITableFrozenGroups
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                @if (!hiddenIndexColumn()) {\n                    <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                }\n                <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-field-shadow [config]=\"config()\"></ai-table-frozen-field-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-frozen-field-shadow [config]=\"columnFieldStatsConfig()\" position=\"fieldStats\"></ai-table-frozen-field-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableCellRate extends CoverCellBase {
@@ -10860,12 +11135,15 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
         targetStartRowIndex = selectedFirstRowIndex;
         targetEndRowIndex = sourceStartRowIndex - 1;
     }
-    const sourceRowCount = sourceEndRowIndex - sourceStartRowIndex + 1;
     const sourceRows = [];
     const linearRows = aiTable.context.linearRows();
     for (let i = sourceStartRowIndex; i <= sourceEndRowIndex; i++) {
-        sourceRows.push(linearRows[i]._id);
+        const row = linearRows[i];
+        if (row.type === AITableRowType.record) {
+            sourceRows.push(row._id);
+        }
     }
+    const sourceRowCount = sourceRows.length;
     const updateData = [];
     const fields = AITable.getVisibleFields(aiTable);
     const visibleColumnsIndexMap = aiTable.context.visibleColumnsIndexMap();
@@ -10878,17 +11156,44 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
         if (isSystemField(field)) {
             continue;
         }
-        for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
-            const targetRecordId = linearRows[rowIndex]._id;
-            const relativeRowIndex = direction === 'downward' ? rowIndex - targetStartRowIndex : targetEndRowIndex - rowIndex;
-            const mod = relativeRowIndex % sourceRowCount;
-            const sourceRowIndex = direction === 'downward' ? mod : sourceRowCount - 1 - mod;
-            const sourceRecordId = sourceRows[sourceRowIndex];
-            const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
-            updateData.push({
-                path: [targetRecordId, fieldId],
-                value: sourceValue
-            });
+        if (direction === 'downward') {
+            let sourceRowIndexPointer = 0;
+            for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
+                const row = linearRows[rowIndex];
+                if (row.type === AITableRowType.record) {
+                    const targetRecordId = linearRows[rowIndex]._id;
+                    const mod = sourceRowIndexPointer % sourceRowCount;
+                    const sourceRecordId = sourceRows[mod];
+                    const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
+                    updateData.push({
+                        path: [targetRecordId, fieldId],
+                        value: sourceValue
+                    });
+                    sourceRowIndexPointer++;
+                }
+            }
+        }
+        else {
+            let sourceRowIndexPointer = sourceRowCount - 1;
+            for (let rowIndex = targetEndRowIndex; rowIndex >= targetStartRowIndex; rowIndex--) {
+                const row = linearRows[rowIndex];
+                if (row.type === AITableRowType.record) {
+                    const targetRecordId = linearRows[rowIndex]._id;
+                    const mod = sourceRowIndexPointer % sourceRowCount;
+                    const sourceRecordId = sourceRows[mod];
+                    const sourceValue = recordsMap[sourceRecordId]?.values[fieldId];
+                    updateData.push({
+                        path: [targetRecordId, fieldId],
+                        value: sourceValue
+                    });
+                    if (sourceRowIndexPointer <= 0) {
+                        sourceRowIndexPointer = sourceRowCount - 1;
+                    }
+                    else {
+                        sourceRowIndexPointer--;
+                    }
+                }
+            }
         }
     }
     if (updateData.length > 0) {
@@ -11971,7 +12276,7 @@ class AITableDomGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
@@ -12476,6 +12781,7 @@ class AITableDragComponent {
         const aiTable = this.aiTableGridEventService.aiTable;
         const scroll = { x: 0, y: this.verticalBarElement?.scrollTop || 0 };
         const coordinate = drag.coordinate;
+        const linearRows = aiTable.context.linearRows();
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
         const sourceRowId = drag.sourceIds.values().next().value;
         const sourceRowIndex = visibleRowIndexMap.get(sourceRowId) || 0;
@@ -12504,24 +12810,20 @@ class AITableDragComponent {
                     this.setAuxiliaryLineStyles({
                         top: `${nextColumnStartY - scrollPosition.y}px`
                     });
-                    this.draggedData = {
-                        type: DragType.record,
-                        recordIds: drag.sourceIds,
-                        targetIndex: targetRowIndex + 1
-                    };
+                    this.setMovingRecordDragData(DragType.record, drag.sourceIds, targetRowIndex + 1);
                     return;
                 }
-                this.setAuxiliaryLineStyles({
-                    width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
-                    height: `${lineHeight}px`,
-                    top: `${lineTop}px`,
-                    left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
-                });
-                this.draggedData = {
-                    type: DragType.record,
-                    recordIds: drag.sourceIds,
-                    targetIndex: targetRowIndex
-                };
+                const currentLinearRow = linearRows[targetRowIndex];
+                const rowType = currentLinearRow.type;
+                if (rowType === AITableRowType.record || rowType === AITableRowType.add) {
+                    this.setAuxiliaryLineStyles({
+                        width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
+                        height: `${lineHeight}px`,
+                        top: `${lineTop}px`,
+                        left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
+                    });
+                    this.setMovingRecordDragData(DragType.record, drag.sourceIds, targetRowIndex);
+                }
             }
             else {
                 this.resetAuxiliaryLine();
@@ -12560,6 +12862,27 @@ class AITableDragComponent {
             }
         });
     }
+    setMovingRecordDragData(type, sourceIds, targetIndex) {
+        const aiTable = this.aiTableGridEventService.aiTable;
+        const linearRows = aiTable.context.linearRows();
+        this.draggedData = {
+            type,
+            recordIds: sourceIds,
+            targetIndex
+        };
+        if (targetIndex === 0) {
+            this.draggedData.beforeRecordId = linearRows[0]._id;
+        }
+        else {
+            const targetLinearRow = linearRows[targetIndex - 1];
+            if (targetLinearRow.type === AITableRowType.group) {
+                this.draggedData.beforeRecordId = linearRows[targetIndex]._id;
+            }
+            else {
+                this.draggedData.afterRecordId = targetLinearRow._id;
+            }
+        }
+    }
     handleDragEnd() {
         if (this.draggedData) {
             this.dragEnd.emit({ ...this.draggedData });
@@ -12931,8 +13254,8 @@ class AITableGrid extends AITableGridBase {
         let matchedCells = new Set();
         if (keywords) {
             const references = this.aiReferences();
-            this.aiTable.records().forEach((record) => {
-                this.aiTable.fields().forEach((field) => {
+            this.aiTable.gridData().records.forEach((record) => {
+                this.aiTable.gridData().fields.forEach((field) => {
                     if (isCellMatchKeywords(this.aiTable, field, record._id, keywords, references)) {
                         matchedCells.add(`${record._id}:${field._id}`);
                     }
@@ -13169,7 +13492,9 @@ class AITableGrid extends AITableGridBase {
         switch (targetName) {
             case AI_TABLE_ROW_ADD_BUTTON: {
                 clearCoverCell(this.aiTable);
-                this.addRecord();
+                this.addRecord({
+                    forGroupId: targetNameDetail.source
+                });
                 const { isCanFullRender, offsetY } = this.coordinate().getAddRowButtonIsFullRenderInfo(this.aiTable);
                 if (!isCanFullRender) {
                     this.scrollAction({
@@ -13344,14 +13669,46 @@ class AITableGrid extends AITableGridBase {
         });
         this.resizeObserver.observe(this.containerElement());
     }
+    getNextRecordRowId(currentRowIndex, event) {
+        const linearRows = this.aiTable.context.linearRows();
+        if (event.key === 'ArrowUp') {
+            let nextRowIndex = currentRowIndex - 1;
+            let findFlag = false;
+            while (nextRowIndex > -1 && !findFlag) {
+                const row = linearRows[nextRowIndex];
+                if (row.type === AITableRowType.record) {
+                    findFlag = true;
+                }
+                else {
+                    nextRowIndex--;
+                }
+            }
+            return findFlag ? linearRows[nextRowIndex]._id : null;
+        }
+        if (event.key === 'ArrowDown') {
+            let nextRowIndex = currentRowIndex + 1;
+            let findFlag = false;
+            while (nextRowIndex < linearRows.length && !findFlag) {
+                const row = linearRows[nextRowIndex];
+                if (row.type === AITableRowType.record) {
+                    findFlag = true;
+                }
+                else {
+                    nextRowIndex++;
+                }
+            }
+            return findFlag ? linearRows[nextRowIndex]._id : null;
+        }
+        return null;
+    }
     getNextCell(currentCell, event) {
         const { rowIndex, columnIndex } = AITable.getCellIndex(this.aiTable, currentCell) || {};
         let nextCellPath = null;
-        if (event.key === 'ArrowUp' && rowIndex) {
-            nextCellPath = [this.aiTable.gridData().records[rowIndex - 1]._id, currentCell[1]];
-        }
-        if (event.key === 'ArrowDown' && rowIndex < this.gridData().records.length - 1) {
-            nextCellPath = [this.aiTable.gridData().records[rowIndex + 1]._id, currentCell[1]];
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            const nextRowId = this.getNextRecordRowId(rowIndex, event);
+            if (nextRowId) {
+                nextCellPath = [nextRowId, currentCell[1]];
+            }
         }
         if (event.key === 'ArrowLeft' && columnIndex) {
             nextCellPath = [currentCell[0], this.aiTable.gridData().fields[columnIndex - 1]._id];
@@ -13368,6 +13725,14 @@ class AITableGrid extends AITableGridBase {
             if (this.aiReadonly()) {
                 return;
             }
+            const focused = document.activeElement;
+            if (!focused) {
+                return;
+            }
+            const hasAITableGrid = focused.querySelector('ai-table-grid') !== null;
+            if (!hasAITableGrid) {
+                return;
+            }
             const hasSelectedCells = this.aiTable.selection().selectedCells.size > 0;
             if (!hasSelectedCells) {
                 return;
@@ -13381,7 +13746,10 @@ class AITableGrid extends AITableGridBase {
             if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
                 return;
             }
-            event.preventDefault();
+            const hasContentEditable = target.contentEditable === 'true';
+            if (hasContentEditable) {
+                return;
+            }
             const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
             const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
             const isDirectionKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight';
@@ -13422,6 +13790,7 @@ class AITableGrid extends AITableGridBase {
                         }
                     }
                 }
+                event.preventDefault();
                 return;
             }
             if (isCopyOrPaste) {
@@ -13431,10 +13800,12 @@ class AITableGrid extends AITableGridBase {
                 else if (event.key === 'v') {
                     this.pasteCells();
                 }
+                event.preventDefault();
                 return;
             }
             if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
+                event.preventDefault();
                 return;
             }
             // quick enter cell editor
@@ -13455,6 +13826,7 @@ class AITableGrid extends AITableGridBase {
                         this.aiUpdateFieldValues.emit(value);
                     }
                 });
+                event.preventDefault();
             }
         });
     }
@@ -13531,10 +13903,11 @@ class AITableGrid extends AITableGridBase {
                 }
                 break;
             case DragType.record:
-                if (data.recordIds && isNumber(data.targetIndex)) {
+                if (data.recordIds && (data.beforeRecordId || data.afterRecordId)) {
                     this.aiMoveRecords.emit({
-                        recordIds: Array.from(data.recordIds).map((id) => [id]),
-                        newPath: [data.targetIndex]
+                        recordIds: Array.from(data.recordIds),
+                        beforeRecordId: data.beforeRecordId,
+                        afterRecordId: data.afterRecordId
                     });
                 }
                 return;
@@ -13629,5 +14002,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map