@ai-table/grid 0.1.27 → 0.1.29

package/fesm2022/ai-table-grid.mjs

@@ -29,7 +29,7 @@ import { AITableFieldGroup, AITableFieldType, AITableRowColumnType, DragType, is
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
-import ___default, { isNumber, includes, values, isString, isObject } from 'lodash';
+import ___default, { isNumber, includes, values, isString, isNil, isObject } from 'lodash';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
@@ -1354,6 +1354,7 @@ function createAITable(records, fields, gridData) {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: AITableSelectAllState.none
         }),
         keywordsMatchedCells: signal(new Set()),
@@ -5019,25 +5020,24 @@ class Drawer {
 }
 const drawer = new Drawer();
 
-class CoverCellComponent extends Component {
+class CoverCellBase {
     constructor() {
-        super(...arguments);
         this.config = input();
         this.onlyDisplayBorder = input(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: CoverCellComponent, isStandalone: true, selector: "ai-table-cover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: CoverCellBase, isStandalone: true, selector: "ai-table-cover-cell-base", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellBase, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-cover-cell',
+                    selector: 'ai-table-cover-cell-base',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
-class AITableCellLink extends CoverCellComponent {
+class AITableCellLink extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
@@ -5241,7 +5241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellAttachment extends CoverCellComponent {
+class AITableCellAttachment extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.attachments = computed(() => {
@@ -5340,7 +5340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellRichText extends CoverCellComponent {
+class AITableCellRichText extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.textConfig = computed(() => {
@@ -8315,14 +8315,488 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableFillHandle {
+class AITableScrollableGroup {
     constructor() {
         this.config = input.required();
-        this.hasSelectedCells = computed(() => {
-            return this.config().aiTable.selection().selectedCells.size > 0;
+        this.contentTemplate = input.required();
+        this.parentContainer = input();
+        this.scrollPosition = output();
+        this.displayScrollbarTime = signal(null);
+        this.hiddenScrollbar = signal(true);
+        this.isHoverScrollbar = signal(false);
+        // 滚动位置信号
+        this.scrollX = signal(0);
+        this.scrollY = signal(0);
+        // 滚动条拖拽状态
+        this.isDraggingVertical = signal(false);
+        this.isDraggingHorizontal = signal(false);
+        // 容器配置
+        this.containerConfig = computed(() => {
+            const { x = 0, y = 0, width, height } = this.config();
+            return {
+                x,
+                y,
+                width,
+                height,
+                fill: Colors.black,
+                listening: true,
+                clipX: 0,
+                clipY: 0,
+                clipWidth: width,
+                clipHeight: height,
+                name: 'scrollable-group'
+            };
         });
-        this.readonly = computed(() => {
-            return this.config().readonly;
+        this.bgConfig = computed(() => {
+            const { x = 0, y = 0, width, height } = this.config();
+            return {
+                x: 0,
+                y: 0,
+                width,
+                height,
+                listening: true
+            };
+        });
+        // 内容区域配置
+        this.contentConfig = computed(() => {
+            if (this.config().contentNotScrollbar) {
+                return {
+                    offsetX: 0,
+                    offsetY: 0
+                };
+            }
+            return {
+                offsetX: this.scrollX(),
+                offsetY: this.scrollY()
+            };
+        });
+        // 是否显示竖向滚动条
+        this.showVerticalScrollbar = computed(() => {
+            const { height, contentHeight, verticalScrollbar } = this.config();
+            return verticalScrollbar && contentHeight > height;
+        });
+        // 是否显示横向滚动条
+        this.showHorizontalScrollbar = computed(() => {
+            const { width, contentWidth, horizontalScrollbar } = this.config();
+            return horizontalScrollbar && contentWidth > width;
+        });
+        // 竖向滚动条配置
+        this.verticalScrollbarConfig = computed(() => {
+            const { width, scrollbarSize = 12 } = this.config();
+            return {
+                x: width - scrollbarSize,
+                y: 0,
+                width: scrollbarSize,
+                height: this.verticalScrollbarHeight()
+            };
+        });
+        // 横向滚动条配置
+        this.horizontalScrollbarConfig = computed(() => {
+            const { height, scrollbarSize = 12 } = this.config();
+            return {
+                x: 0,
+                y: height - scrollbarSize,
+                width: this.horizontalScrollbarHeight(),
+                height: scrollbarSize
+            };
+        });
+        // 竖向滚动条轨道配置
+        this.verticalTrackConfig = computed(() => {
+            const { scrollbarSize = 12, scrollbarTrackColor, height } = this.config();
+            return {
+                x: 0,
+                y: 0,
+                width: scrollbarSize,
+                height: height,
+                fill: scrollbarTrackColor,
+                cornerRadius: 2
+            };
+        });
+        // 横向滚动条轨道配置
+        this.horizontalTrackConfig = computed(() => {
+            const { scrollbarSize = 12, scrollbarTrackColor } = this.config();
+            return {
+                x: 0,
+                y: 0,
+                width: this.horizontalScrollbarHeight(),
+                height: scrollbarSize,
+                fill: scrollbarTrackColor,
+                cornerRadius: 2
+            };
+        });
+        this.verticalThumbMinY = computed(() => {
+            const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
+            return getAbsolutePositionY;
+        });
+        // 垂直滚动条滑块的最大Y坐标
+        this.verticalThumbMaxY = computed(() => {
+            const { height, contentHeight } = this.config();
+            const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
+            return getAbsolutePositionY + height - this.verticalThumbHeight();
+        });
+        // 横向滚动条滑块的最小X坐标
+        this.horizontalThumbMinX = computed(() => {
+            const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
+            return getAbsolutePositionX;
+        });
+        // 横向滚动条滑块的最大X坐标
+        this.horizontalThumbMaxX = computed(() => {
+            const { width } = this.config();
+            const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
+            return getAbsolutePositionX + width - this.horizontalThumbWidth();
+        });
+        // 竖向滚动条滑块高度
+        this.verticalThumbHeight = computed(() => {
+            const { height, contentHeight } = this.config();
+            const thumbHeight = Math.max(20, (height / contentHeight) * this.verticalScrollbarHeight());
+            return thumbHeight;
+        });
+        // 横向滚动条滑块宽度
+        this.horizontalThumbWidth = computed(() => {
+            const { width, contentWidth } = this.config();
+            const thumbWidth = Math.max(20, (width / contentWidth) * this.horizontalScrollbarHeight());
+            return thumbWidth;
+        });
+        // 竖向滚动条滑块配置
+        this.verticalConfig = computed(() => {
+            if (this.isDraggingVertical()) {
+                return null;
+            }
+            const { scrollbarSize = 12, scrollbarColor = '#c0c0c0' } = this.config();
+            const { height, contentHeight } = this.config();
+            const thumbHeight = this.verticalThumbHeight();
+            const thumbY = (this.scrollY() / (contentHeight - height)) * (this.verticalScrollbarHeight() - thumbHeight);
+            return {
+                x: 1,
+                y: thumbY,
+                width: scrollbarSize - 2,
+                height: thumbHeight,
+                fill: scrollbarColor,
+                cornerRadius: 6,
+                draggable: true,
+                dragBoundFunc: (pos) => {
+                    this.isDraggingVertical.set(true);
+                    this.displayScrollbarTime.set(new Date());
+                    // 限定垂直滚动条的拖拽范围，并更新newScrollY
+                    const maxThumbY = this.verticalThumbMaxY();
+                    const minThumbY = this.verticalThumbMinY();
+                    const newThumbY = Math.max(Math.min(pos.y, maxThumbY), minThumbY);
+                    const deltaY = newThumbY - this.verticalTrack.getNode().getAbsolutePosition().y;
+                    const newScrollY = (deltaY / (this.verticalScrollbarHeight() - this.verticalThumbHeight())) * (contentHeight - height);
+                    this.scrollY.set(newScrollY);
+                    const x = this.verticalTrack.getNode().getAbsolutePosition().x + 1;
+                    setTimeout(() => {
+                        this.isDraggingVertical.set(false);
+                    }, 100);
+                    return {
+                        x: x,
+                        y: newThumbY
+                    };
+                }
+            };
+        });
+        // 横向滚动条滑块配置
+        this.horizontalThumbConfig = computed(() => {
+            if (this.isDraggingHorizontal()) {
+                return null;
+            }
+            const { scrollbarSize = 12, scrollbarColor = '#c0c0c0' } = this.config();
+            const { width, contentWidth } = this.config();
+            const thumbWidth = this.horizontalThumbWidth();
+            const thumbX = (this.scrollX() / (contentWidth - width)) * (this.horizontalScrollbarHeight() - thumbWidth);
+            return {
+                x: thumbX,
+                y: 1,
+                width: thumbWidth,
+                height: scrollbarSize - 2,
+                fill: scrollbarColor,
+                cornerRadius: 6,
+                draggable: true,
+                dragBoundFunc: (pos) => {
+                    this.isDraggingHorizontal.set(true);
+                    this.displayScrollbarTime.set(new Date());
+                    // 限定横向滚动条的拖拽范围,并更新scrollX
+                    const maxThumbX = this.horizontalThumbMaxX();
+                    const minThumbX = this.horizontalThumbMinX();
+                    const newThumbX = Math.max(Math.min(pos.x, maxThumbX), minThumbX);
+                    const deltaX = newThumbX - this.horizontalTrack.getNode().getAbsolutePosition().x;
+                    const newScrollX = (deltaX / (this.horizontalScrollbarHeight() - this.horizontalThumbWidth())) * (contentWidth - width);
+                    this.scrollX.set(newScrollX);
+                    const y = this.horizontalTrack.getNode().getAbsolutePosition().y + 1;
+                    setTimeout(() => {
+                        this.isDraggingHorizontal.set(false);
+                    }, 100);
+                    return {
+                        x: newThumbX,
+                        y: y
+                    };
+                }
+            };
+        });
+        // 横向滚动条滑块配置
+        this.verticalScrollbarHeight = computed(() => {
+            const { height } = this.config();
+            return height;
+        });
+        // 获取横向滚动条宽度
+        this.horizontalScrollbarHeight = computed(() => {
+            const { width } = this.config();
+            return width;
+        });
+        // 滚动条延迟隐藏
+        effect(() => {
+            const displayScrollbarTime = this.displayScrollbarTime();
+            if (displayScrollbarTime) {
+                this.hiddenScrollbar.set(false);
+                clearTimeout(this.hiddenScrollbarTimer);
+                this.hiddenScrollbarTimer = setTimeout(() => {
+                    this.hiddenScrollbar.set(true);
+                }, 1000);
+            }
+        });
+        effect(() => {
+            const scrollX = this.scrollX();
+            const scrollY = this.scrollY();
+            this.scrollPosition.emit({ scrollX, scrollY });
+        });
+    }
+    ngAfterViewInit() {
+        this.contentTemplate().getNode().moveTo(this.contentGroup.getNode());
+        if (this.parentContainer() && this.rootGroup) {
+            this.rootGroup.getNode().moveTo(this.parentContainer().getNode());
+        }
+    }
+    stopBubble(e) {
+        e.event.cancelBubble = true;
+    }
+    verticalScrollbarClick(e) {
+        e.event.cancelBubble = true;
+        const { contentHeight, height } = this.config();
+        const y = e.event.evt.offsetY - this.verticalThumbHeight() / 2;
+        const maxThumbY = this.verticalThumbMaxY();
+        const minThumbY = this.verticalThumbMinY();
+        const newThumbY = Math.max(Math.min(y, maxThumbY), minThumbY);
+        const deltaY = newThumbY - this.verticalTrack.getNode().getAbsolutePosition().y;
+        const newScrollY = (deltaY / (this.verticalScrollbarHeight() - this.verticalThumbHeight())) * (contentHeight - height);
+        this.scrollY.set(newScrollY);
+    }
+    horizontalScrollbarClick(e) {
+        e.event.cancelBubble = true;
+        const { contentWidth, width } = this.config();
+        const x = e.event.evt.offsetX - this.horizontalThumbWidth() / 2;
+        const maxThumbX = this.horizontalThumbMaxX();
+        const minThumbX = this.horizontalThumbMinX();
+        const newThumbX = Math.max(Math.min(x, maxThumbX), minThumbX);
+        const deltaX = newThumbX - this.horizontalTrack.getNode().getAbsolutePosition().x;
+        const newScrollX = (deltaX / (this.horizontalScrollbarHeight() - this.horizontalThumbWidth())) * (contentWidth - width);
+        this.scrollX.set(newScrollX);
+    }
+    setHoverScrollbarStatus(isHover) {
+        this.isHoverScrollbar.set(isHover);
+        this.displayScrollbarTime.set(new Date());
+    }
+    stageWheel(e) {
+        if (!this.showVerticalScrollbar() && !this.showHorizontalScrollbar()) {
+            return;
+        }
+        this.displayScrollbarTime.set(new Date());
+        e.event.cancelBubble = true;
+        this.scrollByDelta({ deltaX: e.event.evt.deltaX, deltaY: e.event.evt.deltaY });
+    }
+    scrollByDelta(delta) {
+        const { deltaX = 0, deltaY = 0 } = delta;
+        const { contentWidth, contentHeight, width, height, horizontalScrollbar, verticalScrollbar } = this.config();
+        if (horizontalScrollbar && deltaX > 0 && contentWidth - width > this.scrollX()) {
+            const newScrollX = Math.min(this.scrollX() + deltaX, contentWidth - width);
+            if (newScrollX !== this.scrollX()) {
+                this.scrollX.set(newScrollX);
+            }
+        }
+        if (horizontalScrollbar && deltaX < 0 && this.scrollX() > 0) {
+            const newScrollX = Math.max(0, this.scrollX() + deltaX);
+            if (newScrollX !== this.scrollX()) {
+                this.scrollX.set(newScrollX);
+            }
+        }
+        if (verticalScrollbar && deltaY > 0 && contentHeight - height > this.scrollY()) {
+            const newScrollY = Math.min(this.scrollY() + deltaY, contentHeight - height);
+            if (newScrollY !== this.scrollY()) {
+                this.scrollY.set(newScrollY);
+            }
+        }
+        if (verticalScrollbar && deltaY < 0 && this.scrollY() > 0) {
+            const newScrollY = Math.max(0, this.scrollY() + deltaY);
+            if (newScrollY !== this.scrollY()) {
+                this.scrollY.set(newScrollY);
+            }
+        }
+    }
+    // 滚动到指定位置
+    scrollTo(x, y) {
+        const { width, height, contentWidth, contentHeight } = this.config();
+        this.scrollX.set(Math.max(0, Math.min(contentWidth - width, x)));
+        this.scrollY.set(Math.max(0, Math.min(contentHeight - height, y)));
+    }
+    // 滚动到顶部
+    scrollToTop() {
+        this.scrollY.set(0);
+    }
+    // 滚动到底部
+    scrollToBottom() {
+        const { height, contentHeight } = this.config();
+        this.scrollY.set(Math.max(0, contentHeight - height));
+    }
+    // 滚动到左侧
+    scrollToLeft() {
+        this.scrollX.set(0);
+    }
+    // 滚动到右侧
+    scrollToRight() {
+        const { width, contentWidth } = this.config();
+        this.scrollX.set(Math.max(0, contentWidth - width));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollableGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableScrollableGroup, isStandalone: true, selector: "ai-table-scrollable-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null }, parentContainer: { classPropertyName: "parentContainer", publicName: "parentContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollPosition: "scrollPosition" }, viewQueries: [{ propertyName: "verticalTrack", first: true, predicate: ["verticalTrack"], descendants: true }, { propertyName: "verticalThumb", first: true, predicate: ["verticalThumb"], descendants: true }, { propertyName: "horizontalTrack", first: true, predicate: ["horizontalTrack"], descendants: true }, { propertyName: "contentGroup", first: true, predicate: ["contentGroup"], descendants: true }, { propertyName: "rootGroup", first: true, predicate: ["rootGroup"], descendants: true }], ngImport: i0, template: `
+        <ko-group
+            #rootGroup
+            [config]="containerConfig()"
+            (koWheel)="stageWheel($event)"
+            (koMousedown)="stopBubble($event)"
+            (koMouseup)="stopBubble($event)"
+        >
+            <ko-group>
+                <ko-rect [config]="bgConfig()"></ko-rect>
+            </ko-group>
+
+            <!-- 内容区域 -->
+            <ko-group #contentGroup [config]="contentConfig()">
+                <ng-content></ng-content>
+            </ko-group>
+
+            <ko-group>
+                @if (showVerticalScrollbar()) {
+                    <ko-group
+                        [config]="verticalScrollbarConfig()"
+                        (koMouseenter)="setHoverScrollbarStatus(true)"
+                        (koMouseleave)="setHoverScrollbarStatus(false)"
+                        (koClick)="verticalScrollbarClick($event)"
+                    >
+                        <!-- 滚动条轨道 -->
+                        <ko-rect #verticalTrack [config]="verticalTrackConfig()"></ko-rect>
+                        <!-- 滚动条滑块 -->
+                        @if (!hiddenScrollbar() || isHoverScrollbar()) {
+                            <ko-rect #verticalThumb [config]="verticalConfig()"></ko-rect>
+                        }
+                    </ko-group>
+                }
+
+                <!-- 横向滚动条 -->
+                @if (showHorizontalScrollbar()) {
+                    <ko-group
+                        [config]="horizontalScrollbarConfig()"
+                        (koMouseenter)="setHoverScrollbarStatus(true)"
+                        (koMouseleave)="setHoverScrollbarStatus(false)"
+                        (koClick)="horizontalScrollbarClick($event)"
+                    >
+                        <!-- 滚动条轨道 -->
+                        <ko-rect #horizontalTrack [config]="horizontalTrackConfig()"></ko-rect>
+                        <!-- 滚动条滑块 -->
+                        @if (!hiddenScrollbar() || isHoverScrollbar()) {
+                            <ko-rect [config]="horizontalThumbConfig()"></ko-rect>
+                        }
+                    </ko-group>
+                }
+            </ko-group>
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableScrollableGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-scrollable-group',
+                    template: `
+        <ko-group
+            #rootGroup
+            [config]="containerConfig()"
+            (koWheel)="stageWheel($event)"
+            (koMousedown)="stopBubble($event)"
+            (koMouseup)="stopBubble($event)"
+        >
+            <ko-group>
+                <ko-rect [config]="bgConfig()"></ko-rect>
+            </ko-group>
+
+            <!-- 内容区域 -->
+            <ko-group #contentGroup [config]="contentConfig()">
+                <ng-content></ng-content>
+            </ko-group>
+
+            <ko-group>
+                @if (showVerticalScrollbar()) {
+                    <ko-group
+                        [config]="verticalScrollbarConfig()"
+                        (koMouseenter)="setHoverScrollbarStatus(true)"
+                        (koMouseleave)="setHoverScrollbarStatus(false)"
+                        (koClick)="verticalScrollbarClick($event)"
+                    >
+                        <!-- 滚动条轨道 -->
+                        <ko-rect #verticalTrack [config]="verticalTrackConfig()"></ko-rect>
+                        <!-- 滚动条滑块 -->
+                        @if (!hiddenScrollbar() || isHoverScrollbar()) {
+                            <ko-rect #verticalThumb [config]="verticalConfig()"></ko-rect>
+                        }
+                    </ko-group>
+                }
+
+                <!-- 横向滚动条 -->
+                @if (showHorizontalScrollbar()) {
+                    <ko-group
+                        [config]="horizontalScrollbarConfig()"
+                        (koMouseenter)="setHoverScrollbarStatus(true)"
+                        (koMouseleave)="setHoverScrollbarStatus(false)"
+                        (koClick)="horizontalScrollbarClick($event)"
+                    >
+                        <!-- 滚动条轨道 -->
+                        <ko-rect #horizontalTrack [config]="horizontalTrackConfig()"></ko-rect>
+                        <!-- 滚动条滑块 -->
+                        @if (!hiddenScrollbar() || isHoverScrollbar()) {
+                            <ko-rect [config]="horizontalThumbConfig()"></ko-rect>
+                        }
+                    </ko-group>
+                }
+            </ko-group>
+        </ko-group>
+    `,
+                    imports: [KoContainer, KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [], propDecorators: { verticalTrack: [{
+                type: ViewChild,
+                args: ['verticalTrack']
+            }], verticalThumb: [{
+                type: ViewChild,
+                args: ['verticalThumb']
+            }], horizontalTrack: [{
+                type: ViewChild,
+                args: ['horizontalTrack']
+            }], contentGroup: [{
+                type: ViewChild,
+                args: ['contentGroup']
+            }], rootGroup: [{
+                type: ViewChild,
+                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 isExpandCell = selection.expandCell;
+            const isEditingCell = selection.editingCell;
+            return hasSelectedCells && !readonly && !isEditingCell && !isExpandCell;
         });
         this.handleConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
@@ -8355,7 +8829,7 @@ class AITableFillHandle {
     }
     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 (hasSelectedCells() && !readonly()) {
+        @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"] }] }); }
@@ -8365,7 +8839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{
                     selector: 'ai-table-fill-handle',
                     template: `
-        @if (hasSelectedCells() && !readonly()) {
+        @if (showFillHandle()) {
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
     `,
@@ -8373,7 +8847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCoverCells {
+class AITableCoverCellEntry {
     constructor() {
         this.config = input.required();
         this.onlyDisplayBorder = input(false);
@@ -8443,10 +8917,10 @@ class AITableCoverCells {
         });
         this.coverCell = computed(() => getCoverCell(this.config().aiTable));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCells, isStandalone: true, selector: "ai-table-cover-cell", 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: `
+    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 [config]="groupConfig()">
+            <ko-group #rootGroup [config]="groupConfig()">
                 <ng-container
                     *ngComponentOutlet="
                         coverCell()!.renderComponentDefinition;
@@ -8458,13 +8932,13 @@ class AITableCoverCells {
         }
     `, 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: AITableCoverCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-cover-cell',
+                    selector: 'ai-table-cover-cell-entry',
                     template: `
         @if (coverCell()) {
-            <ko-group [config]="groupConfig()">
+            <ko-group #rootGroup [config]="groupConfig()">
                 <ng-container
                     *ngComponentOutlet="
                         coverCell()!.renderComponentDefinition;
@@ -8551,20 +9025,6 @@ class AITableFieldStat {
             const { width } = this.config();
             return width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING;
         });
-        this.textData = computed(() => {
-            const textString = this.renderText() || '';
-            const availableTextWidth = this.availableTextWidth();
-            const { text, textWidth } = drawer.textEllipsis({
-                text: textString,
-                maxWidth: availableTextWidth,
-                fontSize: DEFAULT_FONT_SIZE,
-                fontWeight: DEFAULT_FONT_WEIGHT
-            });
-            return {
-                width: textWidth,
-                text
-            };
-        });
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
@@ -8590,7 +9050,7 @@ class AITableFieldStat {
                 opacity: 1,
                 listening: !readonly
             };
-            if (this.renderText()) {
+            if (this.renderTexts()) {
                 config.borders = [false, true, false, true];
                 config.stroke = Colors.gray200;
                 config.strokeWidth = AI_TABLE_CELL_LINE_BORDER;
@@ -8627,53 +9087,119 @@ class AITableFieldStat {
             const aiTable = this.aiTable();
             return {
                 field: this.field(),
-                aiTable
+                aiTable,
+                getFieldValue: (record, options) => {
+                    const { aiTable, field } = options;
+                    const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
+                    return transformToCellText(cellValue, options);
+                }
             };
         });
         this.isActiveOrHover = computed(() => {
             return this.isActive() || this.isHover();
         });
-        this.renderText = computed(() => {
+        this.renderTexts = computed(() => {
+            const { height, width } = this.containerBox();
             const field = this.field();
             const records = this.records();
             const fieldModel = FieldModelMap[field.type];
             const selectedInfo = this.selectedInfo();
+            let resultString = null;
+            let formatString = null;
+            let statValue = '';
             if (this.isFirstColumn() && selectedInfo.isSelected) {
                 if (selectedInfo.selectedType === 'records') {
-                    const result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
-                    return result.replace('{count}', selectedInfo.selectedCount.toString());
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedRecordsCount);
                 }
                 else {
-                    const result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedCellsCount);
-                    return result.replace('{count}', selectedInfo.selectedCount.toString());
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.selectedCellsCount);
                 }
+                resultString = formatString.replace('{count}', `${selectedInfo.selectedCount.toString()}`);
+                statValue = selectedInfo.selectedCount.toString();
             }
             else {
-                let result = fieldModel.getStatFormatValue(records, this.options());
-                if (!result && this.isActiveOrHover()) {
-                    result = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+                statValue = fieldModel.stat(records, this.options());
+                if (!isNil(statValue)) {
+                    formatString = fieldModel.getFormat(this.field(), this.aiTable());
+                    if (formatString) {
+                        resultString = formatString.replace('{{statValue}}', `${statValue.toString()}`);
+                        statValue = statValue.toString();
+                    }
                 }
-                return result;
+                else if (this.isActiveOrHover()) {
+                    formatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+                    resultString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
+                }
+            }
+            if (!resultString) {
+                return null;
             }
+            const { text, textWidth } = drawer.textEllipsis({
+                text: resultString,
+                maxWidth: width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING,
+                fontSize: DEFAULT_FONT_SIZE,
+                fontWeight: DEFAULT_FONT_WEIGHT
+            });
+            return {
+                texts: text.split(' '),
+                totalWidth: textWidth,
+                statValue: statValue || ''
+            };
         });
         this.containerBox = computed(() => {
             const { height, width } = this.config();
             return { height, width };
         });
-        this.textConfig = computed(() => {
+        this.textsConfig = computed(() => {
             const { height, width } = this.containerBox();
-            const text = this.renderText();
-            if (text) {
-                const renderWidth = this.textData().width;
-                return {
-                    x: width - AI_TABLE_ACTION_COMMON_SIZE - renderWidth,
-                    y: 0,
-                    width: renderWidth,
-                    height: height,
-                    text: this.textData().text,
-                    lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
-                    listening: false
-                };
+            const renderTexts = this.renderTexts();
+            const result = [];
+            let previousColor = Colors.gray700;
+            if (renderTexts) {
+                const { texts, totalWidth, statValue } = renderTexts;
+                let remainingWidth = width - AI_TABLE_ACTION_COMMON_SIZE;
+                for (const [index, text] of texts.entries()) {
+                    if (remainingWidth <= 0) {
+                        break;
+                    }
+                    let isLast = index === texts.length - 1;
+                    let isStatValue = statValue.includes(text.replace('%', '').replace('…', ''));
+                    let isEllipsis = text === '…';
+                    const { text: renderText, textWidth } = drawer.textEllipsis({
+                        text: isLast ? text : `${text} `,
+                        maxWidth: remainingWidth,
+                        fontSize: DEFAULT_FONT_SIZE,
+                        fontWeight: DEFAULT_FONT_WEIGHT
+                    });
+                    remainingWidth -= textWidth;
+                    let fill;
+                    if (isStatValue) {
+                        fill = Colors.gray700;
+                    }
+                    else if (isEllipsis) {
+                        fill = previousColor;
+                    }
+                    else {
+                        fill = Colors.gray600;
+                    }
+                    result.push({
+                        x: 0,
+                        y: 0,
+                        width: textWidth,
+                        height: height,
+                        fill,
+                        text: renderText,
+                        lineHeight: AI_TABLE_TEXT_LINE_HEIGHT,
+                        listening: false
+                    });
+                    previousColor = fill;
+                }
+                let startX = width - AI_TABLE_ACTION_COMMON_SIZE - totalWidth;
+                result.forEach((item) => {
+                    item.x = startX;
+                    startX += item.width;
+                });
+                return result;
             }
             return null;
         });
@@ -8778,8 +9304,10 @@ class AITableFieldStat {
             ></ai-table-background>
 
             <ko-group>
-                @if (textConfig()) {
-                    <ai-table-text [config]="textConfig()!"></ai-table-text>
+                @if (textsConfig()) {
+                    @for (textConfig of textsConfig(); track $index) {
+                        <ai-table-text [config]="textConfig"></ai-table-text>
+                    }
                     <ai-table-icon [config]="iconConfig()"></ai-table-icon>
                 }
             </ko-group>
@@ -8800,8 +9328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             ></ai-table-background>
 
             <ko-group>
-                @if (textConfig()) {
-                    <ai-table-text [config]="textConfig()!"></ai-table-text>
+                @if (textsConfig()) {
+                    @for (textConfig of textsConfig(); track $index) {
+                        <ai-table-text [config]="textConfig"></ai-table-text>
+                    }
                     <ai-table-icon [config]="iconConfig()"></ai-table-icon>
                 }
             </ko-group>
@@ -8862,6 +9392,7 @@ class AITableRenderer {
         this.koClick = output();
         this.koDblclick = output();
         this.koMouseleave = output();
+        this.onScrollPosition = output();
         this.isHoverStatContainer = signal(false);
         this.fields = computed(() => {
             return AITable.getVisibleFields(this.config().aiTable);
@@ -8926,6 +9457,12 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT
             };
         });
+        this.scrollTotalHeight = computed(() => {
+            return Math.max(this.coordinate().totalHeight, this.containerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT);
+        });
+        this.scrollTotalWidth = computed(() => {
+            return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+        });
         this.commonGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() + 1,
@@ -9135,11 +9672,14 @@ class AITableRenderer {
     stageMouseleave(e) {
         this.koMouseleave.emit(e);
     }
+    stageWheel(e) {
+        this.koWheel.emit(e);
+    }
     onStatContainerHover(isHover) {
         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" }, 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>\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-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 [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 [config]=\"cellsConfig()\"></ai-table-cover-cell>\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 [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell>\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 [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell [config]=\"cellsConfig()\"></ai-table-cover-cell>\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 [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell>\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: AITableCoverCells, selector: "ai-table-cover-cell", 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"] }], 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            <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-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -9152,7 +9692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableCells,
                         AITableFrozenCells,
                         AITableFrozenPlaceholderCells,
-                        AITableCoverCells,
+                        AITableCoverCellEntry,
                         AITablePlaceholderCells,
                         AITableAddField,
                         AITableHoverRowHeads,
@@ -9161,10 +9701,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFieldStats,
                         AITableBackground,
                         AITableFrozenFieldShadow
-                    ], 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>\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-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 [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 [config]=\"cellsConfig()\"></ai-table-cover-cell>\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 [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell>\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 [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell [config]=\"cellsConfig()\"></ai-table-cover-cell>\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 [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell>\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            <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-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" }]
         }] });
 
-class AITableCellRate extends CoverCellComponent {
+class AITableCellRate extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.pointerX = signal(0);
@@ -9313,7 +9853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellProgress extends CoverCellComponent {
+class AITableCellProgress extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.readonly = computed(() => {
@@ -9823,7 +10363,11 @@ function performFill(aiTable, sourceCells, mouseUpRecordId, actions) {
     const startFieldIndex = visibleColumnsIndexMap.get(sourceStartCell[1]);
     const endFieldIndex = visibleColumnsIndexMap.get(sourceEndCell[1]);
     for (let index = startFieldIndex; index <= endFieldIndex; index++) {
-        const fieldId = fields[index]._id;
+        const field = fields[index];
+        const fieldId = field._id;
+        if (isSystemField(field)) {
+            continue;
+        }
         for (let rowIndex = targetStartRowIndex; rowIndex <= targetEndRowIndex; rowIndex++) {
             const targetRecordId = linearRows[rowIndex]._id;
             const relativeRowIndex = direction === 'downward' ? rowIndex - targetStartRowIndex : targetEndRowIndex - rowIndex;
@@ -10017,6 +10561,7 @@ class AITableGridSelectionService {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: AITableSelectAllState.none
         });
     }
@@ -10029,6 +10574,12 @@ class AITableGridSelectionService {
             expandCell: expandCell
         });
     }
+    setEditingCell(editingCell) {
+        this.aiTable.selection.set({
+            ...this.aiTable.selection(),
+            editingCell: editingCell
+        });
+    }
     selectField(fieldId) {
         if (this.aiTable.selection().selectedFields.has(fieldId)) {
             return;
@@ -10056,6 +10607,7 @@ class AITableGridSelectionService {
             selectedCells: new Set(),
             activeCell: null,
             expandCell: null,
+            editingCell: null,
             selectAllState: this.selectAllState()
         });
     }
@@ -10199,6 +10751,7 @@ class AITableGridEventService {
         this.globalMousedownEvent$ = new Subject();
         this.destroyRef = inject(DestroyRef);
         this.thyPopover = inject(ThyPopover);
+        this.selectionService = inject(AITableGridSelectionService);
     }
     initialize(aiTable, aiFieldRenderers) {
         this.aiTable = aiTable;
@@ -10317,6 +10870,7 @@ class AITableGridEventService {
         const fieldType = this.aiTable.fieldsMap()[fieldId].type;
         const { component, isInternalComponent } = this.getEditorComponent(fieldType);
         const offsetOriginPosition = this.getOriginPosition(aiTable, options);
+        this.selectionService.setEditingCell([recordId, fieldId]);
         this.cellEditorPopoverRef = this.thyPopover.open(component, {
             viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
             origin: container,
@@ -10364,6 +10918,7 @@ class AITableGridEventService {
             this.cellEditorPopoverRef.afterClosed().subscribe(() => {
                 wheelEvent.unsubscribe();
                 this.cellEditorPopoverRef = null;
+                this.selectionService.setEditingCell(null);
             });
             this.cellEditorPopoverRef.componentInstance.updateFieldValues.subscribe((value) => {
                 options.updateFieldValues(value);
@@ -10375,6 +10930,7 @@ class AITableGridEventService {
         if (this.cellEditorPopoverRef) {
             this.cellEditorPopoverRef.close();
             this.cellEditorPopoverRef = null;
+            this.selectionService.setEditingCell(null);
         }
     }
     getCurrentEditCell() {
@@ -11473,7 +12029,6 @@ class AITableGrid extends AITableGridBase {
             this.setContainerRect();
             this.bindGlobalMousedown();
             this.containerResizeListener();
-            this.bindWheel();
             this.bindShortcuts();
         });
         effect(() => {
@@ -11731,6 +12286,11 @@ class AITableGrid extends AITableGridBase {
             this.setDefaultPointPosition();
         });
     }
+    stageWheel(e) {
+        e.event.evt.preventDefault();
+        this.aiTableGridEventService.closeCellEditor();
+        this.scrollAction({ deltaX: e.event.evt.deltaX, deltaY: e.event.evt.deltaY, shiftKey: e.event.evt.shiftKey });
+    }
     stageContextmenu(e) {
         const mouseEvent = e.event.evt;
         mouseEvent.preventDefault();
@@ -11870,15 +12430,6 @@ class AITableGrid extends AITableGridBase {
             }, 0);
         }
     }
-    bindWheel() {
-        fromEvent(this.containerElement(), 'wheel', { passive: false })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((e) => {
-            e.preventDefault();
-            this.aiTableGridEventService.closeCellEditor();
-            this.scrollAction({ deltaX: e.deltaX, deltaY: e.deltaY, shiftKey: e.shiftKey });
-        });
-    }
     setDefaultPointPosition() {
         const { context } = this.aiTable;
         context.setPointPosition(DEFAULT_POINT_POSITION);
@@ -12155,18 +12706,18 @@ class AITableGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
+                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\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            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGridSelectionService, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, 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_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_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, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellComponent, 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, 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, setMouseStyle, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGridSelectionService, 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_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_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, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, 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, 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, setMouseStyle, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map