@ai-table/grid 0.1.12 → 0.1.13

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Input, ChangeDetectorRef, ViewChild, Renderer2, Pipe, model, booleanAttribute, Injectable, DestroyRef, NgZone, ViewContainerRef, viewChild, afterNextRender, untracked } from '@angular/core';
+import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Input, ChangeDetectorRef, ViewChild, Renderer2, Pipe, Injectable, DestroyRef, model, booleanAttribute, NgZone, ViewContainerRef, viewChild, afterNextRender, untracked } from '@angular/core';
 import Konva from 'konva';
 import { Shape } from 'konva/lib/Shape';
 import { Sprite } from 'konva/lib/shapes/Sprite';
@@ -25,7 +25,7 @@ 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 { 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 { AITableFieldGroup, AITableFieldType, AITableRowColumnType, DragType, isUndefinedOrNull, idCreator as idCreator$1, isUrl, AITableSelectOptionStyle, isEmpty, AITableFilterOperation, AttachmentFieldBase, DateFieldBase, isDateValid, SelectFieldBase, generateOptionsByTexts, 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';
@@ -53,23 +53,23 @@ 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, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownAbstractMenu, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
+import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemMetaDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemExtendIconDirective } from 'ngx-tethys/dropdown';
 import { ThySwitch } from 'ngx-tethys/switch';
-import { of, Subject, fromEvent, debounceTime, mergeWith, animationFrames, filter } from 'rxjs';
+import { Subject, fromEvent, debounceTime, of, mergeWith, animationFrames, filter } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThyDivider } from 'ngx-tethys/divider';
+import { isKeyHotkey } from 'is-hotkey';
+import { fromUnixTime, subDays } from 'date-fns';
+import { isArray, TinyDate, helpers } from 'ngx-tethys/util';
+import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
+import { LRUCache } from 'lru-cache';
+import GraphemeSplitter from 'grapheme-splitter';
 import * as i4 from 'ngx-tethys/avatar';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
 import * as i3$1 from 'ngx-tethys/checkbox';
 import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
 import { ThyProgress } from 'ngx-tethys/progress';
 import { ThyRate } from 'ngx-tethys/rate';
-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');
@@ -1245,7 +1245,7 @@ function isSameFieldOption(fieldOption, field) {
 function createDefaultField(aiTable, type = AITableFieldType.text) {
     const fieldOptions = getFieldOptions(aiTable);
     const fieldOption = fieldOptions.find((item) => item.type === type);
-    return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, fieldOption) };
+    return { _id: idCreator$1(), type, name: createDefaultFieldName(aiTable, fieldOption) };
 }
 
 function getFieldValue(record, field) {
@@ -1943,317 +1943,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
-class AITableFieldSetting {
-    constructor() {
-        this.aiEditField = model.required();
-        this.aiTable = input.required();
-        this.aiExternalTemplate = input(null);
-        this.isUpdate = input(false, { transform: booleanAttribute });
-        this.addField = output();
-        this.setField = output();
-        this.selectedFieldOption = computed(() => {
-            return getFieldOptionByField(this.aiTable(), this.aiEditField());
-        });
-        this.fieldMaxLength = 32;
-        this.validatorConfig = computed(() => {
-            return {
-                validationMessages: {
-                    fieldName: {
-                        required: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameRequired),
-                        thyUniqueCheck: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameDuplicate)
-                    }
-                }
-            };
-        });
-        this.fieldOptions = computed(() => {
-            const fieldOptions = getFieldOptions(this.aiTable());
-            return _.groupBy(fieldOptions, 'group');
-        });
-        this.aITableFieldType = AITableFieldType;
-        this.isMultipleMember = false;
-        this.isManualInputName = signal(false);
-        this.thyPopoverRef = inject((ThyPopoverRef));
-        this.checkUniqueName = (fieldName) => {
-            fieldName = fieldName?.trim();
-            return of(!!this.aiTable()
-                .fields()
-                ?.find((field) => field.name === fieldName && this.aiEditField()?._id !== field._id));
-        };
-        this.i18nTexts = computed(() => {
-            return {
-                columnName: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldColumnName),
-                columnNamePlaceholder: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldColumnNamePlaceholder),
-                fieldType: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldType),
-                allowMultipleMembers: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.allowMultipleMembers),
-                cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
-                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm),
-                base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
-                advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
-            };
-        });
-    }
-    ngOnInit() {
-        this.isMultipleMember =
-            this.aiEditField().type === AITableFieldType.member && !!this.aiEditField().settings?.is_multiple;
-    }
-    selectFieldType(field) {
-        const fieldsSizeMap = this.aiTable().gridData().fieldsSizeMap;
-        this.aiEditField.update((item) => {
-            const width = fieldsSizeMap[item._id] ?? field.width;
-            const settings = field.settings || {};
-            const name = this.isManualInputName() ? item.name : createDefaultFieldName(this.aiTable(), field);
-            return { ...item, ...field, width, name, settings };
-        });
-        setTimeout(() => {
-            this.thyPopoverRef.updatePosition();
-        }, 0);
-    }
-    editFieldProperty() {
-        if (this.isUpdate()) {
-            this.setField.emit({
-                field: this.aiEditField(),
-                path: [this.aiEditField()._id]
+const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
+    const linearRows = [];
+    let displayRowIndex = 0;
+    [...visibleRecords, { _id: '' }].forEach((row) => {
+        if (row._id) {
+            displayRowIndex++;
+            linearRows.push({
+                type: AITableRowType.record,
+                _id: row._id,
+                displayIndex: displayRowIndex
             });
         }
-        else {
-            this.addField.emit(this.aiEditField());
+        if (isAddingVisible && !row._id) {
+            linearRows.push({
+                type: AITableRowType.add,
+                _id: ''
+            });
         }
-        this.thyPopoverRef.close();
-    }
-    multipleMemberChange() {
-        this.aiEditField.set({
-            ...this.aiEditField(),
-            settings: {
-                ...(this.aiEditField().settings || {}),
-                is_multiple: this.isMultipleMember
-            }
-        });
-    }
-    fieldTypeClick(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    nameChange(event) {
-        this.isManualInputName.set(true);
-    }
-    cancel() {
-        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    <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,
-            args: [{ selector: 'ai-table-field-setting', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgClass,
-                        FormsModule,
-                        ThyIcon,
-                        ThyInputGroup,
-                        ThyInputCount,
-                        ThyInputDirective,
-                        ThyUniqueCheckValidator,
-                        ThyDropdownMenuComponent,
-                        ThyDropdownMenuGroup,
-                        ThyDropdownDirective,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemExtendIconDirective,
-                        ThyButton,
-                        ThySwitch,
-                        ThyFormModule,
-                        NgTemplateOutlet,
-                        ThyAutofocusDirective,
-                        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    <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 {
-    constructor() {
-        this.selectAllState = computed(() => {
-            const selectedRecords = this.aiTable.selection().selectedRecords;
-            return selectedRecords.size === this.aiTable.records().length
-                ? AITableSelectAllState.all
-                : selectedRecords.size === 0
-                    ? AITableSelectAllState.none
-                    : AITableSelectAllState.partial;
-        });
-    }
-    initialize(aiTable) {
-        this.aiTable = aiTable;
-    }
-    clearSelection() {
-        this.aiTable.selection.set({
-            selectedRecords: new Set(),
-            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;
-        }
-        this.clearSelection();
-        this.aiTable.selection().selectedFields.add(fieldId);
-    }
-    get selectedFields() {
-        return this.aiTable.selection().selectedFields;
-    }
-    get selectedRecords() {
-        return this.aiTable.selection().selectedRecords;
-    }
-    selectRecord(recordId) {
-        if (this.aiTable.selection().selectedRecords.has(recordId)) {
-            this.aiTable.selection().selectedRecords.delete(recordId);
-        }
-        else {
-            this.aiTable.selection().selectedRecords.add(recordId);
-        }
-        const selectedRecords = this.aiTable.selection().selectedRecords;
-        this.aiTable.selection.set({
-            selectedRecords: selectedRecords,
-            selectedFields: new Set(),
-            selectedCells: new Set(),
-            activeCell: null,
-            expandCell: null,
-            selectAllState: this.selectAllState()
-        });
-    }
-    toggleSelectAll(checked) {
-        if (checked) {
-            if (this.aiTable.records().length === 0) {
-                this.aiTable.selection.set({
-                    ...this.aiTable.selection(),
-                    selectAllState: AITableSelectAllState.all
-                });
-            }
-            else {
-                this.aiTable.records().forEach((item) => {
-                    this.selectRecord(item._id);
-                });
-            }
-        }
-        else {
-            this.clearSelection();
-        }
-    }
-    updateSelect(event) {
-        const target = event?.target;
-        if (!target) {
-            return;
-        }
-        const cellDom = target.closest('.grid-cell');
-        const colDom = target.closest('.grid-field');
-        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
-        const fieldAction = target.closest('.grid-field-action');
-        if (cellDom) {
-            const fieldId = cellDom.getAttribute('fieldId');
-            const recordId = cellDom.getAttribute('recordId');
-            fieldId && recordId && this.selectCells([recordId, fieldId]);
-        }
-        if (colDom && !fieldAction) {
-            const fieldId = colDom.getAttribute('fieldId');
-            fieldId && this.selectField(fieldId);
-        }
-        if (!cellDom && !colDom && !checkbox) {
-            this.clearSelection();
-        }
-    }
-    selectCells(startCell, endCell) {
-        const [startRecordId, startFieldId] = startCell;
-        const records = this.aiTable.context.linearRows();
-        const fields = AITable.getVisibleFields(this.aiTable);
-        const selectedCells = new Set();
-        if (!endCell) {
-            selectedCells.add(`${startRecordId}:${startFieldId}`);
-        }
-        else {
-            const [endRecordId, endFieldId] = endCell;
-            const startRowIndex = this.aiTable.context.visibleRowsIndexMap().get(startRecordId);
-            const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
-            const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
-            const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
-            const minRowIndex = Math.min(startRowIndex, endRowIndex);
-            const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-            const minColIndex = Math.min(startColIndex, endColIndex);
-            const maxColIndex = Math.max(startColIndex, endColIndex);
-            for (let i = minRowIndex; i <= maxRowIndex; i++) {
-                for (let j = minColIndex; j <= maxColIndex; j++) {
-                    selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
-                }
-            }
-        }
-        this.clearSelection();
-        this.setActiveCell(startCell);
-        this.aiTable.selection().selectedCells = selectedCells;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-class AITableContextMenu extends ThyDropdownAbstractMenu {
-    constructor() {
-        super(...arguments);
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
-        this.notifyService = inject(ThyNotifyService);
-        this.thyPopoverRef = inject(ThyPopoverRef);
-        this.aiTable = input.required();
-        this.menuItems = input.required();
-        this.targetName = input.required();
-        this.position = input.required();
-        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length);
-    }
-    execute(menu) {
-        if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
-            menu.exec &&
-                menu.exec(this.aiTable(), this.targetName(), this.position(), this.aiTableGridSelectionService, this.notifyService, menu.count);
-        }
-    }
-    inputNumberFocus(e) {
-        e.target.focus();
-    }
-    itemEnterHandle(e, menu) {
-        this.execute(menu);
-        this.thyPopoverRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableContextMenu, isStandalone: true, selector: "ai-table-context-menu", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, targetName: { classPropertyName: "targetName", publicName: "targetName", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "context-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'ai-table-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'context-menu'
-                    }, imports: [
-                        ThyInputNumber,
-                        FormsModule,
-                        ThyEnterDirective,
-                        ThyStopPropagationDirective,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        ThyDropdownMenuItemMetaDirective,
-                        ThyIcon,
-                        NgClass,
-                        ThyDivider
-                    ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n" }]
-        }] });
+    });
+    return linearRows;
+};
+const buildGridData = (aiTable, recordValue, fieldsValue) => {
+    const fieldOptions = getFieldOptions(aiTable);
+    const fields = fieldsValue.map((value) => {
+        const fieldOption = fieldOptions.find((item) => item.type === value.type);
+        return {
+            ...value,
+            icon: value.icon || fieldOption.icon
+        };
+    });
+    return {
+        type: 'grid',
+        fields,
+        records: recordValue
+    };
+};
 
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
@@ -2432,142 +2157,516 @@ const DEFAULT_TEXT_SCALE = 1;
 const DEFAULT_TEXT_MAX_CACHE = 500;
 const FONT_SIZE_SM = 12;
 
-const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
-    const linearRows = [];
-    let displayRowIndex = 0;
-    [...visibleRecords, { _id: '' }].forEach((row) => {
-        if (row._id) {
-            displayRowIndex++;
-            linearRows.push({
-                type: AITableRowType.record,
-                _id: row._id,
-                displayIndex: displayRowIndex
-            });
-        }
-        if (isAddingVisible && !row._id) {
-            linearRows.push({
-                type: AITableRowType.add,
-                _id: ''
-            });
-        }
-    });
-    return linearRows;
-};
-const buildGridData = (aiTable, recordValue, fieldsValue) => {
-    const fieldOptions = getFieldOptions(aiTable);
-    const fields = fieldsValue.map((value) => {
-        const fieldOption = fieldOptions.find((item) => item.type === value.type);
-        return {
-            ...value,
-            icon: value.icon || fieldOption.icon
-        };
-    });
-    return {
-        type: 'grid',
-        fields,
-        records: recordValue
-    };
-};
-
-class AITableFieldMenu extends ThyDropdownAbstractMenu {
+class AITableGridSelectionService {
     constructor() {
-        super(...arguments);
-        this.field = computed(() => {
-            return this.aiTable.fields().find((item) => item._id === this.fieldId);
+        this.selectAllState = computed(() => {
+            const selectedRecords = this.aiTable.selection().selectedRecords;
+            return selectedRecords.size === this.aiTable.records().length
+                ? AITableSelectAllState.all
+                : selectedRecords.size === 0
+                    ? AITableSelectAllState.none
+                    : AITableSelectAllState.partial;
         });
     }
-    execute(menu) {
-        if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
-            menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
-        }
-    }
-    getMenuName(menu, field) {
-        if (typeof menu.name === 'function') {
-            return menu.name(field);
-        }
-        return menu.name || '';
+    initialize(aiTable) {
+        this.aiTable = aiTable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'field-menu'
-                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n" }]
-        }], propDecorators: { fieldId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }], fieldMenus: [{
-                type: Input,
-                args: [{ required: true }]
-            }], origin: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
-const AI_TABLE_GRID_FIELD_SERVICE_MAP = new WeakMap();
-class AITableGridFieldService {
-    constructor(thyPopover) {
-        this.thyPopover = thyPopover;
+    clearSelection() {
+        this.aiTable.selection.set({
+            selectedRecords: new Set(),
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null,
+            expandCell: null,
+            selectAllState: AITableSelectAllState.none
+        });
     }
-    initAIFieldConfig(aiFieldConfig) {
-        this.aiFieldConfig = aiFieldConfig;
+    setActiveCell(activeCell) {
+        this.aiTable.selection().activeCell = activeCell;
     }
-    editFieldProperty(aiTable, options) {
-        const { field, isUpdate, origin, position } = options;
-        const component = this.aiFieldConfig?.fieldSettingComponent ?? AITableFieldSetting;
-        return this.thyPopover.open(component, {
-            origin,
-            originPosition: position,
-            placement: 'bottomLeft',
-            manualClosure: true,
-            originActiveClass: undefined,
-            height: 'auto',
-            panelClass: 'ai-table-field-setting-panel',
-            initialState: {
-                aiTable,
-                aiEditField: field,
-                isUpdate
-            }
+    setExpandCell(expandCell) {
+        this.aiTable.selection.set({
+            ...this.aiTable.selection(),
+            expandCell: expandCell
         });
     }
-    openFieldMenu(aiTable, options) {
-        const { origin, editOrigin, position, fieldId, fieldMenus } = options;
-        const ref = this.thyPopover.open(AITableFieldMenu, {
-            origin,
-            originPosition: position,
-            placement: 'bottomLeft',
-            originActiveClass: undefined,
-            insideClosable: true,
-            initialState: {
-                origin: editOrigin,
-                position: options.editFieldPosition,
-                aiTable,
-                fieldId,
-                fieldMenus
-            }
-        });
-        return ref;
+    selectField(fieldId) {
+        if (this.aiTable.selection().selectedFields.has(fieldId)) {
+            return;
+        }
+        this.clearSelection();
+        this.aiTable.selection().selectedFields.add(fieldId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
-
-const zhIntlCollator = typeof Intl !== 'undefined' ? new Intl.Collator('zh-CN') : undefined;
-function compareNumber(a, b) {
-    if (isEmpty(a) && isEmpty(b)) {
-        return 0;
+    get selectedFields() {
+        return this.aiTable.selection().selectedFields;
     }
-    if (isEmpty(a)) {
-        return -1;
+    get selectedRecords() {
+        return this.aiTable.selection().selectedRecords;
+    }
+    selectRecord(recordId) {
+        if (this.aiTable.selection().selectedRecords.has(recordId)) {
+            this.aiTable.selection().selectedRecords.delete(recordId);
+        }
+        else {
+            this.aiTable.selection().selectedRecords.add(recordId);
+        }
+        const selectedRecords = this.aiTable.selection().selectedRecords;
+        this.aiTable.selection.set({
+            selectedRecords: selectedRecords,
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null,
+            expandCell: null,
+            selectAllState: this.selectAllState()
+        });
+    }
+    toggleSelectAll(checked) {
+        if (checked) {
+            if (this.aiTable.records().length === 0) {
+                this.aiTable.selection.set({
+                    ...this.aiTable.selection(),
+                    selectAllState: AITableSelectAllState.all
+                });
+            }
+            else {
+                this.aiTable.records().forEach((item) => {
+                    this.selectRecord(item._id);
+                });
+            }
+        }
+        else {
+            this.clearSelection();
+        }
+    }
+    updateSelect(event) {
+        const target = event?.target;
+        if (!target) {
+            return;
+        }
+        const cellDom = target.closest('.grid-cell');
+        const colDom = target.closest('.grid-field');
+        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
+        const fieldAction = target.closest('.grid-field-action');
+        if (cellDom) {
+            const fieldId = cellDom.getAttribute('fieldId');
+            const recordId = cellDom.getAttribute('recordId');
+            fieldId && recordId && this.selectCells([recordId, fieldId]);
+        }
+        if (colDom && !fieldAction) {
+            const fieldId = colDom.getAttribute('fieldId');
+            fieldId && this.selectField(fieldId);
+        }
+        if (!cellDom && !colDom && !checkbox) {
+            this.clearSelection();
+        }
+    }
+    selectCells(startCell, endCell) {
+        const [startRecordId, startFieldId] = startCell;
+        const records = this.aiTable.context.linearRows();
+        const fields = AITable.getVisibleFields(this.aiTable);
+        const selectedCells = new Set();
+        if (!endCell) {
+            selectedCells.add(`${startRecordId}:${startFieldId}`);
+        }
+        else {
+            const [endRecordId, endFieldId] = endCell;
+            const startRowIndex = this.aiTable.context.visibleRowsIndexMap().get(startRecordId);
+            const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
+            const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
+            const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
+            const minRowIndex = Math.min(startRowIndex, endRowIndex);
+            const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+            const minColIndex = Math.min(startColIndex, endColIndex);
+            const maxColIndex = Math.max(startColIndex, endColIndex);
+            for (let i = minRowIndex; i <= maxRowIndex; i++) {
+                for (let j = minColIndex; j <= maxColIndex; j++) {
+                    selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
+                }
+            }
+        }
+        this.clearSelection();
+        this.setActiveCell(startCell);
+        this.aiTable.selection().selectedCells = selectedCells;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AITableContextMenu extends ThyDropdownAbstractMenu {
+    constructor() {
+        super(...arguments);
+        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
+        this.notifyService = inject(ThyNotifyService);
+        this.thyPopoverRef = inject(ThyPopoverRef);
+        this.aiTable = input.required();
+        this.menuItems = input.required();
+        this.targetName = input.required();
+        this.position = input.required();
+        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length);
+    }
+    execute(menu) {
+        if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
+            menu.exec &&
+                menu.exec(this.aiTable(), this.targetName(), this.position(), this.aiTableGridSelectionService, this.notifyService, menu.count);
+        }
+    }
+    inputNumberFocus(e) {
+        e.target.focus();
+    }
+    itemEnterHandle(e, menu) {
+        this.execute(menu);
+        this.thyPopoverRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableContextMenu, isStandalone: true, selector: "ai-table-context-menu", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, targetName: { classPropertyName: "targetName", publicName: "targetName", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "context-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'context-menu'
+                    }, imports: [
+                        ThyInputNumber,
+                        FormsModule,
+                        ThyEnterDirective,
+                        ThyStopPropagationDirective,
+                        ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuItemNameDirective,
+                        ThyDropdownMenuItemIconDirective,
+                        ThyDropdownMenuItemMetaDirective,
+                        ThyIcon,
+                        NgClass,
+                        ThyDivider
+                    ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n" }]
+        }] });
+
+class AITableGridEventService {
+    constructor() {
+        this.dblClickEvent$ = new Subject();
+        this.mousedownEvent$ = new Subject();
+        this.mouseoverEvent$ = new Subject();
+        this.globalMouseoverEvent$ = new Subject();
+        this.globalMousedownEvent$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
+        this.thyPopover = inject(ThyPopover);
+    }
+    initialize(aiTable, aiFieldRenderers) {
+        this.aiTable = aiTable;
+        this.aiFieldRenderers = aiFieldRenderers;
+    }
+    registerEvents(element) {
+        fromEvent(element, 'dblclick', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.dblClickEvent$.next(event);
+        });
+        fromEvent(element, 'mouseover', { passive: true })
+            .pipe(debounceTime(80), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mouseoverEvent$.next(event);
+        });
+        fromEvent(document, 'mouseover', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMouseoverEvent$.next(event);
+        });
+        fromEvent(element, 'mousedown', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mousedownEvent$.next(event);
+        });
+        fromEvent(document, 'mousedown', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMousedownEvent$.next(event);
+        });
+    }
+    getEditorComponent(type) {
+        const filedRenderSchema = this.aiFieldRenderers && this.aiFieldRenderers[type];
+        if (filedRenderSchema && filedRenderSchema.editor) {
+            return {
+                component: filedRenderSchema.editor,
+                isInternalComponent: false
+            };
+        }
+        return {
+            component: GRID_CELL_EDITOR_MAP[type],
+            isInternalComponent: true
+        };
+    }
+    openEdit(cellDom) {
+        const { x, y, width, height } = cellDom.getBoundingClientRect();
+        const fieldId = cellDom.getAttribute('fieldId');
+        const recordId = cellDom.getAttribute('recordId');
+        const { component } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
+        const ref = this.thyPopover.open(component, {
+            origin: cellDom,
+            originPosition: {
+                x: x - 1,
+                y: y + 1,
+                width: width + 2,
+                height: height + 2
+            },
+            width: width + 1 + 'px',
+            height: height + 2 + 'px',
+            placement: 'top',
+            offset: -(height + 4),
+            minWidth: width,
+            initialState: {
+                fieldId: fieldId,
+                recordId: recordId,
+                aiTable: this.aiTable
+            },
+            panelClass: 'grid-cell-editor',
+            outsideClosable: false,
+            hasBackdrop: false,
+            manualClosure: true,
+            animationDisabled: true,
+            autoAdaptive: true
+        });
+        return ref;
+    }
+    getOriginPosition(aiTable, options) {
+        const { container, coordinate, recordId, fieldId } = options;
+        const { scrollState } = aiTable.context;
+        const { rowHeight, columnCount } = coordinate;
+        const cell = [recordId, fieldId];
+        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, cell);
+        const originX = coordinate.getColumnOffset(columnIndex);
+        const originY = coordinate.getRowOffset(rowIndex);
+        const columnWidth = coordinate.getColumnWidth(columnIndex);
+        const { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
+            columnWidth,
+            columnIndex,
+            columnCount
+        });
+        const originRect = container.getBoundingClientRect();
+        const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
+        const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
+        const scrollTop = scrollState().scrollTop;
+        const originPosition = {
+            x: originX + originOffset - scrollLeft + originRect.x,
+            y: originY - scrollTop + originRect.y,
+            width: originWidth,
+            height: rowHeight
+        };
+        let x = originPosition.x + getEditorBoxOffset();
+        let y = originPosition.y + getEditorBoxOffset();
+        let width = getEditorSpace(originPosition.width);
+        let height = getEditorSpace(originPosition.height);
+        return {
+            ...originPosition,
+            x: x,
+            y: y,
+            width: width,
+            height: height
+        };
+    }
+    openCellEditor(aiTable, 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);
+        this.cellEditorPopoverRef = this.thyPopover.open(component, {
+            viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
+            origin: container,
+            originPosition: offsetOriginPosition,
+            width: offsetOriginPosition.width + 'px',
+            height: offsetOriginPosition.height + 'px',
+            minWidth: offsetOriginPosition.width + 'px',
+            placement: 'bottom',
+            offset: -offsetOriginPosition.height,
+            initialState: {
+                fieldId: fieldId,
+                recordId: recordId,
+                references,
+                aiTable: aiTable,
+                isSelectAll: options.isSelectAll,
+            },
+            panelClass: 'grid-cell-editor',
+            outsideClosable: fieldType === AITableFieldType.link ? true : false,
+            hasBackdrop: false,
+            manualClosure: true,
+            animationDisabled: true,
+            autoAdaptive: true
+        });
+        if (this.cellEditorPopoverRef) {
+            const wheelEvent = fromEvent(this.cellEditorPopoverRef.componentInstance.elementRef.nativeElement, 'wheel').subscribe((event) => {
+                const field = aiTable.fieldsMap()[fieldId];
+                if (field.type === AITableFieldType.text || field.type === AITableFieldType.richText) {
+                    return;
+                }
+                event.preventDefault();
+                this.aiTable.context?.scrollAction({
+                    deltaX: event.deltaX,
+                    deltaY: event.deltaY,
+                    shiftKey: event.shiftKey,
+                    callback: () => {
+                        const originPosition = this.getOriginPosition(aiTable, options);
+                        const positionStrategy = this.cellEditorPopoverRef
+                            .getOverlayRef()
+                            .getConfig().positionStrategy;
+                        positionStrategy.setOrigin(originPosition);
+                        positionStrategy.apply();
+                    }
+                });
+            });
+            this.cellEditorPopoverRef.afterClosed().subscribe(() => {
+                wheelEvent.unsubscribe();
+                this.cellEditorPopoverRef = null;
+            });
+            this.cellEditorPopoverRef.componentInstance.updateFieldValue.subscribe((value) => {
+                options.updateFieldValue(value);
+            });
+        }
+        return this.cellEditorPopoverRef;
+    }
+    closeCellEditor() {
+        if (this.cellEditorPopoverRef) {
+            this.cellEditorPopoverRef.close();
+            this.cellEditorPopoverRef = null;
+        }
+    }
+    getCurrentEditCell() {
+        if (this.cellEditorPopoverRef) {
+            const recordId = this.cellEditorPopoverRef.componentInstance?.recordId;
+            const fieldId = this.cellEditorPopoverRef.componentInstance?.fieldId;
+            if (recordId && fieldId) {
+                return {
+                    recordId,
+                    fieldId
+                };
+            }
+            return null;
+        }
+        return null;
+    }
+    openContextMenu(aiTable, options) {
+        const { origin, position, menuItems, targetName, viewContainerRef } = options;
+        const ref = this.thyPopover.open(AITableContextMenu, {
+            origin: origin,
+            originPosition: position,
+            placement: 'bottomLeft',
+            insideClosable: true,
+            viewContainerRef,
+            initialState: {
+                aiTable,
+                menuItems,
+                targetName,
+                position
+            }
+        });
+        return ref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService, decorators: [{
+            type: Injectable
+        }] });
+
+class AITableFieldMenu extends ThyDropdownAbstractMenu {
+    constructor() {
+        super(...arguments);
+        this.field = computed(() => {
+            return this.aiTable.fields().find((item) => item._id === this.fieldId);
+        });
+    }
+    execute(menu) {
+        if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
+            menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
+        }
+    }
+    getMenuName(menu, field) {
+        if (typeof menu.name === 'function') {
+            return menu.name(field);
+        }
+        return menu.name || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'field-menu'
+                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n" }]
+        }], propDecorators: { fieldId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], fieldMenus: [{
+                type: Input,
+                args: [{ required: true }]
+            }], origin: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
+const AI_TABLE_GRID_FIELD_SERVICE_MAP = new WeakMap();
+class AITableGridFieldService {
+    constructor(thyPopover) {
+        this.thyPopover = thyPopover;
+    }
+    initAIFieldConfig(aiFieldConfig) {
+        this.aiFieldConfig = aiFieldConfig;
+    }
+    editFieldProperty(aiTable, options) {
+        const { field, isUpdate, origin, position, references } = options;
+        const component = this.aiFieldConfig?.fieldSettingComponent ?? AITableFieldSetting;
+        return this.thyPopover.open(component, {
+            origin,
+            originPosition: position,
+            placement: 'bottomLeft',
+            manualClosure: true,
+            originActiveClass: undefined,
+            height: 'auto',
+            panelClass: 'ai-table-field-setting-panel',
+            initialState: {
+                aiTable,
+                aiReferences: references,
+                aiEditField: field,
+                isUpdate
+            }
+        });
+    }
+    openFieldMenu(aiTable, options) {
+        const { origin, editOrigin, position, fieldId, fieldMenus } = options;
+        const ref = this.thyPopover.open(AITableFieldMenu, {
+            origin,
+            originPosition: position,
+            placement: 'bottomLeft',
+            originActiveClass: undefined,
+            insideClosable: true,
+            initialState: {
+                origin: editOrigin,
+                position: options.editFieldPosition,
+                aiTable,
+                fieldId,
+                fieldMenus
+            }
+        });
+        return ref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
+
+const zhIntlCollator = typeof Intl !== 'undefined' ? new Intl.Collator('zh-CN') : undefined;
+function compareNumber(a, b) {
+    if (isEmpty(a) && isEmpty(b)) {
+        return 0;
+    }
+    if (isEmpty(a)) {
+        return -1;
     }
     if (isEmpty(b)) {
         return 1;
@@ -3102,7 +3201,57 @@ class SelectField extends SelectFieldBase {
     }
 }
 function toSelectFieldValue(plainText, targetField, originData) {
-    return null;
+    const targetFieldOptions = targetField.settings?.options || [];
+    const isMultiple = targetField.settings?.is_multiple;
+    const { field, cellValue } = originData || {};
+    let value = [];
+    if (field && field.type === AITableFieldType.select) {
+        value = getValidCellValue(cellValue, targetFieldOptions);
+    }
+    else {
+        const cellFullTexts = plainText
+            .split(',')
+            .map((text) => text.trim())
+            .filter((text) => !!text);
+        cellFullTexts.forEach((text) => {
+            const option = targetFieldOptions.find((option) => option.text.trim() === text);
+            if (option) {
+                value.push(option._id);
+            }
+        });
+    }
+    if (value.length) {
+        return isMultiple ? value : [value[0]];
+    }
+    else {
+        return null;
+    }
+}
+function getOptionsByFieldAndRecords(aiTable, field, references) {
+    let records = aiTable.records();
+    let options = [];
+    let optionStyle = AITableSelectOptionStyle.text;
+    if (field.type === AITableFieldType.select) {
+        options = field.settings?.options || [];
+        optionStyle = field.settings?.option_style || AITableSelectOptionStyle.text;
+    }
+    else {
+        const originFieldModel = FieldModelMap[field.type];
+        let optionTexts = [];
+        records.forEach((record) => {
+            const cellValue = isSystemField(field)
+                ? AITableQueries.getSystemFieldValue(record, field.type)
+                : AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
+            const transformValue = originFieldModel.transformCellValue(cellValue, {
+                aiTable,
+                field
+            });
+            const texts = originFieldModel.cellFullText(transformValue, field, references) || [];
+            optionTexts = [...optionTexts, ...texts];
+        });
+        options = generateOptionsByTexts(optionTexts);
+    }
+    return { options, optionStyle };
 }
 function processPastedValueForSelect(plainText, targetField, originData) {
     const targetFieldOptions = targetField.settings?.options || [];
@@ -3169,7 +3318,7 @@ function processPastedValueForSelect(plainText, targetField, originData) {
 }
 function copyOption(originOption, targetFieldOptions, targetOptionStyle) {
     let newOption = {
-        _id: idCreator(),
+        _id: idCreator$1(),
         text: originOption.text
     };
     if (targetOptionStyle !== AITableSelectOptionStyle.text) {
@@ -3305,7 +3454,7 @@ function appendField(aiTable, originField, actions) {
         defaultFieldValue = {
             ...originField,
             name: createDefaultFieldName(aiTable, fieldOptions.find((item) => item.type === originField.type)),
-            _id: idCreator()
+            _id: idCreator$1()
         };
     }
     else {
@@ -3686,16 +3835,26 @@ function toRateFieldValue(plainText, targetField, originData) {
                     value = optionsMap[cellValue[0]]?.text;
                 }
                 break;
+            case AITableFieldType.date:
+                value = null;
+                break;
             default:
                 break;
         }
     }
     if (!isEmpty(value) || isNumber(value)) {
         const rateValue = Number(value);
-        if (!Number.isNaN(rateValue) && rateValue > 0 && rateValue < 5) {
-            return Math.round(rateValue);
+        if (!Number.isNaN(rateValue)) {
+            if (rateValue < 0) {
+                return null;
+            }
+            else if (rateValue >= 0 && rateValue < 5) {
+                return Math.round(rateValue);
+            }
+            else {
+                return 5;
+            }
         }
-        return 5;
     }
     return null;
 }
@@ -9210,229 +9369,136 @@ function aiTableRectConfigToKonvaConfig(rectConfig, options) {
     return result;
 }
 
-class AITableGridEventService {
+class AITableFieldSetting {
     constructor() {
-        this.dblClickEvent$ = new Subject();
-        this.mousedownEvent$ = new Subject();
-        this.mouseoverEvent$ = new Subject();
-        this.globalMouseoverEvent$ = new Subject();
-        this.globalMousedownEvent$ = new Subject();
-        this.destroyRef = inject(DestroyRef);
-        this.thyPopover = inject(ThyPopover);
-    }
-    initialize(aiTable, aiFieldRenderers) {
-        this.aiTable = aiTable;
-        this.aiFieldRenderers = aiFieldRenderers;
-    }
-    registerEvents(element) {
-        fromEvent(element, 'dblclick', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.dblClickEvent$.next(event);
-        });
-        fromEvent(element, 'mouseover', { passive: true })
-            .pipe(debounceTime(80), takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.mouseoverEvent$.next(event);
-        });
-        fromEvent(document, 'mouseover', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.globalMouseoverEvent$.next(event);
+        this.aiEditField = model.required();
+        this.aiTable = input.required();
+        this.aiExternalTemplate = input(null);
+        this.aiReferences = input();
+        this.isUpdate = input(false, { transform: booleanAttribute });
+        this.addField = output();
+        this.setField = output();
+        this.selectedFieldOption = computed(() => {
+            return getFieldOptionByField(this.aiTable(), this.aiEditField());
         });
-        fromEvent(element, 'mousedown', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.mousedownEvent$.next(event);
+        this.fieldMaxLength = 32;
+        this.validatorConfig = computed(() => {
+            return {
+                validationMessages: {
+                    fieldName: {
+                        required: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameRequired),
+                        thyUniqueCheck: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameDuplicate)
+                    }
+                }
+            };
         });
-        fromEvent(document, 'mousedown', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.globalMousedownEvent$.next(event);
+        this.fieldOptions = computed(() => {
+            const fieldOptions = getFieldOptions(this.aiTable());
+            return _.groupBy(fieldOptions, 'group');
         });
-    }
-    getEditorComponent(type) {
-        const filedRenderSchema = this.aiFieldRenderers && this.aiFieldRenderers[type];
-        if (filedRenderSchema && filedRenderSchema.editor) {
+        this.aITableFieldType = AITableFieldType;
+        this.isMultipleMember = false;
+        this.isManualInputName = signal(false);
+        this.thyPopoverRef = inject((ThyPopoverRef));
+        this.checkUniqueName = (fieldName) => {
+            fieldName = fieldName?.trim();
+            return of(!!this.aiTable()
+                .fields()
+                ?.find((field) => field.name === fieldName && this.aiEditField()?._id !== field._id));
+        };
+        this.i18nTexts = computed(() => {
             return {
-                component: filedRenderSchema.editor,
-                isInternalComponent: false
+                columnName: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldColumnName),
+                columnNamePlaceholder: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldColumnNamePlaceholder),
+                fieldType: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldType),
+                allowMultipleMembers: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.allowMultipleMembers),
+                cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
+                confirm: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.confirm),
+                base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
+                advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
             };
-        }
-        return {
-            component: GRID_CELL_EDITOR_MAP[type],
-            isInternalComponent: true
-        };
-    }
-    openEdit(cellDom) {
-        const { x, y, width, height } = cellDom.getBoundingClientRect();
-        const fieldId = cellDom.getAttribute('fieldId');
-        const recordId = cellDom.getAttribute('recordId');
-        const { component } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
-        const ref = this.thyPopover.open(component, {
-            origin: cellDom,
-            originPosition: {
-                x: x - 1,
-                y: y + 1,
-                width: width + 2,
-                height: height + 2
-            },
-            width: width + 1 + 'px',
-            height: height + 2 + 'px',
-            placement: 'top',
-            offset: -(height + 4),
-            minWidth: width,
-            initialState: {
-                fieldId: fieldId,
-                recordId: recordId,
-                aiTable: this.aiTable
-            },
-            panelClass: 'grid-cell-editor',
-            outsideClosable: false,
-            hasBackdrop: false,
-            manualClosure: true,
-            animationDisabled: true,
-            autoAdaptive: true
         });
-        return ref;
     }
-    getOriginPosition(aiTable, options) {
-        const { container, coordinate, recordId, fieldId } = options;
-        const { scrollState } = aiTable.context;
-        const { rowHeight, columnCount } = coordinate;
-        const cell = [recordId, fieldId];
-        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, cell);
-        const originX = coordinate.getColumnOffset(columnIndex);
-        const originY = coordinate.getRowOffset(rowIndex);
-        const columnWidth = coordinate.getColumnWidth(columnIndex);
-        const { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
-            columnWidth,
-            columnIndex,
-            columnCount
-        });
-        const originRect = container.getBoundingClientRect();
-        const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
-        const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
-        const scrollTop = scrollState().scrollTop;
-        const originPosition = {
-            x: originX + originOffset - scrollLeft + originRect.x,
-            y: originY - scrollTop + originRect.y,
-            width: originWidth,
-            height: rowHeight
-        };
-        let x = originPosition.x + getEditorBoxOffset();
-        let y = originPosition.y + getEditorBoxOffset();
-        let width = getEditorSpace(originPosition.width);
-        let height = getEditorSpace(originPosition.height);
-        return {
-            ...originPosition,
-            x: x,
-            y: y,
-            width: width,
-            height: height
-        };
+    ngOnInit() {
+        this.isMultipleMember =
+            this.aiEditField().type === AITableFieldType.member && !!this.aiEditField().settings?.is_multiple;
     }
-    openCellEditor(aiTable, 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);
-        this.cellEditorPopoverRef = this.thyPopover.open(component, {
-            viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
-            origin: container,
-            originPosition: offsetOriginPosition,
-            width: offsetOriginPosition.width + 'px',
-            height: offsetOriginPosition.height + 'px',
-            minWidth: offsetOriginPosition.width + 'px',
-            placement: 'bottom',
-            offset: -offsetOriginPosition.height,
-            initialState: {
-                fieldId: fieldId,
-                recordId: recordId,
-                references,
-                aiTable: aiTable,
-                isSelectAll: options.isSelectAll,
-            },
-            panelClass: 'grid-cell-editor',
-            outsideClosable: fieldType === AITableFieldType.link ? true : false,
-            hasBackdrop: false,
-            manualClosure: true,
-            animationDisabled: true,
-            autoAdaptive: true
+    selectFieldType(field) {
+        const fieldsSizeMap = this.aiTable().gridData().fieldsSizeMap;
+        this.aiEditField.update((item) => {
+            const width = fieldsSizeMap[item._id] ?? field.width;
+            const name = this.isManualInputName() ? item.name : createDefaultFieldName(this.aiTable(), field);
+            let settings = field.settings || {};
+            if (this.isUpdate() && field.type === AITableFieldType.select) {
+                const { options, optionStyle } = getOptionsByFieldAndRecords(this.aiTable(), this.aiEditField(), this.aiReferences());
+                settings = { ...settings, options, option_style: optionStyle };
+            }
+            return { ...item, ...field, width, name, settings };
         });
-        if (this.cellEditorPopoverRef) {
-            const wheelEvent = fromEvent(this.cellEditorPopoverRef.componentInstance.elementRef.nativeElement, 'wheel').subscribe((event) => {
-                const field = aiTable.fieldsMap()[fieldId];
-                if (field.type === AITableFieldType.text || field.type === AITableFieldType.richText) {
-                    return;
-                }
-                event.preventDefault();
-                this.aiTable.context?.scrollAction({
-                    deltaX: event.deltaX,
-                    deltaY: event.deltaY,
-                    shiftKey: event.shiftKey,
-                    callback: () => {
-                        const originPosition = this.getOriginPosition(aiTable, options);
-                        const positionStrategy = this.cellEditorPopoverRef
-                            .getOverlayRef()
-                            .getConfig().positionStrategy;
-                        positionStrategy.setOrigin(originPosition);
-                        positionStrategy.apply();
-                    }
-                });
-            });
-            this.cellEditorPopoverRef.afterClosed().subscribe(() => {
-                wheelEvent.unsubscribe();
-                this.cellEditorPopoverRef = null;
-            });
-            this.cellEditorPopoverRef.componentInstance.updateFieldValue.subscribe((value) => {
-                options.updateFieldValue(value);
-            });
-        }
-        return this.cellEditorPopoverRef;
+        setTimeout(() => {
+            this.thyPopoverRef.updatePosition();
+        }, 0);
     }
-    closeCellEditor() {
-        if (this.cellEditorPopoverRef) {
-            this.cellEditorPopoverRef.close();
-            this.cellEditorPopoverRef = null;
+    editFieldProperty() {
+        if (this.isUpdate()) {
+            this.setField.emit({
+                field: this.aiEditField(),
+                path: [this.aiEditField()._id]
+            });
         }
-    }
-    getCurrentEditCell() {
-        if (this.cellEditorPopoverRef) {
-            const recordId = this.cellEditorPopoverRef.componentInstance?.recordId;
-            const fieldId = this.cellEditorPopoverRef.componentInstance?.fieldId;
-            if (recordId && fieldId) {
-                return {
-                    recordId,
-                    fieldId
-                };
-            }
-            return null;
+        else {
+            this.addField.emit(this.aiEditField());
         }
-        return null;
+        this.thyPopoverRef.close();
     }
-    openContextMenu(aiTable, options) {
-        const { origin, position, menuItems, targetName, viewContainerRef } = options;
-        const ref = this.thyPopover.open(AITableContextMenu, {
-            origin: origin,
-            originPosition: position,
-            placement: 'bottomLeft',
-            insideClosable: true,
-            viewContainerRef,
-            initialState: {
-                aiTable,
-                menuItems,
-                targetName,
-                position
+    multipleMemberChange() {
+        this.aiEditField.set({
+            ...this.aiEditField(),
+            settings: {
+                ...(this.aiEditField().settings || {}),
+                is_multiple: this.isMultipleMember
             }
         });
-        return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService }); }
+    fieldTypeClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    nameChange(event) {
+        this.isManualInputName.set(true);
+    }
+    cancel() {
+        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 }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", 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 thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\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                    [(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: AITableGridEventService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-field-setting', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        FormsModule,
+                        ThyIcon,
+                        ThyInputGroup,
+                        ThyInputCount,
+                        ThyInputDirective,
+                        ThyUniqueCheckValidator,
+                        ThyDropdownMenuComponent,
+                        ThyDropdownMenuGroup,
+                        ThyDropdownDirective,
+                        ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuItemIconDirective,
+                        ThyDropdownMenuItemNameDirective,
+                        ThyDropdownMenuItemExtendIconDirective,
+                        ThyButton,
+                        ThySwitch,
+                        ThyFormModule,
+                        NgTemplateOutlet,
+                        ThyAutofocusDirective,
+                        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 thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\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                    [(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 AITableGridBase {
@@ -9535,7 +9601,8 @@ class AITableGridBase {
             field,
             isUpdate: false,
             origin: gridColumnBlank,
-            position
+            position,
+            references: this.aiReferences()
         });
         if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
             popoverRef.componentInstance.addField.subscribe((defaultValue) => {
@@ -10984,8 +11051,9 @@ class AITableGrid extends AITableGridBase {
                     const scrollTop = position.y - scrollState.scrollTop;
                     const nextCellIndex = coordinate.getColumnStartIndex(endCellLeft + scrollLeft);
                     const nextRowIndex = coordinate.getRowStartIndex(endCellTop + scrollTop);
+                    const isHorizontalScroll = scrollLeft !== 0;
                     // 向左滚动，单元格向后退一格，防止选区进入冻结列
-                    const nextField = gridData.fields[isSelectionOnlyOnFrozenColumn || scrollLeft > 0 ? nextCellIndex : nextCellIndex + 1];
+                    const nextField = gridData.fields[!isHorizontalScroll || scrollLeft > 0 ? nextCellIndex : nextCellIndex + 1];
                     const nextRecord = gridData.records[nextRowIndex];
                     if (nextField && nextRecord) {
                         this.aiTableGridSelectionService.selectCells([startCell[0], nextField._id], [nextRecord._id, startCell[1]]);
@@ -11008,5 +11076,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, 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, CoverCellComponent, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, 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, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, 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 };
+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, CoverCellComponent, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, 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, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, 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