@ai-table/grid 0.1.9 → 0.1.10

package/fesm2022/ai-table-grid.mjs

@@ -25,11 +25,11 @@ import { Transformer } from 'konva/lib/shapes/Transformer';
 import { Wedge } from 'konva/lib/shapes/Wedge';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
-import { AITableFieldType, AITableRowColumnType, isUndefinedOrNull, AITableSelectOptionStyle, DragType, isEmpty, AITableFilterOperation, AttachmentFieldBase, DateFieldBase, isDateValid, SelectFieldBase, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, RateFieldBase, RichTextFieldBase, TextFieldBase, FieldModelBaseMap } from '@ai-table/utils';
+import { AITableFieldGroup, AITableFieldType, AITableRowColumnType, DragType, isUndefinedOrNull, isUrl, AITableSelectOptionStyle, isEmpty, AITableFilterOperation, AttachmentFieldBase, DateFieldBase, isDateValid, SelectFieldBase, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, RateFieldBase, RichTextFieldBase, TextFieldBase, FieldModelBaseMap } from '@ai-table/utils';
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
-import { isNumber, includes, values, isString } from 'lodash';
+import { isNumber, includes, values, isString, isObject } from 'lodash';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
@@ -53,9 +53,9 @@ import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
 import { ThyDot } from 'ngx-tethys/dot';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyTag } from 'ngx-tethys/tag';
-import { ThyDropdownMenuComponent, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
+import { ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThySwitch } from 'ngx-tethys/switch';
-import { of, Subject, fromEvent, debounceTime, mergeWith, filter } from 'rxjs';
+import { of, Subject, fromEvent, debounceTime, mergeWith, animationFrames, filter } from 'rxjs';
 import { ThyDivider } from 'ngx-tethys/divider';
 import * as i4 from 'ngx-tethys/avatar';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -67,8 +67,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromUnixTime, subDays } from 'date-fns';
 import { isArray, TinyDate, helpers } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
+import { isKeyHotkey } from 'is-hotkey';
 import { LRUCache } from 'lru-cache';
 import GraphemeSplitter from 'grapheme-splitter';
+import { takeWhile, map } from 'rxjs/operators';
 
 const KO_CONTAINER_TOKEN = new InjectionToken('KO_CONTAINER_TOKEN');
 
@@ -529,6 +531,9 @@ var AITableGridI18nKey;
     AITableGridI18nKey["fieldTypeCreatedAt"] = "fieldTypeCreatedAt";
     AITableGridI18nKey["fieldTypeUpdatedBy"] = "fieldTypeUpdatedBy";
     AITableGridI18nKey["fieldTypeUpdatedAt"] = "fieldTypeUpdatedAt";
+    AITableGridI18nKey["fieldGroupBase"] = "fieldGroupBase";
+    AITableGridI18nKey["fieldGroupAdvanced"] = "fieldGroupAdvanced";
+    AITableGridI18nKey["rowAddFilterTooltip"] = "rowAddFilterTooltip";
 })(AITableGridI18nKey || (AITableGridI18nKey = {}));
 const AITableI18nText = {
     [AITableGridI18nKey.dataPickerPlaceholder]: '选择日期',
@@ -566,7 +571,10 @@ const AITableI18nText = {
     [AITableGridI18nKey.fieldTypeCreatedBy]: '创建人',
     [AITableGridI18nKey.fieldTypeCreatedAt]: '创建时间',
     [AITableGridI18nKey.fieldTypeUpdatedBy]: '更新人',
-    [AITableGridI18nKey.fieldTypeUpdatedAt]: '更新时间'
+    [AITableGridI18nKey.fieldTypeUpdatedAt]: '更新时间',
+    [AITableGridI18nKey.fieldGroupBase]: '基础',
+    [AITableGridI18nKey.fieldGroupAdvanced]: '高级',
+    [AITableGridI18nKey.rowAddFilterTooltip]: '本记录已被筛选过滤，点击该记录以外位置将被隐藏'
 };
 const getDefaultI18nTextByKey = (key) => {
     return AITableI18nText[key] || key;
@@ -586,112 +594,124 @@ const AI_TABLE_FIELD_MINI_WIDTH = 140;
 const AI_TABLE_FIELD_MIN_WIDTH = 160;
 const AI_TABLE_FIELD_MIDDLE_WIDTH = 200;
 const AI_TABLE_FIELD_MAX_WIDTH = 300;
-function getFieldOptions(aiTable) {
-    const defaultFieldOptions = [
-        {
-            type: AITableFieldType.text,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeText),
-            icon: 'font',
-            width: AI_TABLE_FIELD_MAX_WIDTH
-        },
-        {
-            type: AITableFieldType.richText,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeRichText),
-            icon: 'multiline-text',
-            width: AI_TABLE_FIELD_MAX_WIDTH
-        },
-        {
-            type: AITableFieldType.select,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeSelect),
-            icon: 'check-circle',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.select,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMultiSelect),
-            icon: 'list-check',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH,
-            settings: {
-                is_multiple: true
-            }
-        },
-        {
-            type: AITableFieldType.number,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeNumber),
-            icon: 'hashtag',
-            width: AI_TABLE_FIELD_MINI_WIDTH
-        },
-        {
-            type: AITableFieldType.date,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeDate),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.member,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMember),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH,
-            settings: {
-                is_multiple: false
-            }
-        },
-        {
-            type: AITableFieldType.progress,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeProgress),
-            icon: 'progress',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.rate,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeRate),
-            icon: 'star-circle',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.link,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeLink),
-            icon: 'link-insert',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.attachment,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeAttachment),
-            icon: 'attachment',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        },
-        {
-            type: AITableFieldType.createdBy,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedBy),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH
-        },
-        {
-            type: AITableFieldType.createdAt,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedAt),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+const defaultFieldOptions = [
+    {
+        type: AITableFieldType.text,
+        name: AITableGridI18nKey.fieldTypeText,
+        icon: 'font',
+        width: AI_TABLE_FIELD_MAX_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.richText,
+        name: AITableGridI18nKey.fieldTypeRichText,
+        icon: 'multiline-text',
+        width: AI_TABLE_FIELD_MAX_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.select,
+        name: AITableGridI18nKey.fieldTypeSelect,
+        icon: 'check-circle',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.select,
+        name: AITableGridI18nKey.fieldTypeMultiSelect,
+        icon: 'list-check',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        settings: {
+            is_multiple: true
         },
-        {
-            type: AITableFieldType.updatedBy,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedBy),
-            icon: 'user',
-            width: AI_TABLE_FIELD_MIN_WIDTH
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.number,
+        name: AITableGridI18nKey.fieldTypeNumber,
+        icon: 'hashtag',
+        width: AI_TABLE_FIELD_MINI_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.date,
+        name: AITableGridI18nKey.fieldTypeDate,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.member,
+        name: AITableGridI18nKey.fieldTypeMember,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        settings: {
+            is_multiple: false
         },
-        {
-            type: AITableFieldType.updatedAt,
-            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedAt),
-            icon: 'calendar',
-            width: AI_TABLE_FIELD_MIDDLE_WIDTH
-        }
-    ];
-    const fieldOptions = [];
-    Object.entries(aiTable.context?.aiFieldConfig()?.customFields || {}).forEach(([fieldType, fieldConfig]) => {
-        if (fieldConfig?.fieldOption) {
-            fieldOptions.push(fieldConfig.fieldOption);
-        }
-    });
-    return [...defaultFieldOptions, ...fieldOptions];
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.progress,
+        name: AITableGridI18nKey.fieldTypeProgress,
+        icon: 'progress',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.rate,
+        name: AITableGridI18nKey.fieldTypeRate,
+        icon: 'star-circle',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.link,
+        name: AITableGridI18nKey.fieldTypeLink,
+        icon: 'link-insert',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.attachment,
+        name: AITableGridI18nKey.fieldTypeAttachment,
+        icon: 'attachment',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.base
+    },
+    {
+        type: AITableFieldType.createdBy,
+        name: AITableGridI18nKey.fieldTypeCreatedBy,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.createdAt,
+        name: AITableGridI18nKey.fieldTypeCreatedAt,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.updatedBy,
+        name: AITableGridI18nKey.fieldTypeUpdatedBy,
+        icon: 'user',
+        width: AI_TABLE_FIELD_MIN_WIDTH,
+        group: AITableFieldGroup.advanced
+    },
+    {
+        type: AITableFieldType.updatedAt,
+        name: AITableGridI18nKey.fieldTypeUpdatedAt,
+        icon: 'calendar',
+        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+        group: AITableFieldGroup.advanced
+    }
+];
+function getFieldOptions(aiTable) {
+    return aiTable.context?.fieldOptions();
+}
+function getFieldOptionMap(aiTable) {
+    return aiTable.context?.fieldOptionMap();
 }
 
 /**
@@ -987,6 +1007,9 @@ const AITable = {
             return true;
         }
         return false;
+    },
+    getDragState(aiTable) {
+        return aiTable.dragState?.()?.type || DragType.none;
     }
 };
 
@@ -1127,6 +1150,7 @@ function createAITable(records, fields, gridData) {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: AITableSelectAllState.none
         }),
         keywordsMatchedCells: signal(new Set()),
@@ -1143,7 +1167,11 @@ function createAITable(records, fields, gridData) {
             }, {});
         }),
         recordsWillHidden: signal([]),
-        recordsWillMove: signal([])
+        recordsWillMove: signal([]),
+        dragState: signal({
+            type: DragType.none,
+            sourceIds: new Set()
+        })
     };
     return aiTable;
 }
@@ -1299,7 +1327,7 @@ const AITableQueries = {
 
 class RendererContext {
     constructor(options) {
-        const { rowHeadWidth, linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction, maxFields, maxRecords } = options;
+        const { rowHeadWidth, linearRows, pointPosition, scrollState, visibleColumnsIndexMap, visibleRowsIndexMap, frozenColumnCount, references, aiFieldConfig, scrollAction, maxFields, maxRecords, fieldOptions, fieldOptionMap } = options;
         this.rowHeadWidth = rowHeadWidth;
         this.linearRows = linearRows;
         this.pointPosition = pointPosition;
@@ -1312,6 +1340,8 @@ class RendererContext {
         this.aiFieldConfig = aiFieldConfig;
         this.maxFields = maxFields;
         this.maxRecords = maxRecords;
+        this.fieldOptions = fieldOptions;
+        this.fieldOptionMap = fieldOptionMap;
     }
     setPointPosition(position) {
         const oldPosition = this.pointPosition();
@@ -1456,7 +1486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-const LINK_URL_REGEX = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
 /**
  * @private
  */
@@ -1467,7 +1496,6 @@ class LinkEditComponent {
         this.text = '';
         this.aiTable = input();
         this.confirm = new EventEmitter();
-        this.URLRegex = LINK_URL_REGEX;
         this.i18nTexts = computed(() => {
             return {
                 linkText: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkText),
@@ -1497,6 +1525,10 @@ class LinkEditComponent {
             form.validator.setElementErrorMessage('url', getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkRequired));
             return;
         }
+        if (this.url && !isUrl(this.url)) {
+            form.validator.setElementErrorMessage('url', getI18nTextByKey(this.aiTable(), AITableGridI18nKey.invalidLinkFormat));
+            return;
+        }
         this.close();
         const text = this.text.trim();
         const url = this.url.trim();
@@ -1504,11 +1536,11 @@ class LinkEditComponent {
         this.confirm.emit(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
+            args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ThyPopoverRef }], propDecorators: { url: [{
                 type: Input
             }], text: [{
@@ -1532,13 +1564,10 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         });
     }
     isValidLink(link) {
-        if (!link?.text?.trim()) {
+        if (!link.text) {
             return true;
         }
-        if (!link.url) {
-            return LINK_URL_REGEX.test(link.text);
-        }
-        return true;
+        return isUrl(link.text);
     }
     createLinkValue(link) {
         const text = link?.text?.trim();
@@ -1564,11 +1593,12 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         this.url = this.modelValue?.url ?? '';
     }
     updateValue() {
-        if (!this.isValidLink({ text: this.text, url: this.url ?? '' })) {
+        const linkValue = this.createLinkValue({ text: this.text, url: this.url ?? '' });
+        if (!this.isValidLink(linkValue)) {
             this.notifyService.error(getI18nTextByKey(this.aiTable, AITableGridI18nKey.invalidLinkFormat));
             return;
         }
-        this.modelValue = this.createLinkValue({ text: this.text, url: this.url ?? '' });
+        this.modelValue = linkValue;
         if (!_.isEqual(this.originValue, this.modelValue)) {
             super.update();
             this.originValue = this.modelValue;
@@ -1741,11 +1771,13 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         this.render2 = inject(Renderer2);
         this.maxHeight = 148;
         this.minHeight = 24;
+        this.isSelectAll = input(false);
     }
     ngAfterViewInit() {
         setTimeout(() => {
             this.updateStyle();
-        });
+            this.handleSelectAll();
+        }, 0);
     }
     updateStyle() {
         const textarea = this.elementRef.nativeElement.querySelector('textarea');
@@ -1758,6 +1790,12 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
             this.render2.setStyle(textarea, 'resize', 'none');
         }
     }
+    handleSelectAll() {
+        if (this.isSelectAll()) {
+            const textarea = this.elementRef.nativeElement.querySelector('textarea');
+            textarea.select();
+        }
+    }
     valueChange() {
         this.updateStyle();
     }
@@ -1766,8 +1804,9 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         this.closePopover();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <textarea
+            #textarea
             placeholder=""
             rows="1"
             thyInput
@@ -1785,6 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     selector: 'text-cell-editor',
                     template: `
         <textarea
+            #textarea
             placeholder=""
             rows="1"
             thyInput
@@ -1926,7 +1966,8 @@ class AITableFieldSetting {
             };
         });
         this.fieldOptions = computed(() => {
-            return getFieldOptions(this.aiTable());
+            const fieldOptions = getFieldOptions(this.aiTable());
+            return _.groupBy(fieldOptions, 'group');
         });
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
@@ -1945,7 +1986,9 @@ class AITableFieldSetting {
                 fieldType: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldType),
                 allowMultipleMembers: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.allowMultipleMembers),
                 cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
-                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm)
+                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm),
+                base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
+                advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
             };
         });
     }
@@ -1997,7 +2040,7 @@ class AITableFieldSetting {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n        @for (item of fieldOptions().base; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n        @for (item of fieldOptions().advanced; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
@@ -2010,6 +2053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ThyInputDirective,
                         ThyUniqueCheckValidator,
                         ThyDropdownMenuComponent,
+                        ThyDropdownMenuGroup,
                         ThyDropdownDirective,
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemIconDirective,
@@ -2023,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFieldIsSameOptionPipe
                     ], host: {
                         class: 'field-setting d-block pl-5 pr-5 pb-5 pt-4'
-                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
+                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n        @for (item of fieldOptions().base; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n\n    <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n        @for (item of fieldOptions().advanced; track $index) {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    active: (item | fieldIsSameOption: aiEditField())\n                }\"\n                (click)=\"selectFieldType(item)\"\n            >\n                <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ item.name }}</span>\n            </a>\n        }\n    </thy-dropdown-menu-group>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
         }] });
 
 class AITableGridSelectionService {
@@ -2039,10 +2083,6 @@ class AITableGridSelectionService {
     }
     initialize(aiTable) {
         this.aiTable = aiTable;
-        this.aiTable.dragState = signal({
-            type: DragType.none,
-            sourceIds: new Set()
-        });
     }
     clearSelection() {
         this.aiTable.selection.set({
@@ -2050,12 +2090,19 @@ class AITableGridSelectionService {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: AITableSelectAllState.none
         });
     }
     setActiveCell(activeCell) {
         this.aiTable.selection().activeCell = activeCell;
     }
+    setExpandCell(expandCell) {
+        this.aiTable.selection.set({
+            ...this.aiTable.selection(),
+            expandCell: expandCell
+        });
+    }
     selectField(fieldId) {
         if (this.aiTable.selection().selectedFields.has(fieldId)) {
             return;
@@ -2069,18 +2116,6 @@ class AITableGridSelectionService {
     get selectedRecords() {
         return this.aiTable.selection().selectedRecords;
     }
-    drag(config) {
-        this.aiTable.dragState.set(config);
-    }
-    getDragStateType() {
-        return this.aiTable.dragState?.()?.type;
-    }
-    clearDrag() {
-        this.aiTable.dragState.set({
-            type: DragType.none,
-            sourceIds: new Set()
-        });
-    }
     selectRecord(recordId) {
         if (this.aiTable.selection().selectedRecords.has(recordId)) {
             this.aiTable.selection().selectedRecords.delete(recordId);
@@ -2094,6 +2129,7 @@ class AITableGridSelectionService {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
+            expandCell: null,
             selectAllState: this.selectAllState()
         });
     }
@@ -2305,6 +2341,11 @@ const AI_TABLE_PROGRESS_BAR_POINTER_WIDTH = 8;
 const AI_TABLE_PROGRESS_TEXT_WIDTH = 46;
 const AI_TABLE_POPOVER_LEFT_OFFSET = 4;
 const AI_TABLE_RATE_MAX = 5;
+const AI_TABLE_SCROLL_BAR_SIZE = 18;
+const AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD = 40;
+const AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD = 40;
+const AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
+const AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD = AI_TABLE_FIELD_HEAD_HEIGHT / 2;
 
 const MIN_COLUMN_WIDTH = 80;
 const DBL_CLICK_EDIT_TYPE = [
@@ -3867,6 +3908,18 @@ const castToString = (value) => {
     }
     return typeof value !== 'string' ? String(value) : value;
 };
+// copy from plait
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+}
 
 function getPlaceHolderCellsConfigs(options) {
     const { aiTable, coordinate, columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex } = options;
@@ -5284,9 +5337,27 @@ class Drawer {
 }
 const drawer = new Drawer();
 
-class AITableCellLink {
+class HoverCellComponent extends Component {
     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: HoverCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: HoverCellComponent, isStandalone: true, selector: "ai-table-hover-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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: HoverCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-hover-cell',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableCellLink extends HoverCellComponent {
+    constructor() {
+        super(...arguments);
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
         this.render = computed(() => this.config()?.render);
         this.transformValue = computed(() => this.render()?.transformValue);
@@ -5344,8 +5415,8 @@ class AITableCellLink {
         const curMousePosition = getMousePosition(aiTable, x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
         handleMouseStyle(AI_TABLE_FIELD_HEAD_MORE, curMousePosition.areaType, coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", inputs: { config: { classPropertyName: "config", publicName: "config", 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: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
         @if (showLink()) {
             <ai-table-text [config]="textConfig()!" (koClick)="linkClick($event)" (koMouseMove)="linkMouseMove($event)"></ai-table-text>
         }
@@ -5474,9 +5545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellAttachment {
+class AITableCellAttachment extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.attachments = computed(() => {
             const { render, aiTable, field, recordId, readonly } = this.config();
             if (render) {
@@ -5550,8 +5621,8 @@ class AITableCellAttachment {
         });
     }
     static { this.fieldType = AITableFieldType.attachment; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", inputs: { config: { classPropertyName: "config", publicName: "config", 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: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
         @for (attachment of attachments(); track attachment.attachmentInfo._id) {
             <ko-image [config]="attachment"></ko-image>
         }
@@ -5573,9 +5644,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellRichText {
+class AITableCellRichText extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -5635,8 +5706,8 @@ class AITableCellRichText {
         });
     }
     static { this.fieldType = AITableFieldType.richText; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", inputs: { config: { classPropertyName: "config", publicName: "config", 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: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
         @if (textConfig()) {
             <ai-table-text [config]="textConfig()!"></ai-table-text>
         }
@@ -5671,7 +5742,8 @@ const createActiveCellBorder = (config) => {
     if (Array.isArray(activeCell) &&
         !!activeCell.length &&
         aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
-        aiTable.context.visibleColumnsIndexMap().has(activeCell[1])) {
+        aiTable.context.visibleColumnsIndexMap().has(activeCell[1]) &&
+        !aiTable.selection().expandCell) {
         const fieldId = activeCell[1];
         const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
         const checkIsVisible = (rowIndex, columnIndex) => {
@@ -7287,6 +7359,9 @@ const getCellBackground = (cell, isHover, targetName, aiTable) => {
     if (isSelectedField(fieldId, aiTable) || isSelectedCell(cell, aiTable)) {
         return colors.itemActiveBgColor;
     }
+    if (isKeywordsMatchedCell(cell, aiTable)) {
+        return colors.itemMatchBgColor;
+    }
     return getRowBackground(cell, isHover, targetName, aiTable);
 };
 const getIndexCellBackground = (cell, isHover, targetName, aiTable) => {
@@ -8288,27 +8363,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AITableHoverCells {
     constructor() {
         this.config = input.required();
+        this.onlyDisplayBorder = input(false);
         this.componentMap = {};
         this.groupConfig = computed(() => {
             return {
                 x: this.hoverCellConfig()?.x,
-                y: this.hoverCellConfig()?.y
+                y: this.hoverCellConfig()?.y,
+                listening: true
             };
         });
         this.hoverCellConfig = computed(() => {
             const { aiTable, coordinate, references, readonly, actions } = this.config();
-            const pointPosition = aiTable.context.pointPosition();
             const hoverCell = this.hoverCell();
             if (!hoverCell) {
                 return;
             }
-            const { field, recordId } = hoverCell;
+            const { field, recordId, isExpand } = hoverCell;
             const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
             const fieldModel = FieldModelMap[field.type];
             const transformValue = fieldModel.transformCellValue(cellValue, { aiTable, field });
             const { rowHeight, columnCount, rowCount } = coordinate;
-            const columnIndex = pointPosition.columnIndex;
-            const rowIndex = pointPosition.rowIndex;
+            const columnIndex = aiTable.context?.visibleColumnsIndexMap().get(field._id) ?? 0;
+            const rowIndex = aiTable.context?.visibleRowsIndexMap().get(recordId) ?? 0;
             const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
             const columnWidth = coordinate.getColumnWidth(columnIndex);
             const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
@@ -8334,6 +8410,7 @@ class AITableHoverCells {
                 y,
                 readonly,
                 actions,
+                isExpand,
                 render: {
                     aiTable,
                     recordId,
@@ -8354,10 +8431,15 @@ class AITableHoverCells {
         this.hoverCell = computed(() => getHoverCell(this.config().aiTable));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableHoverCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-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: `
         @if (hoverCell()) {
             <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                <ng-container
+                    *ngComponentOutlet="
+                        hoverCell()!.renderComponentDefinition;
+                        inputs: { config: hoverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
                 </ng-container>
             </ko-group>
         }
@@ -8370,7 +8452,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     template: `
         @if (hoverCell()) {
             <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                <ng-container
+                    *ngComponentOutlet="
+                        hoverCell()!.renderComponentDefinition;
+                        inputs: { config: hoverCellConfig(), onlyDisplayBorder: onlyDisplayBorder() }
+                    "
+                >
                 </ng-container>
             </ko-group>
         }
@@ -8463,19 +8550,11 @@ class AITableRenderer {
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
-        this.hoverAttachGroupConfig = computed(() => {
-            return {
-                clipX: this.frozenAreaWidth() + 1,
-                clipY: this.coordinate().rowInitSize + 1,
-                clipWidth: this.containerWidth() - this.frozenAreaWidth(),
-                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
-            };
-        });
         this.frozenAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
                 clipY: this.coordinate().rowInitSize - 1,
-                clipWidth: this.frozenAreaWidth() + 4,
+                clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
@@ -8483,7 +8562,7 @@ class AITableRenderer {
             return {
                 clipX: 0,
                 clipY: this.coordinate().rowInitSize + 1,
-                clipWidth: this.frozenAreaWidth() + 4,
+                clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.containerHeight() - this.coordinate().rowInitSize
             };
         });
@@ -8542,6 +8621,26 @@ class AITableRenderer {
         this.activeCellBorderConfig = computed(() => {
             return createActiveCellBorder(this.cellsConfig());
         });
+        this.showExpandCellBorder = computed(() => {
+            let expandCellBorder = false;
+            let frozenExpandCellBorder = false;
+            const { aiTable } = this.config();
+            const expandCellPath = aiTable.selection().expandCell;
+            if (expandCellPath) {
+                const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, expandCellPath);
+                const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
+                if (isFrozenColumn) {
+                    frozenExpandCellBorder = true;
+                }
+                else {
+                    expandCellBorder = true;
+                }
+            }
+            return {
+                expandCellBorder,
+                frozenExpandCellBorder
+            };
+        });
     }
     stageMousemove(e) {
         this.koMousemove.emit(e);
@@ -8565,7 +8664,7 @@ class AITableRenderer {
         this.koMouseleave.emit(e);
     }
     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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"hoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-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                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\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: AITableHoverCells, selector: "ai-table-hover-cell", inputs: ["config"] }, { 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"] }], 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" }, 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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\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-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\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: AITableHoverCells, selector: "ai-table-hover-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -8583,18 +8682,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableAddField,
                         AITableHoverRowHeads,
                         AITableOtherRows
-                    ], 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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"hoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-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                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\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>\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]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\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-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenHoverAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-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-hover-cell [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-hover-cell>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
-class HoverCellComponent extends Component {
-}
-
-class AITableCellRate {
+class AITableCellRate extends HoverCellComponent {
     constructor() {
+        super(...arguments);
         this.pointerX = signal(0);
         this.pointerY = signal(0);
         this.resetStatus = signal(false);
-        this.config = input();
         this.readonly = computed(() => {
             return this.config()?.readonly;
         });
@@ -8706,8 +8802,8 @@ class AITableCellRate {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", inputs: { config: { classPropertyName: "config", publicName: "config", 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: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
         }
@@ -8733,9 +8829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableCellProgress {
+class AITableCellProgress extends HoverCellComponent {
     constructor() {
-        this.config = input();
+        super(...arguments);
         this.readonly = computed(() => {
             return this.config()?.readonly;
         });
@@ -8952,8 +9048,8 @@ class AITableCellProgress {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", inputs: { config: { classPropertyName: "config", publicName: "config", 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: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()"></ko-rect>
         }
@@ -9009,7 +9105,22 @@ Object.values(cellComponents).forEach((cellComponent) => {
 
 function getHoverCell(aiTable) {
     const pointPosition = aiTable.context.pointPosition();
-    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+    let fieldId;
+    let recordId;
+    const expandCell = aiTable.selection().expandCell;
+    if (expandCell) {
+        fieldId = expandCell[1];
+        recordId = expandCell[0];
+    }
+    else {
+        const { fieldId: fieldIdDetail, recordId: recordIdDetail } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+        if (fieldIdDetail) {
+            fieldId = fieldIdDetail;
+        }
+        if (recordIdDetail) {
+            recordId = recordIdDetail;
+        }
+    }
     if (!recordId || !fieldId) {
         return;
     }
@@ -9026,6 +9137,7 @@ function getHoverCell(aiTable) {
         field,
         recordId,
         fieldId,
+        isExpand: !!expandCell,
         renderComponentDefinition
     };
 }
@@ -9052,6 +9164,45 @@ function clearCells(aiTable, actions) {
     }
 }
 
+function aiTableTextConfigToKonvaConfig(textConfig, rowHeight) {
+    const result = {
+        x: textConfig.x,
+        y: textConfig.y,
+        text: textConfig.text,
+        fill: textConfig.fillStyle,
+        fontStyle: textConfig.fontWeight,
+        fontSize: textConfig.fontSize,
+        align: textConfig.textAlign,
+        height: 0,
+        verticalAlign: textConfig.verticalAlign,
+        textDecoration: textConfig.textDecoration
+    };
+    return result;
+}
+function aiTableImageConfigToKonvaConfig(imageConfig, options) {
+    let image = imageCache.getImage(imageConfig.url);
+    if (!image) {
+        const img = new Image();
+        img.src = imageConfig.url;
+        image = img;
+    }
+    const result = {
+        ...imageConfig,
+        listening: options?.listening,
+        image: image
+    };
+    return result;
+}
+function aiTableRectConfigToKonvaConfig(rectConfig, options) {
+    const result = {
+        name: options?.name,
+        ...rectConfig,
+        cornerRadius: rectConfig.radius,
+        listening: options?.listening ?? false
+    };
+    return result;
+}
+
 class AITableGridEventService {
     constructor() {
         this.dblClickEvent$ = new Subject();
@@ -9139,7 +9290,7 @@ class AITableGridEventService {
         return ref;
     }
     getOriginPosition(aiTable, options) {
-        const { container, coordinate, recordId, fieldId, isHoverEdit } = options;
+        const { container, coordinate, recordId, fieldId } = options;
         const { scrollState } = aiTable.context;
         const { rowHeight, columnCount } = coordinate;
         const cell = [recordId, fieldId];
@@ -9166,13 +9317,6 @@ class AITableGridEventService {
         let y = originPosition.y + getEditorBoxOffset();
         let width = getEditorSpace(originPosition.width);
         let height = getEditorSpace(originPosition.height);
-        // hover 编辑组件无边框
-        if (isHoverEdit) {
-            x = originPosition.x + getHoverEditorBoxOffset();
-            y = originPosition.y + getHoverEditorBoxOffset();
-            width = getHoverEditorSpace(originPosition.width);
-            height = getHoverEditorSpace(originPosition.height);
-        }
         return {
             ...originPosition,
             x: x,
@@ -9182,7 +9326,7 @@ class AITableGridEventService {
         };
     }
     openCellEditor(aiTable, options) {
-        const { container, recordId, fieldId, isHoverEdit, references } = options;
+        const { container, recordId, fieldId, references } = options;
         const fieldType = this.aiTable.fieldsMap()[fieldId].type;
         const { component, isInternalComponent } = this.getEditorComponent(fieldType);
         const offsetOriginPosition = this.getOriginPosition(aiTable, options);
@@ -9199,7 +9343,8 @@ class AITableGridEventService {
                 fieldId: fieldId,
                 recordId: recordId,
                 references,
-                aiTable: aiTable
+                aiTable: aiTable,
+                isSelectAll: options.isSelectAll,
             },
             panelClass: 'grid-cell-editor',
             outsideClosable: fieldType === AITableFieldType.link ? true : false,
@@ -9473,17 +9618,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"selectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
         }] });
 
+class AITableScrollControllerService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.animationFrame = null;
+        this.mouseUpSubscription = null;
+        this.isAutoScrolling = false;
+        this.autoScrollSub = null;
+        this.edgeDistanceX = 0;
+        this.edgeDistanceY = 0;
+        this.lastAutoScrollOptions = null;
+        this.ngZone.runOutsideAngular(() => {
+            this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
+                this.handleMouseUp();
+            });
+        });
+    }
+    scroll(options) {
+        const { needScroll } = this.calculateScrollDistance(options);
+        if (!needScroll) {
+            this.isAutoScrolling = false;
+            return;
+        }
+        this.lastAutoScrollOptions = options;
+        if (!this.isAutoScrolling) {
+            this.startAutoScroll(options);
+        }
+    }
+    handleMouseUp() {
+        this.isAutoScrolling = false;
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        this.isAutoScrolling = false;
+    }
+    startAutoScroll(options) {
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        this.isAutoScrolling = true;
+        this.ngZone.runOutsideAngular(() => {
+            this.autoScrollSub = animationFrames()
+                .pipe(takeWhile(() => this.isAutoScrolling), map(() => {
+                const currentOptions = this.lastAutoScrollOptions || options;
+                let currentScrollX = 0;
+                let currentScrollY = 0;
+                const { horizontalElement, verticalElement } = currentOptions.scrollableElement;
+                if (horizontalElement) {
+                    currentScrollX = horizontalElement.scrollLeft;
+                }
+                if (verticalElement) {
+                    currentScrollY = verticalElement.scrollTop;
+                }
+                // 计算最新滚动距离和速度
+                const { scrollResult } = this.calculateScrollDistance(currentOptions);
+                let left = 0;
+                let top = 0;
+                if (horizontalElement && scrollResult.speedX !== undefined && scrollResult.speedX !== 0) {
+                    left = Math.max(0, currentScrollX + scrollResult.speedX);
+                    horizontalElement.scrollLeft = left;
+                }
+                if (verticalElement && scrollResult.speedY !== undefined && scrollResult.speedY !== 0) {
+                    top = Math.max(0, currentScrollY + scrollResult.speedY);
+                    verticalElement.scrollTop = top;
+                }
+                this.isAutoScrolling = left !== 0 || top !== 0;
+                return {
+                    x: horizontalElement?.scrollLeft || 0,
+                    y: verticalElement?.scrollTop || 0
+                };
+            }))
+                .subscribe((position) => {
+                options.onScrollChange?.({ x: position.x, y: position.y }, this.isAutoScrolling);
+            });
+        });
+    }
+    getEdgeThreshold(threshold, direction) {
+        const defaultThreshold = 10; // 默认阈值
+        if (isObject(threshold)) {
+            return threshold[direction] || defaultThreshold;
+        }
+        return threshold || defaultThreshold;
+    }
+    // 计算距离和滚动速度
+    calculateScrollDistance(options) {
+        const { container, target, direction = 'both', scrollableElement, frozenArea = {}, edgeThreshold = 0, minScrollSpeed = 1, maxScrollSpeed = 20, scrollSpeedFactor = 1 } = options;
+        const { horizontalElement, verticalElement } = scrollableElement;
+        // 初始化滚动结果
+        const scrollResult = {
+            x: 0,
+            y: 0,
+            speedX: 0,
+            speedY: 0
+        };
+        let needScroll = false;
+        // 水平滚动计算
+        if ((direction === 'horizontal' || direction === 'both') && horizontalElement) {
+            const minLeft = frozenArea.left || 0;
+            const maxLeft = frozenArea.right || container.width;
+            const leftEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'left');
+            const rightEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'right');
+            if (target.x < minLeft + leftEdgeThreshold) {
+                this.edgeDistanceX = Math.abs(minLeft + leftEdgeThreshold - target.x);
+                // point点位离左边界阈值越远，速度越快
+                const distanceFactor = Math.min(1.0, this.edgeDistanceX / leftEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.x = this.edgeDistanceX;
+                scrollResult.speedX = -speed; // 向左滚动
+                needScroll = this.edgeDistanceX > 0;
+            }
+            else if (target.x + (target.width || 0) > maxLeft - rightEdgeThreshold) {
+                const rightEdge = target.x + (target.width || 0);
+                this.edgeDistanceX = Math.abs(rightEdge - maxLeft + rightEdgeThreshold);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceX / rightEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.x = this.edgeDistanceX;
+                scrollResult.speedX = speed;
+                needScroll = this.edgeDistanceX > 0;
+            }
+            else {
+                this.edgeDistanceX = 0;
+                scrollResult.speedX = 0;
+            }
+        }
+        // 垂直滚动计算
+        if ((direction === 'vertical' || direction === 'both') && verticalElement) {
+            const minTop = frozenArea.top || 0;
+            const maxTop = frozenArea.bottom || container.height;
+            const topEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'top');
+            const bottomEdgeThreshold = this.getEdgeThreshold(edgeThreshold, 'bottom');
+            if (target.y < minTop + topEdgeThreshold) {
+                // 滚动距离
+                this.edgeDistanceY = Math.abs(minTop + topEdgeThreshold - target.y);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceY / topEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.y = this.edgeDistanceY;
+                scrollResult.speedY = -speed; // 负值表示向上滚动
+                needScroll = this.edgeDistanceY > 0;
+            }
+            else if (target.y + (target.height || 0) > maxTop - bottomEdgeThreshold) {
+                // 向下滚动
+                this.edgeDistanceY = Math.abs(target.y + (target.height || 0) - maxTop + bottomEdgeThreshold);
+                const distanceFactor = Math.min(1.0, this.edgeDistanceY / bottomEdgeThreshold);
+                const speed = this.calculateSpeed(distanceFactor, minScrollSpeed, maxScrollSpeed, scrollSpeedFactor);
+                scrollResult.y = this.edgeDistanceY;
+                scrollResult.speedY = speed;
+                needScroll = this.edgeDistanceY > 0;
+            }
+            else {
+                // 不在边缘区域，重置边缘距离
+                this.edgeDistanceY = 0;
+                scrollResult.speedY = 0;
+            }
+        }
+        return { scrollResult, needScroll };
+    }
+    /**
+     * 计算滚动速度
+     * @param distanceFactor 距离因子（0-1）
+     * @param minSpeed 最小速度
+     * @param maxSpeed 最大速度
+     * @param speedFactor 速度因子
+     * @returns 计算后的滚动速度
+     */
+    calculateSpeed(distanceFactor, minSpeed, maxSpeed, speedFactor) {
+        // 二次曲线计算，距离因子越大速度增长越快
+        const easedFactor = distanceFactor * distanceFactor;
+        // 计算最终速度，范围为 minSpeed 到 maxSpeed 之间
+        const speed = minSpeed + (maxSpeed - minSpeed) * easedFactor;
+        // 应用全局速度因子
+        return speed * speedFactor;
+    }
+    destroy() {
+        if (this.animationFrame) {
+            cancelAnimationFrame(this.animationFrame);
+            this.animationFrame = null;
+        }
+        if (this.autoScrollSub) {
+            this.autoScrollSub.unsubscribe();
+            this.autoScrollSub = null;
+        }
+        if (this.mouseUpSubscription) {
+            this.mouseUpSubscription.unsubscribe();
+            this.mouseUpSubscription = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
 class AITableDragComponent {
     constructor() {
+        this.horizontalBar = input();
+        this.verticalBar = input();
         this.dragEnd = output();
         this.aiTableGridSelectionService = inject(AITableGridSelectionService);
         this.render2 = inject(Renderer2);
+        this.scrollControllerService = inject(AITableScrollControllerService);
         this.elementRef = inject((ElementRef));
         this.draggedData = null;
+        this.scrollBarStartPosition = { x: 0, y: 0 };
         this.mouseStartPosition = null;
         this.aiTableDrag = null;
         this.mouseDownTimeout = null;
         this.isDraggingEnabled = false;
+        this.containerWidth = 0;
+        this.containerHeight = 0;
+        this.horizontalBarMaxScroll = 0;
+        this.verticalBarMaxScroll = 0;
         effect(() => this.handleDragStateChange());
     }
     ngOnInit() {
@@ -9501,6 +9848,11 @@ class AITableDragComponent {
                 clearTimeout(this.mouseDownTimeout);
             }
             this.isDraggingEnabled = false;
+            this.horizontalBarElement = this.horizontalBar()?.nativeElement;
+            this.horizontalBarMaxScroll = (this.horizontalBarElement?.scrollWidth || 0) - (this.horizontalBarElement?.clientWidth || 0);
+            this.verticalBarElement = this.verticalBar()?.nativeElement;
+            this.verticalBarMaxScroll = (this.verticalBarElement?.scrollHeight || 0) - (this.verticalBarElement?.clientHeight || 0);
+            this.scrollBarStartPosition = { x: this.horizontalBarElement?.scrollLeft || 0, y: this.verticalBarElement?.scrollTop || 0 };
             this.mouseDownTimeout = setTimeout(() => {
                 this.isDraggingEnabled = true;
             }, 200);
@@ -9545,6 +9897,8 @@ class AITableDragComponent {
             return;
         }
         this.setDisplayStyle('block');
+        this.containerWidth = this.elementRef.nativeElement.offsetWidth;
+        this.containerHeight = this.elementRef.nativeElement.offsetHeight;
         const moveX = e.x - (this.mouseStartPosition?.x || 0);
         const moveY = e.y - (this.mouseStartPosition?.y || 0);
         switch (drag.type) {
@@ -9561,7 +9915,7 @@ class AITableDragComponent {
     }
     movingColumn(drag, moveX) {
         const aiTable = this.aiTableGridSelectionService.aiTable;
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: this.horizontalBarElement?.scrollLeft || 0, y: 0 };
         const coordinate = drag.coordinate;
         const fields = aiTable.gridData().fields;
         const width = this.calculateDragWidth(fields, coordinate, drag);
@@ -9575,60 +9929,102 @@ class AITableDragComponent {
         const pointerX = moveX + sourceColumnStartX;
         // 拖拽中心点
         const dragCenter = sourceColumnWidth / 2;
-        const rectLeft = pointerX - (isSourceColumnFrozen ? 0 : scroll.x);
+        const currentRectLeft = pointerX - (isSourceColumnFrozen ? 0 : this.scrollBarStartPosition.x);
+        let newScrollPosition = { x: scroll.x, y: scroll.y };
         this.setRectStyles({
             cursor: 'move',
             width: `${width}px`,
             height: '100%',
             top: '0',
-            left: `${rectLeft}px`
-        });
-        const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
-        const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
-        let targetColumnIndex = coordinate.getColumnStartIndex(pointerX + (isSourceColumnFrozen ? scroll.x : 0) + dragCenter);
-        let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
-        let isLastColumn = false;
-        // 处理最后一列
-        if (pointerX + dragCenter > lastColumnOffset + lastColumnWidth) {
-            targetColumnIndex = coordinate.columnCount;
-            targetColumnStartX = lastColumnOffset + lastColumnWidth;
-            isLastColumn = true;
-        }
-        if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
-            isLastColumn) {
-            let lineLeft = targetColumnStartX - scroll.x;
-            const lineForFrozenX = lineLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
-            const rectDistanceFrozenX = rectLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
-            if (lineForFrozenX < 0) {
-                if (Math.abs(rectDistanceFrozenX) > dragCenter) {
-                    lineLeft = coordinate.getColumnOffset(0);
-                    targetColumnIndex = 0;
+            left: `${currentRectLeft}px`
+        });
+        // 计算目标列和辅助线
+        const updateTargetAndLine = (rectLeft, scrollPosition) => {
+            let targetColumnIndex = coordinate.getColumnStartIndex(rectLeft + scrollPosition.x + dragCenter);
+            const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
+            const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
+            const lastColumnEndX = lastColumnOffset + lastColumnWidth;
+            let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
+            let isLastColumn = false;
+            // 处理最后一列
+            if (rectLeft + dragCenter + scrollPosition.x > lastColumnEndX) {
+                targetColumnIndex = coordinate.columnCount;
+                targetColumnStartX = lastColumnOffset + lastColumnWidth;
+                isLastColumn = true;
+            }
+            if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
+                isLastColumn) {
+                let lineLeft = targetColumnStartX - scrollPosition.x;
+                const lineForFrozenX = lineLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
+                const rectDistanceFrozenX = rectLeft - frozenColumnWidth - aiTable.context.rowHeadWidth();
+                if (lineForFrozenX < 0) {
+                    if (Math.abs(rectDistanceFrozenX) < dragCenter) {
+                        // 滚动中保持上一个位置
+                        const nextColumnStartX = coordinate.getColumnOffset(targetColumnIndex + 1);
+                        this.setAuxiliaryLineStyles({
+                            left: `${nextColumnStartX - scrollPosition.x}px`
+                        });
+                        this.draggedData = {
+                            type: DragType.field,
+                            targetIndex: targetColumnIndex + 1,
+                            fieldIds: drag.sourceIds,
+                            fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
+                        };
+                        return;
+                    }
                 }
-                else {
-                    return;
+                this.setAuxiliaryLineStyles({
+                    width: '2px',
+                    height: '100%',
+                    top: 0,
+                    left: `${lineLeft}px`
+                });
+                // 向右移动目标在目标列的前一列
+                if (targetColumnIndex > sourceColumnIndex) {
+                    targetColumnIndex -= 1;
                 }
+                this.draggedData = {
+                    type: DragType.field,
+                    targetIndex: targetColumnIndex,
+                    fieldIds: drag.sourceIds,
+                    fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
+                };
             }
-            this.setAuxiliaryLineStyles({
-                width: '2px',
-                height: '100%',
-                top: 0,
-                left: `${lineLeft}px`
-            });
-            // 向右移动目标在目标列的前一列
-            if (targetColumnIndex > sourceColumnIndex) {
-                targetColumnIndex -= 1;
+            else {
+                this.resetAuxiliaryLine();
+                this.draggedData = null;
             }
-            this.draggedData = {
-                type: DragType.field,
-                targetIndex: targetColumnIndex,
-                fieldIds: drag.sourceIds,
-                fieldsIndex: Array.from(drag.sourceIds).map((id) => visibleColumnIndexMap.get(id) || 0)
-            };
-        }
-        else {
-            this.resetAuxiliaryLine();
-            this.draggedData = null;
-        }
+        };
+        updateTargetAndLine(currentRectLeft, newScrollPosition);
+        this.scrollControllerService.scroll({
+            container: {
+                width: this.containerWidth,
+                height: this.containerHeight
+            },
+            target: {
+                x: currentRectLeft,
+                y: 0,
+                width: sourceColumnWidth,
+                height: this.containerHeight
+            },
+            direction: 'horizontal',
+            scrollableElement: {
+                horizontalElement: this.horizontalBarElement
+            },
+            frozenArea: {
+                left: frozenColumnWidth + aiTable.context.rowHeadWidth()
+            },
+            edgeThreshold: {
+                left: AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD,
+                right: AI_TABLE_SCROLL_BAR_SIZE + AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                newScrollPosition = position;
+                if (isAutoScrolling && position.x > 0 && Math.round(position.x) < this.horizontalBarMaxScroll) {
+                    updateTargetAndLine(currentRectLeft, position);
+                }
+            }
+        });
     }
     movingColumnWidth(drag, moveX) {
         this.setCursorStyle('col-resize');
@@ -9637,7 +10033,7 @@ class AITableDragComponent {
         const sourceColumnIndex = visibleColumnIndexMap.get(drag.sourceIds.values().next().value) || 0;
         const sourceColumnStartX = drag.coordinate.getColumnOffset(sourceColumnIndex);
         const sourceColumnWidth = drag.coordinate.getColumnWidth(sourceColumnIndex);
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: this.horizontalBarElement?.scrollLeft || 0, y: this.verticalBarElement?.scrollTop || 0 };
         const pointerX = moveX + sourceColumnStartX;
         const colResizeX = pointerX - (sourceColumnIndex === 0 ? 0 : scroll.x);
         const left = `${colResizeX + sourceColumnWidth}px`;
@@ -9647,15 +10043,23 @@ class AITableDragComponent {
             top: '0',
             left
         });
+        let minWidth = MIN_COLUMN_WIDTH;
+        drag.sourceIds.forEach((id) => {
+            const field = aiTable.fieldsMap()[id];
+            const fieldOption = aiTable.context.fieldOptionMap().get(field.type);
+            if (fieldOption && fieldOption.minWidth) {
+                minWidth = Math.max(minWidth, fieldOption.minWidth);
+            }
+        });
         this.draggedData = {
             type: DragType.columnWidth,
             fieldIds: drag.sourceIds,
-            width: Math.max(MIN_COLUMN_WIDTH, sourceColumnWidth + moveX)
+            width: Math.max(minWidth, sourceColumnWidth + moveX)
         };
     }
     movingRecord(drag, moveY) {
         const aiTable = this.aiTableGridSelectionService.aiTable;
-        const scroll = drag.scroll || { x: 0, y: 0 };
+        const scroll = { x: 0, y: this.verticalBarElement?.scrollTop || 0 };
         const coordinate = drag.coordinate;
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
         const sourceRowId = drag.sourceIds.values().next().value;
@@ -9663,37 +10067,82 @@ class AITableDragComponent {
         const sourceRowStartY = coordinate.getRowOffset(sourceRowIndex);
         const sourceRowHeight = coordinate.getRowHeight(sourceRowIndex);
         const pointerY = sourceRowStartY + moveY;
+        const rectTop = pointerY - this.scrollBarStartPosition.y;
         this.setRectStyles({
             width: '100%',
             height: `${sourceRowHeight}px`,
-            top: `${pointerY - scroll.y}px`,
+            top: `${rectTop}px`,
             left: '0'
         });
-        const dragCenter = sourceRowHeight / 2;
-        const targetRowIndex = coordinate.getRowStartIndex(pointerY + dragCenter);
-        const targetRowStartY = coordinate.getRowOffset(targetRowIndex);
-        const lineTop = targetRowStartY - scroll.y;
-        const lineHeight = 2;
-        if (((targetRowIndex >= 0 && sourceRowIndex > targetRowIndex && sourceRowIndex - targetRowIndex > 0) ||
-            (sourceRowIndex < targetRowIndex && targetRowIndex - sourceRowIndex > 1)) &&
-            lineTop > AI_TABLE_FIELD_HEAD_HEIGHT - lineHeight && // 限制可视范围内
-            lineTop < coordinate.containerHeight - lineHeight) {
-            this.setAuxiliaryLineStyles({
-                width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
-                height: `${lineHeight}px`,
-                top: `${lineTop}px`,
-                left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
-            });
-            this.draggedData = {
-                type: DragType.record,
-                recordIds: drag.sourceIds,
-                targetIndex: targetRowIndex
-            };
-        }
-        else {
-            this.resetAuxiliaryLine();
-            this.draggedData = null;
-        }
+        let newScrollPosition = { x: scroll.x, y: scroll.y };
+        const updateTargetAndLine = (rectTop, scrollPosition) => {
+            const dragCenter = sourceRowHeight / 2;
+            const targetRowIndex = coordinate.getRowStartIndex(rectTop + scrollPosition.y + dragCenter);
+            const targetRowStartY = coordinate.getRowOffset(targetRowIndex);
+            const lineHeight = 2;
+            if ((targetRowIndex >= 0 && sourceRowIndex > targetRowIndex && sourceRowIndex - targetRowIndex > 0) ||
+                (sourceRowIndex < targetRowIndex && targetRowIndex - sourceRowIndex > 1)) {
+                let lineTop = targetRowStartY - scrollPosition.y;
+                if (lineTop < AI_TABLE_FIELD_HEAD_HEIGHT) {
+                    // 滚动中保持上一个位置
+                    const nextColumnStartY = coordinate.getRowOffset(targetRowIndex + 1);
+                    this.setAuxiliaryLineStyles({
+                        top: `${nextColumnStartY - scrollPosition.y}px`
+                    });
+                    this.draggedData = {
+                        type: DragType.record,
+                        recordIds: drag.sourceIds,
+                        targetIndex: targetRowIndex + 1
+                    };
+                    return;
+                }
+                this.setAuxiliaryLineStyles({
+                    width: `calc(100% - ${AI_TABLE_ROW_DRAG_ICON_WIDTH}px)`,
+                    height: `${lineHeight}px`,
+                    top: `${lineTop}px`,
+                    left: `${AI_TABLE_ROW_DRAG_ICON_WIDTH}px`
+                });
+                this.draggedData = {
+                    type: DragType.record,
+                    recordIds: drag.sourceIds,
+                    targetIndex: targetRowIndex
+                };
+            }
+            else {
+                this.resetAuxiliaryLine();
+                this.draggedData = null;
+            }
+        };
+        updateTargetAndLine(rectTop, newScrollPosition);
+        this.scrollControllerService.scroll({
+            container: {
+                width: this.containerWidth,
+                height: this.containerHeight
+            },
+            target: {
+                x: 0,
+                y: rectTop,
+                width: this.containerWidth,
+                height: sourceRowHeight
+            },
+            direction: 'vertical',
+            scrollableElement: {
+                verticalElement: this.verticalBarElement
+            },
+            frozenArea: {
+                top: AI_TABLE_FIELD_HEAD_HEIGHT
+            },
+            edgeThreshold: {
+                top: AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD,
+                bottom: AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                newScrollPosition = position;
+                if (isAutoScrolling && position.y > 0 && position.y < this.verticalBarMaxScroll) {
+                    updateTargetAndLine(rectTop, newScrollPosition);
+                }
+            }
+        });
     }
     handleDragEnd() {
         if (this.draggedData) {
@@ -9756,9 +10205,10 @@ class AITableDragComponent {
             cancelAnimationFrame(this.timer);
             this.timer = null;
         }
+        this.scrollControllerService.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, decorators: [{
             type: Component,
@@ -9774,6 +10224,7 @@ class AITableGrid extends AITableGridBase {
         this.isDragSelecting = false;
         this.dragSelectionStart = null;
         this.notifyService = inject(ThyNotifyService);
+        this.scrollControllerService = inject(AITableScrollControllerService);
         this.isPopoverOpen = false;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
         this.containerRect = signal({ width: 0, height: 0 });
@@ -9808,6 +10259,26 @@ class AITableGrid extends AITableGridBase {
             const columns = AITable.getVisibleFields(this.aiTable);
             return new Map(columns?.map((item, index) => [item._id, index]));
         });
+        this.fieldOptions = computed(() => {
+            let allFieldOptions = defaultFieldOptions.map((fieldOption) => {
+                fieldOption.name = getI18nTextByKey(this.aiTable, fieldOption.name);
+                return fieldOption;
+            });
+            Object.entries(this.aiTable.context?.aiFieldConfig()?.customFields || {}).forEach(([fieldType, fieldConfig]) => {
+                if (fieldConfig?.fieldOption) {
+                    allFieldOptions.push(fieldConfig.fieldOption);
+                }
+            });
+            const fieldOptionMap = new Map(allFieldOptions.map((fieldOption) => [fieldOption.type, fieldOption]));
+            const fieldOptionKeys = this.aiTable.context?.aiFieldConfig()?.fieldOptionKeys || [];
+            if (fieldOptionKeys.length > 0) {
+                allFieldOptions = fieldOptionKeys.map((fieldOptionKey) => fieldOptionMap.get(fieldOptionKey));
+            }
+            return allFieldOptions;
+        });
+        this.fieldOptionMap = computed(() => {
+            return new Map(this.fieldOptions().map((fieldOption) => [fieldOption.type, fieldOption]));
+        });
         this.visibleRowsIndexMap = computed(() => {
             return new Map(this.linearRows().map((row, index) => [row._id, index]));
         });
@@ -9854,6 +10325,13 @@ class AITableGrid extends AITableGridBase {
         this.scrollbarWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         });
+        this.i18nTexts = computed(() => {
+            this.aiGetI18nTextByKey();
+            return {
+                rowAddFilterTooltip: getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip)
+            };
+        });
+        // rowAddFilterTooltip = getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip);
         this.actions = {
             updateFieldValue: (data) => {
                 this.aiUpdateFieldValue.emit(data);
@@ -9906,7 +10384,7 @@ class AITableGrid extends AITableGridBase {
             this.bindGlobalMousedown();
             this.containerResizeListener();
             this.bindWheel();
-            this.bindClipboardShortcuts();
+            this.bindShortcuts();
         });
         effect(() => {
             if (this.hasContainerRect() && this.horizontalBarRef() && this.verticalBarRef()) {
@@ -9967,7 +10445,9 @@ class AITableGrid extends AITableGridBase {
             aiFieldConfig: this.aiFieldConfig,
             scrollAction: this.scrollAction,
             maxFields: this.aiMaxFields,
-            maxRecords: this.aiMaxRecords
+            maxRecords: this.aiMaxRecords,
+            fieldOptions: this.fieldOptions,
+            fieldOptionMap: this.fieldOptionMap
         });
     }
     initCustomField() {
@@ -10029,6 +10509,7 @@ class AITableGrid extends AITableGridBase {
                     const endCell = [recordId, fieldId];
                     if (startCell && !!startCell.length) {
                         this.aiTableGridSelectionService.selectCells(startCell, endCell);
+                        this.scrollViewToCell(pos, startCell, endCell, this.coordinate(), this.horizontalBarRef(), this.verticalBarRef());
                     }
                 }
             }
@@ -10063,7 +10544,10 @@ class AITableGrid extends AITableGridBase {
                     return;
                 const dragSelectionStart = [recordId, fieldId];
                 this.updateDragSelectionState(true, dragSelectionStart);
-                this.aiTableGridSelectionService.selectCells(dragSelectionStart);
+                const [expandRecordId, expandFieldId] = this.aiTable.selection().expandCell || [null, null];
+                if (expandRecordId !== recordId || expandFieldId !== fieldId) {
+                    this.aiTableGridSelectionService.selectCells(dragSelectionStart);
+                }
                 return;
             case AI_TABLE_ROW_DRAG:
                 if (!recordId)
@@ -10308,11 +10792,9 @@ class AITableGrid extends AITableGridBase {
         });
         this.resizeObserver.observe(this.containerElement());
     }
-    bindClipboardShortcuts() {
+    bindShortcuts() {
         fromEvent(document, 'keydown')
-            .pipe(filter((event) => ((event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v')) ||
-            event.key === 'Backspace' ||
-            event.key === 'Delete'), takeUntilDestroyed(this.destroyRef))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(async (event) => {
             if (this.aiReadonly()) {
                 return;
@@ -10331,14 +10813,39 @@ class AITableGrid extends AITableGridBase {
                 return;
             }
             event.preventDefault();
-            if (event.key === 'c') {
-                this.copyCells();
-            }
-            else if (event.key === 'v') {
-                this.pasteCells();
+            const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
+            const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
+            if (isCopyOrPaste) {
+                if (event.key === 'c') {
+                    this.copyCells();
+                }
+                else if (event.key === 'v') {
+                    this.pasteCells();
+                }
+                return;
             }
-            else if (event.key === 'Backspace' || event.key === 'Delete') {
+            if (isDeleteOrBackspace) {
                 clearCells(this.aiTable, this.actions);
+                return;
+            }
+            // quick enter cell editor
+            const isKeyForInput = !isVirtualKey(event);
+            const activeCell = this.aiTable.selection().activeCell;
+            const field = activeCell && this.aiTable.fieldsMap()[activeCell[1]];
+            if (isKeyForInput && activeCell && field && field.type === AITableFieldType.text) {
+                const [recordId, fieldId] = activeCell;
+                this.aiTableGridEventService.openCellEditor(this.aiTable, {
+                    viewContainerRef: this.viewContainerRef,
+                    container: this.containerElement(),
+                    coordinate: this.coordinate(),
+                    fieldId,
+                    recordId,
+                    isSelectAll: true,
+                    references: this.aiReferences(),
+                    updateFieldValue: (value) => {
+                        this.aiUpdateFieldValue.emit(value);
+                    }
+                });
             }
         });
     }
@@ -10368,41 +10875,31 @@ class AITableGrid extends AITableGridBase {
     }
     handleFieldDragStart() {
         if (!this.aiReadonly() && this.aiTableGridSelectionService.selectedFields.size > 0) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.field,
                 sourceIds: this.aiTableGridSelectionService.selectedFields,
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
     handleFieldWidthDragStart(fieldId) {
         if (!this.aiReadonly() && fieldId) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.columnWidth,
                 sourceIds: new Set([fieldId]),
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
     handleRowDragStart(recordIds) {
         if (!this.aiReadonly() && !this.aiRowDragDisabled() && recordIds.length > 0) {
-            this.aiTableGridSelectionService.drag({
+            this.setDragState({
                 type: DragType.record,
                 sourceIds: new Set(recordIds),
-                scroll: this.getScrollPosition(),
                 coordinate: this.coordinate()
             });
         }
     }
-    getScrollPosition() {
-        const horizontalBar = this.horizontalBarRef()?.nativeElement;
-        const verticalBar = this.verticalBarRef()?.nativeElement;
-        let scrollLeft = horizontalBar?.scrollLeft || 0;
-        let scrollTop = verticalBar?.scrollTop || 0;
-        return { x: scrollLeft, y: scrollTop };
-    }
     dragEnd(data) {
         switch (data.type) {
             case DragType.field:
@@ -10433,21 +10930,75 @@ class AITableGrid extends AITableGridBase {
                 }
                 return;
         }
-        this.aiTableGridSelectionService.clearDrag();
+        this.setDragState({
+            type: DragType.none,
+            sourceIds: new Set()
+        });
+    }
+    setDragState(config) {
+        this.aiTable.dragState.set(config);
+    }
+    scrollViewToCell(position, startCell, endCell, coordinate, horizontalBarRef, verticalBarRef) {
+        const [, startFieldId] = startCell;
+        const [endRecordId, endFieldId] = endCell;
+        const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
+        const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
+        const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
+        const isSelectionOnlyOnFrozenColumn = startColIndex === 0 && endColIndex === 0;
+        const endCellTop = coordinate.getRowOffset(endRowIndex);
+        const endCellLeft = coordinate.getColumnOffset(endColIndex);
+        const scrollState = this.aiTable.context.scrollState();
+        const gridData = this.aiTable.gridData();
+        const containerRect = coordinate.container.getBoundingClientRect();
+        this.scrollControllerService.scroll({
+            container: containerRect,
+            target: position,
+            direction: isSelectionOnlyOnFrozenColumn ? 'vertical' : 'both',
+            scrollableElement: {
+                horizontalElement: horizontalBarRef?.nativeElement,
+                verticalElement: verticalBarRef?.nativeElement
+            },
+            frozenArea: {
+                top: AI_TABLE_FIELD_HEAD_HEIGHT,
+                left: coordinate.getColumnWidth(0) + this.aiTable.context.rowHeadWidth(),
+                bottom: containerRect.height - AI_TABLE_SCROLL_BAR_SIZE,
+                right: containerRect.width - AI_TABLE_SCROLL_BAR_SIZE
+            },
+            edgeThreshold: {
+                left: AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD,
+                top: AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD,
+                right: AI_TABLE_SCROLL_BAR_SIZE + AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD,
+                bottom: AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD
+            },
+            onScrollChange: (position, isAutoScrolling) => {
+                if (isAutoScrolling) {
+                    const scrollLeft = position.x - scrollState.scrollLeft;
+                    const scrollTop = position.y - scrollState.scrollTop;
+                    const nextCellIndex = coordinate.getColumnStartIndex(endCellLeft + scrollLeft);
+                    const nextRowIndex = coordinate.getRowStartIndex(endCellTop + scrollTop);
+                    // 向左滚动，单元格向后退一格，防止选区进入冻结列
+                    const nextField = gridData.fields[isSelectionOnlyOnFrozenColumn || scrollLeft > 0 ? nextCellIndex : nextCellIndex + 1];
+                    const nextRecord = gridData.records[nextRowIndex];
+                    if (nextField && nextRecord) {
+                        this.aiTableGridSelectionService.selectCells([startCell[0], nextField._id], [nextRecord._id, startCell[1]]);
+                    }
+                }
+            }
+        });
     }
     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], 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]=\"'\u672C\u8BB0\u5F55\u5DF2\u88AB\u7B5B\u9009\u8FC7\u6EE4\uFF0C\u70B9\u51FB\u8BE5\u8BB0\u5F55\u4EE5\u5916\u4F4D\u7F6E\u5C06\u88AB\u9690\u85CF'\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon styxI18nTracking 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 (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", 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        >\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 }); }
 }
 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], 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]=\"'\u672C\u8BB0\u5F55\u5DF2\u88AB\u7B5B\u9009\u8FC7\u6EE4\uFF0C\u70B9\u51FB\u8BE5\u8BB0\u5F55\u4EE5\u5916\u4F4D\u7F6E\u5C06\u88AB\u9690\u85CF'\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon styxI18nTracking 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 (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        >\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, AITableCellAttachment, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, 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_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_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_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, 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_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_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, 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, GRID_CELL_EDITOR_MAP, HoverCellComponent, 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, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, drawer, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, 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, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, processPastedValueForSelect, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCellAttachment, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, 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_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_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, 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_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_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, AbstractEditCellEditor, AddOutlinedPath, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, 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, GRID_CELL_EDITOR_MAP, HoverCellComponent, 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, defaultFieldOptions, drawer, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, 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, processPastedValueForSelect, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map